[Javascript] 반복문 for, map, forEach, filter 사용법과 차이점

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

코딩테스트 문제를 풀다보면 배열에 반복문을 적용하는 경우가 굉장히 많습니다.

매번 어떤 함수를 적용할까..하는 걱정을 하곤 하는데요..

오늘은 여러가지 배열을 반복하는 함수에 대해 정리해 보려고 합니다.

 

🔎 for( )

---

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

참고로 중간에 break 문을 만나면 반복문을 더 이상 진행하지 않고 즉시 탈출합니다.

 

예시

array = [ 1, 2, 3, 4, 5 ] 라는 배열이 있다고 할 때 배열의 아이템을 순서대로 출력해봅시다.

let array = [1, 2, 3, 4, 5];

for(let i=0; i<array.length; i++) {
  console.log(array[i]);
};

출력 결과

 

🔎 map( )

---

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

배열을 순회하므로 중간에 break 문을 사용할 수 없습니다.

따라서 중간에 break 문을 사용해야 한다면 for문을 사용해야 합니다.

 

예시

array = [ 1, 2, 3, 4, 5 ] 라는 배열이 있다고 했을 때 배열의 각 아이템에 2를 곱하여 다시 배열을 얻어봅시다.

let array = [1, 2, 3, 4, 5];

let array2 = array.map(item => item * 2);

console.log(array2);

map 문을 통해 바로 새로운 배열을 리턴하여 array2라는 변수에 잘 담긴 것을 확인할 수 있었습니다.

출력 결과

 

🔎 forEach( )

---

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

map()과 달리 새 배열을 리턴하지 않습니다.

또한 forEach()에서도 중간에 break를 사용할 수 없습니다.

 

예시

array = [ 1, 2, 3, 4, 5 ] 라는 배열이 있다고 할 때, 배열의 원소를 순회하면서 배열의 각 원소들을 출력해 봅시다.

let array = [1, 2, 3, 4, 5];

array.forEach(item => console.log(item));

출력 결과

 

🔎 filter( )

---

filter()는 함수 이름에서 부터 알 수 있듯이

callback 함수 부분에 조건식을 사용하여 해당 조건에 true인 원소들만 모은 새 배열을 리턴합니다.

 

예시

array = [ 1, 2, 3, 4, 5 ] 라는 배열이 있다고 할 때, 홀수인 아이템만 있는 새 배열을 구해봅시다.

let array = [1, 2, 3, 4, 5];

const array1 = array.filter(item => item % 2 != 0);

console.log(array1);

출력 결과

 

---

📌 정리

• for() : 배열을 순회, 중간에 break를 사용해야 할 때 사용
• map() : 배열을 순회, 배열의 아이템의 값을 조작하여 새 배열을 리턴해야 할 때 사용
• forEach() : 배열을 순회, 새 배열을 리턴하지는 않음
• filter() : 배열을 순회, 배열의 아이템 중 조건으로 추출을 해야 할 떄 사용