얕은복사 vs 깊은복사

얕은복사 : 바로 아래 단계의 값만 복사
깊은복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사
(객체안의 객체내용마저 전부 하나하나 복사한다)

얕은 복사의 문제점

중첩된 객체에 대해서 아래 단계의 복사만 이뤄질 경우 해당 아래의 프로퍼티 변경에서 다른 객체와 서로 영향을 받는다. (불변 객체가 아니게 된다.)

var copyObject = function (target){
 var result = {};
 for( var prop in target){
   result[prop] = target[prop];
 }
 return result;
};

var user = {
 name : 'msk',
 information : {
   friend : '쿠로코',
   school : '토키와다이'
 }
}

var user2 = copyObject(user);

user2.name = 'kim';
console.log(user.name === user2.name); // false

user.information.school = '단국대학교'
console.log(user.information.school === user2.information.school) //true

얕은복사로 얕은부분인 name에는 서로 영향을 끼치지 않았지만 깊은부분인 school에는 서로 영향을 끼친다.

따라서 기본형 데이터일 경우에는 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사해야한다.

깊은복사 방법

1. 재귀함수 : 내부 프로퍼티까지적용
2. 라이브러리 함수
3. JSON 문자열 변환 및 객체로 다시 변환 : 객체의 참조 삭제 영향
4. 리턴한 객체 혹은 배열 사용하기
5. [...] 사용

재귀함수

var copyObjectDeep = function (target){
  var result = {};
  if(typeof target === 'object' && target !== null){
  	for( var prop in target){
    	result[prop] = copyObjectDeep(target[prop]);
  	}
  }
  else{
  	result = target
  }
  return result;
};

이전의 함수와 다르게 재귀로 내부가 객체라면 내용을 반복해서 복사하는 것을 알 수 있다.

Json 사용법

var copyObjectViaJson = function (target){
  return JSON.parse(JSON.stringify(target));
}

문자열로 변환 후 다시 객체로 변환하면 객체에 대한 참조가 없어진다 => 서로 영향을 받지않는다.

구조분해할당

const a = [1,2,3]
const b = [...a]

a.splice(0,1)
a
[2, 3]
b
[1, 2, 3]

undefined vs null

기본적으로 서로를 비교하려면 ===(일치연산자)를 써야한다.

console.log(null == undefined) // true

null : 명시적으로 비어있음을 나타내고 싶을 때
undefined : 값을 대입하지않은 변수에 접근하고자 할 때

undefined vs empty(비어있는 요소)

	undefined	empty
순회(forEach)	작동	무시
프로퍼티, 키 값	존재	존재X

헷갈리니까 그냥 비어있음을 명시적으로 나타내고 싶을때는 null을 사용해라

정리

1. 기본형(불변성) vs 참조형(가변성)
2. 변수와 식별자
   변수 : 변경 가능한 데이터가 담길 수 있는 공강
   식별자 : 그 변수의 이름
3. 얕은복사 vs 깊은복사
4. 깊은 복사의 3가지 방법
5. undefined vs null

[...배열] , {...객체} 는 얕은복사일까? 깊은 복사일까?

배열

[...] 사용하기

const arr = [
  {name:[1,2,3,4]},{age:[10,20,30,40]}
]

const arrCopy = [...arr]

arrCopy[0].name[1] = 100

console.log(arr,arrCopy)

const arr1 = [1,2,3,4,5]

const arr1Copy = [...arr1]

arr1Copy[0] = 1000

console.log(arr1,arr1Copy)

// { name: [ 1, 100, 3, 4 ] }, { age: [ 10, 20, 30, 40 ] } ] [ { name: [ 1, 100, 3, 4 ] }, { age: [ 10, 20, 30, 40 ] } ]
//   [ 1, 2, 3, 4, 5 ] [ 1000, 2, 3, 4, 5 ]

arrCopy의 내부값을 100으로 바꾸었으나
arr의 내부값 또한 100으로 바꾸어졌다.

깊이가 1인 arr1과 arr1copy는 arr1Copy의 변수값이 바뀌어도 arr1은 바뀌지않은 것을 볼 수 있다.

JSON 사용하기

const arr = [
  {name:[1,2,3,4]},{age:[10,20,30,40]}
]

// const arrCopy = [...arr]
const arrCopy = JSON.parse(JSON.stringify(arr))

arrCopy[0].name[1] = 100

console.log(arr,arrCopy)

const arr1 = [1,2,3,4,5]

// const arr1Copy = [...arr1]
const arr1Copy = JSON.parse(JSON.stringify(arr1))

arr1Copy[0] = 1000

console.log(arr1,arr1Copy)

  // [ { name: [ 1, 2, 3, 4 ] }, { age: [ 10, 20, 30, 40 ] }]
  // [ { name: [ 1, 100, 3, 4 ] }, { age: [ 10, 20, 30, 40 ] } ]
  // [ 1, 2, 3, 4, 5 ] [ 1000, 2, 3, 4, 5 ]

arrCopy의 내부 값이 바뀌어도 arr의 내부값에는 영향을 주지않는다.
arr1Copy는 깊이가 1로 내부값이 바뀌어도 arr1의 내부값에는 영향을 주지않는다.

객체

{...}사용하기

const user = {
  name : 'msk',
  information : {
    friend : '쿠로코',
    school : '토키와다이'
  }
}


const user1 = {...user}
user.information.friend = '바뀌어라'
user1.name = '~~~'
console.log(user,user1)

//{ name: 'msk', information: { friend: '바뀌어라', school: '토키와다이' } } 
//{ name: '~~~', information: { friend: '바뀌어라', school: '토키와다이' } }

user.information.friend의 깊이 2의 부분의 바뀜이 user1에도 영향을 끼친다.

JSON 사용하기

const user = {
  name : 'msk',
  information : {
    friend : '쿠로코',
    school : '토키와다이'
  }
}


// const user1 = {...user}
// user.information.friend = '바뀌어라'
// user1.name = '~~~'
// console.log(user,user1)

const user1 = JSON.parse(JSON.stringify(user))
user.information.friend = '바뀌어라'
user1.name = '~~~'
console.log(user,user1)
//{ name: 'msk', information: { friend: '바뀌어라', school: '토키와다이' } } 
//{ name: '~~~', information: { friend: '쿠로코', school: '토키와다이' } }

user.information.friend가 user1에는 영향을 끼치지않는다.

리턴한 객체와 그냥 객체

const obj = {
  count : 0
}

const objFunc = ()=>{
  return {count:0}
}

const A = obj
const B = obj
const C = objFunc()
const D = objFunc()

console.log(A,B,C,D)

A.count = 1000
C.count = 1000000

console.log(A,B,C,D)

//{ count: 0 } { count: 0 } { count: 0 } { count: 0 }
//{ count: 1000 } { count: 1000 } { count: 1000000 } { count: 0 }

그냥 객체를 복사하여 사용한 경우 A의 값이 바뀌면 B의 값에 영향을 준다.
하지만 return한 객체가 복사되어 사용한 경우 C가 바뀌어도 D가 바뀌지않는다.

정리

• 얕은복사

1. 값을 바로 받기
2. [...] , {...}사용하기

• 깊은복사

1. 재귀함수 : 내부 프로퍼티까지적용
2. 라이브러리 함수
3. JSON 문자열 변환 및 객체로 다시 변환 : 객체의 참조 삭제 영향
4. 리턴한 객체 혹은 배열 사용하기

출처

코어자바스크립트