JavaScript의 배열에서 첫 번째 요소 제거

JavaScript 배열의 첫 번째 요소를 제거하려면 원본 배열을 변경하는 shift() 또는 splice(0, 1)을 사용하세요. 원본을 보존해야 한다면 slice(1) 또는 filter()로 새 배열을 만들 수 있습니다. shift()는 제거한 요소를 단일 값으로 반환하고, splice(0, 1)은 배열로 반환합니다.

원본 배열을 변경해 첫 번째 요소 제거

shift()와 splice()는 모두 원본 배열에서 요소를 제거합니다. 항상 첫 번째 요소를 제거하려면 shift()를 사용하고, 지정한 인덱스에서 제거하거나 여러 요소를 제거하려면 splice()를 사용하세요.

shift()는 인덱스 0의 요소를 제거하고 나머지 요소를 앞으로 이동한 뒤, 제거한 값을 반환합니다. 다음 예제에서 변경된 배열과 반환된 값을 확인할 수 있습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const items = ["first", "second", "third"];
const removed = items.shift();
console.log(JSON.stringify({ items, removed }));

{"items":["second","third"],"removed":"first"}

이 코드가 실행되면 items에는 마지막 두 문자열이 남고, removed에는 "first"가 들어갑니다. JavaScript 런타임에서 JSON.stringify()를 사용하면 출력 객체를 한 줄의 JSON으로 표시할 수 있습니다. 예제의 출력에는 남은 배열과 제거된 값이 나타나며, 문자열 값은 코드와 동일하게 영어로 표시됩니다.

위치를 지정해야 할 때는 splice(start, deleteCount)를 사용하세요. 첫 번째 요소를 제거하려면 start에 0, deleteCount에 1을 전달합니다. 원본 배열은 변경되고, 메서드는 제거된 요소를 담은 배열을 반환합니다. 예를 들어 const values = ["red", "green", "blue"]일 때 const removed = values.splice(0, 1)을 실행하면 values는 ["green", "blue"]가 되고 removed는 ["red"]가 됩니다.

start는 이동 방향이 아니라 인덱스를 지정합니다. 음수가 아닌 인덱스는 처음부터 세고, 음수 인덱스는 끝에서부터 셉니다(-1은 마지막 요소를 가리킵니다). deleteCount는 해당 위치에서 제거할 요소의 개수입니다. 이 값을 생략하면 splice()는 start부터 끝까지의 모든 요소를 제거합니다. deleteCount 뒤에 요소를 전달하면 해당 위치에 삽입됩니다. 매개변수의 전체 동작은 MDN splice() 참고 문서에서 확인할 수 있습니다.

원본 배열을 변경하지 않고 첫 번째 요소 제거

slice()와 filter()는 새 배열을 반환하며 입력 배열은 변경하지 않습니다. 첫 번째 요소 뒤의 모든 요소를 복사하는 간단한 방법은 slice(1)입니다. start 인덱스는 결과에 포함되고, 선택 사항인 end 인덱스는 포함되지 않습니다. 따라서 values.slice(1)은 인덱스 1부터 끝까지 복사하며 values에서 요소를 제거하지 않습니다. 자세한 내용은 slice() 안내서와 MDN slice() 참고 문서를 확인하세요. 연결된 안내서는 영어로 제공되며, 한국어 대상 페이지는 제공되지 않습니다.

조건에 따라 요소를 제거하려면 filter()를 사용하세요. 콜백은 각 요소에 대해 실행되며, 콜백이 true를 반환하는 요소는 새 배열에 포함됩니다. 첫 번째 위치만 건너뛰려면 인덱스를 기준으로 필터링하면 됩니다.

const remaining = values.filter((item, index) => index > 0);

이렇게 하면 이후 요소의 기존 순서가 유지되고 values도 그대로 보존됩니다. 인덱스를 기준으로 필터링하는 것은 위치에 따른 규칙입니다. 배열의 순서를 이미 바꿨더라도 값이 무엇인지와 관계없이 현재 인덱스 0에 있는 요소를 제외합니다.

예를 들어 const values = ["red", "green", "blue"]일 때 values.slice(1)과 values.filter((item, index) => index > 0)은 모두 ["green", "blue"]를 담은 새 배열을 만들며, values는 ["red", "green", "blue"]로 유지됩니다.

배열에 필요한 방식에 맞춰 메서드 선택

• 원본 배열을 변경하고 제거된 요소를 단일 값으로 받아야 한다면 shift()를 사용하세요.
• 원본을 변경하면서 제거된 요소를 배열로 받는 편이 유용하거나, 다른 위치와 개수를 지정해 제거하려면 splice(0, 1)을 사용하세요.
• 첫 번째 요소 뒤의 모든 요소를 담은 새 배열이 필요하면 slice(1)을 사용하세요.
• 유지할 요소를 조건으로 정해야 한다면 filter()를 사용하세요. 인덱스 조건만으로도 첫 번째 위치를 제외할 수 있습니다.

핵심은 다른 코드에서 원본 배열을 계속 사용해야 하는지 여부입니다. 원본을 변경하는 메서드는 공유 배열을 수정하므로 그 배열을 참조하는 코드에서도 변경 사항이 보입니다. 원본을 변경하지 않는 메서드는 배열을 보존하고 별도의 결과를 반환합니다. 네 메서드 모두 유지된 요소의 상대적인 순서를 보존합니다.