Javascript: Array[1] - for / for of / forEach
Javascript에서 배열을 출력하는데 총 3가지 방법이 있다.
1. for문 이용
2. for of 이용
3. forEach 이용
여기서 가장 눈여겨 볼 것은 forEach(); 라는 API다.
[ 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 ) 영상을 보고 정리한 내용입니다.
혹시 문제가 된다면 댓글 남겨주세요. 감사합니다.