[JS] 얕은 복사와 깊은 복사

JS는 우선 원시 타입빼고는 다 얕은 복사

 

 

# 얕은 복사

1. 함수로 사용할 때

function fun(arr) {
    arr[5] = 10
    arr[0] = 0
}

let arr = [1, 2, 3]
fun(arr)
console.log(arr) // [0, 2, 3, 비어 있음 × 2, 10]

 

2. 그냥 복사하기

let numbers = [1, 2, 3]
let newNumbers = numbers	// 얕은 복사
newNumbers[0] = 10
console.log(numbers)	// [10, 2, 3]
console.log(newNumbers)	// [10, 2, 3]

 주소를 참고해 오기 때문에 다 얕은 복사가 된다

 

 

 

그렇다면.. 깊은 복사는 어떻게 하지?

# 깊은 복사

1. 배열

스프레드 연산자를 사용해준다

→ 객체를 전개해서 각 요소를 개별적인 값으로 분리해서 넣어 줌

let numbers = [1, 2, 3]
// 스프레드 연산자 사용
let newNumbers = [...numbers]
newNumbers[0] = 10
console.log(numbers)	// [1, 2, 3]
console.log(newNumbers)	// [10, 2, 3]

 

2. 객체

const obj = {
    0: 1,
    1: 2,
    2: 3,
    length: 3,
}
let newObj = obj
newObj[0] = 10
console.log(obj)		// {0: 10, 1: 2, 2: 3, length: 3}
console.log(newObj)		// {0: 10, 1: 2, 2: 3, length: 3}

우선, 그냥하면 깊은 복사가 안되는걸 알 수 있다...

그럼 어떻게 할까? 객체는 스프레드 연산자도 못 쓰는데

 

가장 간단한 방법으로는 JSON을 이용하면된다.

let newObj = JSON.parse(JSON.stringify(obj))
newObj[0] = 10
console.log(obj)		// {0: 1, 1: 2, 2: 3, length: 3}
console.log(newObj)		// {0: 10, 1: 2, 2: 3, length: 3}

하지만 JSON을 이용한 방법은 느리다.. 코테에서 사용하기엔 한계가 있음

재귀호출을 통해 해결할 수는 있지만 권장되지 않음 (그렇게 할 바엔 로직을 다시 짜는 게,,)

 

3. 2차원 이상일 때 배열의 깊은 복사는?

(찾아보기)