본문 바로가기

Develop/HTML & JavaScript & CSS

JavaScript 배열 메서드 정리

JavaScript에서 배열은 데이터를 저장하고 처리하는 데 매우 중요한 역할을 합니다. 다양한 배열 메서드를 활용하여 데이터를 추가, 제거, 검색, 정렬할 수 있습니다. 이 글에서는 JavaScript의 주요 배열 메서드를 정리하였습니다.

배열 조작 메서드

1. push(element1, ..., elementN): 배열 끝에 요소를 추가

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

2. pop(): 배열 끝에서 요소를 제거

let arr = [1, 2, 3];
arr.pop(); // 3, 배열은 [1, 2]

3. unshift(element1, ..., elementN): 배열의 시작 부분에 요소 추가

let arr = [1, 2, 3];
arr.unshift(0); // [0, 1, 2, 3]

4. shift(): 배열의 첫 번째 요소 제거

let arr = [1, 2, 3];
arr.shift(); // 1, 배열은 [2, 3]

5. splice(start, deleteCount, item1, ..., itemN): 요소를 추가하거나 제거

let arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b'); // [1, 'a', 'b', 4]

배열 순회 메서드

1. forEach(callback): 각 요소에 대해 함수 실행

[1, 2, 3].forEach((num) => console.log(num)); // 1, 2, 3

2. map(callback): 변환된 새 배열 생성

let arr = [1, 2, 3];
let newArr = arr.map((num) => num * 2); // [2, 4, 6]

3. filter(callback): 조건을 만족하는 요소로 새 배열 생성

let arr = [1, 2, 3, 4];
let filtered = arr.filter((num) => num > 2); // [3, 4]

4. reduce(callback, initialValue?): 값을 누적하여 하나의 결과 반환

let sum = [1, 2, 3].reduce((acc, num) => acc + num, 0); // 6

배열 검색 메서드

1. indexOf(searchElement, fromIndex?): 첫 번째 일치하는 요소의 인덱스를 반환

[1, 2, 3].indexOf(2); // 1

2. find(callback): 조건을 만족하는 첫 번째 요소 반환

let arr = [1, 2, 3];
let found = arr.find((num) => num > 1); // 2

3. findIndex(callback): 조건을 만족하는 첫 번째 요소의 인덱스 반환

let arr = [1, 2, 3];
let index = arr.findIndex((num) => num > 1); // 1

배열 정렬 및 변형

1. sort(compareFunction?): 배열 정렬

let arr = [3, 1, 2];
arr.sort(); // [1, 2, 3]
arr.sort((a, b) => b - a); // [3, 2, 1]

2. reverse(): 배열 역순으로 정렬

let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

3. join(separator): 배열 요소를 문자열로 병합

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

기타 메서드

1. flat(depth?): 중첩 배열 평탄화

let arr = [1, [2, [3, 4]]];
arr.flat(2); // [1, 2, 3, 4]

2. fill(value, start?, end?): 배열의 특정 부분을 고정 값으로 채움

let arr = [1, 2, 3];
arr.fill(0, 1, 3); // [1, 0, 0]

 

JavaScript의 배열 메서드는 데이터를 효율적으로 처리하고 조작하는 데 필수적입니다. 상황에 맞는 메서드를 적절히 활용하여 코드를 더 효율적으로 작성해 보세요!