★북마크 필수★ [JavaScript] 배열 메서드 : 카테고리별 완벽 정리

필수 #자바스크립트 >>배열(Array) 메서드<< 총정리 입니다.

즐코하세요~★

---

배열 요소 추가 및 제거 메서드

push(요소1, 요소2, ...): 배열의 끝에 하나 이상의 요소를 추가하고, 새 배열의 길이를 반환합니다.

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

 

pop(): 배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다.

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

 

unshift(요소1, 요소2, ...): 배열의 앞에 하나 이상의 요소를 추가하고, 새 배열의 길이를 반환합니다.

let arr = [1, 2, 3];
arr.unshift(0); // 출력: 4, 배열: [0, 1, 2, 3]

 

shift(): 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

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

 

splice(시작 인덱스, 제거할 개수, 추가할 요소1, ...): 배열의 특정 위치에서 요소를 추가하거나 제거합니다.

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 10, 20); // 배열: [1, 2, 10, 20, 4, 5]

 

---

배열 탐색 및 검색 메서드

indexOf(검색할 요소, 시작 인덱스): 배열에서 특정 요소를 검색하여 첫 번째로 발견된 인덱스를 반환합니다. 없으면 -1을 반환합니다.

let arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 출력: 1

 

lastIndexOf(검색할 요소, 시작 인덱스): 배열에서 특정 요소를 검색하여 마지막으로 발견된 인덱스를 반환합니다. 없으면 -1을 반환합니다.

let arr = [1, 2, 3, 2, 1];
arr.lastIndexOf(2); // 출력: 3

 

includes(요소, 시작 인덱스): 배열에 특정 요소가 포함되어 있는지 확인합니다. true 또는 false를 반환합니다.

let arr = [1, 2, 3];
arr.includes(2); // 출력: true

 

find(콜백 함수): 조건을 만족하는 첫 번째 요소를 반환합니다. 없으면 undefined를 반환합니다.

let arr = [1, 2, 3, 4];
let found = arr.find(element => element > 2); // 출력: 3

 

findIndex(콜백 함수): 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 없으면 -1을 반환합니다.

let arr = [1, 2, 3, 4];
let foundIndex = arr.findIndex(element => element > 2); // 출력: 2

 

---

배열 변형 및 재구성 메서드

slice(시작 인덱스, 끝 인덱스): 배열의 일부를 추출하여 새로운 배열을 반환합니다. 끝 인덱스는 포함되지 않습니다.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 4); // 출력: [2, 3, 4]

 

concat(배열1, 배열2, ...): 두 개 이상의 배열을 연결하여 새 배열을 반환합니다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2); // 출력: [1, 2, 3, 4]

 

join(구분자): 배열의 모든 요소를 문자열로 변환한 후, 구분자를 사용하여 하나의 문자열로 결합합니다.

let arr = [1, 2, 3];
let joined = arr.join("-"); // 출력: "1-2-3"

 

reverse(): 배열의 순서를 반대로 바꿉니다.

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

 

sort(비교 함수): 배열을 정렬합니다. 기본적으로 문자열로 취급하여 사전식으로 정렬되며, 숫자 정렬 시 비교 함수를 전달해야 합니다.

let arr = [3, 1, 4, 1, 5];
arr.sort((a, b) => a - b); // 출력: [1, 1, 3, 4, 5]

 

---

배열 반복 및 순회 메서드

forEach(콜백 함수): 배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다. 반환값은 없습니다.

let arr = [1, 2, 3];
arr.forEach(element => console.log(element)); // 출력: 1, 2, 3 (각 요소가 출력됨)

 

map(콜백 함수): 배열의 각 요소를 주어진 콜백 함수로 처리한 후, 그 결과를 모아 새로운 배열을 반환합니다.

let arr = [1, 2, 3];
let mapped = arr.map(element => element * 2); // 출력: [2, 4, 6]

 

filter(콜백 함수): 배열의 각 요소에 대해 주어진 조건을 만족하는 요소만 모아 새로운 배열을 반환합니다.

let arr = [1, 2, 3, 4];
let filtered = arr.filter(element => element > 2); // 출력: [3, 4]

 

reduce(콜백 함수, 초기값): 배열을 순회하며 각 요소에 대해 누적 연산을 수행하여 단일 값을 반환합니다.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 출력: 10

 

reduceRight(콜백 함수, 초기값): reduce()와 동일하게 작동하지만, 배열의 오른쪽(마지막 요소)부터 왼쪽으로 순회합니다.

let arr = [1, 2, 3, 4];
let sum = arr.reduceRight((acc, curr) => acc + curr, 0); // 출력: 10

 

some(콜백 함수): 배열의 요소 중 하나라도 조건을 만족하면 true를 반환합니다.

let arr = [1, 2, 3];
let hasEven = arr.some(element => element % 2 === 0); // 출력: true

 

every(콜백 함수): 배열의 모든 요소가 조건을 만족해야 true를 반환합니다.

let arr = [2, 4, 6];
let allEven = arr.every(element => element % 2 === 0); // 출력: true

 

---

배열 복사 및 병합

copyWithin(대상 인덱스, 시작 인덱스, 끝 인덱스): 배열 내의 요소를 복사하여 다른 위치에 붙여넣습니다.

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 출력: [4, 5, 3, 4, 5]

 

fill(값, 시작 인덱스, 끝 인덱스): 배열의 모든 요소를 고정된 값으로 채웁니다.

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

 

flat(깊이): 다차원 배열을 평평하게 만들어 1차원 배열로 반환합니다.

let arr = [1, [2, 3], [4, [5]]];
let flattened = arr.flat(2); // 출력: [1, 2, 3, 4, 5]

 

flatMap(콜백 함수): map()과 flat()을 결합한 메서드로, 각 요소에 대해 콜백 함수를 적용한 후 결과를 평평하게 만듭니다.

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(element => [element, element * 2]); // 출력: [1, 2, 2, 4, 3, 6]

 

---

블로그 오시면 더 있어요~

K코딩