183일차 - slice & splice 차이점

김민찬·2021년 11월 9일

slice splice 프로그래밍

취업으로의 여정

목록 보기

189/196

정의

먼저 slice와 splice 각가의 정의를 보자면 다음과 같다.

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

가장 핵심이 되는 차이는 bold로 바꾼 두 문장이다.
이 내용을 이해하려면 얕은 복사와 깊은 복사에 대한 기초적인 지식이 필요하다.

얕은 복사 vs 깊은 복사(Shallow Copy vs Deep Copy)

얕은 복사는 최소한의 복사를 한다. 값을 복사한다 하더라도, 인스턴스가 메모리에 새로 생성되지 않는다. 값 자체를 복사하는 것이 아니라 주소값을 복사하여 같은 메모리를 가리키기 때문이다.

얕은 복사 예

const name = ['chan', 'seil'];
const developer = name;
name.push('son');

console.log(name); // ['chan', 'seil', 'son'];
console.log(developer); // ['chan', 'seil', 'son'];

배열 name에 'son'을 push 했는데, developer 배열에도 변화가 일어났다.

깊은 복사는 데이터 자체를 복사한다. 복사된 두 객체는 완전히 독립적인 메모리를 차지한다

쉽게 예제로 볼 수 있는 방법은 spread를 사용하는 방법이다.

!! 하지만 이 방법은 단순한 예제일 뿐 완벽하게 깊은복사가 되지 않는다. 깊이가 2 이상부터는 얕은 복사가 됨으로 재귀를 사용해야 한다.

const name = ['chan', 'seil'];
const developer = [...name];
name.push('son');

console.log(name); // ['chan', 'seil', 'son'];
console.log(developer); // ['chan', 'seil'];

slice와 splice 차이 예시

slice는 원본 배열에 영향을 주지 않는다.

const alphabet = ['a', 'b', 'c', 'd', 'e'];
const arr = alphabet.slice(0, -1); // 'e'를 제외하고 복사

console.log(alphabet) // ['a', 'b', 'c', 'd', 'e'];
console.log(arr) // ['a', 'b', 'c', 'd'];

splice는 원본 배열에 영향을 준다.

const alphabet = ['a', 'b', 'c', 'd', 'e'];
const arr = alphabet.splice(4);

console.log(alphabet) // ['a', 'b', 'c', 'd'];
console.log(arr) // ['e'];