[33-js-concepts] 3. 값 타입과 참조 타입 (Value Types and Reference Types)

1.값

 원시타입 ( boolean, null, undefind, string,number, symbol)

원시타입은 immutable data type 이기 때문에 ,값이 변경될 경우, 새로운 값을 할당을 받음.

 

let myNumber=23; 

let newVar = myNumber;

myNumber = myNumber+1;

2. 참조

객체타입 ( object)

메모리상의 실제 객체의 위치를 나타내는 주소값을 할당받음.

 

let myArray =[];

[

let vs const 

 : 변수할당이 나온 김에 번외

let sum=0;

sum = 1+2+3+4+5;

 

let numbers=[];

numbers.push(1)

numbers.push(2)

numbers.push(3)

numbers.push(4)

 

let 과 const 의 사용에서의 차이  : 변화 발생 시, let <-> 변화 발생 x, const

 => 여기서의 변화란, 메모리 주소값의 변화를 말함

즉, let은 메모리 주소값이 변하는 경우, const는 메모리 주소값이 변하지 않는 경우 

 

=> 참조타입에서 직접적으로 변수에 대입 값을 변경하지 않고, 참조하는 위치가 가르키는 곳의 값을 변경시, const를 이용 가능

 

[const value]

 

[const reference]

 : myArray가 가르키는 주소값이 변경되는 것이 아닌, 가르키는 주소값내의 값 변경.

ex) const myArray={};

myArray[‘newKey’]= ‘someValue’ ; // 가능

 

]

**유의점

1. 1. 1. 할당받은 값내의 변수값 변경 가능 (실제 가르키는 주소값을 변경하는 경우가 아닌 경우에만)

      2. 할당 변수 변경 불가능 , 새로운 값 할당시, 다른 주소값을 가지게 됨

  => 참조값을 함수내에서 immutable 하게 이용하기 위해서![immutable data partten] : 불변 데이터 패턴

1. 1. 1. 객체를 immutable 하게 변경

=> 불변 객체화 (Object.freeze)

ex) Object.freeze(target) : 객체의 내부 property 변경 불가능

 

 

그러나 nested Object는 변경가능

 

 

=> 해결법 : Deep freeze

1. 1. 1. 값의 사본은 생성( 같은 값을 가진 새로운 참조변수 생성) 

=> 방어적 복사(Object.assign)

ex) Object.assign(target, ...sources) : target property <- sources property

     return value : target object

           i. immutable.js 사용

          : List, Stack, Map, OrderedMap, Set, OrderedSet, Record와 같은 영구 불변 (Permit Immutable) 데이터 구조를 제공

 

__ 참고

** 내부 프로퍼티 구조 :https://v8.dev/blog/fast-properties

__ 예시

var a=[1,2,3];

var b=a;

console.log(a===b)

 

b=[4,5,6];

console.log(a===b)

----------------------------------------------------------------------------------------------------------

 function foo(x){

 x.push(4);

 console.log(x);

 

 x=[4,5,6];

 x.push(7);

 console.log(x);

}

 

var a=[1,2,3];

foo(a);

console.log(a);

----------------------------------------------------------------------------------------------------------

 function foo(x){

 x.push(4);

 console.log(x);

 

 x.length=0;

 x.push(4,5,6,7);

 console.log(x);

}

 

var a=[1,2,3];

foo(a);

console.log(a);

** == & ===

값의 경우, ==를 사용하게 되면 ,해당 변수의 값을 비교

참조의 경우, == 를 사용하게 되면, 해당 변수가 가진 값은 주소값임으로, 그 주소값이 가르키는 실제 데이터의 값을 비교하는 것이 아님! => 실제 값까지 비교시, === 이용

++ 외의 방법

 : stringify 를 사용하여 동일하게 문자열로 변환하여 비교

 : isEqual(value, other)  + custom - isEqualWith(value, other, [customerizer])

 ( https://lodash.com/docs/4.17.15#isEqual )