[FE] 자바스크립트의 데이터 타입

seunghee.Rho·2025년 2월 3일

FE

목록 보기
17/26
post-thumbnail

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

1-1. 원시타입(primitive type)

간단히 정의하자면 객체가 아닌 다른 모든 타입을 의미한다.
객체가 아니므로 이러한 타입들은 메서드를 갖지 않는다.
총 7가지의 원시타입이 있다.

  1. undefined
  2. null
  3. Boolean
  4. Number
  5. Bigint
  6. String
  7. Symbol

undefined

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

null

  • 아직 값이 없거나 비어있는 값을 표현할 때 사용함
  • 명시적으로 비어 있음을 나타내는 값

Boolean

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

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

✔️ falsy가 가능한 값의 실제 타입
: false, 0, -0, 0n, 0x0n, NaN, "", '', ``, null, undefined

✔️ truthy : 조건문 내부에서 true로 취급되는 값
: 앞에서 언급한 falsy로 취급되는 값 이외에는 모두 true, {}, []

Number

  • -(2^53-1) ~ 2^53-1 사이의 값을 저장할 수 있음
  • bigInt가 있기 이전까지 Number가 안전하게 처리할 수 있는 숫자 범위
  • 2진수, 8진수, 16진수 등의 별도 데이터 타입을 제공하지 않으므로 각 진수별로 값을 표현해도 모두 10진수로 해석되어 동일한 값으로 표시

BigInt

  • number가 다룰 수 있는 숫자 크기의 제한을 극복하기 위해 ES2020에서 새로 나온 것
  • 최대 2^53-1을 저장할 수 있는 number의 한계를 넘어서 더 큰 숫자를 저장할 수 있음

String

  • 텍스트 타입의 데이터를 저장하기 위해 사용함
  • 한 쌍의 작은 따옴표(')나 큰 따옴표("), 백틱(`)으로 표현 가능

📌 백틱을 사용해서 표현한 문자열 : 템플릿 리터럴(template literal)
: 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있음

Symbol

  • ES6에서 새롭게 추가된 7번째 타입
  • 중복되지 않은 어떠한 고유한 값을 나타내기 위해 사용
  • 심벌은 심벌 함수를 이용해서만 만들 수 있음
// Symbol 함수에 같은 인수를 넘겨주더라도 이는 동일한 값으로 인정되지 않음
const key = Symbol('key')
const key2 = Symbol('key')

key === key2 // false

1-2. 객체 타입(object/reference type)

  • 간단하게 정의하면 앞서 7가지 원시타입 이외의 모든 것
  • 배열, 함수, 정규식, 클래스 등이 포함된다
  • 객체 타입은 참조를 전달한다고 해서 참조 타입이라고도 불림

2. 값을 저장하는 방식의 차이

원시 타입과 객체 타입의 가장 큰 차이점이라고 한다면, 바로 값을 저장하는 방식의 차이다. 동등 비교를 할 때 차이를 만드는 원인이 된다.

2-1. 원시타입

원시 타입은 불변 형태의 값으로 저장된다. 그리고 이 값은 변수 할당 시점에서 메모리 영역을 차지하고 저장된다.

let hello = 'hello world'
let hi = hello

console.log(hello === hi) // true

➡️ hello의 'hello world'라는 값이 hi에 복사해서 전달되었기 때문에 true

2-2. 객체타입

객체는 프로퍼티를 삭제, 추가, 수정할 수 있으므로 원시 값과 다르게 변경 가능한 형태로 저장되며, 값을 복사할 때도 값이 아닌 참조를 전달한다.

var hello = {
  greet: 'hello, world',
}

var hi = {
  greet: 'hello, world',
}

console.log(hello === hi) // false

➡️ 객체는 값을 저장하는 게 아니라 참조를 저장하기 때문에 동일하게 선언했던 객체라 하더라도 저장하는 순간 다른 참조를 바라보게 된다. 즉 값은 같았을지언정 참조하는 곳이 다른 셈이다.

profile
Web Developer

0개의 댓글