[javascript] 배열1 - 얕은 복사, 깊은 복사

얕복, 깊복 초면일 때 내 감상

 

처음 얕은 복사, 깊은 복사를 접했을 때 도대체 무슨 소린지 몰라서 두통이 왔던 기억이 있다.

알아보자 얕은 복사와 깊은 복사!

 

 

여기 배열이 있다.

const seventeen = ["SCOUPS", "JEONGHAN", "JOSHUA"]

 

seventeen95와 같은 값을 가진 새로운 배열을 만들고 싶다. 그럴 때 사용할 수 있는 방법은 다음과 같다. 

 

1. 스프레드 연산자

스프레드 연산자를 사용하면 seventeen 배열안이 있는 값이 seventeen95에 복사된다.

const seventeen95 = [...seventeen]

console.log(seveteen95) // ["SCOUPS", "JEONGHAN", "JOSHUA"]

 

 

1. Array.slice() 메서드 

slice() 메서드는 배열의 데이터를 처음부터 끝까지(매개변수에 값을 지정해 주지 않았을 때 )새로운 객체로 반환해준다.

const seventeen95 = seventeen.slice()

console.log(seventeen95) // ["SCOUPS", "JEONGHAN", "JOSHUA"]

 

 

1. Array.from() 메서드 

from() 메서드는 유사 배열 객체 (array-like object)나 반복 사능한 객체(iterable object)를 복사해 새로운 객체로 반환해준다.

const seventeen95 = Array.from(seventeen)

console.log(seventeen95) // ["SCOUPS", "JEONGHAN", "JOSHUA"]

 

이 세가지 방법은 얕은 복사 방법이다. 

데이터 값이 원시타입일 경우 (숫자나 문자열같은) 데이터 값이 복사가 되서 기존 배열에 새로운 데이터가 추가되도

복사한 배열에 영향이 없다. 

 seventeen.push("JUN")
 
 console.log("seventeen : ", seventeen, "seventeen95 : ", seventeen95)
 
 // seventeen : ["SCOUPS", "JEONGHAN", "JOSHUA", "JUN"]
 // seventeen95 : ["SCOUPS", "JEONGHAN", "JOSHUA"]
 // 기존 배열에 데이터가 추가되고 복사한 배열에는 값이 변하지 않는다.

 

복사하는 데이터가 원시타입이 아닌 참조타입일 경우에 문제가 생긴다.

참조타입의 경우 데이터가 아닌 참조값이 복사되기 때문에 기존 데이터 값이 변하면 복사한 데이터 값에도 영향이 생긴다.

 

const seventeen = [["ESCUPS", "JUNGHAN", "JOSHUA"], ["JUN", "HOSHI"]]

const svt = [...seventeen]

seventeen[1].push("WONWOO") // 기존 배열에 데이터 추가

console.log(svt)

// 0 : ['ESCUPS', 'JUNGHAN', 'JOSHUA'], 1 :  ['JUN', 'HOSHI', 'WONWOO']
// 복사한 배열에도 값이 추가된다.

 

참조타입의 데이터를 그대로 복사하는 방법이 깊은 복사다.

깊은 복사를 하는 방법으로는 

JSON.stringify()를 사용해 배열을 JSON문자열로 변환한 뒤, JSON.parse()로 다시 배열로 만들어주는 방법이 있다.

 

const svt = JSON.parse(JSON.stringify(seventeen))

 

그리고 또 어떤 방법이 있는지는 모르겠다! 그래서 이 방법만 적겠습니다. 

자바스크립트 강의와 Mdn의 Array 페이지를 공부하면서 적었으니 링크를 첨부해두겠습니다. 

 

Mdn Array <- 참고 페이지

 

야~호