IT 개발 라이프/Front-End

🔧 자바스크립트 Array Function(배열 함수) 정리

10Biliion 2024. 12. 6. 11:53

1. forEach ▶ 설명

forEach는 배열의 각 요소를 순회하며 제공된 콜백 함수를 실행합니다. 반복 작업에 적합하며 배열 자체를 변경하지 않습니다.

사용법

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
    console.log(number * 2); // 배열의 각 요소를 두 배로 출력
});

결과

2
4
6
8
10

2. map ▶ 설명

map은 배열의 각 요소에 대해 제공된 함수를 실행하고, 결과를 새로운 배열로 반환합니다.

사용법

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

결과

[2, 4, 6, 8, 10]

3. filter ▶ 설명

filter는 제공된 조건에 맞는 요소만 필터링하여 새로운 배열을 만듭니다.

사용법

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

결과

[2, 4]

4. reduce ▶ 설명

reduce는 배열을 하나의 값으로 축약합니다. 초기값을 설정할 수 있으며, 누적 계산에 유용합니다.

사용법

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

결과

15

5. find ▶ 설명

find는 조건에 맞는 첫 번째 요소를 반환합니다.

사용법

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find((number) => number > 3);
console.log(found); // 4

결과

4

6. findIndex ▶ 설명

findIndex는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.

사용법

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex((number) => number > 3);
console.log(index); // 3

결과

3

7. every ▶ 설명

every는 모든 요소가 조건을 만족하면 true, 그렇지 않으면 false를 반환합니다.

사용법

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

결과

true

8. some ▶ 설명

some은 하나 이상의 요소가 조건을 만족하면 true, 그렇지 않으면 false를 반환합니다.

사용법

const numbers = [1, 3, 5, 8];
const hasEven = numbers.some((number) => number % 2 === 0);
console.log(hasEven); // true

결과

true

9. sort ▶ 설명

sort는 배열의 요소를 정렬합니다. 기본적으로 요소를 문자열로 취급하며, 비교 함수를 전달하여 커스터마이징할 수 있습니다.

사용법

const numbers = [5, 3, 8, 1, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 5, 8]

결과

[1, 2, 3, 5, 8]

10. concat ▶ 설명

concat은 두 개 이상의 배열을 결합하여 새로운 배열을 만듭니다.

사용법

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

결과

[1, 2, 3, 4, 5, 6]

11. slice ▶ 설명

slice는 배열의 특정 부분을 선택하여 새로운 배열로 반환합니다.

사용법

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

결과

[2, 3, 4]

12. splice ▶ 설명

splice는 배열의 요소를 추가하거나 제거합니다.

사용법

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 10, 11);
console.log(numbers); // [1, 2, 10, 11, 4, 5]

결과

[1, 2, 10, 11, 4, 5]