map() 함수 사용하기

자바스크립트 배열의 map() 함수

---

map() 함수는 자바스크립트 배열 객체의 내장 함수입니다. 

while 또는 for 로 반복문을 짜는 것처럼 자바스크립트에서는 map 함수를 이용해서 반복되는 컴포넌트를 렌더링 할 수 있습니다. 

• 문법

arrayItem.map(callback, [argument])

 

arrayItem은 배열로 이루어진 데이터입니다. 이 값에 map 함수를 사용합니다. 이때 callback 함수에는 배열 내부 각 요소들로 생성하는 함수로 currentValue, index, array를 파라미터로 가집니다.

• cueentValue : 배열의 항목 중 현재 처리할 항목 
• index : currentValue의 인덱스 값
• array : 현재 처리하고 있는 원본 배열 

그리고 콜백 함수 내부에서 사용할 레퍼런스도 두번째 파라미터로 사용할 수 있습니다. 

 

• 예제 

1,2,3,4,5를 요소로 갖는 배열인 numbers에 map 함수를 사용합니다. 

map 함수의 첫번째 파라미터인 콜백 함수에 num은 currentValue로 각 루프마다 numbers의 요소 1, 2, 3, 4, 5를 담게 됩니다. 

그리고 num * num 을 반환하게 됩니다.

즉, 첫번째 루프, num = 1 일때 1을 반환하고, 두번째 루프 num = 2 일때 4 를 반환하게 됩니다. 

map 함수를 거친 numbers를 받은 processed를 콘솔에 찍어보니 numbers의 각 요소가 제곱되어 저장된 것을 확인할 수 있습니다. 

 

---

References

• 리액트를 다루는 기술 (김민준)