자바스크립트의 slice와 splice 비교

문제 2

// <pass>부분에 배열 내장함수를 이용하여 코드를 입력하고
// 다음과 같이 출력되게 하세요.

var arr = [200, 100, 300];
// pass
console.log(arr);

// 출력
// [200, 100, 10000, 300]

배열사이에 넣는 방법

배열의 값을 쉽게 불러오는 방법은 slice와 splice가 있다.

slice(beginIndex, end)는 원본배열을 건드리지 않고, 배열의 얕은 복사본을 beginIndex 부터 end(end는 미포함)를 리턴한다.
그에 반해 splice는 기존배열요소를 삭제, 추가, 교체한다.
둘의 이름이 비슷하지만 기존배열을 건드리는 지 아닌지, 새 값을 추가 및 수정하는 지 안하는 지 등의 큰 차이가 있다.

풀이1

var arr = [200, 100, 300];
var frontArr = arr.slice(0, 2); // [200, 100];
var endArr = arr.slice(2); // [300]

arr = [...frontArr, 10000, ...endArr];
console.log(arr); // [200, 100, 10000, 300]

slice의 경우 얕은 복사본을 반환하기 때문에 저런식으로 새로운 배열들을 만들어서 할당해줄 수 있다.

풀이 2

var arr = [200, 100, 300];

arr.splice(2, 0, 10000);

console.log(arr);

인덱스 2번에 해당 하는 자리에 하나로 삭제하지 않고(0), 10000을 넣는다.
splice를 이용하면 문제를 간단하게 해결할 수 있다.

//arr이 [200, 100, 300] 일때
arr.splice(0, 1, 500, 600);
//인덱스 0번자리부터 1개를 삭제하고, 500과 600을 넣는다.
// [500, 600, 100, 300]이 됨

간단하게 기존 배열에 값을 추가하고 싶을 때는 splice를 이용하자 !