[JS] Object의 주소

자바스크립트에서 객체와 배열은 참조 타입으로 이루어진다. 오늘은 객체의 주소에 대해 깊이 있게 공부했고, 이 과정에서 배열메서드를 이용해 배열을 복사하는 방법과 그 결과로 나타나는 참조 비교에 대해 알아보았다. 이를 통해 참조 타입이 어떻게 동작하는지, 왜 두 배열이 서로 다르게 인식되는지를 명확히 이해할 수 있었다.

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(element => element);
console.log(newArr === arr); // false

위 코드를 보면, arr 배열의 요소들을 그대로 복사하여 newArr에 저장했다. 하지만 console.log(newArr === arr);의 출력 결과는 false가 된다. 이 결과는 참조 타입의 동작 방식과 연관되어 있다.

참조 타입과 값 타입

 

자바스크립트에서 값 타입과 참조 타입은 메모리에서 다르게 처리된다.

 

1. 값 타입: 숫자, 문자열, 불리언, null, undefined와 같은 값 타입은 변수에 실제 값 자체가 저장된다. 

2. 참조 타입: 배열, 객체, 함수와 같은 참조 타입은 데이터가 저장된 메모리 주소를 참조하는 방식으로 동작한다. 변수 간에 참조 타입이 복사되면, 복사된 변수는 원래 변수와 같은 메모리 주소를 참조하게 되어, 두 변수가 동일한 객체를 가리킨다.

왜 FALSE가 나올까 ?

자바스크립트의 === 연산자는 두 피연산자가 동일한 참조를 가리킬 때만 참조 타입에 대해 true를 반환한다. 이 연산자는 두 객체의 내용이 같은지 비교하는 것이 아니라, 두 변수가 같은 메모리 주소를 가리키는지를 확인한다.

console.log(arr === newArr); // false

위 예제에서 arr와 newArr는 동일한 요소를 가지고 있지만, === 연산자는 메모리 주소를 비교하기 때문에 false가 된다. 배열 메서드가 새 배열을 반환할 때, 자바스크립트는 이 배열을 메모리의 새로운 위치에 저장한다. 결과적으로, arr와 newArr는 서로 다른 메모리 주소를 참조하게 되어 false가 반환되는 것이다.