자바스크립트 unshift(), shift(), push(), pop()

🔹 unshift()

배열의 맨 앞에 하나 이상의 요소를 추가하는 메서드예요.
원본 배열이 직접 변경된다는 특징이 있습니다.


문법

array.unshift(item1, item2, ...)

매개변수

item1, item2, ... 배열 맨 앞에 추가할 요소들

 


✅ 요소 추가

const arr = [2, 3, 4];
arr.unshift(0, 1);

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

주로 사용하는 경우

  • 배열 앞쪽에 요소를 추가할 때

🔹 shift()

배열의 맨 앞 요소를 제거하고, 제거된 요소를 반환하는 메서드예요.
원본 배열이 직접 변경됩니다.


문법

array.shift()

✅ 요소 제거

const arr = [1, 2, 3];
const removed = arr.shift();

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

주로 사용하는 경우

  • 배열 앞쪽 요소를 꺼낼 때
  • 큐(Queue) 자료구조 구현 시

🔹 pop()

배열의 맨 뒤 요소를 제거하고, 제거된 요소를 반환하는 메서드예요.
원본 배열이 직접 변경됩니다.


문법

array.pop()

✅ 요소 제거

const arr = [1, 2, 3];
const removed = arr.pop();

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

주로 사용하는 경우

  • 배열 끝쪽 요소를 꺼낼 때
  • 스택(Stack) 자료구조 구현 시

🔹 push()

배열의 맨 끝에 하나 이상의 요소를 추가하는 메서드예요.
원본 배열이 직접 변경됩니다.


문법

array.push(item1, item2, ...)

매개변수

item1, item2, ... 배열 끝에 추가할 요소들

 


✅ 요소 추가

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

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

주로 사용하는 경우

  • 배열 끝쪽에 요소를 추가할 때
  • 스택(Stack) 자료구조 구현 시

 

 

 

unshift() 맨 앞에 요소 추가
shift() 맨 앞 요소 제거
pop() 맨 뒤 요소 제거
push() 맨 뒤에 요소 추가