javascript : forEach 예제 및 사용법

 

★forEach

⭐️ foreach 는  map 과 달리 새로운 배열을 반환하지 않고 원본 배열에서 순회하면서  수정하는 방식이다. (간략한 코드에서 사용하면 좋다)

 

 

📕 예제 1 

💡배열 요소들을 문자열로 변환하여 새로운 배열 생성하기

const names = ['Alice','Bob','Charlie'];
const greetings = [];

names.forEach(function(name) {
	greetings.push(`Hello, ${name}`); // 배열 끝에 값 추가하기
});

console.log(greetings); // 출력 ['Hello , Alice!', 'Hello, Bob!', 'Hello, Charlie']

 

 

 

📕 예제 2

💡 모든 사람의 나이를 5살씩 증가시킴

const people = [
    {name: 'Alice', age: 30},
    {name: 'Bob', age: 25},
    {name: 'Charlie', age: 35}
];

people.forEach(function(person) {
    person.age += 5; // 모든 사람의 나이를 5살씩 증가시킴
});

console.log(people);
/* 출력:
    [
        {name: 'Alice', age: 35},
        {name: 'Bob', age: 30},
        {name: 'Charlie', age: 40}
    ]
*/

 

person.age 에 += 을 쓰면 기존 age + 5 를 출력해준다.

즉, 모든 사람의 나이를 5살씩 증가 시킨다.

 

 

 

 

forEach() 함수를 사용할땐 간단하게 배열 요소들에 대해 다양한 작업을 수행하는 방법을 보여줍니다.

forEach() 함수를 사용하면 반복문을 직접 작성하지 않고도 간결하게 배열을 순회하며 원하는 작업을 수행할 수 있습니다.

하지만, 중간에 반복을 중단할 경우에는 for 루프나 while 루프 등과 break 문을 사용하는 것이 더 적합하고

새로운 배열을 생성해야 할 때에는 map ( ) 함수를 사용하는것이 편리 합니다.

const numbers = [1, 2, 3, 4];
let foundNumber = null;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 3) {
        foundNumber = numbers[i];
        break; // 반복 중단
    }
}

console.log(foundNumber); // 출력: 4

 

for 문을 사용하면 numbers[i] > 3 즉, 3의 이상인 숫자가 아닐경우 반복을 중단한다.

1,2,3 일경우 if 문은 실행이 되지 않고 4 가 왔을때 if 문이 실행되어 반복이 중단된다.

 

 

💡 retrun 과 break 의 차이
:  함수 안에 작성된 루프 안에서 break 가 쓰였다면, break 를 감싸고 있는 루프를 빠져 나가고 함수 밖으로는 나가지 않는다.
return 은 함수 실행을 종료하고 함수를 호출한 곳으로 실행 흐름을 옮긴다.