React ForEach, Map

ForEach, Map

# 시작하며

오늘은 React에서 사용하는 반복문인 ForEach와 Map에 대해 알아볼 것이다. 물론 React 내부에서 For 반복문을 사용할 수도 있지만, ForEach와 Map이 사용되는 이유와, 두 가지 반복문의 차이점에 대해서도 공부해볼 것이다.

 

# ForEach and Map

ForEach와 Map에 대해 알아보기 전에, For문에 대해 살펴보면, 기존에 알던 것과 동일하다. 

for(initialization ; condition ; final-expression)
	statement

이에 추가로 break와 continue를 사용하여 상태변화를 조정할 수 있다.

 

다음으로 forEach와 map에 대해 알아보자. 두 가지 모두 반복을 사용한다는 공통점이 있기 때문에 자칫하면 혼동하기 쉬운 문법이지만, forEach와 map은 다른 것이다. 가장 큰 특징은 Return Value에 대한 여부이다.

 

 

• forEach()

const items = ["one", "two"];

items.forEach(item => {
  console.log(item);
});

forEach는 반복되는 item별로 기능을 실행하지만 결과 값이 반환되지 않는다. 반복하는 배열에 대해 callback을 실행하며 순회하고, 중간에 break에 대한 사용이 불가하다.

 

 

• map()

const items = ["one", "two"];

const result = items.map(item => {
  console.log(item);
  if(item === "one") return item;
});

map은 각 array의 item별로 기능을 실행하고, 그 결과를 반환한다. return으로 배열에 각 요소에 대한 callback을 싱행하고, 조건에 맞는 실행 결과를 가진 새로운 값을 리턴했다.

 

*추가 요소

• 동치 연산자 ===와 ==의 차이

* Equality(==)

==와 그 반대인 !=는 Equality 연산자이다. React.js에서 ==를 사용하면 연산이 되기 전에 피 연산자들을 비교가 가능하도록 동일 형태로 변환시킨 후 비교한다는 것이다. 

112 == "112"			//return true
true == 1			//return true
undefined == null 		//return true
null == false 			//return false
true == 2			//return false

 

* Identity(===)

===와 !==는 Identity 연산자이다. 해당 Identity는 Equality와 다르게 형 변환을 하지 않고 연산을 진행한다.

112 === "112"			//return false
true === 1			//return false
undefined === null 		//return false
true === 2			//return false