[Javascript] 데이터 타입의 메모리 참조 방식

 

자바스크립트를 사용하다 보면 때때로 예상치 못한 동작에 당황할 때가 있습니다. 이런 상황의 대부분은 자바스크립트의 데이터 타입과 그 메모리 참조 방식을 제대로 이해하지 못해서 발생합니다. 오늘은 이 주제에 대해 함께 알아보려고 합니다.

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

자바스크립트의 데이터 타입은 크게 두 가지로 나눌 수 있습니다:

 

1. 원시 타입(Primitive Type)

• Number(숫자)
• String(문자열)
• Boolean(불리언)
• null
• undefined
• Symbol (ES6에서 추가)
• BigInt (ES11에서 추가)

2. 참조 타입(Reference Type)

• Object(객체)
• Function(함수)
• Array(배열) - 사실 이것도 객체의 한 종류입니다!

자바스크립트에서 배열(Array)은 사실 특별한 종류의 객체입니다. 어떤 면에서 배열은 마법을 부린 객체라고 할 수 있죠. 일반 객체에 배열 전용 메서드들과 'length' 속성, 그리고 반복 가능한(iterable) 특성을 더해준 것이 바로 배열이라고 볼 수 있습니다.

이런 특성 때문에 우리는 배열을 활용해 다양하고 강력한 작업을 할 수 있습니다. 예를 들어, Array.from() 메서드를 사용하면 다음 코드와 같이 아주 유연하게 배열을 생성할 수 있습니다.

Array.from({length: 3}, () => Array(2).fill(0)); // [[0 ,0], [0, 0], [0, 0]]​​

이 두 타입의 가장 큰 차이점은 바로 메모리에 어떻게 저장되고 참조되는지에 있습니다.

메모리 참조 방식의 차이

원시 타입

원시 타입의 값들은 변수에 할당될 때 메모리에 '값 그 자체'가 저장됩니다. 예를 들어, let a = 5라고 하면, 변수 a가 가리키는 메모리 위치에 실제로 5라는 값이 저장됩니다.

참조 타입

반면 참조 타입은 조금 다릅니다. 객체나 배열 같은 참조 타입의 값들은 실제 데이터가 힙(Heap) 메모리 영역에 저장되고, 변수에는 그 데이터가 저장된 메모리 주소가 할당됩니다. 즉, 변수는 실제 데이터를 직접 가리키는 게 아니라, 데이터가 있는 '주소'를 가리킵니다.

 

이러한 참조 타입의 특성은 배열을 다룰 때 특히 주의해야 할 점들이 있습니다. 예를 들어, 배열의 비교나 복사 과정에서 예상치 못한 결과가 나올 수 있습니다.

[1,2,3] === [1,2,3] // false
[] === []           // false

let nums = [1, 2];
let numsCopy = nums;
nums === numsCopy;  // true

위와 같은 결과는 배열이 참조 타입이라는 특성에서 비롯됩니다.

 

각 배열은 메모리에 별도로 생성되어 서로 다른 참조를 가집니다. 따라서 === 연산자로 비교할 때, 배열의 내용을 비교하는 것이 아니라 메모리 상의 참조를 비교하게 됩니다. 똑같은 값을 가진 배열이라도 서로 다른 메모리 주소를 가지고 있으므로 false가 반환되는 것입니다.

 

반면, let numsCopy = nums;와 같이 배열을 다른 변수에 할당할 때는 실제 배열의 내용이 복사되는 것이 아니라, 해당 배열의 참조가 복사됩니다. 따라서 nums와 numsCopy는 같은 배열을 가리키게 되어 === 연산 결과가 true가 됩니다.

 

이런 특성 때문에 const로 선언된 배열의 내용도 변경할 수 있습니다. const는 변수에 저장된 값(여기서는 배열의 참조)을 변경하지 못하게 할 뿐, 그 참조가 가리키는 배열의 내용을 변경하는 것은 막지 않기 때문입니다.

 

이러한 차이점들을 이해하고 있으면, 많은 버그를 예방할 수 있고 더 효율적인 코드를 작성할 수 있습니다.