JavaScript - 자료형(Data type)

주의: 이 내용은 필자가 JavaScript 개념을 리마인드하면서 작성한 것으로 정확하지 않은 정보가 있을 수 있습니다.

🪣 모든 언어의 기본은 자료형!

한 가지 언어만으로는 대개 한계가 있기에 우리는 살면서 여러 프로그래밍 언어를 다루게 됩니다.
그 과정에서 언어를 처음 접할 때 반드시 배우는 것이 있습니다. 바로 자료형입니다.

자료형은 프로그래밍 언어가 자료를 처리, 보관하기 위해 정해 놓은 형태를 말합니다.

여느 언어가 그렇듯 언어가 자료를 어떻게 처리하는지 이해해야 잘 다룰 수도 있게 됩니다.

그렇다면 자바스크립트는 어떤 자료형을 갖고 있을까요?

📄 기본 자료형 (Primitive type)

우선 기본 자료형입니다.

기본 자료형은 그 자체로 하나의 값을 가리킵니다. 즉, 비교 연산이 가능합니다.

다른 언어와 다르게 자바스크립트는 타입 체크가 굉장히 느슨합니다.
C-like 언어들은 타입을 명시하고 해당 타입으로만 변수를 사용할 것을 강제하지만, 자바스크립트는 변수를 위한 공간만 줄 뿐 어떤 타입의 데이터도 저장이 가능합니다.

이러한 특성 때문에 문자열 합치기와 같은 상황에서 예기치 못한 문제가 생기곤 합니다.

console.log(("b" + "a" + + "n" + "a").toLowerCase())

위 결과가 banana가 된다는 예시는 정말 유명하죠...

---

Number

다른 언어에는 숫자의 유형에 따라 다양한 자료형이 있습니다.

그러나 Number 타입은 숫자가 어떻든 관계없이 모두 64비트 부동 소수점으로 처리합니다.
그렇기에 다른 언어보다 실수 계산 시의 오차 문제에 신경을 더 써야 합니다.

const number = 0.1 + 0.2
const divided = 5 / 2

console.log(number == 0.3) // false
console.log(number) // 0.30000000000000004
console.log(divided) // 2.5

BigInt

Number 타입은 64비트 부동 소수점으로 값을 관리하므로 매우 큰 수를 다룰 때 오차 문제가 생길 수 있습니다.
이 문제를 해결하기 위해 ES11에서 BigInt 타입이 새로 등장했습니다.

BigInt() 함수나 정수 리터럴 뒤에 n을 붙여 선언할 수 있습니다.

const bigIntOne = 123456789123456789123456789n
const bigIntTwo = BigInt("123456789123456789123456789")

console.log(bigIntOne.toString()) // "123456789123456789123456789"
console.log(bigIntTwo.toString()) // "123456789123456789123456789"

console.log(typeof bigIntOne) // bigint
console.log(typeof bigIntTwo) // bigint

BigInt는 Number와 일치하지는 않지만 값은 동등합니다.

console.log(1n === 1) // false
console.log(1n == 1) // true

String

문자열 변수입니다.

C 의 char 변수와 유사하게 인덱스로 특정 위치의 문자열을 조회할 수 있습니다.
단, 여기에도 다른 언어와 조금 차이가 있는데, 한 번 정의된 문자열은 수정되지 않는다는 점입니다.

let str = "javascript"

console.log(str[0]) // j
str[4] = "S"
console.log(str) // javascript

Boolean

불리언 자료형입니다. true 와 false 두 가지 값이 있습니다.

Symbol

ES6에서 새로 추가된, 변경 불가능한 원시 값을 저장하는 타입입니다.
객체의 프로퍼티 키로 주로 사용됩니다.

const obj = {};
const sym = Symbol();

obj[sym1] = 'asdf';

console.log(obj); // {Symbol(): 'asdf'}

Undefined

자바스크립트를 쓰게 되면 지겹게 볼 자료형입니다.
값이 할당되지 않은 모든 변수 및 상수는 undefined 를 가리킵니다.

특이하게도, undefined는 타입이기도 하면서 값이기도 합니다.

console.log(typeof undefined) // undefined

null

할당된 값이 없다는 점에서 undefined 와 유사합니다.
대신 null 은 개발자가 명시적으로 값이 비어있음을 나타낼 때 사용합니다.

주의할 점은 null 타입 변수의 typeof 결과는 object라는 점입니다.
따라서 어느 변수가 null인지 확인하려면 ===를 사용하여야 합니다.

const nullValue = null;
console.log(typeof nullValue) // object
console.log(null === nullValue) // true

---

📄 참조 자료형 (Reference type)

자바스크립트에서 상술한 기본 타입을 제외하면 모든 값은 객체(참조 타입)입니다.

자바스크립트의 객체는 key-value 형태의 프로퍼티를 저장하는 컨테이너입니다.
객체의 프로퍼티로는 기본 타입의 값이나 객체, 함수도 들어갈 수 있으며 함수가 포함된 프로퍼티를 메서드라고 합니다.

객체를 생성하는 방법

객체는 크게 세 가지 방법으로 생성할 수 있습니다.

1. 기본 생성자 함수 Object()
2. 객체 리터럴 { prop0: "foo", prop1: "bar" }
3. 기타 생성자 함수

const foo = new Object() // 생성자 함수로 생성
const bar = {
  prop0: "foo",
  prop1: "bar",
} // 객체 리터럴로 생성
const add = new Function('x', 'y', 'return x + y') // Function 생성자로 생성

객체의 프로퍼티에 접근하는 방법

객체의 프로퍼티에 접근하여 값을 바꾸거나 조회, 생성할 수 있습니다.

1. 마침표 표기법
   객체 이름에 마침표를 찍고 프로퍼티명을 그 뒤에 붙입니다.
   어떤 프로퍼티는 이러한 방식으로 접근할 수 없을 수 있습니다.
   이런 때에는 대괄호 표기법을 사용합니다.

const test = { 0: '101', 'asdf': '102' }
test.foo = 'bar'

console.log(test.foo) // bar
console.log(test.asdf) // 102
console.log(test.0) // Syntax error!

2. 대괄호 표기법
   객체 이름 뒤에 대괄호를 적고 괄호 안에 프로퍼티의 이름을 문자열로 입력합니다.

const test = { 0: '101' }
test['foo'] = 'bar'

console.log(test['foo']) // bar

---

참조 타입의 함정 - Call by reference

않이 이게 왜 다르지

기본 타입은 == 연산자를 통해 비교할 때 값을 비교하지만, 참조 타입은 참조 값을 비교합니다.

const foo = 'fooo'
const bar = 'fooo'

console.log(foo == bar) // true

const obj1 = { value: 100 }
const obj2 = { value: 100 }

console.log(obj1 == obj2) // false

참조 타입의 경우 해당 객체가 저장된 주소가 다르면 다른 객체로 취급하게 됩니다.

복사도 마음대로 안 된다!

기본 타입은 값에 의한 호출(Call by value)로 작동하기에 값을 복사할 때도 복사된 값이 전달됩니다. 즉 독립적인 변수가 됩니다.

하지만 객체는 참조에 의한 호출(Call by reference)로 작동하므로 객체의 참조만 복사될 뿐입니다.

const obj1 = { value: 100 }
const obj2 = obj1

obj2.value = 200
console.log(obj1.value, obj2.value) // 200, 200

obj2의 value 값을 변경했는데 obj1도 같이 변경된 것을 볼 수 있습니다.
obj2가 obj1의 참조에 불과하기 때문입니다.

---

🧹 마치며

지금까지 자바스크립트의 자료형에 대해 간단히 알아보았습니다.

사실 객체에서는 설명할 것이 이것보다 훨씬 방대하지만 여기에서 전부 설명하면 주제가 산으로 가므로 별도의 포스트에서 다루겠습니다.

다음에는 배열에 대해 다룰 예정입니다. 읽어 주셔서 감사합니다.