33 concepts every JavaScript developer should know.

3. Value vs Reference

지난시간에 우리는 Primitive tyep에 대해 배웠다. 이번시간에는 Value(값)과 Reference(참조)에 대한 차이를 알아보자.

Value : String, Number, Boolean, NaN, undefiend, null

let a = 50;
let b = a;

a = 10;

console.log(b); // 50

여기서 우리는 다른 선택지가 존재하였다.
a = 50 = b 이므로 a = 10으로 재할당 되었을 때 b또한 update되어 50이 되는건 아닐까?
결과를 봐서 알겠지만 아니다. 이유는 Value(값)이 할당된 변수를 다른 변수에 할당할 때에는 값 자체를 Copy & Paste하기 때문이다.

let a = 50;
let b = 50; // a = 50의 값을 Copy & Paste

a = 10;

console.log(b); // 50

결과적으로 위와 같다. 이미 값을 Copy & Paste했기 때문에 a의 값을 변경한다고 해도 b의 값은 변하지 않는다.

Reference : Array, Object, Function

코드를 먼저 보고 Value와 무엇이 다른지 생각해보자.

let a = ["kimchi", "soju"];
let b = a;
console.log(b); // ["kimchi", "soju"]

a.push("doenjang");
console.log(b); // ["kimchi", "soju", "doenjang"]

b.push("makgeolli");
console.log(a); // ["kimchi", "soju", "doenjang", "makgeolli"]

이게 Reference다. Value와는 다르게 Reference를 Copy & Paste한다.

Oject data type은 한 곳에 많은 양의 데이터를 갖고 있으므로 실질적으로 이를 담기에는 메모리를 너무 많이 차지한다.
그래서 Ref라는 것을 주고 이 Ref가 실제의 데이터를 불러올 수 있는 열쇠같은 역할을 한다.

Reference에는 해당 date들의 address(주소값)가 담겨져 있다.

따라서 다음과 같은 코드는 false를 출력한다.

console.log([10] === [10]); // false
console.log({a : 10} === {a : 10}); // false

const

여기서 간단하게 const에 대한 예시를 보자.
const는 constant(상수)라는 뜻으로 재할당이 불가능하다.

const a = 50;
const b = a;
a = 10; // Uncaught TypeError: Assignment to constant variable.

하지만 Reference는 변경이 가능하다.

const a = {
    Name : "alpaca",
    age : 29
}
const b = a;
console.log(a.age); // 29

a = {
    Name : "alpaca",
    age : 30
} // Uncaught TypeError: Assignment to constant variable.
 
b.age = 30;
console.log(a.age); // 30

왜냐하면 변경이 불가능한 것은 변수에 할당된 Ref이지 참조되는 값들이 아니기 때문이다.

Reference

• 33 concepts every JavaScript developer should know.
• (EP 03.) 자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개 | #3. Value Types and Reference Types - by Nomad Coders
• JavaScript Primitive vs. Reference Values