자바스크립트 기본 문법 – 배열 – 배열 메서드 – 0 – forEach
소제목: 배열과 forEach 메서드란?
자바스크립트에서 배열은 여러 개의 값을 담는 컨테이너로 사용됩니다. 배열에는 여러 가지 값을 저장하고, 그 값을 순회하며 작업을 수행할 수 있습니다. forEach 메서드는 배열의 각 요소를 순회하면서 지정된 작업을 수행하기 위해 사용됩니다.
예시:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});위의 예시에서 numbers 배열은 [1, 2, 3, 4, 5]로 구성되어 있습니다. forEach 메서드를 사용하여 배열의 각 요소를 출력하고 있습니다. 콘솔에는 순서대로 1, 2, 3, 4, 5가 출력됩니다.
소제목: forEach 메서드의 동작 방식
forEach 메서드는 주어진 작업을 배열의 각 요소에 대해 순차적으로 실행합니다. 즉, 배열의 첫 번째 요소부터 마지막 요소까지 순서대로 작업을 수행합니다. 작업은 콜백 함수 형태로 제공되며, 배열의 각 요소에 대해 한 번씩 호출됩니다.
예시:
const fruits = ['사과', '바나나', '딸기'];
fruits.forEach(function(fruit) {
console.log(fruit + '는 맛있다!');
});위의 예시에서 fruits 배열은 ['사과', '바나나', '딸기']로 구성되어 있습니다. forEach 메서드를 사용하여 배열의 각 요소를 순회하고, 각 과일에 대해 ‘는 맛있다!’라는 문장을 출력하고 있습니다. 실행 결과는 다음과 같습니다:
사과는 맛있다!
바나나는 맛있다!
딸기는 맛있다!소제목: forEach 메서드 활용하기
forEach 메서드는 배열의 각 요소에 대해 반복 작업을 수행하기 위해 유용하게 활용될 수 있습니다. 각 요소에 대해 원하는 동작을 수행할 수 있습니다. 예를 들어, 배열의 숫자 요소들을 모두 더하거나, 각 요소를 제곱하는 등의 작업을 할 수 있습니다.
예시 1: 배열의 숫자 요소 더하기
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(number) {
sum += number;
});
console.log('합계:', sum);위의 예시에서 numbers 배열은 [1, 2, 3, 4, 5]로 구성되어 있습니다. forEach 메서드를 사용하여 배열의 각 숫자를 더하고 있습니다. sum 변수를 활용하여 각 요소를 더한 결과를 저장하고, 최종적으로 콘솔에 합계를 출력합니다. 실행 결과는 다음과 같습니다:
합계: 15예시 2: 배열의 요소 제곱하기
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = [];
numbers.forEach(function(number) {
squaredNumbers.push(number ** 2);
});
console.log('제곱한 결과:', squaredNumbers);위의 예시에서 numbers 배열은 [1, 2, 3, 4, 5]로 구성되어 있습니다. forEach 메서드를 사용하여 배열의 각 숫자를 제곱하고 있습니다. squaredNumbers 배열을 선언하여 각 요소를 제곱한 결과를 저장하고, 최종적으로 콘솔에 제곱한 결과를 출력합니다. 실행 결과는 다음과 같습니다:
제곱한 결과: [1, 4, 9, 16, 25]소제목: forEach 메서드 주의사항
- forEach 메서드는 배열의 각 요소에 대해 순차적으로 작업을 수행하므로, 작업 중간에 반복을 멈출 수 없습니다. 중간에 반복을 멈추고 싶다면
for또는for...of반복문을 사용해야 합니다. - forEach 메서드의 콜백 함수에서
return문을 사용하여 값을 반환해도, 해당 반환 값은 forEach 메서드 자체에서는 활용되지 않습니다. 따라서 forEach 메서드를 사용하여 배열의 값을 변경하거나 가공하는 용도로 활용하는 것이 적합합니다. - forEach 메서드는 ES5부터 지원되기 시작하였으며, IE8 이하의 오래된 브라우저에서는 동작하지 않을 수 있습니다. 따라서, 특정 브라우저 호환성을 고려해야 할 경우에는 대안적인 방법을 고려해야 합니다.
이렇게, 자바스크립트의 배열과 배열 메서드 중 forEach에 대해 알아보았습니다. 배열을 순회하며 작업을 수행하는 forEach 메서드는 반복적인 작업을 처리할 때 유용하게 활용됩니다. 자바스크립트의 다양한 배열 메서드를 익히고, 필요한 상황에 적절하게 활용해보세요!