자바스크립트의 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( ) 사용할 것을 권장합니다.
'IT > JavsScript' 카테고리의 다른 글
자바스크립트 this 이해하기 (feat. call, apply, bind의 차이) (0) | 2022.07.11 |
---|---|
Lodash 활용법 알아보기 (0) | 2022.06.28 |
호이스팅(Hoisting) 이해하기 (0) | 2022.06.15 |
객체 복사 ( Object.assign (), $.extend() ) (0) | 2022.06.13 |
클로저 이번에 재대로 이해하기 (0) | 2022.06.02 |
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)