[TIL] #2. Value Types and Reference Types

Value Types and Reference Types

 

first! value;

let a = 50;
let b = a;

console.log(b);

b = 50으로 나올 것이다 여기에 하나를 추가해 보자.

let a = 50;
let b = a;

a =10;

console.log(b);

// 여전히 b는 50이며 이걸 value라고 한다. 

이걸 해석 하자면 다음과 같다.

let a = 50;
let b = 50; // <--------여기서 a는 50으로 수정이 될 것이다. a 값을 복사한다 즉 , value를 복사!
// 50을 복사-붙여넣기. Reference = 참조를 하지않는거야. 복사. 붙여넣기임.
a = 10;

console.log(b)

만약 이러한 상황이라면.....

const sexy = ["kimchi", "potato"]
const pretty = sexy;

console.log(pretty) // [ 'kimchi', 'potato']

여기서 sexy에 한개 더 element를 추가하면?

const sexy = ["kimchi", "potato"]
const pretty = sexy;

sexy.push("hello");

console.log(pretty) // [ 'kimchi', 'potato', 'hello']

 

pretty 안에 3개의 요소가 있는 것을 확인할 수 있다. 이걸 'reference'라고 한다.

보다시피 'pretty'변경을 하지 않았는데 sexy를 변경하자 pretty가 update 되는걸 볼 수 있었다.

즉, 이것은 값을 복사하는 것이 아니라. 'Reference'하는 것이다. 

이건 'sexy'의 'value'가 해당 배열 (kimchi,potato)가 아니라, sexy는 해당 배열을 참조하고있다는 것을 알수있다.

배열은 둥둥 떠있으며, sexy는 해당 배열을 가리키고 있는 것이다.

이는 a=50이다.라는 것과 다르다. 참조하는 것이 아닌 이건 해당 값이라고 말하는 것이다.

하지만 이 경우, sexy는 해당 배열을 참조하는 것이다. 해당 배열은 어느 메모리 어딘가에 위치해 있을 것이다.

그리고 pretty는 sexy를 참조하고 있다. 즉, sexy, pretty가 같은 동일한 배열을 참조하고 있는 것이다.

그렇게 때문에 내가 배열을 업데이트 하면. pretty, sexy도 마찬가지로 업데이트 된 배열을 출력할 것이다.

왜냐면 동일한 배열을 참조하고 있기 때문이다. 그렇기 때문에 이렇게 작성하면 다음과 같이 나온다.

const sexy = ["kimchi", "potato"]
const pretty = sexy;

sexy.push("hello");
pretty.push("lalalala");

console.log(sexy); // [ 'kimchi', 'potato', 'hello', 'lalalala']

'sexy'는 'lalalala'까지 갖게되는 것이다. 보다시피 해당 배열을 'sexy' 혹은 'pretty'에서 업데이트 했다.

결국 둥둥 떠다니는 해당배열을 'sexy','pretty'가 각각 참조한 것이다.

그래서 이렇게 console.log 하면 동일하지 않는다고 나온다.

console.log([10]===[10]); // false
// 이 둘은 각각 메모리에 위치한 각기 다른 오브젝트이기 때문이다.

const x = {
    a: 'hello'
}

const b = x;
b.a = 'lalaal';

console.log(x)

// 이런 상황에서는 x를 b를 통해 업데이트 할 수 있다.
// { a: 'lalaal' }

이것이 바로 value,reference의 차이점이다.

value는 string, number, boolean, NaN, undefined, null 가능하고,

Reference 는 array, object, function 에서 사용될 수 있다.