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]
'IT 개발 라이프 > Front-End' 카테고리의 다른 글
자바스크립트 클로저(Closure)에 대해 알아보자! 🔒 (0) | 2024.12.09 |
---|---|
자바스크립트 호이스팅 (Hoisting)에 대해 알아보자! 🎈 (0) | 2024.12.09 |
자바스크립트 ?. 옵셔널 체이닝(Optional Chaining) (0) | 2024.12.05 |
자바스크립트 .attr()과 .prop()에 대한 모든 것 ✨ (0) | 2024.12.05 |
디바운스와 쓰로틀링: 차이와 활용법 (0) | 2024.12.03 |