[배열] 05. 배열 메소드 (1)

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

delete 연산자로 배열의 요소를 삭제하면 완벽하게 삭제가 되지 않습니다.

// 배열의 메소드 (Array's Method)
let members = ['쿤갈레','Zerrard66','우리생각해써','흙토끼','End Miracle'];

console.log(members);
delete members[4];
console.log(members);

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

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

위 코드를 보면 members 다음에 점 표기법으로 slice 메소드를 호출하고 있는데, 삭제하고 싶은 인덱스를 파라미터로 전달해 주면 됩니다. 저장하고 실행해 보면 4번 인덱스 값이 삭제된 것을 확인할 수 있습니다.

delete를 사용했을 때는 length가 5인데 slice 메소드를 사용하면 4로 변경됩니다.

 

그런데 여기서 1번 인덱스를 삭제하고 싶어서 파라미터로 1을 전달해 주면 1번 인덱스 이후에 모든 요소들이 삭제되어 버립니다.

slice 메소드의 파라미터로 값을 하나만 전달하게 되면 전달된 인덱스로부터 그 이후에 모든 요소를 삭제해 버립니다.

// splice(startIndex, deleteCount, item)
members.splice(1, 1, 'NiceCodeit','HiCodeit'); 
// 1번 인덱스 부터 요소 하나를 삭제하고 그 자리에 'NiceCodeit','HiCodeit' 값을 추가
console.log(members)

그래서 splice 메소드의 두 번째 파라미터로 숫자 값을 하나 더 전달해 주면 삭제할 개수를 조절할 수 있습니다. 두 번째 값으로 2를 전달해 주면 1번 인덱스부터 요소가 두 개 삭제된 것을 확인할 수 있습니다. 한 개만 지우고 싶을 때는  두 번째 숫자 값을 1로 바꿔 주면 됩니다.

 

정리해보면 먼제 삭제를 시작할 인덱스를 첫 번째 파라미터로 넣어 주고 삭제할 개수를 입력해주면 깔끔하게 배열의 요소를 삭제할 수 있습니다. 만약 삭제할 개수를 전달하지 않으면 시작한 인덱스 이후에 모든 요소들이 삭제됩니다.

 

splice 메소드로 요소를 삭제한 다음에 새로운 요소를 더 추가할 수 있는데, splice 메소드의 세 번째 파라미터는 값을 전달하게 되면 삭제한 요소 자리에 그 값이 추가됩니다.

// splice(startIndex, deleteCount, item)
members.splice(1, 0, 'NiceCodeit','HiCodeit'); 
// 요소 하나를 삭제하지 않고 1번 인덱스에 자리에 'NiceCodeit','HiCodeit' 값을 추가
console.log(members)

splice 메소드에서 삭제할 개수를 0으로 만들어 주면 첫 번째와 세 번째 파라미터로 이후의 파라미터로 배열 안에 어느 곳이든 요소를 추가할 수 있습니다. 저장하고 실행해보면 아무것도 삭제되지 않고 1번 인덱스에 'NiceCodeit'과 'HiCodeit'이 추가된 것을 확인할 수 있습니다.

// splice(startIndex, deleteCount, item)
members.splice(2, 1, 'MaumNo'); 
// 요소 하나를 삭제하지 않고 1번 인덱스에 자리에 'NiceCodeit','HiCodeit' 값을 추가
console.log(members)

세 번째 이후에 파라미터를 활용하면 요소를 수정하는 것도 가능합니다. 2번 인덱스에 값을 하나만 삭제하고 'MaumNo'를 넣어주게 되면 저장하고 실행했을 때 2번 인덱스에 있는 요소가 수정된 결과를 확인할 수 있습니다. 만약 삭제할 요소를 두개로 두고 세 번째, 네 번째 파라미터를 활용하게 되면 여려 요소를 수정하는 것도 가능합니다.