IT/JavsScript

반복문 'for', 'forEach', 'map' 사용법과 차이점

라임웨일 2022. 6. 23. 09:42
반응형

 

자바스크립트의 for( ), forEach( ), map( ) 함수에 대해 비교를 통해 알아보겠습니다.​

1) for( )

초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다.

중간에 "break;" 문을 만나면 반복문을 중단합니다.

for ([initialization]; [condition]; [final-expression])
   statement​

2) forEach( )

배열의 각 요소에 대해 callback을 실행합니다.

배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다.

array.forEach(callback(currentvalue[, index[, array]])[, thisArg])

3) map( )

배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴합니다.

배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다.

array.map(callback(currentValue[, index[, array]])[, thisArg])

실습을 통해 익혀보겠습니다.

👍 for( )은 인덱스 0부터 시작해서 배열의 길이만큼 순회하면서 배열의 각 원소들을 출력합니다.

const animals = ["lion", "tiger"];
for (let i=0; i<animals.length; i++) {
  console.log(animals[i]);
}
// [콘솔 출력 결과]
// lion
// tiger

👍 forEach( )은 배열을 순회하면서 배열의 각 원소들을 출력합니다.

const animals = ["lion", "tiger"];
animals.forEach(animal => {
  console.log(animal);
});
// [콘솔 출력 결과]
// lion
// tiger

👍 map( )은 배열을 순회하면서 배열의 각 원소들을 출력합니다. 특이한 점은 forEach( )와 달리 실행결과를 모은 새 배열을 리턴한다는 것입니다. 아래는 별도의 return이 없기때문에 순회했던 개수만큼의 undefined 원소가 있습니다.

const animals = ["lion", "tiger"];
rr = animals.map(animal => {
  console.log(animal);
});
console.log(rr); // [undefined, undefined]
// [콘솔 출력 결과]
// lion
// tiger
// [undefined, undefined]

따라서 map의 용도를 제대로 살리려면 return 문이 있어야 합니다. return이 포함되자 배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴했습니다.

 
const animals = ["lion", "tiger"];
rr = animals.map(animal => {
  console.log(animal);
  return "mammal " + animal
});
console.log(rr); // ["mammal lion", "mammal tiger"]
// [콘솔 출력 결과]
// lion
// tiger
// ["mammal lion", "mammal tiger"]

이상 자바스크립트의 for( ), forEach( ), map( ) 함수에 알아보았습니다.

단순 반복이라면 for( ),

배열을 순회하려면 forEach( ), 배열을 순회 후 새 배열을 얻고 싶다면 map( ) 사용할 것을 권장합니다.

 

출처 : https://m.blog.naver.com/wideeyed/221877912230

반응형
광고차단(애드블록)프로그램이나 브라우저를 사용중이시면 프로그램을 비활성화이나 블로그 주소를 예외 처리 해주시면 광고가 노출됩니다. 귀찮고 번거롭겠지만 광고 클릭은 저에게는 큰 힘이 됩니다. 🙇🏻‍♂️🙇🏻‍♀️
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
//