자바스크립트 : Slice vs Splice 차이점 비교 (깊은 복사, 얕은 복사)

Javascript에서 배열의 slice 메서드에 대해 알아보겠습니다.

 

보통 Splice와 Slice는 배열의 일부분을 잘라내어 새로운 배열을 만들고 싶을때 보통 사용하는데요, 

 

저도 Splice와 Slice의 차이점을 알지못하고 썼는데, 잘 알고 쓰면 좋을것 같아서 정리를 하게 되었습니다.

 

 

Slice 사용법 (깊은 복사)

 

slice는 원본 배열을 바꾸지 않습니다.

 

slice는 인자가 1개일때는 첫번째 인자로 받은 배열의 인덱스로부터 마지막 배열값 까지의 값들로 만든 새로운 배열을 반환합니다.

 

slice는 인자가 2개일때는 첫번째 인자로 받은 배열의 인덱스부터 마지막 인자로 받은 인덱스 -1 까지의 값들로 만든 새로운 배열을 반환합니다.

 

slice는 깊은 복사의 방법입니다. 즉 원본 배열의 값만을 복사해서 결과로 반환합니다.

const animals = ["ant", "bison", "camel", "duck", "elepant"];
console.log(animals.slice(2)); // ["camel", "dock", "elepant"]
console.log(animals.slice(2, 4)); // ["camel", "duck"]
console.log(animals.slice(1, 5)); // ["bison", "camel", "duck", "elephant"]
console.log(animals); // ["ant", "bison", "camel", "duck", "elepant"]

위와 같이 깊은 복사를 통해 값을 복사하기 때문에 원본 배열(animals)에 대한 값에는 변화가 없는 것을 확인 하실수 있습니다.

 

 

Splice 사용법 

 

splice는 원본 배열을 바꿉니다.

 

slice는 인자가 1개일때는 첫번째 인자로 받은 배열의 인덱스로부터 마지막 배열값 까지 원본 배열에서 잘라내서 반환합니다.

 

slice는 인자가 2개일때는 첫번째 인자로 받은 배열의 인덱스부터 마지막 인자로 받은 인덱스 -1 까지 원본 배열에서 잘라내어 반환합니다. 

 

const animals = ["ant", "bison", "camel", "duck", "elepant"];
console.log(animals.splice(4)); // ["elepant"]
console.log(animals); // ["ant", "bison", "camel", "duck"]
console.log(animals.splice(2, 4)); // ["camel", "duck"]
console.log(animals); // ["ant", "bision"]

위에서 확인해보면 splice를 할때마다 원본 배열이 바뀌는 것을 확인하실수 있습니다.

 

 

 

참고

slice vs splice

• https://im-developer.tistory.com/103