6.4.3 slice(), splice() 메서드를 이용한 데이터 추출

6.4.3 slice(), splice() 메서드를 이용한 데이터 추출

slice(), splice() 메서드는 배열로부터 해당 배열 안에 있는 하부 요소들로 이루어진 배열을 추출할 때 사용하는 메서드들로 다음과 같은 형식을 사용합니다.

array.slice(start, end);
array.splice(index [, length, x, y, …] );

먼저 slice() 메서드는 배열로부터 특정 요소로 구성된 하부 배열을 추출하는데 사용되는 메서드로 위에서 start는 시작할 인덱스 번호를 나타내고 end는 마지막 인덱스 번호를 나타내며 추출된 데이터들은 새로운 배열의 형태로 반환되며 기존의 배열은 변하지 않습니다.
다음으로 splice() 메서드는 위에서 length의 값에 따라서 기존 배열에서 특정 요소(들)을 삭제하고 삭제된 요소(들)을 배열의 형태로 반환하거나 기존 배열에 새로운 요소(들)을 추가하는데 사용되는 메서드로 index는 시작 위치를 나타내고 옵션인 length는 0 보다 큰 값을 명시하면 삭제가 발생하고 이 과정에서 삭제된 데이터들을 포함하는 배열의 형태로 반환이 일어납니다.
하지만 length가 0이거나 명시하지 않으면 삭제가 발생하지 않습니다. 다음으로 x, y,…는 기존 배열에 새로운 데이터를 추가할 때 사용합니다.
이제 메모장으로 “popshiftEx.html”을 열고 <script> … </script> 블록 내 코드를 다음과 같이 변경합니다.

  <script type="text/javascript">  
    //slice() 메서드를 이용한 추출
    var Items = [1, 2, 3, 4, 5, "야구", "축구", 8];  //--①
    var extracted = Items.slice(4, 7);            //--②
    document.write(extracted+"<br />");       //--③
    document.write(Items+"<br />");          // --④
    document.write("<hr>");

    // splice() 메서드를 이용한 추출
    var train = ["KTX", "새마을호", "통일호", "무궁화호", "완행열차"];  //--⑤
    var deleteditems = train.splice(1,2);                          //--⑥
    document.write("삭제된 데이터들 : " + deleteditems + "<br />"); //--⑦
    document.write(train+"<br />");                               //--⑧
    document.write("<hr>");

    // splice() 메서드를 이용한 요소 추가
    var cities = ["서울", "부산", "인천"];                             //--⑨ 
    var addeditems = cities.splice(1, 0, "대전", "대구");               //--⑩
    document.write("추가된 데이터들 : " + addeditems + "<br />");  //--⑪
    document.write(cities+"<br />");                               //--⑫
</script>

먼저 “//slice() 메서드를 이용한 추출” 부분을 자세히 그림을 그려서 나타내면 다음과 같습니다.

위 그림에 나타낸 것처럼 ②를 통해서 인덱스가 4인 요소부터 시작해서 인덱스가 7인 요소까지를
slice() 메서드로 명시하면 실제 추출되는 요소들은 인덱스가 7인 요소를 제외하고 추출됩니다.

다음으로 “// splice() 메서드를 이용한 추출” 부분을 자세히 그림으로 나타내면 다음과 같습니다.

위 그림에서 ⑤를 통해 5개의 요소가 들어있는 train 배열로 초기화한 후 ⑥을 통해 인덱스 번호가 1부터 길이가 2 만큼의 요소를 train 배열로부터 삭제하고 해당 2개의 요소들을 포함하는 하부 배열을 반환하므로 ⑦에서 삭제된 요소들로 구성된 배열의 요소들을 출력하고 ⑧에서는 2개의 요소들이 삭제된 상태로 출력되게 됩니다.
“// splice() 메서드를 이용한 요소 추가” 부분은 length가 0으로 명시되었을 때 새로운 요소들인 “대전”, “대구”가 해당 위치에 추가되는 것을 나타냅니다.
이제 다른 이름으로 저장을 선택하여 “slicespliceEx.html”로 저장하고 IE9를 통해 확인하면 다음과 같이 나타나게 됩니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.