TIL_22_with Wecode 012 JavaScript about Data Types
자바스크립트의 다양한 데이터 타입을 살펴보겠습니다. (MDN | JavaScript Data Type)
✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입
- String (문자열)
- Number (숫자)
- Boolean (true/false)
- Undefined
- Null
- Symbol (ECMAScript 6 에 추가됨)
🤡 별도로 Object(객체) 도 있음
✔️ typeof 연산자
- 각 데이터 타입을 자세히 알아보기 전에
typeof
연산자를 배우겠습니다.typeof
연산자를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있습니다.typeof
연산자를 적용하면 다음 문자열 중 하나를 반환합니다.
- "undefined" : 정의되지 않은 변수
- "boolean"
- "string"
- "number"
- "object" : 함수를 제외한 객체 또는 "object"
- "function"
typeof
연산자는 다음과 같이 사용합니다.let msg = "message"; console.log(typeof msg); // "string" console.log(typeof 100); // "number"
🤡
typeof null
typeof null
→"object"
- null 이라는 데이터 타입이 object 로 반환됩니다.
- null 은 빈 객체를 참조하고 있어서 그렇습니다.
✔️ Array 데이터 타입
console.log(typeof []);
- 배열의 type을 확인해보면
"object"
입니다.- 왜냐하면 사실 배열은 확장된 객체 이기 때문입니다...!
- 일단
typeof
연산자로 배열을 확인하면"object"
가 출력된다는 것만 기억하시고 넘어가주세요.
✔️ Number (숫자)
- Number 라는 데이터 타입은 숫자를 의미합니다.
- Number 타입에서 중요한 것은 연산입니다.
- 산술 연산자를 사용하여 Number 타입에 대한 연산은 아래와 같이 작성합니다.
1 + 1 // 더하기 2 - 1 // 빼기 2 * 4 // 곱하기 6 / 2 // 나누기
- 더하기(+)는 왼쪽 값과 오른쪽 값을 더해서 하나의 값을 만든다는 점에서 이항 연산자 라고 부릅니다.
- 이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자 라고 부릅니다.
✔️ String (문자열)
- 문자열 데이터 타입은 따옴표(
" "
) 혹은 작은따옴표(' '
)로 감싼 모든 표현을 뜻합니다.- 주의) 큰따옴표로 시작하면 큰따옴표로 끝나고, 작은따옴표로 시작하면 작은따옴표로 끝나야 합니다.
- 산술 연산자를 통해 숫자 데이터 타입을 활용하는 것처럼 문자열 타입에도 다양한 기능이 있습니다.
// 문자열 데이터 타입 변수 선언 let name = "wecode"; // .length >> 문자열이 몇 글자로 되어 있는지 확인 name.length // 5 // .toUpperCase >> 문자열을 대문자로 출력 name.toUpperCase() // "WECODE" // .indexOf >> 특정 텍스트의 포함 유무 및 위치 확인 name.indexOf('c') // 2 name.indexOf('j') // -1
🤡 텍스트 문자열의 연결
☑️ 문자열 + 문자열
alert("안녕하세요! " + userName + "님");
- 텍스트를 서로 조합할 수도 있습니다.
- 텍스트를 조합할 때는 + 연산자를 사용합니다.
- 텍스트와 변수를 조합해서 사용할 수도 있습니다.
- 아래는 모두 같은 결과가 나옵니다.
console.log("안녕" + "하세요"); console.log("안녕" + "하" + "세요"); console.log("안녕" + "하세" + "" + "요"); let hi = "안녕"; console.log(hi + "하세요"); let ha = "하세요"; console.log(hi + ha);
let message = "감사합니다., "; let userName = "김개발"; let banger = "님!"; let customMess = message + userName + banger; console.log(customMess);
결과는 감사합니다., 김개발님!
☑️ 문자열 + 숫자 조합
이제는 텍스트인 String과 숫자인 Number의 조합을 해보려고 합니다.console.log("2" + "2");
우리가 보기에는 둘 다 숫자인데,
" "
(쌍따옴표)로 감싸져 있기때문에 컴퓨터는 숫자라고 인식하지 않습니다. 그래서 2라는 텍스트(1)와 2라는 텍스트(2)가 붙은 22 라는 문자열이 출력됩니다. 숫자로 표현하려면 쌍따옴표가 없어야 합니다.console.log(2 + 2); // 숫자 4
이렇게 컴퓨터는 각각의 값이 텍스트인지, 숫자인지 타입을 갖고 있습니다. JavaScript에서는 텍스트와 숫자를 구분하는 것은
" "
(쌍따옴표) 입니다. 그렇다면 아래의 변수 중에 무엇이 숫자이고, 무엇이 텍스트인지 아시겠나요?const iAmString = "983"; //문자열 const iAmNumber = 983; //숫자 const iAmStringToo = "0"; //문자열 const iAmNumberToo = 0; //숫자 const iAmAlsoString = "-10"; //문자열 const iAmAlsoNumber = -10; //숫자
숫자를
" "
(따옴표)로 감싸지 않은 다음의 결과는 무엇 일까요?alert("2 더하기 2는 " + 2 + 2);
실행해보셨나요? 우리가 원하는 결과가 아닙니다. 프로그래밍은 왼쪽에서부터 순서대로 실행되기 때문에 다음과 같은 결과가 나온 것입니다.
- 위와 같이 서로 다른 type인
String + Number
를 시도할 때는 항상 주의해야 합니다.- String과 Number형을 더하면 항상 String 형으로 변환됩니다.
- 원래 다른 프로그래밍 언어에서는 서로 다른 type인 String과 Number는 서로 더하거나 뺄 수 없습니다.
- 하지만 JavaScript 에서는 오류를 내지 않고 더하게 되죠.
- 이런 것을 유연 하다고 좋아하는 개발자도 있지만, 에러를 낼 여지가 있기 때문에 JavaScript 의 단점으로 꼽는 개발자도 있습니다.
문자열이냐 숫자냐에 따라 결과가 많이 달라지므로 데이터 타입을 정확하게 표현하는 것에 관심을 가질 필요가 있습니다.
✔️ boolean
- boolean 은 단 두 개의 데이터로 이루어진 데이터 타입입니다. →
true
/false
- boolean 데이터 타입은 조건문과 반복문에서 유용하게 사용됩니다.
- 다른 데이터 타입이 boolean 값으로 변환되는 여러 경우가 있습니다.
🤡 여러 데이터 타입의 boolean 값 변환
☑️true
로 변환되는 값
- 문자열 : 비어 있지 않은 모든 문자열
- 숫자 : 0 이 아닌 모든 숫자
- 객체: 모든 객체 (
{ }
,[ ]
포함)☑️
false
로 변환되는 값
- 문자열 :
" "
(빈문자열)- 숫자 : 0,
NaN
- 객체 :
null
undefined
🤡 조건문에서의 boolean 데이터 값 활용
- 다른 데이터 타입이 boolean 값으로 변환 되는 것은 아래와 같이 조건문에서 활용될 수 있습니다.
- if 조건문은 특정 조건의
true
/false
값을 판단하여 if문을 실행합니다.let sam = 3; if (sam === 3) { //sam === 3 이 true이면 실행 }
let msg = "message"; if (msg) { // 실행 }
- 위의 if 문은 비교나 검사할 조건 없이 msg 만 들어가 있습니다.
- 자바스크립트에서 문자열은
" "
(빈 문자열)을 제외하고 모두true
값을 갖습니다.- 따라서 저 위의
msg
부분은true
가 되고, if문이 실행됩니다.아래의 if문은 숫자 0이
false
로 변환되는 예시입니다. if문이 실행되지 않습니다.let number = 0; if (number) { // 실행 안됨 }
✔️ undefined
- undefined 데이터 타입은 말 그대로 정의되지 않은 데이터 타입입니다.
let
,const
키워드를 사용해서 변수를 정의할 때 초기화 하지 않았다면, 즉 변수를 선언만 하고 값을 할당하지 않았다면 변수에는undefined
가 할당됩니다.let msg; console.log(msg === undefined); //true (msg는 선언만 하고, 초기화 하지 않았습니다.)
✔️ null
- null 타입은 데이터 타입 중 하나 입니다.
- 하지만 콘솔에
typeof null
로 확인해보면"object"
라고 나옵니다.null
은 말그대로 아무것도 아닌 빈 객체를 가리키고 있어서"object"
라고 나옵니다.
✔️ 객체(Object)
- 마지막은 객체(Object) 데이터 타입입니다.
- 객체는 키(Key)와 값(Value)의 조합으로 이루어진 데이터입니다.
- 중괄호로 감싸진 key-value(property)의 형태를 갖습니다.
const person = { name : "wecode", age : 30, skills : ['HTML', 'CSS', 'Javascript'] }
function checkType(data) { let type = typeof data; let description = `${data}: type - ${type}`; console.log(description); return description; } checkType(4); //4: type - number checkType("true"); //"true: type - string" checkType(true); //"true: type - boolean" checkType(!0); //"true: type - boolean" checkType(function() {}); //"function() {}: type - function"
Author And Source
이 문제에 관하여(TIL_22_with Wecode 012 JavaScript about Data Types), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@poohv7/TIL22with-Wecode-012-JavaScript-about-Data-Types저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)