1.1 자바스크립트의 동등 비교 - 자바스크립트의 데이터 타입

모던 리액트 Deep Dive

1.1 자바스크립트의 동등 비교 - 자바스크립트의 데이터 타입

g*g 2024. 2. 5. 23:51

1.1.1. 자바스크립트의 데이터 타입

원시타입(primitive type)

boolean
null
undefined
number
stirng
symbol
bigint

객체 타입(object/reference type)

object

원시타입(primitive type)

객체가 아닌 다른 모든 타입. 객체가 아니므로 이러한 타입들은 메서드를 갖지 않는다.

undefined

undefined는 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값이다.

let foo

type of foo === 'undefined' //true

function bar(hello){
	return hello
}

type of bar() === 'undefined' //true

원시값 중 null과 undefined는 오직 각각 null과 undefined라는 값만 가질 수 있으며, 그 밖의 타입은 가질수 있는 값이 두 개 이상(boolean의 true, false와 같이) 존재한다.

null

아직 값이 없거나 비어 있는 값을 표현할 때 사용한다.

typeof null === 'object' //true?

null이 가지고 있는 특별한 점 하나는 다른 원시값과 다르게 typeof로 null을 확인했을 때 해당 타입이 아닌 'object'라는 결과가 반환된다는 것이다. 이는 초창기 자바스크립트가 값을 표현하는 방식 때문에 발생한 문제로, 이후에 typeof null을 진짜 'null'로 표현하고자 하는 시도가 있었으나 이전 코드에서 작동할 수 없는 호환성이 깨지는 변경 사항(breaking change)이어서 받아들여지지 않았다.

undefined는 '선언됐지만 할당되지 않은 값'이고, null은 '명시적으로 비어 있음을 나타내는 값'으로 사용하는 것이 일반적이다.

Boolean

참(true)과 거짓(boolean)만을 가질 수 있는 데이터 타입이다. 주로 조건문에서 많이 쓰이는 데이터 타입이다.

true, false와 같은 boolean 형의 값 외에도 조건문에서 마치 true와 false처럼 취급되는 truthy, falsy 값이 존재한다.

falsy: 조건문 내부에서 false로 취급되는 값을 말한다.

falsy가 가능한 값의 실제 타입

값	타입	설명
false	Boolean	false는 대표적인 falsy한 값이다.
0, -0, 0n, 0x0n	Number, BigInt	0은 부호나 소수점 유무에 상관없이 falsy한 값이다.
NaN	Number	Number가 아니라는 것을 뜻하는 NaN(Not a Number)은 falsy한 값이다.
'', "", ``	String	문자열이 falsy하기 위해서는 반드시 공백이 없는 빈 문자열이어야 한다.
null	null	null은 falsy한 값이다.
undefined	undefined	undefined는 falsy한 값이다.

truthy: 조건문 내부에서 true로 취급되는 값, falsy로 취급되는 값 이외에는 모두 true로 취급된다. 한 가지 유념할 점은 객체와 배열은 내부에 값이 존재하는지 여부와 상관없이 truthy로 취급된다는 것이다. 즉, {}, [] 모두 truthy한 값이다.

if (1) {
 // true
}

if (0) {
 // false
}

if (NaN) {
 // false
}

// 조건문 외에도 truthy와 falsy를 Boolean()을 통해 확인할 수도 있다.
Boolean(1) // true
Boolean(0) // false
Boolean(true) // true

Number

정수와 실수를 구분해 저장하는 다른 언어와 다르게, 자바스크립트는 모든 숫자를 하나의 타입에 저장했었다. ECMAscript 표준에 따르면 -(2^53 - 1)과 2^53 - 1 사이의 값을 저장할 수 있다. 이후에 bigint가 등장하기 전까지는 이 범위 외의 값들을 다루기가 어려웠다.

Bigint가 있기 이전까지 Number가 안전하게 처리할 수 있는 숫자 범위를 나타낸다.

const a = 1

const maxInteger = Math.pow(2, 53)
maxInteger - 1 === Number.MAX_SAFE_INTEGER // true

const minInteger = -(Math.pow(2, 53) -1)
maxInteger === Number.MIN_SAFE_INTEGER // true

또한 2진수, 8진수, 16진수 등의 별도 데이터 타입을 제공하지 않으므로 각 진수별로 값을 표현해도 모두 10진수로 해석되어 동일한 값으로 표시된다.

Bigint

최대 2^53-1을 저장할 수 있는 number의 한계를 넘어서 더 큰 숫자를 저장할 수 있게 해준다.

String

텍스트 타입의 데이터를 저장하기 위해 사용된다. 한쌍의 작은 따옴표(')나 큰따옴표("), 또는 내장 표현식을 허용하는 문자열 리터럴 표현 방식인 백틱(`)으로도 표현할 수 있다.

백틱을 사용해서 표현하는 문자열을 템플릿 리터럴이라고 하는데, 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있다는 차이가 있다.

 // '\n안녕하세요.\n'
 const lognText = `
  안녕하세요.
 `
 
 // Uncaught SyntaxError: Invalid or unexpected token
 const lognText = "
  안녕하세요.
"

자바스크립트 문자열의 특징 중 하나는 문자열이 원시타입이며 변경 불가능하다는 것이다. 이것은 한번 문자열이 생성되면 그 문자열을 변경할 수 없음을 의미한다.

const foo = 'bar'

console.log(foo[0]) // 'b'

// 앞 글자를 다른 글자로 변경
foo[0] = 'a'

// 이는 반영되지 않는다.
console.log(foo) // bar

Symbol

// Symbol 함수에 같은 인수를 넘겨주더라도 이는 동일한 값으로 인정되지 않는다.
// 심벌 함수 내부에 넘겨주는 값은 Symbol 생성에 영향을 미치지 않는다.(Symbol.for 제외)

const key = Symbol('key')
const key2 = Symbol('key')

key === key2 // false

// 동일한 값을 사용하기 위해서는 Symbol.for를 활용한다.
Symbol.for('hello') === Symbol.for('hello') // true

객체 타입

앞의 가지 원시 타입 이외의 모든 것, 즉 자바스크립트를 이루고 있는 대부분의 타입이 바로 객체 타입이다. 여기에는 배열, 함수, 정규식, 클래스등이 포함된다.

객체 타입(objec type)은 참조를 전달한다고 해서 참조 타입(reference type)으로도 불린다. 여기서 자바스크립트 동동 비교의 특징이 나타난다.

typeof [] === 'object' // true
typeof {} === 'object' // true

function hello(){}

typeof hello === 'function' // true

const hello1 = function () {
}

const hello2 = function () {
}

// 객체인 함수의 내용이 육안으로는 같아 보여도 참조가 다르기 때문에 false가 반환된다.
hello1 === hello2

출처 - 모던 리액트 Deep Dive