8.1 메서드 forEach()
JavaScript에서 배열을 반복하는 메서드는 배열 작업을 수행하기 위한 강력한 도구야. 배열의 요소에 대해 다양한 작업을 수행할 수 있지. 이번 주제에서는 forEach(), map(), filter(), reduce(), some(), every(), find(), findIndex()와 같은 주요 반복 메서드를 살펴볼 거야.
forEach() 메서드는 배열의 각 요소에 대해 한 번 지정된 함수를 실행해. 이 메서드는 새로운 배열을 반환하지 않고 중단되지 않아.
구문:
array.forEach(function(element, index, array) {
// 함수 내용
});
예제:
forEach() 메서드는 배열 numbers[]의 각 요소를 순회하고 그 인덱스와 값을 출력해.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
console.log(`Index: ${index}, Value: ${number}`);
});
// 출력:
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3
// Index: 3, Value: 4
// Index: 4, Value: 5
8.2 메서드 map()
map() 메서드는 배열의 각 요소에 대해 지정된 함수를 호출한 결과로 새로운 배열을 만들어.
구문:
const newArray = array.map(function(element, index, array) {
// 함수 내용
return 새로운_값;
});
변환 함수를 화살표 함수로도 작성할 수 있어:
const newArray = array.map((element, index, array) => 새로운_값);
예제:
map() 메서드는 배열 numbers[]의 숫자를 제곱한 새로운 배열 squared[]를 만들어.
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => number * number);
console.log(squared); // [1, 4, 9, 16, 25]
8.3 메서드 filter()
filter() 메서드는 전달된 함수에서 지정된 조건을 통과한 모든 요소로 구성된 새로운 배열을 생성해.
const newArray = array.filter(function(element, index, array) {
// 함수 내용
return 조건;
});
필터 함수를 화살표 함수로도 작성할 수 있어:
const newArray = array.filter((element, index, array) => 조건);
예제:
filter() 메서드는 배열 numbers[]에서 짝수만 포함하는 새로운 배열 evenNumbers[]를 생성해.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
8.4 메서드 reduce()
reduce() 메서드는 배열의 각 요소와 누적값에 대해 함수가 적용되고, 하나의 값으로 배열을 축소해.
구문:
const result = array.reduce(function(accumulator, current, index, array) {
// 함수 내용
return 새로운_누적값;
}, initialValue);
누적 함수를 화살표 함수로도 작성할 수 있어:
const result = array.reduce((accumulator, current, index, array) =>
새로운_값, initialValue
);
예제:
reduce() 메서드는 배열 numbers[]를 각 요소의 합계인 하나의 값 sum으로 축소해.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum); // 15
8.5 메서드 some()
some() 메서드는 배열의 적어도 하나의 요소가 전달된 함수에서 지정된 조건을 만족하는지 여부를 확인해. true 또는 false를 반환해.
구문:
const result = array.some(function(element, index, array) {
// 함수 내용
return 조건;
});
확인 함수를 화살표 함수로도 작성할 수 있어:
const result = array.some((element, index, array) => 조건);
예제:
some() 메서드는 배열 numbers[]에 적어도 하나의 짝수가 있는지 확인하고 true를 반환해.
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true
8.6 메서드 every()
every() 메서드는 배열의 모든 요소가 전달된 함수에서 지정된 조건을 만족하는지 여부를 확인해. true 또는 false를 반환해.
구문:
const result = array.every(function(element, index, array) {
// 함수 내용
return 조건;
});
확인 함수를 화살표 함수로도 작성할 수 있어:
const result = array.every((element, index, array) => 조건);
예제:
every() 메서드는 배열 numbers[]의 모든 요소가 양수인지 확인하고 true를 반환해.
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(number => number > 0);
console.log(allPositive); // true
8.7 메서드 find()
find() 메서드는 전달된 함수에서 지정된 조건을 만족하는 배열의 첫 번째 요소를 반환해. 조건을 만족하는 요소가 없으면 undefined를 반환해.
구문:
const result = array.find(function(element, index, array) {
// 함수 내용
return 조건;
});
확인 함수를 화살표 함수로도 작성할 수 있어:
const result = array.find((element, index, array) => 조건);
예제:
find() 메서드는 배열 numbers[]에서 첫 번째 짝수를 반환해.
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
8.8 메서드 findIndex()
findIndex() 메서드는 전달된 함수에서 지정된 조건을 만족하는 배열의 첫 번째 요소의 인덱스를 반환해. 조건을 만족하는 요소가 없으면 -1를 반환해.
구문:
const result = array.findIndex(function(element, index, array) {
// 함수 내용
return 조건;
});
확인 함수를 화살표 함수로도 작성할 수 있어:
const result = array.findIndex((element, index, array) => 조건);
예제:
findIndex() 메서드는 배열 numbers[]에서 첫 번째 짝수의 인덱스를 반환해.
const numbers = [1, 2, 3, 4, 5];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex); // 1
GO TO FULL VERSION