[JavaScript 심화] 배열 메서드 (요소 조작)

배열의 데이터를 추가, 삭제, 잘라내기, 병합할 때 사용하는 가장 기본적이면서 자주 쓰이는 메서드 6가지를 정리해봄

---

1. `push()`

배열 맨 뒤에 요소를 추가하는 메서드

let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6);

console.log(arr1);      // [1, 2, 3, 4, 5, 6]
console.log(newLength); // 6 (추가 후의 배열 길이)

• 여러 개의 요소를 한 번에 추가 가능
• 원본 배열이 변경됨

---

2. `pop()`

배열 맨 뒤에 요소를 제거하고 반환

let arr2 = [1, 2, 3];
const poppedItem = arr2.pop();

console.log(arr2);      // [1, 2]
console.log(poppedItem); // 3

• 원본 배열이 변경됨
• 제거된 값을 반환
• `push()`와 함께 Stack(스택, LIFO) 구현 시 자주 사용

---

3. `shift()`

배열 맨 앞의 요소를 제거하고 반환

let arr3 = [1, 2, 3];
const shiftedItem = arr3.shift();

console.log(arr3);       // [2, 3]
console.log(shiftedItem); // 1

• 원본 배열이 변경됨
• 배열의 첫 번째 요소를 제거
• 내부 인덱스를 전부 재정렬 해야하므로 `pop()`, `push()`보다 성능이 느림

---

4. `unshift()`

배열 맨 앞에 새로운 요소를 추가

let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);

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

• 원본 배열이 변경됨
• 맨 앞에 추가하면서 나머지 인덱스가 밀림
• `push()`, `pop()`보다 성능이 느림

---

5. `slice()`

두 배열을 병합하여 새로운 배열로 반환

let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(1, 4);
let sliced2 = arr5.slice(1);
let sliced3 = arr5.slice(-2);

console.log(arr5);    // [1, 2, 3, 4, 5]
console.log(sliced);  // [2, 3, 4]
console.log(sliced2); // [2, 3, 4, 5]
console.log(sliced3); // [4, 5]

• 원본 배열이 변경되지 않음
• 인덱스 기준: `slice(start, end)` -> `end`는 포함되지 않음
• 음수 인덱스(`-2`)로 뒤에서부터 접근 가능

---

6. `concat()`

두 배열을 병합하여 새로운 배열로 반환

let arr6 = [1, 2];
let arr7 = [3, 4];

let concatedArr = arr6.concat(arr7);
console.log(concatedArr); // [1, 2, 3, 4]

• 원본 배열이 변경되지 않음
• 여러 배열 또는 값도 한 번에 연결 가능

let result = arr6.concat(arr7, [5, 6], 7);
console.log(result); // [1, 2, 3, 4, 5, 6, 7]

---

정리

메서드	동작	원본 변경	반환값	특징
`push()`	뒤에 요소 추가	✅ 변경	새로운 길이	여러 요소 추가 가능
`pop()`	뒤 요소 제거	✅ 변경	제거된 값	스택에서 자주 사용
`shift()`	앞 요소 제거	✅ 변경	제거된 값	느림 (재정렬 필요)
`unshift()`	앞 요소 추가	✅ 변경	새로운 길이	느림 (재정렬 필요)
`slice()`	일부 복사	❌ 불변	새로운 배열	end 인덱스 미포함
`concat()`	배열 병합	❌ 불변	새로운 배열	여러 배열·값 연결 가능