[Javascript; 자바스크립트] 배열 조작의 기본기: 자바스크립트 push, pop, shift, unshift 사용법

사진: Unsplash 의 Samsung Memory

자바스크립트 배열 메서드(내장함수) 중 push(), pop(), shift(), 그리고 unshift()는 배열의 앞과 뒤에서 요소를 추가하거나 제거하는 기능을 제공하는 핵심적인 함수들입니다. 이 함수들을 활용하여 배열을 효율적으로 관리할 수 있습니다. 이 블로그 포스트에서는 각 메서드의 동작 방식과 사용 예시를 통해 이들 함수들을 상세히 알아보겠습니다.

1. 배열의 끝에 요소를 추가하는 push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가합니다. 이 함수는 배열의 새로운 길이를 반환하며, 간단하면서도 자주 사용되는 함수입니다.

사용법

let arr = [1, 2, 3];
arr.push(4);  // [1, 2, 3, 4]

특징

• 변경 대상: 배열의 마지막에 요소를 추가
• 리턴 값: 배열의 새로운 길이
• 다중 추가: 여러 요소를 한 번에 추가할 수 있음

예시

let fruits = ['apple', 'banana'];
let length = fruits.push('orange', 'mango');  // [‘apple’, ‘banana’, ‘orange’, ‘mango’]
console.log(length);  // 4

---

2. 배열의 끝에서 요소를 제거하는 pop()

pop() 메서드는 배열의 마지막 요소를 제거하고 그 요소를 반환합니다. 이 함수는 배열의 마지막 값을 삭제할 때 유용하게 사용됩니다.

사용법

let arr = [1, 2, 3];
let lastElement = arr.pop();  // [1, 2]
console.log(lastElement);  // 3

특징

• 변경 대상: 배열의 마지막 요소
• 리턴 값: 제거된 요소
• 배열 변경: 배열 길이가 1 줄어듦

예시

let colors = ['red', 'green', 'blue'];
let removedColor = colors.pop();  // [‘red’, ‘green’]
console.log(removedColor);  // ‘blue’

---

3. 배열의 앞에 요소를 추가하는 unshift()

unshift() 메서드는 배열의 앞에 하나 이상의 요소를 추가합니다. 이 함수는 새 배열의 길이를 반환하며, 배열의 첫 부분에 요소를 추가할 때 사용됩니다.

사용법

let arr = [2, 3, 4];
arr.unshift(1);  // [1, 2, 3, 4]

특징

• 변경 대상: 배열의 첫 번째 위치
• 리턴 값: 배열의 새로운 길이
• 다중 추가: 여러 요소를 한 번에 추가 가능

예시

let numbers = [3, 4, 5];
let newLength = numbers.unshift(1, 2);  // [1, 2, 3, 4, 5]
console.log(newLength);  // 5

---

4. 배열의 앞에서 요소를 제거하는 shift()

shift() 메서드는 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다. 배열의 앞부분에서 요소를 빼내야 할 때 유용합니다.

사용법

let arr = [1, 2, 3];
let firstElement = arr.shift();  // [2, 3]
console.log(firstElement);  // 1

특징

• 변경 대상: 배열의 첫 번째 요소
• 리턴 값: 제거된 첫 번째 요소
• 배열 변경: 배열 길이가 1 줄어듦

예시

let queue = ['first', 'second', 'third'];
let removedElement = queue.shift();  // ['second', 'third']
console.log(removedElement);  // ‘first’

5. 메서드 비교: 언제 사용해야 할까?

• push()와 pop(): 배열의 뒤쪽에서 요소를 추가하거나 제거할 때 사용
• unshift()와 shift(): 배열의 앞쪽에서 요소를 추가하거나 제거할 때 사용

이 네 가지 함수는 배열의 양쪽 끝에서 요소를 추가하거나 제거할 수 있어 유연한 데이터 조작을 가능하게 합니다. push()와 pop()은 스택(Stack)처럼 사용할 때 유용하고, unshift()와 shift()는 큐(Queue) 구조처럼 동작할 때 자주 사용됩니다.

---

6. 마무리

배열의 앞과 뒤에서 요소를 다룰 때 자바스크립트의 push(), pop(), shift(), 그리고 unshift() 메서드는 필수적인 도구입니다. 각 함수는 배열을 변형하는 강력한 기능을 제공하며, 코드의 가독성을 높이기 위해 잘 활용할 수 있습니다.

이 블로그 포스트를 통해 이들 함수들을 효과적으로 사용하는 방법을 배웠기를 바랍니다! 이 외에도 배열 관련 함수들이 많이 있으니, 필요에 따라 적절한 함수를 선택하여 사용해 보세요.

끝.