[Javascript] splice 기능 - 배열에서 원하는 요소 제거, 추가

자바스크립트에서 배열의 맨 앞과 맨 뒤 요소를 제거하거나 추가하는 방법은 비교적 간단했다. 그렇다면 원하는 위치의 요소를 제거하거나 다른 값으로 바꾸기 위해서는 어떤 기능을 사용해야 할까?

 

 

 

 

목차

1. 배열에서 원하는 요소 제거하기
2. 배열에서 요소 제거 후 다른 값 넣기

 

 

 

 

 

1. 배열에서 원하는 요소 제거하기

맨 앞과 맨 뒤 요소가 아닌 중간에 있는 요소를 제거하기 위해서는 splice 기능을 사용하면 된다. splice의 첫 번째 숫자는 인덱스이고 두 번째 숫자는 해당 인덱스의 요소를 포함하여 제거할 요소의 개수를 나타낸다.

 

const array = ['a', 'b', 'c', 'd'];
array.splice(1, 1); // 인덱스 1인 요소를 포함하여 1개 요소 삭제

console.log(array);

// 결과 : ["a", "c", "d"]

 

const array = ['a', 'b', 'c', 'd'];
array.splice(0, 3); // 인덱스 0인 요소를 포함하여 3개 요소 삭제

console.log(array);

// 결과 : ["d"]

 

 

splice에 숫자 값을 한 개만 넣으면 해당 인덱스부터 마지막 요소까지 모두 제거한다.

 

const array = ['a', 'b', 'c', 'd'];
array.splice(1); // 인덱스 1인 요소를 포함하여 마지막 요소까지 모두 삭제

console.log(array);

// 결과 : ["a"]

 

 

 

 

 

2. 배열에서 요소 제거 후 다른 값 넣기

splice를 사용하여 요소를 제거한 후 그 자리에 원하는 다른 값을 넣을 수 있다. 인덱스 값, 삭제 갯수, 추가 요소 순서대로 값을 넣어주면 된다.

 

const array = ['a', 'b', 'c', 'd'];
array.splice(1, 2, 'x', 'y'); // 인덱스 1인 요소를 포함하여 2개 요소 삭제 후, 'x', 'y' 요소를 그 자리에 넣는다.

console.log(array);

// 결과 : ["a", "x", "y", "d"]

 

 

추가하는 요소의 갯수는 삭제 요소 개수와 맞지 않아도 된다.

 

const array = ['a', 'b', 'c', 'd'];
array.splice(1, 2, 'x'); // 인덱스 1인 요소를 포함하여 2개 요소 삭제 후, 'x' 요소를 그 자리에 넣는다.

console.log(array);

// 결과 : ["a", "x", "d"]

 

const array = ['a', 'b', 'c', 'd'];
array.splice(1, 2, 'x', 'y', 'z'); // 인덱스 1인 요소를 포함하여 2개 요소 삭제 후, 'x', 'z' 요소를 그 자리에 넣는다.

console.log(array);

// 결과 : ["a", "x", "y", "z", "d"]

 

 

[Javascript] slice() 사용법, splice()와 비교