javascript assign 파헤치기 DEV / JAVASCRIPT
2020-12-08 posted by sang12
Vue에서 Object를 사용하는데 Object.assign이란 함수를 많이 사용해서 이를 정리해보고자 했는데... 너무 잘 정리되어 있는 사이트를 발견해서 기록용으로 남기도록 한다
참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Object.assign(target, ...sources)
Object.assign함수를 사용하면 target 오브젝트에 sources에 오는 오브젝트들을 병합 할 수 있다.
const target = {a:1, c:1};
const source1 = {c:2, d:3};
const source2 = {d:4, e:5};
console.log(Object.assign(target, source1, source2)); //{a: 1, c: 2, d: 4, e: 5}
아하.. 이래서 vue에서는 default Obejct를 만들어두고, 특정 Object를 초기화해주는 형태로 많이 사용을 했구나.
흐음 그런데 해당 참고 사이트를 보면 깊은 클로닝에 주의하라고 나와있다. 아래 소스는 위 사이트의 예제를 그대로 가져 왔다.
Object.assign의 경우 해당 값만을 가져오기 때문에 해당 값이 객체의 참조일 경우, 해당 객체의 참조값을 가져와서 아래와 같이 obj1, obj2의 값이 동일하게 변경 되는 것을 볼 수 있다. ( 사실 javascript에서도 객체 참조가 있다는 것을 여기서 처음 알았다 )
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj2.b.c = 3; // obj1, obj2 모두에 영향을 줌
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
vue에서 작업하다보면 위와같이 사용 할 경우가 있을 수도 있을거같은데, 이런 부분은 알아두면 좋을거 같다 :)
DEV
> JAVASCRIPT
다른글
REPLY