Reference

Reference(참조) 방식으로 작동하는 자료형은 단 하나 뿐입니다.
Object
물론, Array와 Function도 포함이겠죠?
우선 예제부터 보여드리겠습니다.
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번째 줄) [1, 2, 3]이라는 자료는 포스트잇에 적을 수 없기 때문에, 개인 서랍장 첫 번째 칸에 보관합니다.
2.list1이라는 이름의 포스트잇에 "서랍장 첫 번째 칸"이라고 보관된 위치 정보를 적습니다.
3.(코드 2번째 줄) [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.(코드 1번째 줄) { age: 10 }이라는 자료는 포스트잇에 적을 수 없기 때문에, 개인 서랍장 첫 번째 칸에 보관합니다.
2.person1이라는 이름의 포스트잇에 "서랍장 첫 번째 칸"이라고 보관된 위치 정보를 적습니다.
3.(코드 3번째 줄) person2 포스트잇에 person1 포스트잇의 내용을 적습니다. ("서랍장 첫 번째 칸")
4.person1 포스트잇에 적힌 위치에 있는 자료의 age 속성을 20으로 수정합니다.
5.person2 포스트잇에 적힌 위치에 있는 자료를 콘솔에 출력합니다.
위와 같이 생각해보신다면, 이해가 조금 되었을까요?
Primitive Practice
Reference Practice
Last modified 10mo ago