[javascript] 배열 3-1 (요소 조작) / 요소 제거, 추가, 교체(push, pop, unshift, shift, splice)

push / pop (조작 위치 : 끝)

• 성능 : 느림 (앞에서 처리할 때 배열 전체가 밀리거나 당겨져야 해서 비용이 큼)

1. push()

• 배열의 끝(뒤)에 요소를 추가하는 메서드
• 여러 개의 요소를 한 번에 넣을 수 있음
• 반환값 : 새로운 배열의 length(길이)

// [문법]
배열.push(요소1, 요소2, ...)

let arr = [1, 2];
arr.push(3);       // [1, 2, 3]
console.log(arr.push(4, 5));    // 5 (요소를 추가한 뒤, 변경된 length륾 반환)
console.log(arr); // [ 1, 2, 3, 4, 5 ]

---

2. push()

• 배열의 끝(뒤)에서 요소를 제거하는 메서드
• 반환값 : 맨 마지막 요소를 꺼내고, 그 값을 반환
• 배열이 비어있으면 undefined 반환

// [문법]
배열.pop()

let arr = [1, 2, 3];
let removed = arr.pop(); // removed = 3
console.log(removed); // 3 제거된 요소 값을 반환
console.log(arr); // [1, 2]

---

unshift / shift (조작 위치 : 앞)

• 성능 : 느림 (앞에서 처리할 때 배열 전체가 밀리거나 당겨져야 해서 비용이 큼)

1. unshift()

• 배열의 앞(처음)에 요소를 추가하는 메서드
• 기존 요소들이 뒤로 밀려남
• 여러 개의 요소도 한 번에 추가 가능
• 반환값 : 새로운 배열의 length(길이)

배열.unshift(요소1, 요소2, ...)

let arr = [2, 3];
console.log(arr.unshift(1)); // 3 추가했을 때 변경된 length를 반환
console.log(arr); // [ 1, 2, 3 ]

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

---

2. shift()

• 배열의 앞(처음)에서 요소를 제거하는 메서드
• 반환값 :  맨 앞 요소를 꺼내고 그 값을 반환
• 나머지 요소들은 앞으로 한 칸씩 이동
• 배열이 비어있으면 undefined 반환

// [문법]
배열.shift()

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

 

메서드	위치	내용	반환값
push()	뒤	요소 추가	변경된 length
pop()	뒤	요소 제거	제거된 요소
unshift()	앞	요소 추가	변경된 length
shift()	앞	요소 제거	제거된 요소

---

splice()

• 원하는 위치에서 추가·삭제·교체를 자유롭게 할 수 있는 메서드
• 반환값 : 삭제된 요소들을 배열로 반환
• splice()는 원본 배열을 직접 수정합니다 (immutable 아님).
• deleteCount를 생략하면 start 이후 모든 요소가 삭제됨
• push, pop보다 조금 더 비용이 크지만, 유연성이 뛰어나서 실무에서도 자주 사용

// [문법]
배열.splice(start, deleteCount, item1, item2, ...)

 

매개변수	설명
start	조작을 시작할 인덱스 위치.음수면 뒤에서부터 셈 (-1 → 마지막 요소)
deleteCount	제거할 요소 개수 (0이면 삭제 안 함)
item1, ...	새로 추가할 요소 (없으면 삭제만 함)

---

splice() 주요 사용 패턴

(1) 삭제

let arr = ['a', 'b', 'c', 'd'];
let removed = arr.splice(1, 2); // 인덱스 1부터 2개 삭제
console.log(removed); // [ 'b', 'c' ]  splice()는 삭제된 요소들을 배열로 반환

console.log(arr); // ['a', 'd']

/*
- start = 1 → 'b'부터 시작
- deleteCount = 2 → 'b', 'c' 삭제
*/

(2) 추가

let arr = ['a', 'd'];
arr.splice(1, 0, 'b', 'c');  
console.log(arr);  // ['a', 'b', 'c', 'd']

/*
- deleteCount = 0 → 삭제 안 함
- 'b', 'c' → 인덱스 1 위치에 삽입 (기존 요소는 뒤로 밀림)
*/

(3) 교체

let arr = ['a', 'b', 'x', 'y'];
arr.splice(2, 2, 'c', 'd');  
console.log(arr);  // ['a', 'b', 'c', 'd']

/*
- 인덱스 2부터 2개(x, y) 제거
- 같은 자리에 'c', 'd' 추가 → 사실상 교체
*/

(4) 끝에서 조작

let arr = ['a', 'b', 'c'];
arr.splice(-1, 1, 'z');  
console.log(arr);  // ['a', 'b', 'z']

/*
- start = -1 → 마지막 요소 선택
- 마지막 요소를 삭제하고 'z'로 교체
*/