Javascript

[javascript] 배열 메서드 정리

Yujzu 2025. 1. 11. 11:23

 

# 배열 메서드

1. shift()

: 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

- 원본 배열을 변경한다.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// Expected output: Array [2, 3]

console.log(firstElement);
// Expected output: 1

- 빈 배열의 경우 undefined 를 반환

 

** Tip

 

  • push()나 pop()은 **배열의 끝에 요소를 넣고 빼기 때문에 O(1)**로 빠릅니다.
  • 하지만 **unshift()나 shift()는 배열의 맨 앞에 요소를 넣고 빼야 하므로 O(N)**이에요. 즉, 배열의 길이가 커질수록 느려집니다.
  • 맨 앞에 뭔가 넣거나 빼면 뒤에 있던 모든 요소들이 한 칸씩 밀려야 하거든요.

 

2. push()

: 배열의 끝에 명시된 요소를 추가하고 배열의 새로운 길이를 반환한다.

- 원본 배열이 변경된다.

const animals = ["pigs", "goats", "sheep"];

const count = animals.push("cows");
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]

// 원소 여러 개 추가
animals.push("chickens", "cats", "dogs");
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

 

## 사용 팁

queue.push(queue.shift());

- shift()한 것을 push() 하면 배열을 반복적으로 길게 뒤에 붙혀서 돌릴 수 있음

 

3. splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 

- 원본 배열이 변경된다.

 

.splice(0, deleteCount, ...items) 

  • 0 → 시작 인덱스 (배열의 맨 앞)
  • deleteCount → 몇 개의 요소를 삭제할지
  • ...items → 삭제된 자리에 넣을 요소들 (있으면 추가, 없으면 삭제만)
const arr = [10, 20, 30, 40];
arr.splice(0, 2);  // 인덱스 0부터 2개 제거
console.log(arr);  // [30, 40]

const arr = [10, 20, 30];
arr.splice(0, 0, 5);  // 인덱스 0부터 0개 삭제하고 5 추가
console.log(arr);    // [5, 10, 20, 30]

const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

// ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, "May");
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

 

** Tip

시간 복잡도 : O(N), 여러번 사용시에는 비효율적

=> Array.push, Array.pop 으로 대체

 

4. slice()

: 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다.

- 원본 배열은 바뀌지 않는다.

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

5. pop()

배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

- 배열의 길이를 변경한다 = 원본 배열 변경

const plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];

console.log(plants.pop());
// Expected output: "tomato"

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

 

6. .map(Number)

: 배열의 모든 요소를 숫자로 바꾸는 방법

const nums = arr.map(Number); // [1, 2, 3]
=
const nums = arr.map(str => Number(str));

 

 

# 시간복잡도

1️⃣ 배열의 "맨 끝"만 건드리는 건 보통 O(1)

  • push, pop

2️⃣ 배열의 "맨 앞"이나 "중간" 건드리는 건 보통 O(N)

  • shift, unshift, splice(중간 위치에서 삽입/삭제)

3️⃣ 전체를 순회하거나 복사하면 O(N)

  • for 반복문, map, filter, slice, concat

 

 

'Javascript' 카테고리의 다른 글

Object 객체 메서드 정리  (0) 2025.02.10
[JS] 번들러, Webpack ♦︎  (1) 2025.01.16
[알고리즘] 정렬 (Sort)  (0) 2025.01.09
for문 유형  (0) 2025.01.04
[JS] 비동기 프로그래밍 패턴 (콜백, promise, async/await ) ♦︎  (1) 2024.12.28