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의 배열 메서드는 데이터를 효율적으로 처리하고 조작하는 데 필수적입니다. 상황에 맞는 메서드를 적절히 활용하여 코드를 더 효율적으로 작성해 보세요!
'Develop > HTML & JavaScript & CSS' 카테고리의 다른 글
JavaScript logMessage (1) | 2024.12.26 |
---|---|
JavaScript 문자열 메서드 정리 (0) | 2024.12.24 |
VSCode Extensions (0) | 2024.12.23 |
JavaScript ES6 공부하기(ES5 Base) feat.ChatGPT (0) | 2024.12.17 |
(참고) 사용자 입력 텍스트를 바이트(byte) 길이로 제한 (0) | 2023.11.29 |