반응형
객체의 복사
자바스크립트에서 변수에 객체 (객체, 배열)를 할당하는 방식은 참조를 만든다
let arr = [1,2,3];
let copy = arr;
copy[0] = 'a';
console.log(arr); // ['a',2,3]
console.log(copy); // ['a',2,3]
console.log(arr === copy); //true
이런 방식은 copy 가 arr 의 값을 참조하기에 완전히 같은 것이다
객체(Object) 복사
참조하지 않게 복사하려면 assign 과 spread 연산자를 사용한다
//assign 을 이용한 객체 복사
let obj = {name:'kim'};
let copy = Object.assign({}, obj);
console.log(obj === copy);
copy.name = 'lee';
console.log(obj);
console.log(copy);
//Spread(...) 연산자를 이용한 객체 복사
let objSpread = {name:'kim'};
let copySpread = {...objSpread};
console.log(objSpread === copySpread);
copySpread.name = 'lee';
console.log(objSpread);
console.log(copySpread);
배열(Array) 복사
slice, concat, spread 연산자로 복사가 가능하다
let arrOrigin = [1, 2, 3];
let arrConcat = arrOrigin.concat();
let arrSlice = arrOrigin.slice();
let arrSpread = [...arrOrigin];
console.log(arrOrigin === arrConcat, arrOrigin === arrSlice, arrOrigin === arrSpread);
arrConcat[0] = 'a';
arrSlice[1] = 'b';
arrSpread[2] = 'c';
console.log(arrConcat);
console.log(arrSlice);
console.log(arrSpread);
주의사항
위의 복사 방식은 1차원 적인 객체는 잘 된다
하지만 중첩객체 (Nested Object) 에서는 안에 있는 Object 가 복사가 안되고 참조되어버린다
중첩객체는 Object 안에 Object, 배열안에 Object, Object 안에 배열 이다
중첩객체의 복사
1. 위의 복사 방식으로 복사 후에 안에 있는 객체를 또 복사 해준다
Object 안에 Array 의 경우 : Object 복사 후 안에있는 Array 를 또 복사
2. 재귀함수 만들어서 최하단 계층 까지 반복적으로 복사 하도록
3. JSON 객체의 메소드를 활용한 복사
4. 외부 라이브러리 활용
결론
복잡한 구조의 중첩객체를 사용하면 외부 라이브러리 사용해서 복사 하자
반응형
'IT > Javascript' 카테고리의 다른 글
JavaScript Key code (0) | 2023.03.17 |
---|---|
Babel+Webpack 설정방법 (0) | 2022.08.30 |
Javascript 함수형 예제 (0) | 2022.08.30 |
두 정수 사이의 합 (0) | 2022.07.14 |
약수의 합 (0) | 2022.07.14 |
행렬의 덧셈 (0) | 2022.07.14 |
수박수박수박수박수박수? (0) | 2022.07.14 |
문자열을 정수로 바꾸기 (0) | 2022.07.14 |