(이미지 출처 : https://velog.io/@imjkim49)
자바스크립트에는 값에 의한 전달(passed by value)이 일어나는 Number, String, Boolean, null, undefined 등의 데이터 타입이 있는데 이러한 데이터 타입을 기본 타입(Primitive Type)이라고 부른다.
또 자바스크립트에는 참조에 의한 전달(passed by reference) 이 일어나는 Array, Function, Object 등도 가지고 있다. 사실 크게 보자면 전부 객체(Objects)로 볼 수 있고, 이러한 데이터 타입을 참조 타입(Reference Type)이라고 부른다.
1. 기본 타입은 값 자체를 복사한다.
let a = 100;
let b = a;
console.log(a, b); // 100, 100
a = 200;
console.log(a, b); // 200, 100처음에 a라는 변수에 기본 타입인 100을 할당했다. 따라서 a는 100이라는 값을 가지게 된다. 그 다음 새로운 변수 b에 변수 a를 할당하게 되면 변수 b에 100이라는 값 자체를 복사(copy) 하게 된다. 결과적으로 a, b 모두 100이라는 값을 가지게 된다.
그 다음 변수 a에 200이라는 값을 새롭게 할당하였지만, 변수 b의 값은 변하지 않는 것을 확인할 수 있다. 변수 a와 b는 완전히 분리되어있고, 같은 값을 가진 변수 하나를 바꾸더라도 다른 변수에는 아무런 영향이 없다는 것을 알 수 있다.
2. 참조 타입은 참조(주소)값을 복사한다.
let player1 = {
name: 'tomato',
color: 'red',
isDeveloper: true
};
let player2 = player1;
console.log(player1.name, player2.name); // 'tomato', 'tomato'
player1.name = 'apple';
console.log(player1.name, player2.name); // 'apple', 'apple'
player1에 참조 타입 중 하나인 객체를 할당한 후에, player2에 player1을 할당했다. 두 객체 모두 같은 value 값(위에서는 'tomato')를 가진 것을 확인 한 후, player1의 key 값을 새롭게 할당하였다. 그랬더니 위에서 기본 타입으로 예를 들었던 것과는 다르게, player2의 key 값까지도 바뀐 것을 확인할 수 있다.
이렇게 되는 이유는 참조 타입의 기본적인 특징과 관련이 있다. 객체는 우리의 컴퓨터 메모리 어딘가에 생성된다. 우리가 player1 = { } 를 작성했을 때, 우리는 메모리 내부에 객체를 만들게 되고 변수 player1이 갖는 것은 그 객체가 위치한 주소이다. 값 자체가 복사되는 기본 타입과는 달리 참조 타입은 참조(메모리 주소)만 복사되고 실제 값은 복사되지 않는다. 즉 player1과 player2는 실제 데이터를 가지고 있는 객체의 참조(주소)값만 가지고 있는 것이다.
references
https://velog.io/@recordboy/%EC%9E%90%EB%A3%8C%ED%98%95%EC%B0%B8%EC%A1%B0-%ED%83%80%EC%9E%85/
https://velog.io/@jakeseo_me/2019-04-01-1904-%EC%9E%91%EC%84%B1%EB%90%A8-2bjty7tuuf
https://velog.io/@recordboy/JavaScript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%ACShallow-Copy%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%ACDeep-Copy
