map関数

2025/03/01 React

mapとforEachの違い

map関数内でreturnすれば、配列を受け取り、戻り値が配列形式でリターンされる

一方でforEach関数内でreturnしても、その値はundefinedとなってしまうのでダメ

const array = [1,2,3]

const result = array.map( (number) => {
  number++;
  return num;
}); 
console.log(result); --> [2,3,4]

const result2 = array.forEach( (number) => {
  number++;
  return num;
});
console.log(result2) --> undefinedと表示される

return内での使い方

return内では<li>タグはHTMLなので、=>{}ではなく、=>()となる

const App = () => {
  const array = [1,2,3];
  return (
    <ul>
      {array.map((element, i) => (  <----ココ！
        <li key={i}>{element}</li>
      ))}
    <ul/>
  );
};

配列内にオブジェクトが入ってるパターン

const students =[
  {
    id: '0001',
    name: 'AAA',
    age: 20,
  },
  {
    id: '0002',
    name: 'BBB',
    age: 30,
  }
];
// 書き方その１
const newArray = students.map( (student) => {
  return { [student.id]: student.name }
});
console.log(newArray);

// 書き方その２（どちらも同じ結果を返す）
const newArray = students.map( ({id, name}) => (
  { [id]: name }
));
console.log(newArray);

BACK