Splice - 배열 메서드

 

Splice

배열 메서드 : splice()

배열 요소를 다른 요소로 변경하는 메서드 입니다. 반환하는 값은 배열로 나타납니다.
문법은 splice(자르는 위치, 갯수, 요소1, 요소2,...)로 나타냅니다.

---

예제로 확인해봅시다.

    const arr1 = [1,2,3,4,5];

    const result = arr1.splice(2);

    console.log(result); //3,4,5
    console.log(arr1); //1,2

해당 result는 3,4,5 가 나왔는데요. arr1은 1,2만 나오도록 변경되었습니다. 문법의 인자값 중 자르는 위치만 설정해주어서 2 번째 위치에서 자르고난 뒤, 별 다른 명령이 없으면 나머지 값을 도출합니다. 순서를 왼쪽에서 오른쪽으로 읽습니다. 자르는 위치가 헷갈리기도 하는데요. 배열의 요소들 사이의 빈칸을 1칸으로 생각하셔도 되고 0번째 부터 세는게 편하면 제일 첫번째 왼쪽 공백부터 세도 됩니다. 순서대로 자른다. 라고 생각하면 이해가 조금 쉬울 것 같습니다. 계속 해보고 익숙해지는게 중요한 것 같아요. 다음 예제로 보겠습니다.

    const arr2 = [1,2,3,4,5,6,7]

    const result = arr2.splice(2,3);

    console.log(result); //3,4,5
    console.log(arr2); //1,2,6,7

해당 예제도 3,4,5가 result 값으로 나왔는데요.arr2는 1,2,6,7로 변경되었습니다. 이것은 자르는 위치와, 자르고 난 다음 선택할 갯수만 지정해 주어서 2번째에서 자르고, 3개를 변경하자~ 는 뜻입니다. 그래서 2에서 자르고 3,4,5가 날아가게 됩니다. 그리고 남은 요소들이 출력됩니다.
다음 예제도 살펴봅시다.

    const arr3 = [1,2,3,4,5,6,7];

    const result = arr3.splice(2,3,100,200,300);

    console.log(result); //3,4,5 (변경할 대상 입니다.)
    console.log(arr3); //1,2,100,200,300,6,7

이번에는 세번째 명령 값 까지 넣어서 작성해보았습니다. 아까와 똑같이 3,4,5가 날아가고(result로 반환되고) 그 자리에 100,200,300이 arr3으로 들어가는 걸 볼 수 있죠. 이렇게 splice는 자르고난 뒤 몇개를 어떻게 바꿀건지 정해주면 됩니다. 이렇게 짧은 배열을 예시로 들었지만 수정하기 어려운 복잡한 배열에서 사용하면 편하게 사용할 수 있을것 같습니다. splice는 바꾸는 요소를 숫자 뿐만 아니라 문자열에도 사용할 수 있습니다.

    const arr4 = [1,2,3,4,5,6,7];

    const result = arr4.splice(2,3,"a","b","c");

    console.log(result); //3,4,5 (변경할 대상 입니다.)
    console.log(arr4); //1,2,a,b,c,6,7

이상으로 배열 메서드 :splice의 간단한 설명을 마칩니다.