📗참조값

참조(Reference) 방식으로 작동하는 자료형은 단 하나 뿐입니다.

• 객체 (일반 객체, 배열, 함수 등)

값의 비교

우선 예제부터 보여드리겠습니다.

const list1 = [ 1, 2, 3 ];
const list2 = [ 1, 2, 3 ];

const result = list1 === list2;

console.log(result); // ?

결론부터 말씀드리자면, 위 콘솔 출력 결과는 false입니다. 이 부분에 대한 작동 원리는 비유적으로 설명드리는 편이 나을 것 같습니다.

비유 설명

우리는 기존과 같이 포스트잇을 사용합니다. 이번에도 또한 몇 가지 규칙이 존재합니다.

• 변수를 만들 때마다 새로운 포스트잇을 사용합니다.

• 참조값 자료는 부피가 방대하여 직접적으로 포스트잇에 기록할 수 없습니다.

• 참조값 자료는 별도의 서랍장에 보관해야 하며, 한 개의 서랍장에는 한 개의 자료만 보관할 수 있습니다.

• 한 개의 포스트잇에는 한 개의 정보만 적을 수 있으며, 자료가 저장된 서랍장의 위치를 적습니다.

const list1 = [ 1, 2, 3 ];
const list2 = [ 1, 2, 3 ];

const result = list1 === list2;

console.log(result); // ?

위와 같은 예제가 있다고 가정했을때, 다음과 같은 현상이 발생한다고 생각하셔도 좋습니다.

1. [1, 2, 3]이라는 객체는 포스트잇에 적을 수 없기 때문에, 서랍장 첫 번째 칸에 보관합니다.

2. list1이라는 이름의 포스트잇에 "서랍장 첫 번째 칸"이라고 보관된 위치 정보를 적습니다.

3. [1, 2, 3]이라는 객체는 포스트잇에 적을 수 없기 때문에, 서랍장 두 번째 칸에 보관합니다.

4. list2이라는 이름의 포스트잇에 "서랍장 두 번째 칸"이라고 보관된 위치 정보를 적습니다.

5. result라는 이름의 포스트잇에 list1과 list2 포스트잇에 적힌 내용이 같은지 판별하여 적습니다.

list1 포스트잇에 적힌 내용은 "서랍장 첫 번째 칸"이고, list2 포스트잇에 적힌 내용은 "서랍장 두 번째 칸"입니다. 다르겠죠?

자바스크립트의 모든 객체는 위와 같은 방식으로 작동하며, 여러분도 위 과정을 반드시 이해하셔야 합니다.

값의 변경

const person1 = {
  age: 10
};
const person2 = person1;

person1.age = 20;

console.log(person2); // ?

위와 같은 예제가 있다고 가정했을때, 다음과 같은 현상이 발생한다고 생각하셔도 좋습니다.

1. { age: 10 }이라는 객체는 포스트잇에 적을 수 없기 때문에, 서랍장 첫 번째 칸에 보관합니다.

2. person1이라는 이름의 포스트잇에 "서랍장 첫 번째 칸"이라고 보관된 위치 정보를 적습니다.

3. person2 포스트잇에 person1 포스트잇의 내용을 적습니다. ("서랍장 첫 번째 칸")

4. person1 포스트잇에 적힌 위치에 있는 자료의 age 속성을 20으로 수정합니다.

5. person2 포스트잇에 적힌 위치("서랍장 첫 번째 칸")에 있는 자료를 콘솔에 출력합니다.

위와 같이 생각해보신다면, 이해가 조금 되었을까요?