객체는 참조에 의해 저장되고 복사가 된다.
let number1 = 10;
let number2 = number1;
원시타입의 데이터일 경우 number2라는 변수에 number1을 할당할 경우 number1의 값인 10이 복사가 된다. 즉 서로 연결되어있는것이 아닌 개별의 값을 가지고 있는것이다.
반면에, 객체같은 경우는
let user = {
name: 'quakka'
}
let copyUser = user;
user에 객체가 만들어지면 객체의 주소값을 가지게 된다.
즉 값 자체가아닌 값이 저장되어있는 메모리의 주소값을 할당하게 된다.
그 이유는 객체의 경우 고정된 데이터크기를 가지고 있지 않다.
데이터가 추가도되고 삭제도 되기때문에 다른 저장공간에 크기를 할당하고 거기에 데이터를 저장한다. 그다음 그 메모리의 주소값을 변수에 저장하게 된다.
copyUser에 user를 할당했을때 원시데이터와 같이 user의 값을 복사한다.
하지만 user의 값은 메모리의 주소를 가르키고 있고, 그 메모리 주소를 복사하여 copyUser에 할당하였으니 결국 같은 메모리 주소를 바라보게 된다.
그래서 객체의 경우에는 참조 복사를 할경우에는 데이터가 한쪽에서 변경되면 다른 한쪽에도 영향을 받게된다.
객체의 비교
객체 비교시 서로 같은 주소값을 가지고 있는 객체는 같다가 되지만, 안의 데이터만 같고 주소값이 다를때는 서로 다르다고 나온다.
let a = {};
let b = a; // 객체 참조 복사
console.log(a == b); // true
console.log(a === b); // true
let c = {};
let d = {};
console.log(a == b); // false;
console.log(a === b); // false;위와 같이 데이터의 내용이 같더라도 그 데이터를 담고있는 주소값이 다르다면 두 객체는 다르다고 나오게 된다.
객체 복사, 병합과 Object.assign
객체의 참조복사가아닌 그 값자체를 복제하고 싶을때는
반복문을 사용하여 새로운 객체에 값을 하나하나 담아주면 된다.
let user = {
name: 'quakka',
age: 29
};
let copyUser = {};
for(let key in user) {
copyUser[key] = user[key];
}다른 방법으로는 Object.assign을 사용하면 된다.
let user = { name : 'quakka'};
let copyUser = {};
//첫번째 파라미터로 복사된 데이터를 담을 객체
//두번째 파라미터부터는 복사가 될 객체 대상들
Object.assign(copyUser, user);위와 같이 작성을 하게되면 copyUser에 user값만 복사된 독립된 객체가 생성된다.
하지만, 프로퍼티가 원시값이 아닌 객체안에 객체가 또다시 있는 경우는 위의 방법만으로는 복사가 일어나지 않고 또다시 참조 복사가 된다.
let user = {
name: 'quakka',
bank: {
kb: 10000,
uri: 20000
}
};
let copyUser = {};
Object.assign(copyUser, user);
console.log(user === copyUser); // false
console.log(user.bank === copyUser.bank); //true
user.bank.kb = 30000;
console.log(copyUser.bank.kb); // 30000위와같은 객체안에 객체가 존재할 때는 제대로 복제가 되지 않는다.
이것을 얕은복사라고도 한다.
이것을 해결해주기 위해서는
lodash라이브러이의 메서드인_.cloneDeep(obj)를 사용한다.- 반복문을 통하여 복사를 할때 재귀적 개념을 사용하여 복사를 한다.
위와 같은 방법을 통해 안쪽까지 복사를 하는것은 깊은 복사라고 하며 완벽한 독립적인 객체를 만들 수 있게 된다.
