[javascript]반복문(for, while)과 배열 메소드(forEach,map) 전격비교!

 

배열에 적용하여 사용할 수 있는 반복문 for, while

배열 메소드인 forEach, map

 

저는 이 녀석들이 왜 이렇게 헷갈리고 어디 써야할지 고민될까요...

그래서 이번 기회에 제대로 정리해보려고 합니다!!

화이툉!!!

 

💫 반복문

정말 자주 사용하게 되는 반복문입니다. 

 

while 반복문

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

조건이 들어가는 부분인 condition이 true이면 반복문 본문의 코드가 실행됩니다.

let i = 0;
while (i < 5) { 
  console.log( i ); // 0, 1, 2, 3, 4 출력
  i++;
}

let i = 5;
while (i) { // i가 0이 되면 조건이 false가 되면서 실행 중지
  console.log( i ); // 1, 2, 3, 4, 5 출력
  i--;
}

위와 같이 while을 사용할 수 있고, 조건과 i++; i--;를 이용해서 반복문의 방법을 정할 수 있습니다.

 

for 반복문

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

 

 

 

 for문은 다음과 같이 실행됩니다.

begin 실행 -> (condition = true → body 실행한 후, step 실행) -> (condition = true → body 실행한 후, step 실행) -> (condition = true → body 실행한 후, step 실행) -> (condition = true → body 실행한 후, step 실행)

begin이 한 번 실행한 후, condition 확인 후 body, step을 반복 실행합니다.

for (let i = 0; i < 5; i++) { 
  console.log(i); // 0, 1, 2, 3, 4가 출력됩니다.
}

반복문은 조건이 false가 되면 종료됩니다.

그런데 break를 사용해서 언제든 원하는 때에 반복문을 빠져나올 수 있습니다.

 

 

💫 배열 메소드

배열 메소드 중에서도 forEach와 map을 정리해보겠습니다.

for, while문과 다르게 배열 메소드인 forEach와 map은  break를 사용할 수 없습니다.

즉, 배열의 모든 요소를 순환한답니다.

 

forEach()

array.forEach(callbackFn)
array.forEach(callbackFn, thisArg)

// callbackFn = 배열의 각 요소에 대해 실행할 함수
// thisArg = this를 실행할 때 사용할 값

const numArr = [1, 2, 3, 4, 5];
numArr.forEach(num => num ** 2);

위와 같이 각각 요소를 순환하며 실행됩니다.

 

map()

map(callbackFn)
map(callbackFn, thisArg)

// callbackFn = 배열의 각 요소에 대해 실행할 함수
// thisArg = this를 실행할 때 사용할 값

const numArr = [1, 2, 3, 4, 5];
numArr.map(num => num ** 2);

forEach와 마찬가지로 각 요소를 순환하며 실행합니다.

정리해보니 생김새와 사용법이 같아보이지만 forEach 와 map의 차이점이 있습니다.

const numArr = [1, 2, 3, 4, 5];

// forEach 
numArr.forEach(num => num ** 2); // undefined

//map
numArr.map(num => num ** 2); // [1, 4, 9, 16, 25]

forEach를 사용한 경우 원본 배열을 변경하지 않아 forEach의 반환값은 언제나 undefined가 되지만,

map은 콜백 함수의 반환값으로 구성된 새로운 배열을 반환합니다!!!!

 

 

따라서 forEach를 사용할 때는

const numArr = [1, 2, 3, 4, 5];
const newNumArr = [];

// forEach 
numArr.forEach(num => newNumArr.push(num ** 2));
console.log(newNumArr) // [1, 4, 9, 16, 25]

위와 같이 새로운 배열을 선언하고, 그 배열 안에 결과를 넣어주는 작업이 필요합니다. 

map보다 forEach가 복잡한 것 같지만, 

기존 배열을 건드리면 안될 때 유용할 듯합니다.

---

이렇게 자주 쓰이는 반복문과 배열 메소드를 정리해보았습니다.

글 읽어 주셔서 감사합니다.

부족한 부분이 있다면 댓글로 알려주시면 감사히 배우겠습니다:)