[Javascript] Map 함수

Map 함수

map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

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

매개변수
callback
새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
currentValue
처리할 현재 요소.
index Optional
처리할 현재 요소의 인덱스.
array Optional
map()을 호출한 배열.
thisArg Optional
callback을 실행할 때 this로 사용되는 값.
반환 값
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

import React, { useState, useEffect } from 'react';
const [articleComponentList, setArticleComponentList] = useState([]);
  useEffect(() => {
    fetch('/data/ArticleComponentData.json')
      .then(response => response.json())
      .then(data => setArticleComponentList(data));
  }, []);
  return (
    <>
      {articleComponentList.map(articleComponent => {return (<p key={articleComponent.id}>{articleComponent.name}<p>);
      })}
    </>
  );
}

React는 컴포넌트를 재사용하는 경우에 map함수를 사용한다
원본의 불변성을 유지해주기때문이다.

🐔참고문헌

·mdn web 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map