Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript 배열에서 특정 요소를 제거하는 방법 – splice() 메서드 활용 가이드

splice() 메서드란?

JavaScript 배열에서 요소를 제거하려면 splice() 메서드를 사용합니다. splice() 메서드는 배열의 내용을 직접 변경하며, 기존 요소를 제거하거나 새로운 요소를 추가하는 두 가지 작업을 동시에 수행할 수 있습니다.

특히 이 메서드는 원본 배열 자체를 수정하며, 제거된 요소들을 담고 있는 배열을 반환한다는 점이 중요한 특징입니다.

splice() 메서드의 매개변수

  • index − 배열 변경을 시작할 시작 인덱스 위치입니다.

  • howMany − 제거할 기존 배열 요소의 개수를 나타내는 정수입니다. 만약 howMany가 0이면 어떤 요소도 제거되지 않습니다.

  • element1, ..., elementN − 배열에 새로 추가할 요소들입니다. 요소를 지정하지 않으면 splice()는 단순히 해당 위치의 요소들만 제거합니다.

참고로 howMany 매개변수를 생략하면 시작 인덱스부터 배열 끝까지의 모든 요소가 제거됩니다.

예제

다음 코드를 실행해 보면 JavaScript 배열에서 개별 요소를 추가하고 제거하는 방법을 쉽게 이해할 수 있습니다.

<html>
   <head>
      <title>JavaScript Array splice Method</title>
   </head>
   
   <body>
      <script>
         var arr = ["orange", "mango", "banana", "sugar", "tea"];

         var removed = arr.splice(2, 0, "water");
         document.write("After adding 1: " + arr );
         document.write("<br />removed is: " + removed);

         removed = arr.splice(3, 1);
         document.write("<br />After adding 1: " + arr );
         document.write("<br />removed is: " + removed);
      </script>
   </body>
   
</html>

실행 결과

After adding 1: orange,mango,water,banana,sugar,tea
removed is: 
After adding 1: orange,mango,water,sugar,tea
removed is: banana

코드 설명

위 예제에서 첫 번째 arr.splice(2, 0, "water") 호출은 인덱스 2 위치에 아무것도 제거하지 않고(howMany가 0) "water"라는 새 요소를 삽입합니다. 따라서 반환되는 값은 빈 배열입니다.

두 번째 arr.splice(3, 1) 호출은 인덱스 3에 있는 요소 하나를 제거합니다. 이때 제거된 요소인 "banana"가 반환되는 것을 확인할 수 있습니다.