Javascript: Array[1] - for / for of / forEach

 

 

Javascript에서 배열을 출력하는데 총 3가지 방법이 있다. 

1. for문 이용
2. for of 이용 
3. forEach 이용 

여기서 가장 눈여겨 볼 것은 forEach(); 라는 API다. 

 

[ forEach(); 자세히 살펴보기 ] 

forEach에 대한 설명. 유튜버 엘리 선생님은 이를 적극 활용하라고 하셨다...! 

forEach는 배열에 들어있는 값마다 콜백함수를 수행한다.

총 2가지 파라미터가 전달되는데,

첫번째 파라미터는 콜백함수 callbackfn: (value: T, index: number, arr: T[]) => void

두번째 파라미터는 알 수 없는 값 thisArg? : any 이다. 여기서 이렇게 '?'가 쓰여있으면 파라미터 값을 넣지 않아도 된다고 한다...!

 

 

첫번째 파라미터의 콜백함수에 매개변수를 생략하지 않고 입력한 뒤 실행시켜보면 아래와 같이 출력된다. 

여기서 어지간하면 콜백함수의 마지막 매개변수인 arr: T[] 는 잘 쓰지 않는다고 하니,

매개변수 value와 index만 요긴하게 잘 사용하면 되겠다.  

 

 

forEach를 조금 더 간단하게 설명하자면,

배열의 각 인덱스에 알아서 접근해, 각각 내가 전달한 함수를 실행시켜주는 것이다. 

아래 사진과 같이 arr에는 총 3개의 인덱스 arr[0], arr[1], arr[2]가 존재한다. 

여기서

1) arr[0]에 접근했을 때 function(){  console.log('Hi'); } 를 실행

2) arr[1]에 접근했을 때 function(){  console.log('Hi'); } 를 실행

3) arr[2]에 접근했을 때 function(){  console.log('Hi'); } 를 실행

하여, console에 Hi가 총 3번 출력되는 것을 확인할 수 있다. 

 

 

* forEach문에 쓰이는 콜백함수는 이름이 없는 어나니머스(anonymous) 함수니,

이를 아래와 같이 화살표 함수로 표현해줄 수 있다. 

 

 

 

 

Array는 정말 파도파도 끝이 없는 것 같다.

for문에 익숙해져있어 버릇처럼 이것만 사용하려고 하는데,

더 나은 개발을 하려면 [for of], [forEach]와도 빨리 친해져야겠다. 

화살표 함수 쓰는 것에도 익숙해져야한다...!

 

 

[ 참고 ]

이 글은 유튜버 드림코딩 by 엘리 님의 https://www.youtube.com/watch?v=yOdAVDuHUKQ
자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 | 프론트엔드 개발자 입문편 (JavaScript ES6 ) 영상을 보고 정리한 내용입니다. 
혹시 문제가 된다면 댓글 남겨주세요. 감사합니다.