본문 바로가기
Modern React Deep Dive/01장 리액트 개발을 위해 꼭 알아야 할 자바스크립트

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

by Whiimsy 2024. 3. 29.

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