자바스크립트의 shift() 메서드는 배열의 첫 번째 요소를 제거하고 나머지 요소들을 한 칸씩 앞으로 당깁니다. 반대로 unshift() 메서드는 배열 맨 앞에 새로운 요소를 추가하고 기존 요소들을 뒤로 밀어냅니다.
배열 맨 앞의 요소를 다뤄야 하는 상황
리스트의 시작 부분에서 항목을 추가하거나 제거해야 하는 경우가 종종 있습니다. 예를 들어 이번 달 최고 영업 사원 목록을 만든다고 생각해 보세요. 1위 영업 사원은 당연히 목록의 맨 앞에 위치해야 할 것입니다.
바로 이럴 때 자바스크립트의 shift()와 unshift() 메서드가 유용합니다. shift()는 리스트 맨 앞의 항목을 제거하고, unshift()는 리스트 맨 앞에 항목을 추가합니다. 이 두 메서드는 push(), pop()과 비슷하지만, push/pop이 배열의 끝을 다루는 것과 달리 오직 배열의 시작 부분만 다룬다는 점이 다릅니다.
이 글에서는 shift()와 unshift()를 사용해 배열 맨 앞의 요소를 제거하고 추가하는 방법을 알아보고, 각 메서드의 실제 동작 예제도 함께 살펴보겠습니다.
자바스크립트 shift() 메서드
shift()는 자바스크립트에 내장된 메서드로, 배열에서 첫 번째 요소(index 0)를 제거합니다. 이 메서드는 작업 중인 원본 배열을 직접 수정하며, 제거된 요소를 반환값으로 돌려줍니다.
shift()가 호출되면 인덱스 0에 있던 값이 사라지고, 나머지 요소들의 인덱스가 각각 하나씩 앞당겨집니다. 헷갈릴 때는 이렇게 기억하세요.
shift()는 배열의 인덱스 값을 하나씩 앞으로 '이동(shift)'시킨다.
참고로 빈 배열에 shift()를 호출하면 아무것도 제거할 것이 없기 때문에 undefined를 반환합니다.
shift() 문법
array_name.shift()
shift() 메서드는 매개변수를 받지 않습니다. 항상 배열의 첫 번째 요소만 제거하는 단일 기능을 수행하기 때문입니다. 만약 임의의 위치에서 요소를 제거할 수 있다면 매개변수가 필요하겠지만, shift()는 언제나 맨 앞의 요소만 다룹니다.
shift() 예제
예제를 통해 shift() 메서드의 동작 방식을 살펴보겠습니다.
여러분이 제약 회사 영업팀의 관리자라고 가정해 봅시다. 이번 달 최고 영업 사원 목록을 작성하려는데, 현재 가지고 있는 것은 지난달의 목록입니다. Mark는 지난달 두 주간 휴가를 다녀왔기 때문에 목록에서 제외되어야 합니다.
이럴 때 shift() 메서드를 사용해 목록 맨 앞의 이름을 손쉽게 제거할 수 있습니다.
let top_salespeople = ['Mark', 'Lucy', 'Graham', 'Carol', 'Ann']; top_salespeople.shift(); console.log(top_salespeople);
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
['Lucy', 'Graham', 'Carol', 'Ann']
코드의 흐름을 살펴보겠습니다. 첫 번째 줄에서는 영업팀 최고 판매자들을 저장하는 top_salespeople 배열을 선언했습니다. 그다음 shift() 메서드를 호출해 목록의 첫 번째 값을 제거하고, 마지막으로 console.log()로 수정된 배열을 콘솔에 출력했습니다.
결과에서 볼 수 있듯이 첫 번째 위치에 있던 Mark가 목록에서 사라졌습니다.
top_salespeople 배열에 더 이상 Mark가 없는 이유는, shift() 메서드가 원본 배열을 직접 변경하기 때문입니다. 수정된 내용으로 새로운 배열을 만들지 않는다는 점을 기억해 두세요.
자바스크립트 unshift() 메서드
자바스크립트의 unshift() 메서드는 배열의 맨 앞에 하나 이상의 요소를 추가합니다. unshift() 역시 원본 배열을 직접 변경하며, 반환값은 새로 추가된 후의 배열 길이입니다.
unshift() 문법
array_name.unshift(item_one, item_two, ...)
unshift() 메서드는 필요한 만큼 여러 개의 매개변수를 받을 수 있으며, 전달된 모든 요소가 배열의 맨 앞에 순서대로 추가됩니다.
unshift() 예제
예제를 통해 unshift() 메서드가 어떻게 동작하는지 확인해 보겠습니다.
영업팀의 Hannah가 놀라운 성과를 거두며 최고 영업 사원 목록 1위로 올라섰습니다. 우리는 top_salespeople 배열의 첫 번째 위치에 Hannah를 추가해야 합니다. 다음 코드로 이 작업을 수행할 수 있습니다.
let top_salespeople = ['Lucy', 'Graham', 'Carol', 'Ann'];
top_salespeople.unshift('Hannah');
console.log(top_salespeople);코드를 실행하면 콘솔에 다음과 같이 출력됩니다.
['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann']
Hannah의 이름이 목록 맨 앞에 추가된 것을 확인할 수 있습니다. unshift()는 shift()와 거의 같은 방식으로 동작하지만 두 가지 차이점이 있습니다. 첫째, 항목을 제거하는 대신 추가한다는 점, 둘째, 추가할 항목을 매개변수로 전달받는다는 점입니다.
그런데 영업팀이 계속 성장하면서, 입사한 지 한 달 만에 실적 상위권에 올라선 신입 사원 두 명이 생겼습니다. 이 두 사람을 top_salespeople 목록에 추가해야 합니다. Geoff가 1위, Peter가 2위에 위치해야 한다고 해보죠.
다음 코드로 최고 영업 사원 목록을 업데이트할 수 있습니다.
let top_salespeople = ['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann'];
top_salespeople.unshift('Geoff', 'Peter');
console.log(top_salespeople);실행 결과는 다음과 같습니다.
['Geoff', 'Peter', 'Hannah', 'Lucy', 'Graham', 'Carol', 'Ann']
이 두 번째 예제는 첫 번째 예제와 동일하게 동작하지만 한 가지 차이가 있습니다. 바로 unshift() 메서드에 매개변수를 하나가 아닌 두 개 전달했다는 점입니다.
결과에서 볼 수 있듯이, 전달된 요소들은 지정한 순서 그대로 목록 맨 앞에 추가됩니다. Geoff가 첫 번째, Peter가 두 번째에 위치하고 있습니다.
마무리
shift() 메서드는 배열의 맨 앞에서 요소를 제거하고, unshift() 메서드는 배열의 맨 앞에 하나 이상의 요소를 추가합니다.
이 글에서는 자바스크립트에서 shift()와 unshift()를 활용해 배열을 조작하는 방법을 알아보았고, 각 메서드가 실제로 동작하는 예제 코드도 함께 살펴보았습니다. 배열의 끝을 다루는 push()와 pop()과 함께 익혀두면 배열 데이터를 훨씬 유연하게 관리할 수 있습니다.