[자바스크립트] - map 함수

map 함수의 작동 순서

1. array의 자료 갯수만큼 함수안의 코드를 실행해줌.

[1,2,3].map(function(){
	console.log('1');	
})

• 이러면 console에 1이 3번찍힘

2. 함수의 파라미터는 array안에 있던 자료임.

[1,2,3].map(function(a){
	console.log(a);	
})

• 이러면 console에 1,2,3이 차례대로 표시됨

3. return에 뭐 적으면 array로 담아줌.

[1,2,3].map(function(){
	return '123';
})

• 이러면 배열이 [123,123,123] 으로 바뀜.

[1,2,3].map(function(){
	return <div>안녕</div>;
})

• 📌 이런식으로 작성하면, 바로 화면 상에 안녕이라는 div가 3개 출력됨.
  왜냐면, 위의 코드는 리액트상에서 {[<div>안녕</div>,<div>안녕</div>,<div>안녕</div>]} 이 문법과 동일한데, 자바스크립트상에서 배열은 표현식이기 때문에 바로 출력되어서 보여짐.
  즉, {[1,2,3]} 이라는 문법이 화면상에 123으로 표시되는것과 같은 맥락임.
  (표현식과 문장 참고)

4. 두번째 인자는 index를 뜻하며, 0~n까지 숫자가 1씩 증가함

[1,2,3].map(function(a,i){
	console.lof(i);
})

• 이러면 console에 0,1,2 가 출력됨.