1.1.1 자바스크립트의 데이터 타입
- 원시 타입(primitive type)
- boolean
- null
- undefined
- number
- string
- symbol
- bigint
- 객체 타입(object/reference type)
- object
원시 타입
- 객체가 아닌 다른 모든 타입
- 객체가 아니므로 메서드를 갖지 않음
- undefined
- 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값
-
let foo typeof foo === 'undefined' // true function bar(hello) { return hello } typeof bar() === 'undefined' // true
- null
- 아직 값이 없거나 비어 있는 값 표현
-
typeof null === 'object' //true
- 다른 원시값과 다르게 typeof로 null을 확인했을 때 'object'라는 결과가 반환됨
- 초창기 자바스크립트가 값을 표현하는 방식 때문에 발생한 문제
- undefined는 '선언됐지만 할당되지 않은 값', null은 '명시적으로 비어 있음을 나타내는 값'으로 사용
- Boolean
- 참과 거짓만을 가질 수 있는 데이터 타입
- falsy: 조건문 내부에서 false로 취급되는 값
- false(타입: Boolean)
- 0, -0, 0n, 0x0n(타입: Number, BigInt)
- NaN(타입: Number, Not a Number)
- '', "", ``(타입: String)
- null(타입: null)
- undefined(타입: undefined)
- truthy: 조건문 내부에서 true로 취급되는 값, falsy로 취급되는 값 이외에는 모두 ture로 취급
- 객체와 배열은 내부에 값이 존재하는지 여부와 상관없이 truthy로 취급({}, [] 모두 truthy)
-
if (1) { // true } // 조건문 외에도 truthy와 falsy를 Boolean()을 통해 확인할 수도 있다. Boolean(1) // true Boolean(0) //false
- Number
- 정수와 실수를 구분해 저장하는 다른 언어와 다르게, 자바스크립트는 모든 숫자를 하나의 타입에 저장했었음
- ECMAScript 표준에 따르면 -(2의 53승)~2의 53승 사이의 값 저장 가능
- 2진수, 8진수, 16진수 등의 별도 데이터 타입을 제공하지 않으므로 각 진수별로 값을 표현해도 모두 10진수로 해석되어 동일한 값으로 표시됨(솔직히 와닿진 않음, 쓸 일이 없어서 그런가..)
-
const 이진수_2 = 0b10 이진수_2 == (2).toString(2) // toString(진수)
- BigInt
- Number가 다룰 수 있는 숫자 크기의 제한을 극복하기 위해 ES2020에서 새롭게 나온 것
- 끝에 n을 붙이거나 BigInt 함수를 사용하면 된다
-
const bigInt1 = 9007199254740995n const bigInt2 = BigInt('9007199254740995') const number = 9007199254740995 const bigint = 9007199254740995n number == bigint // true number === bigint // false, 타입이 달라서
- String
- 텍스트 타입의 데이터 저장
- 백틱을 사용해 표현한 문자열을 템플릿 리터럴(template literal)이라고 하는데, 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있다는 차이가 있다
- 문자열이 원시 타입이며 변경 불가능하다 = 한번 문자열이 생성되면 그 문자열을 변경할 수 없다
-
const foo = 'bar' console.log(foo[0]) // 'b' foo[0] = 'a' console.log(foo) // bar
- Symbol
- ES6에서 새롭게 추가된 7번째 타입
- 중복되지 않은 어떠한 고유한 값을 나타내기 위해 만들어짐
- 심벌 함수를 이용해서만 만들 수 있음, Symbol()
-
const key = Symbol('key') const key2 = Symbol('key') key === key2 // false // 동일한 값을 사용하기 위해서는 Symbol.for를 활용한다 Symbol.for('hello') === Symbol.for('hello') // true
객체 타입
- 원시 타입 이외의 모든 것 ex. 배열, 함수, 정규식, 클래스
- 참조를 전달한다고 해서 참조 타입으로도 불린다
-
typeof [] === 'object' // true typeof {} === 'object' // true function hello() {} typeof hello === 'function' // true const hello1 = function () {} const hello2 = function () {} // 객체인 함수의 내용이 육안으로는 같아 보여도 참조가 다르기 때문에 false가 반환된다 hello1 === hello2 // false
'Modern React Deep Dive > 01장 리액트 개발을 위해 꼭 알아야 할 자바스크립트' 카테고리의 다른 글
1.2.2 함수를 정의하는 4가지 방법 (0) | 2024.04.02 |
---|---|
1.2.1 함수란 무엇인가? (0) | 2024.04.02 |
1.1.4 리액트에서의 동등 비교 (0) | 2024.03.29 |
1.1.3 자바스크립트의 또 다른 비교 공식, Object.is (0) | 2024.03.29 |
1.1.2 값을 저장하는 방식의 차이 (0) | 2024.03.29 |