[JavaScript]배열 첫 번째 요소 제거

자바스크립트(JavaScript)에서 배열의 첫 번째 요소를 제거하는 대표적인 방법으로 shift(), splice(), slice() 함수를 사용할 수 있습니다.

---

shift 함수

shift() 함수는 인수를 가지지 않습니다. shift() 함수는 배열의 첫 번째 요소를 반환하고 해당 요소를 제거합니다. 

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

const firstItem = arr.shift();

console.log(firstItem);
// 1

console.log(arr);
// [2, 3, 4, 5]

빈 배열에서 shift() 함수를 호출하면 undefined를 반환하며, 배열에 요소가 존재하지 않으므로 요소가 제거되지 않습니다.

const arr = [];

const firstItem = arr.shift();

console.log(firstItem);
// undefined

console.log(arr);
// []

shift는 해석하면 '옮기다, 이동하다'라는 의미라서 0번째 인덱스의 요소를 제거 후 나머지 값들을 한 칸씩 앞으로 당기는 역할을 합니다. shift라는 단어가 "제거"보다는 "이동" 또는 "교체"라는 의미에 가까워서 shift() 함수를 부정적으로 보는 개발자들이 존재합니다.

반응형

---

splice 함수

splice() 함수를 사용하여 배열의 첫 번째 요소를 제거하기 위해서는 두 개의 인수를 전달해야 합니다. 첫 번째 인수는 시작 위치입니다. 배열의 첫 번째 요소를 제거하므로 첫 번째 인수의 값은 0입니다.

 

두 번째 인수는 삭제하려는 요소의 개수입니다. 하나의 요소만 제거하므로 두 번째 인수의 값은 1입니다.

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

const firstItem = arr.splice(0, 1)

console.log(firstItem);
// [1]

console.log(arr);
// [2, 3, 4, 5]

splice() 함수는 shift() 함수와 다르게 제거된 항목을 배열로 반환합니다.

---

slice 함수

slice() 함수는 시작 위치와 마지막 위치를 설정하여 얕은 복사본을 새로운 배열로 반환합니다. 첫 번째 인수는 시작 위치입니다. 배열의 첫 번째 위치부터 복사하므로 첫 번째 인수의 값은 1입니다.

 

두 번째 인수는 마지막 위치입니다. 배열의 마지막 요소까지 복사하므로 생략합니다.

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

const copyArr = arr.slice(1)

console.log(copyArr);
// [2, 3, 4, 5]

console.log(arr);
// [1, 2, 3, 4, 5]

slice() 함수는 shift(), splice() 함수와는 다르게 원래 배열의 내용을 변경하지 않고 새로운 배열을 반환합니다.