shift unshift 자바스크립트 배열 추가/제거

자바스크립트의 shift() 메소드는 배열의 첫 번째 요소를 제거하고 뒤에 있는 요소들을 한 칸 씩 당깁니다.

반면 unshift() 메소드는 배열의 첫 번째 항목에 새 요소를 추가하고 원래 있던 요소들을 한 칸 씩 뒤로 밉니다.

이 메소드들을 사용하면 배열의 시작 부분에서 항목을 추가하거나 제거할 수 있습니다.

push(), pop() 메소드는 배열의 끝에 요소를 추가/제거하는 반면 shift(), unshift() 메소드는 배열의 시작 부분에서 추가 제거 작업을 합니다.

Table of Contents

자바스크립트 shift

이 메소드는 배열의 첫 번째 요소를 제거하는 자바스크립트의 빌트인 메소드로 배열을 직접 수정하고 제거된 요소를 리턴합니다.

작동 방법은 index 위치 0에 있는 항목을 제거하고 뒤따르는 요소들의 index 값을 1씩 낮춥니다.

빈 배열에 이 메소드를 사용하면 undefined를 리턴합니다.

문법 구문은 다음과 같습니다:

arrayName.shift();

위의 구문에서 보는 바와 같이 이 메소드는 매개변수를 받기 않습니다. 이는 배열의 시작 부분에 있는 항목을 제거한다는 하나의 기능만을 하기 때문에 별다른 매개변수가 필요하지 않습니다.

메소드의 작동 방식을 알아보기 위해 다음의 예제를 살펴보겠습니다.

영업팀의 관리자가 이번 달 최고의 영업사원 목록을 작성하려고 합니다. 우선 지난달 최고의 영업사원 목록을 가지고 있고, 목록의 맨 앞에 있는 Mark를 제거하려고 합니다. Mark는 2주 동안 휴가를 갔기 때문입니다.

이를 처리하기 위해 shift() 메소드를 사용하여 배열의 시작 부분의 Mark를 제거할 수 있습니다. 다음은 실행 코드 입니다:

const topSalespeople = ['Mark', 'Lucy', 'Graham', 'Carol', 'Ann'];
topSalespeople.shift();

console.log(topSalespeople);

개발자 도구에서 위의 코드와 console.log() 메소드로 테스트해볼 수 있습니다. 이러한 결과가 나오기 까지 무슨 일이 일어났는지 설명해 보겠습니다.

첫 번째 줄에는 영업팀의 최고 사원을 저장하는 topSalespeople 이라는 배열을 선언했습니다.

그 다음 shift() 메소드를 사용하여 배열에서 첫 번째 요소를 제거했습니다.

마지막으로 배열의 실행 결과를 콘솔에 출력했습니다.

topSalespeople 배열에는 더 이상 Mark가 포함되어 있지 않습니다. 이는 메소드가 새 배열을 생성하지 않고 원본 배열을 변경했기 때문입니다.

이 메소드는 배열의 시작 부분에 하나 이상의 요소를 추가합니다. 또한 원본 배열을 변경하고 리턴 값으로 추가된 배열의 길이를 리턴합니다.

문법 구문은 다음과 같습니다:

arrayName.unshift(itemOne, itemTwo, ...);

실질적인 예를 통해 메소드의 사용 방법을 알아보겠습니다.

Hannah 라는 직원은 우리 영업팀에서 놀라운 한 달을 보냈습니다. 그녀는 최고 영업사원 목록에서 1위를 차지했습니다. 그래서 topSalespeople 배열의 맨 앞에 Hannah를 추가하려고 합니다.

이 작업을 수행하려면 다음과 같은 코드를 사용할 수 있습니다:

const topSalespeople = ['Lucy', 'Graham', 'Carol', 'Ann'];
topSalespeople.unshift('Hannah');

console.log(topSalespeople);

위의 이미지와 같이 Hannah의 이름이 배열의 시작 부분에 추가되었습니다.

unshift() 메소드는 shift() 메소드와 동일한 방식으로 작동 하지만 두 가지 차이점이 있습니다. 이는 배열의 시작 부분에 요소를 추가하고 해당 항목을 매개변수로 전달 받는다는 점 입니다.

또 다른 예로 영업팀이 확장되었습니다. 신입사원 중 2 명이 불과 한 달 만에 영업부문 1위에 올랐습니다. 우리는 Geoff를 첫 번째에, Peter를 두 번째로 topSalespeople에 추가하고 싶습니다.

const topSalespeople = ['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann'];
topSalespeople.unshift('Geoff', 'Peter');

console.log(topSalespeople);

shift() 메소드를 사용하면 배열의 시작 부분에 요소를 제거할 수 있습니다.

unshift() 메소드는 배열의 시작 부분에 하나 이상의 요소를 추가합니다.