Object.assign(), Spread Operator

#2114

자바스크립트를 공부 중이다. 그동안 눈에 잘 들어오지도 머리에 남지도 않았었는데 어떤 형태로든 아웃풋을 남기는 것이 기억에도 남고 좋을 것 같아 공부의 흔적을 남기려는 것이 목적이다.

Object

이번에 공부한 내용은 객체에 대한 내용이었다. 어디에 사용하는 게 좋을지는 현시점에선 잘 모르겠고 착각일 수도 있지만 방법은 약간 이해가 된 것 같다.

See the Pen 20210130_01 by minamiland (@minamiland) on CodePen.

기본적으로 객체는 복사하면 똑같다

[1] obj1에서 사용되는 객체가 있고, [2] obj2에 obj1을 대입하면 둘 다 동일한 값을 가지게 된다 [3]. 이때 [4] obj2에 다른 속성을 부여하면 간단히 생각하면 obj2 만 바뀔 것 같지만 실상은 원본인 [5] obj1의 값까지 변경된다. 결국 obj1과 obj2는 동일하다 [6] 결국 이러면 큰일 나기 쉽겠다.

Object.assign()

Object.assign()을 사용하여 obj1의 값을 더하는 방법으로 사용한다 [2]. 객체의 내용은 복사한 상태임으로 동일하지만 [3], 빈 배열에 과 obj1을 합치게 된 관계로 obj1과 obj2는 같지 않다 [4]. 이제 obj2에 다른 속성을 부여하면 [6,7] 형식은 같지만 다른 값을 가진 객체가 생성된다 [8].

assign이 할당하는 뜻을 가지고 있으니 객체를 다른 곳에 할당한다는 의미를 가지게 되는 것 같다. 

Spread Operator

또 다른 방식으로는 스프레드 오퍼레이터라는 전개 연산자를(...) 사용하는 방법으로 obj2에 obj1을 전개 연산자 형식으로 대입한다 [2]. obj1과 obj2는 별개의 객체임으로 obj2에 다른 속성을 부여하여 사용한다.

연산자를 펼친다? 가져다 펼쳐 놓는다?? 음.

결과만 보면 같은데...

• Object.assign()은 빈 객체에 사용하고자 하는 객체를 복사해서 복제본을 만든다
• Spread Operator(...)는 객체를 통으로 복사해서 복제본을 만든다.

두 개의 다른 점은 잘 모르겠지만.. 결과는 같다. 분명 무언가 차이가 있을 텐데.. 생성 배경이나 두 개의 차이점을 제대로 알면 좋겠지만 일단은 패스.