010_for, forEach, map(재정리 ver.) 👀

어..?

 - 최근 현직자와의 모의 면접에 참관한 적이 있는데, 여러 질문 중 다음과 같은 질문을 하신 적이 있었다.

"forEach와 map의 차이에 대해 설명해보시겠어요?"

- 이 질문을 듣고 처음엔 당연히 안다고 생각하고 면접자분께서 답하기 전에 혼자서 답을 생각해봤는데, '어..?' 라는 말밖에 나오지 못했다.
- 이에 이번 포스트를 통해 다시 한 번 정리하고 확실하게 개념을 다져보고자 한다.

- 추가 : 뭔가 글을 썼던 것 같아서 찾아보니 자바스크립트 파트에 가장 처음 쓴 글이 forEach와 map의 차이였... 반성하는 마음으로 이번에는 절대 잊지 않겠다는 각오와 함께 써보도록 하겠다 😢

 

Chapter 1. for()

- for()은 초기값부터 시작해 증가 또는 감소하면서 조건에 부합하면 계속 순회한다.
- 중간에 'break;' 문을 만나면 반복문을 중단한다.

코드 구조

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

• initialization
  • 식 또는 변수 선언. var 또는 let 키워드를 사용해 새로운 변수를 선언할 수도 있다.
  • var 키워드로 선언한 변수는 반복문에 제한되지 않는다. 즉, for문과 같은 범위에 위치한다.
  • let 키워드로 선언한 변수는 반복문의 지역 변수가 된다.
• condition
  • 매 반복마다 평가할 식.
  • 평가 결과가 참이라면 statement를 실행하며, 이 식을 넣지 않으면 계산 결과는 언제나 참이다.
  • 계산 결과가 거짓이면 for문의 다음 식으로 건너뛴다.
• final-expression
  • 매 반복 후 평가할 식.
  • 주로 변수를 증감하거나 바꿀 때 사용한다.
• statement
  • 조건의 평과 결과가 참일 때 실행하는 문.
  • 아무것도 실행하지 않으려면 공백문 (;)을 사용하면 된다.

Chapter 2. Array.prototype.forEach()

- forEach() 메서드는 배열의 각 요소에 Callback을 실행한다.
- 특징으로는 forEach()는 문 밖으로 리턴값을 받지 못한다.

코드 구조

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

• callback
  • 각 요소에 대해 실행할 함수.
• currentValue
  • 처리할 현재 요소.
• index(옵션)
  • 처리할 현재 요소의 인덱스
• array (옵션)
  • forEach()를 호출한 배열
• thisArg (옵션)
  • callback을 실행할 때 this로 사용할 값.

// for 반복문과 forEach() 비교

const items = ['item1', 'item2', 'item3'];
const copy = [];

// for
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// forEach()
items.forEach(function(item){
  copy.push(item);
});

// forEach()는 리턴값을 보내지 않는다!

let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
	return value;
});
console.log(a);   //undefined

 

Chapter 3. Array.prototype.map()

- map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

코드 구조

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

// 매개변수는 forEach()랑 동일하다!!

// forEach()와 map()의 차이


// Example of forEach()
const array = [1, 2, 3, 4, 5];
const multiplyArray = [];

array.forEach(num => {
  multiplyArray.push(num * 3);
});

console.log(multiplyArray); // [3, 6, 9, 12, 15]


// Example of map()
const array = [1, 2, 3, 4, 5];
const multiplyArray = array.map(num => num * 3);

console.log(multiplyArray); // [3, 6, 9, 12, 15]

 

정리

1. forEach()로 할 수 있는 일은 map()으로도 할 수 있으며, 그 반대도 가능하다!
2. forEach()는 콜백 함수가 현재 배열을 변경하도록 한다. map()은 그 대신 새 배열을 반환하도록 한다.
3. forEach()는 리턴값이 없다! (undefined)
4. for문은 break을 통해 반복을 멈출 수 있지만 forEach()와 map()은 안된다.