map() 함수에 대해서 (아직 헷갈려!)

2022. 4. 8. 11:30Web/Javascript

요즘 리액트를 공부하면서 map() 함수가 눈에 많이 보인다. 그리고 이전에 파이썬 알고리즘을 공부할 때도 map() 함수를 썼었는데 이참에 map() 함수에 대해 좀 더 자세히 공부해보고자 한다. 아직까지는 개념이 헷갈리는 것 같다. 

 

 

map() 

- '자바스크립트' '배열' '객체 내장 함수'인 map 함수를 사용하면 반복되는 컴포넌트를 렌더링 할 수 있다.

- map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱 한 후 그 결과로 새로운 배열을 생성한다

 

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

let processed = numbers.map(function(num) {
	return num*nu
   });
   
 ---화살표 함수로 정의시 
 const result = numbers.map(num => num*num);

 

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

fruits = ['apple','banana','kiwi','melon']

frutis.map(function(fruit){ 
	return fruit+"love";
}) 

결과 : ["applelove","bananalove","kiwilove","melonlove"]

 

map() 함수는 기존의 배열을 callbackFunction에 의해 새 배열을 만드는 함수이다. 그러니 기존의 배열이 변하지는 않는다. (callback은 새로운 배열의 요소를 생성하는 함수이다)