1. 개요
이번에는 데이터 타입을 다루려고 합니다, 이전에 쓴 변수 메커니즘은 보지 않아도 이해는 되지만 보는 걸 추천합니다.
https://seung.tistory.com/entry/JavaScript-%EB%B3%80%EC%88%98-%EB%A9%94%EC%BB%A4%EB%8B%88%EC%A6%98-2
2. 데이터 타입
JS의 타입은 크게 2가지로 나뉩니다. 원시타입과 객체 타입으로 나뉘며 우선 원시 타입의 종류는 아래와 같습니다.
원시 타입의 특성은 immutable value입니다.
이유는 변수는 주소를 가리키는 식별자에 불가합니다, 새로운 값을 할당하면 새로운 주소를 가리키는 것이죠, 즉 주소 있는 값을 바꾸지는 않기에 이를 immutable value라고 합니다.
숫자(Number) 타입 | 정수, 실수 등 모든 수를 다루는 타입 |
문자열(String) 타입 | 문자열 |
불린(boolean) 타입 | True, Fasle |
undefined 타입 | 초기 변수 선언에 암묵적으로 할당되는 값 |
null 타입 | 값이 없다는 것을 의도적으로 명시할 때의 값 |
심벌(symbol) 타입 | ES6 부터 추가된 신규 값, 절대로 겹치지 않는 유일무이한 값 |
객체 타입은 원시타입을 제외한 나머지입니다, 객체 타입은 원시 타입과 다르게 mutable value입니다.
이유는 객체 타입의 변수가 가리키는 곳의 값이 객체의 주소를 가집니다.
그렇기에 변수의 값인 주소를 바꾸지 않고 객체의 값을 바꿀 수 있기에 mutable value라고 합니다.
객체(object) 타입 | 객체, 함수, 배열 등 |
(원시 타입과 객체 타입의 비교는 나중에 알아보도록 합시다.)
3. 원시 타입
1) 숫자 타입
JS에서 숫자는 타 언어와 다르게 정수와 실수 (int, long, float double)등을 나누지 않습니다.
또한 2진수, 8진수, 16진수를 구부하기 위한 데이터 타입을 제공하지 않기에 이들은 전부 10진수로 해석합니다.
그렇기에 아래와 같은 결과처럼 형변환 없이 값을 비교할 수 있습니다.
또한 Infinity : 양의 무한, -Infinity : 음의 무한, NaN : 산술 불가(대소문자 구분함) 같은 값도 존재합니다.
2) 문자열 타입
JS에서 문자열은 0개 이상의 16비트 유니코드(UTF-16)로 나타내어 전세게 문자를 표현할 수 있습니다.
''(작은 따옴표), ""(큰 따옴포), ``(백틱, ES6 부터 추가됨)으로 텍스트를 감싸는 것으로 표현하는데 일반적으로 ''을 사용합니다, ''로 감싸면 ""와 ``을 ""로 감싸면 ``와 ''을, ``로 감싸면 ""와 ''을 문자열로 인식합니다.
"앞에 \(역 슬래시)가 생기는 이유는 크롬 개발자 도구의 문자열 출력 default 값이 ""이기 때문에 "에 구분자로 자동 기입됩니다.
""에서 "을 쓸려면 \"로
''에서 '을 쓸려면 \'로
``에서 `을 쓸려면 \`로
기입해야합니다.
ES6 부터 템플릿 리터럴(template literal)이 추가되었는데 이게 ``(백틱)입니다.
``의 특징은 아래와 같습니다.
- 멀티라인 문자열이다, ""와 ''에서는 이스케이프 시퀀스를 이용해 줄 바꿈을 할 수 있던 것을 ``에서는 그냥 가능합니다.
- 표현식 삽입, ${}을 사용하면 변수가 문자열 타입이 아니더라도 문자열에 삽입이 가능합니다.
3) 불린 타입
이거는 타 언어와 같이 true, false로 주로 조건문에서 사용됩니다.
4) undefined 타입
JS 엔진이 변수 선언 시 초기화에 사용합니다, 초기화에 이유는 메모리가 할당될 때 빈 상태보다는 쓰레기 값(gabage value)이 있을 확률이 높기에 undefined로 초기화합니다, 그렇기에 변수를 참조 시 undefined가 반환된다면 초기화하지 않은 변수라는 것을 알 수 있습니다.(=> undefined의 뜻인 정의되지 않았으므로 이해할 수 있다.)
5) null 타입
JS에서는 대소문자를 구분하기에 null만을 의미합니다, undefined가 초기화되지 않은 변수를 의미한다면 null은 개발자가 임의로 값의 부재를 의미할 때 사용합니다.
또는 함수에서 유효한 값을 반환할 수 없을 때 null을 반환합니다.
document.getElementById("helloworld")
예를 든다면 위 명령어를 보냈을 때 helloworld라는 아이디가 없기 때문에 null을 보내는 겁니다.
6) 심벌 타입
ES6에 추가된 신규 타입으로 위에서 표로 언급한 바와 같이 유일무이한 값을 나타냅니다.
옆에 코드처럼 분명 코드 상 같이 map['unique key'] 넣은 것과 같은 결과를 나타낼 것 같지만 심벌을 이용해서 만든 'unique key'는 일반적인 'unique key'와 다른 유일무이한 값으로 인식합니다.
4. 여담으로
이런 데이터 타입이 존재하는 이유는 뭘까
- 데이터를 메모리에 저장할 때 데이터 타입을 이용하여 효율적이게 저장하기 위해서
- 데이터를 메모리에서 읽어올 때의 크기를 알기 위해서
- 메모리에서 불러온 2진수를 어떻게 해석해서 뿌려줄지 정하기 위해서
그리고는 우리가 개발할 때는 데이터 타입을 선언하지 않는다, (C, Java, Go, Scala 등에서는 정의했을 것이다)
이렇게 변수 선언 시 데이터 타입을 선언하지 않아도 되는 것을 동적 타입 언어라고 합니다, 반대는 당연히 정적 타입 언어라고 칭합니다.
동적 타입의 언어인 자바스크립의 특징은
- 따로 데이터 선언을 하지 않아도 되기에 편하다.
- 프로젝트가 커지면 변수의 타입을 알기 어렵다.
- 자바스크립트 엔진이 변수의 타입을 개발자의 의도와 다르게 변환할 수 있다.
이를 해결하는 방법으로는 전역 변수 사용의 자제하거나 변수의 네이밍을 신중히 하고 상수 변수의 사용 등이 있습니다.
'JavaScript > Modern JavaScript' 카테고리의 다른 글
Ajax 요청 내에서 한번 더 비동기 작업하기 (0) | 2024.05.24 |
---|---|
[JavaScript] 변수 메커니즘 2 (0) | 2021.06.08 |
[JavaScript] 변수 메커니즘 (0) | 2021.06.07 |