Javascript 객체 얕은 복사/깊은 복사, 'in' operator

Dasol Kim·2022년 2월 20일
2


Javascript가 Prototype 기반의 객체 지향 언어라는 점을 배웠으니, 객체에 대한 세부적인 특징을 더 정리해보도록 하자.

in operator

in 연산자는 object에 해당 property가 존재하는지 점검하는지의 여부로 쓰일 수 있고, for과 함께 반복문에서도 활용될 수도 있다.

const person = {
  name : 'dasol',
  age : 25
}
  
console.log('name' in person); // true
console.log('age' in ellie); // true
console.log('random' in ellie); // false
console.log(ellie.random); // undefined

// for (key in obj)
for (let key in person) {
  console.log(key);
} 

참고로 of 연산자는 for과 함께 배열의 원소를 반복하면서 돌때 활용된다.

// for (value of iterable)
const array = [1, 2, 4, 5];
for (let value of array) {
  console.log(value);
}



객체의 얕은 복사, 깊은 복사 ✨

객체의 얕은 복사는 = 연산자를 통해 어떤 레퍼런스 변수에 다른 레퍼런스 변수를 할당하여 메모리의 같은 공간을 가리키게 하는 것이다. 즉, 한 레퍼런스 변수를 통해 객체의 속성을 변경하게 되면 당연히 다른 레퍼런스 변수를 통해 접근했을 때애도 변경된 값이 적용되어 보이게 되는 것이다.


// Shallow Copy
const user = { name: 'dasol', age: 25 };
const user2 = user;
user.age = 20;
console.log(user2.age); // 20 

두 레퍼런스 변수가 메모리의 서로 다른 공간에 있는 객체를 가리키지만 객체안의 프로퍼티-값의 쌍, 다시 말해서 내용을 동일하게 하려면 깊은 복사를 해야한다. forin의 조합을 이용하는 방법도 있겠지만, Object라는 최상위 constructor function의 static 메소드인 assign을 활용하는 방법이 있다.

✏️ MDN에서 Object에 대한 document를 보면 assign 메소드가 포함된 static 메소드와 prototype에 정의된 instance 메소드로 나뉘어져 있는 것을 볼 수 있다. 즉, static 메소드는 constructor function(쉽게 생각해서 Java의 클래스)를 통해, instance 메소드는 constructor function을 통해 만들어진 객체를 통해 접근할 수 있는 것이다. 전형적인 객체 지향 언어인 Java의 static, instance 개념과 조금 다르다는 것에 유의해야 한다.

// for (key in obj)
const user3 = {};
for (let key in user) {
  user3[key] = user[key];
}
console.log(user3);

// Object.assign(dest, [obj1, obj2, obj3...])
const user4 = Object.assign({}, user);
console.log(user4);

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); // big

0개의 댓글