(29) JavaScript - 배열 메소드 (Array Method) [splice 메소드]

배열을 좀 더 안전하고 효과적으로 다루기 위해서는 배열의 메소드를 활용해야한다.

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    
    // 3. array 요소 삭제
    console.log(members);
    delete members[4]; //데셔 값이 삭제 되었으나 empty로 남아있음.
    console.log(members);

 

이전 글에 delete 연산자로 배열의 요소를 삭제하려고 했지만 완벽하게 지워지지 않았다.

배열의 요소를 삭제할 때 가장 많이 사용되는 메소드는 'splice' 라는 메소드이다.

 

splice

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    
    // array 요소 삭제
    console.log(members);
    delete members[6]; //넌적혈구 값이 삭제 되었으나 empty로 남아있음.
    console.log(members);

    //splice
    members.splice(6)
    console.log(members);

▲ 코드를보면 점 표기법으로 splice 메소드를 호출하고 있는데

삭제하고 싶은 인덱스를 파라미터.(.splice(6)) 로 전달해주면 된다.

실행해보면 4번 인덱스 값 '데셔' 가 삭제된 것을 확인할 수 있는데..

문제는 4번 인덱스를 삭제할 경우 4번 인덱스 이후 모든 요소들이 사라진다.

 즉 splice 메소드의 파라미터로 값을 하나만 전달하게 되면 

전달된 인덱스로부터 그 이후 모든 요소를 삭제해 버린다.

 

해셜방법은 splice 메소드의 두 번째 파라미터로 숫자를 전달해주면 삭제할 개수를 조절할 수 있다.

    members.splice(4, 1)
    console.log(members);

▲ 이렇게 하면 4번 인덱스'데셔' 부터 요소 한 개가 삭제된 걸 확인 할 수 있다.

 

즉 한 개 요소 삭제이므로 기준 값인 '데셔[4]'부터 '데셔[1]'까지 삭제된 것이며,

그러니까 '데셔' 만 지워진 것 이다.

한 개만 지우고 싶을 때 두 번째 숫자 값은 1로 바꿔주고

두 개만 지우고 싶을 때 두 번째 숫자 값은 2로 바꿔주면 된다.

members.splice(4, 1) //startIndex, deleteCount

 

정리하자면..

먼저 삭제를 시작할 인덱스를 첫번째 파라미터에 넣어주고 

그 뒤에 삭제할 개수를 입력해주면 된다.

만약 삭제할 개수를 전달하지 않으면 시작한 인덱스 이후 모든 요소들을 삭제한다.

이렇게 splice 메소드를 제대로 활용해서 배열의 요소를 삭제 할 수 있다.

 

그런데 splice 메소드의 용도는 이 것 말고 더 있다

---

splice 메소드로 요소를 삭제한 다음, 새로운 요소를 더 추가할 수 있다.

splice 메소드의 세 번째 파라미터는 값을 전달하게 되면 삭제한 요소 자리에 그 값이 추가된다.

members.splice(4, 1, 'index 추가(1)', 'index 추가(2)')

▲ 4번째 인덱스부터 요소 하나를 삭제하고 그 자리에 'index 추가 (1),(2)' 라는 값을 추가한다.

그러면 members의 4번 인덱스인 '데셔'가 삭제되고 그 사이에 세 번째 파라미터가 들어간다.

마찬가지로 배열의 length도 증가했다.

 

조금만 더 응용해보자

---

만약에 splice 메소드에서 삭제할 개수를 0으로 만들어주면 

그 기준으로 배열 안에 어느 곳이든 요소를 추가할 수 있다.

    members.splice(4, 0, 'index 추가(1)', 'index 추가(2)')

 

실행해보면 아무것도 삭제 되지 않고 4번 인덱스와 5번 인덱스가 추가된 것을 볼 수 있다.

 

그리고 삭제할 개수 만큼 세 번째 이후에 파라미터를 활용하면 요소를 수정 하는 것도 가능하다.

2번 인덱스에 값을 하나만 삭제하고 세 번째 파라미터 값을 넣어주면

members.splice(2, 1, 'index 추가(1)')

 

'찌듕' 이였던 2번 인덱스 요소가 수정된 것을 확인 할 수 있다.

 

마찬가지로 삭제할 요소를 두 개로 두고 세 번째 네 번째 파라미터를 활용하면

여러 요소를 수정하는 것도 가능할 것이다.

 

이렇게 splice메소드를 잘 활용하면 배열을 좀 더 자유롭게 다룰 수 있다.

---

★GitHub 주소 (배열 메소드 I)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/8.%EB%B0%B0%EC%97%B4%EB%A9%94%EC%86%8C%EB%93%9C1.html

JavaScript_soloPlay/Basic/8-객체/8.배열메소드1.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (splice 활용 예제)

https://www.notion.so/Array-Splice-112e9530b3e18129aa67d8b9c79dee74

배열 추가,삭제,수정하기 (Array Splice) | Notion