자바스크립트 개발자라면 알아야 할 Concept 33 [#3. Value Types and Reference Types]

2020/11/06 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#2. Primitive Types]

2020/11/03 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#1. Call Stack]

 

"자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개"

33개의 개념은 다른 개발자가 Github에 올려준 내용을 바탕으로 한다. [https://github.com/yjs03057/33-js-concepts]

 

 

 

 

 

 

 

 

---

Value Types and Reference Types

 

value와 Reference의 차이점

 

---

value

 

다음 상황을 가정해보자

 

let a = 50;
let b = a;

console.log(b);

a=50이고, b=a이기 때문에

b를 출력하면 50이 출력된다.

 

 

그렇다면 a = 10을 중간에 선언해준다면?

 

let a = 50;
let b = a;

a = 10;

console.log(b);

 

다음과 같은 결과가 출력된다.

50

 

 

 

b=a이니까, 같이 업데이트 되어

b=10으로 될 것 같지만,

 

 

b=50이 출력된다.

 

이 같은 것을 value라고 한다.

 

 

 

---

a는 50이라고 선언을 했고,

두 번째 줄(let b = a)에서

a 값을 물어본다

 

 

"a값은 뭐야?"

 

"a는 50이야"

 

 

 

a값을 물어보았고,

물어본 a값을 복사해

b에 붙여 넣는다.

이것이 let b = a; 이다.

 

 

즉,

let b = 50라고 이해하는 것이다.

 

 

그래서 

네 번째 줄에서

a = 10; 이라고 해도

b는 영향에서 벗어난다.

 

 

왜냐하면,

a값(value)을 복사했기에,

다시 말해

value를 복사했기 때문이다.

reference(참조) 한 것이 아니다.

 

 

그렇다면 다음 상황은 어떨까?

 

 

---

Reference

 

const a = ["cat", "my_cat"]
const b = a;

console.log(b);

a라는 배열은

cat, my_cat을 갖고 있고,

b라는 배열은

a배열이라고 한다.

 

b를 출력하면

['cat', 'my_cat']이 출력된다.

 

 

그렇다면 중간에 

a.push("dog")을 선언해주면?

 

 

const a = ["cat", "my_cat"]
const b = a;

a.push("dog")

console.log(b);

 

다음과 같은 결과가 출력된다.

["cat", "my_cat", "dog"]

 

 

 

이것을 reference라고 한다.

 

 

b를 변경하지 않았다.

그러나 a를 변경하자,

b가 업데이트되었다.

 

즉,

값(value)을 복사하는 것이 아니라
레퍼런싱하는 것이다.

 

 

 

'a'의 '값'이
해당 배열 ["cat", "my_cat"]이 아니라

 

'a'는 해당 배열을

'참조(reference)'하는 것이다.

 

 

해당 배열은 컴퓨터 내의

메모리 어딘가에 위치하고 있는 것이다.

 

그리고,

b는 a를 참조하는 것이다.

 

즉, 

a와 b가 같은 배열을

참조하는 것이다.

 

 

 

 

 

배열을 업데이트하면,

'a', 'b'도 마찬가지로

업데이트된 배열을 출력하는 것이다.

 

 

왜냐하면 둘은

동일한 배열을 참조하고 있기 때문이다.

 

 

 

만약, 다음처럼 코드를 수정하면

const a = ["cat", "my_cat"]
const b = a;

a.push("dog")
b.push("my_dog")

console.log(a);

결과는

["cat", "my_cat", "dog", "my_dog"]

 출력된다.

 

 

 

 

메모리 어딘가에 떠다니는

해당 배열을

'a', 'b'가 각각 참조한 것이다.

 

---

 

 

그래서 다음과 같은 상황은

문제가 없어 보이지만,

참조(reference)때문에

false를 반환한다.

console.log([1] === [1]);

 

 

 

각각의 배열은,

각각 메모리에 위치한

각기 다른 오브젝트이기에

같은 것이 아니다.

 

---

 

그렇다면 함수는?

다음 상황을 보자,

 

const x ={
    a : "Hi"
}

const b = x

b.a = "Hello"

console.log(x)

결과는 a : "Hello"를 출력한다.

 

 

b를 통해서

x를 업데이트할 수 있다는 것이다.

 

 

 

 

---

Value와 Reference

 

Value는

String, number, boolean

NaN, undefined, null

 

Reference는

array, object, function

 

에서 사용 가능하다.