JavaScript 배열 메소드 총정리

 

JavaScript의 배열(Array)은 데이터를 다루는 데 있어 매우 강력한 기능을 제공합니다. 이 글에서는 자주 사용되는 배열 메소드들을 카테고리별로 정리해보았습니다.

---

1. 배열 수정 메소드

1.1 push()

• 배열의 끝에 요소를 추가합니다.
• 반환값: 배열의 새로운 길이.

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

1.2 pop()

• 배열의 끝 요소를 제거하고 반환합니다.
• 반환값: 제거된 요소.

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

1.3 unshift()

• 배열의 앞에 요소를 추가합니다.
• 반환값: 배열의 새로운 길이.

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

1.4 shift()

• 배열의 첫 번째 요소를 제거하고 반환합니다.
• 반환값: 제거된 요소.

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

1.5 splice()

• 배열의 요소를 추가, 제거, 또는 교체합니다.
• 반환값: 제거된 요소들의 배열.

const arr = [1, 2, 3, 4];
const removed = arr.splice(1, 2, 'a', 'b');
console.log(removed); // [2, 3]
console.log(arr); // [1, 'a', 'b', 4]

---

2. 배열 탐색 메소드

2.1 indexOf()

• 지정한 값의 첫 번째 인덱스를 반환합니다.
• 값이 없으면 -1 반환.

const arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(4)); // -1

2.2 lastIndexOf()

• 지정한 값의 마지막 인덱스를 반환합니다.
• 값이 없으면 -1 반환.

const arr = [1, 2, 3, 2];
console.log(arr.lastIndexOf(2)); // 3

2.3 includes()

• 배열에 특정 값이 포함되어 있는지를 확인합니다.
• 반환값: true 또는 false.

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

2.4 find()

• 조건을 만족하는 첫 번째 요소를 반환합니다.
• 조건에 맞는 요소가 없으면 undefined 반환.

const arr = [1, 2, 3, 4];
const found = arr.find(x => x > 2);
console.log(found); // 3

2.5 findIndex()

• 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.
• 조건에 맞는 요소가 없으면 -1 반환.

const arr = [1, 2, 3, 4];
const index = arr.findIndex(x => x > 2);
console.log(index); // 2

2.6 some()

• 배열의 어떤 요소라도 조건을 만족하는지 확인합니다.
• 반환값: true 또는 false.

const arr = [1, 2, 3, 4];
const hasEven = arr.some(x => x % 2 === 0);
console.log(hasEven); // true

2.7 every()

• 배열의 모든 요소가 조건을 만족하는지 확인합니다.
• 반환값: true 또는 false.

const arr = [2, 4, 6];
const allEven = arr.every(x => x % 2 === 0);
console.log(allEven); // true

---

3. 배열 변환 메소드

3.1 map()

• 배열의 각 요소를 변환하여 새로운 배열을 생성합니다.
• 원본 배열은 변경되지 않습니다.

const arr = [1, 2, 3];
const newArr = arr.map(x => x * 2);
console.log(newArr); // [2, 4, 6]

3.2 filter()

• 조건에 맞는 요소만 추출하여 새로운 배열을 생성합니다.

const arr = [1, 2, 3, 4];
const filtered = arr.filter(x => x % 2 === 0);
console.log(filtered); // [2, 4]

3.3 reduce()

• 배열을 순회하며 하나의 값으로 축소합니다.

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

3.4 concat()

• 두 개 이상의 배열을 병합합니다.
• 원본 배열은 변경되지 않습니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4]

3.5 join()

• 배열의 모든 요소를 문자열로 결합합니다.
• 반환값: 결합된 문자열.

const arr = [1, 2, 3];
console.log(arr.join('-')); // "1-2-3"

---

4. 배열 정렬 및 순회 메소드

4.1 sort()

• 배열을 정렬합니다.
• 원본 배열이 변경됩니다.

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

4.2 reverse()

• 배열의 순서를 뒤집습니다.
• 원본 배열이 변경됩니다.

const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

4.3 forEach()

• 배열의 각 요소에 대해 콜백 함수를 실행합니다.
• 반환값은 없습니다.

const arr = [1, 2, 3];
arr.forEach(x => console.log(x));

---

5. 기타 메소드

5.1 slice()

• 배열의 일부를 추출하여 새로운 배열을 생성합니다.
• 원본 배열은 변경되지 않습니다.

const arr = [1, 2, 3, 4];
const sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]

5.2 length

• 배열의 길이를 반환하거나 설정합니다.

const arr = [1, 2, 3];
console.log(arr.length); // 3