HTML, CSS, JavaScript

[JavaScript] forEach() 함수사용방법

15호의 개발자 2021. 8. 22. 14:57
반응형

[JavaScript] forEach() 함수사용방법

 

자바스크립트에서 forEach() 함수는 배열 요소 만큼 함수를 실행시키는 함수이다.

 

예시를 바로 봐보자.

 

1.

const array = [1, 2, 3];

function sayHello() {
    console.log("Hello");
}

array.forEach(sayHello);

1단계. array의 요소는 3개이다.

2단계. forEach에서 실행할 함수는 sayHello이다. (sayHello뒤의 괄호()는 적지 않는다.)

3단계. sayHello를 3번 실행한다. (=sayHello를 array의 요소 개수만큼 실행한다.)

 

위 예시의 결과 Hello가 3번 출력된다.

 

 

2.

forEach() 함수는 각 element에 접근하는 방식이다.

element에 직접 접근하는 것도 가능하다.

const array = [1, 2, 3];

function sayHello(item) {
    console.log("Hello ", item);
}

array.forEach(sayHello);

이 결과 출력 값은 아래와 같다. array의 1, 2, 3이 출력된 걸 볼 수 있다.

Hello 1
Hello 2
Hello 3

 

 

3.

위의 2번 방식을 더 간단히 표현해보자.

바로 arrow function(화살표 함수)을 이용하는 방식이다.

const array = [1, 2, 3];

array.forEach((item) => console.log("Hello ", item));

 

forEach에서 실행시킬 함수를 forEach 구문에 바로 적으면 된다.

출력 값은 아래와 같다.

Hello 1
Hello 2
Hello 3

 

반응형