모던 자바스크립트 Deep Dive

[TIL/모던 자바스크립트 Deep Dive] 2023/08/10

Array.prototype.splice 🟣push, pop, unshift, shift 메서드는 모두 원본 배열을 직접 변경하는 메서드였다. 원본 배열의 처음 또는 마지막에 요소를 추가하거나 제거하는 기능을 수행했다.원본 배열의 중간에 요소를 추가하거나 제거하는 경

2023년 8월 10일1min read

27장. 배열 🟢

Array.prototype.splice 🟣

push, pop, unshift, shift 메서드는 모두 원본 배열을 직접 변경하는 메서드였다. 원본 배열의 ``처음 또는 마지막`에 요소를 `추가하거나 제거``하는 기능을 수행했다.

원본 배열의 ``중간``에 요소를 추가하거나 제거하는 경우에 splice 메서드를 사용한다. splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다.

splice 메서드의 두 번째 인수(=제거할 요소의 개수)를 0으로 지정하면, 아무런 요소도 제거하지 않고 새로운 요소들을 삽입한다.

splice 메서드의 세 번째 인수(=제거한 위치에 추가할 요소들의 목록)를 전달하지 않으면, 원본 배열에서 지정된 요소를 제거하기만 한다.

splice 메서드의 두 번째 인수를 생략하면, 첫 번째 인수로 전달된 시작 인덱스부터 모든 요소를 제거한다.

배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취득한 다음 splice 메서드를 사용한다.

MDN 왈...

filter 메서드를 사용하여 특정 요소를 제거할 수도 있다. 하지만 특정 요소가 중복된 경우 모두 제거된다.

Array.prototype.slice 🟣

slice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다. splice와 이름이 유사하니 주의하도록 하자.

slice 메서드의 두 번째 인수를 생략하면, 첫 번째 인수로 전달받은 인덱스부터 모든 요소를 복사하여 배열로 반환한다.

slice 메서드의 첫 번째 인수가 음수인 경우, 배열의 끝에서부터 요소를 복사하여 배열로 반환한다.

slice 메서드의 인수를 모두 생략하면, 원본 배열의 복사본을 생성하여 반환한다.

이때 생성된 복사본은 얕은 복사를 통해 생성된다.

slice 메서드가 복사본을 생성하는 것을 이용하여 arguments, HTMLCollection, NodeList 같은 유사 배열 객체를 배열로 변환할 수 있다고 한다.