[javascript] 자바스크립트 배열 추가, 삭제, 교체

728x90

목 차

• 1. splice() 메서드
• 2. 문법
• 3. 활용 예제
  • 3-1. 요소 삭제
  • 3-2. 요소 추가
  • 3-3. 요소 교체
  • 3-4. 배열의 마지막 요소 삭제
  • 3-5. 특정 인덱스에 여러 요소 추가
• 4. 주의 사항

반응형

 

1. splice() 메서드

• JavaScript의 splice() 메서드는 배열의 특정 위치에 요소를 추가하거나 삭제하는 메서드로, 배열의 원본을 직접 수정합니다. 이 메서드는 요소를 삽입, 제거, 교체할 수 있어 다양한 용도로 활용됩니다.

 

---

 

2. 문법

• start: 배열의 변경을 시작할 인덱스입니다. 음수면 배열의 끝에서부터의 인덱스를 의미합니다.
• deleteCount (선택): 제거할 요소의 개수입니다. 0이면 요소를 삭제하지 않습니다
• item1, item2, ... (선택): 추가할 요소들입니다. 이 인수들이 지정되면 배열에 추가됩니다.
• 반환값 : 제거된 요소들을 포함한 배열을 반환합니다. 요소를 삭제하지 않았다면 빈 배열이 반환됩니다.

array.splice(start, deleteCount, item1, item2, ...)

 

---

 

3. 활용 예제

3-1. 요소 삭제

• 특정 인덱스에서 요소를 제거하고 싶을 때 deleteCount에 제거할 개수를 지정합니다.

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(1, 2);
console.log(arr);
console.log(removed);

 

 

3-2. 요소 추가

• 특정 인덱스에 요소를 추가하려면 deleteCount를 0으로 설정하고, 추가할 요소들을 item1, item2, ...로 지정합니다.

const arr = [1, 2, 3];
arr.splice(1, 0, "a", "b");
console.log(arr);

 

 

3-3. 요소 교체

• 특정 위치에서 요소를 제거하고 새로운 요소로 교체할 수도 있습니다.

const arr = [1, 2, 3, 4, 5];
const replaced = arr.splice(1, 2, "a", "b");
console.log(arr);      
console.log(replaced);

 

 

3-4. 배열의 마지막 요소 삭제

• 배열의 끝에서부터 요소를 제거할 때 splice()를 사용할 수 있습니다.

const arr = [1, 2, 3, 4];
arr.splice(-1, 1);
console.log(arr);

 

 

3-5. 특정 인덱스에 여러 요소 추가

• splice()를 이용해 여러 요소를 특정 위치에 한꺼번에 추가할 수 있습니다.

const arr = [1, 4, 5];
arr.splice(1, 0, 2, 3);
console.log(arr);

 

 

---

 

4. 주의 사항

• 원본 배열 수정: splice()는 원본 배열을 직접 수정합니다.
• 음수 인덱스: start 인덱스에 음수를 사용하면 배열의 끝에서부터 위치를 계산합니다.
• 삭제된 요소 반환: 반환값으로 삭제된 요소들이 배열로 반환되므로, 필요 시 이를 변수에 저장할 수 있습니다.
• deleteCount가 배열 길이보다 클 경우: deleteCount가 배열의 남은 요소보다 크면 끝까지 모든 요소가 삭제됩니다.

 

---

 

관련글

• [javascript] 소수점 자르기 활용
• [javascript] 현재 URL 정보 가져오기 (window.location)
• [javascript] 자바스크립트 배열 함수들 정리 (4)