配列の変換メソッド — map・filter・reduce・forEach

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
 
console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5]（元の配列はそのまま）

const result = ['a', 'b', 'c'].map((element, index, array) => {
  // element: 現在の要素（"a", "b", "c"）
  // index:   現在のインデックス（0, 1, 2）
  // array:   元の配列自体
  return `${index}: ${element}`;
});
// ["0: a", "1: b", "2: c"]

[1, 2, 3].map((n) => []); // [[], [], []] ← 長さは3のまま
[1, 2, 3].map((n) => undefined); // [undefined, undefined, undefined]

// ❌ 1より大きいものだけ残すつもりだが、除けていない
const result = [1, 2, 3].map((n) => {
  if (n > 1) return n;
});
// [undefined, 2, 3] ← 長さは3のまま

const users = [
  { id: 1, first_name: '太郎', last_name: '田中' },
  { id: 2, first_name: '花子', last_name: '佐藤' },
];
 
const displayUsers = users.map((user) => ({
  id: user.id,
  fullName: `${user.last_name} ${user.first_name}`,
}));
// [{ id: 1, fullName: "田中 太郎" }, { id: 2, fullName: "佐藤 花子" }]

// ❌ mapの戻り値を捨てている
users.map((user) => {
  console.log(user.name);
});
 
// ⭕
users.forEach((user) => {
  console.log(user.name);
});

const fruits = ['りんご', 'みかん', 'ぶどう'];
 
fruits.forEach((fruit) => {
  console.log(fruit);
});
// りんご
// みかん
// ぶどう

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}番目: ${fruit}`);
});
// 1番目: りんご
// 2番目: みかん
// 3番目: ぶどう

const users = [
  { name: '太郎', email: 'taro@example.com' },
  { name: '花子', email: 'hanako@example.com' },
];
 
users.forEach((user) => {
  sendWelcomeMail(user.email);
});

const counts = {};
 
['apple', 'banana', 'apple'].forEach((fruit) => {
  counts[fruit] = (counts[fruit] ?? 0) + 1;
});
 
console.log(counts); // { apple: 2, banana: 1 }

const numbers = [1, 2, 3];
 
const mapped = numbers.map((n) => n * 2);
console.log(mapped); // [2, 4, 6]
 
const fromForEach = numbers.forEach((n) => n * 2);
console.log(fromForEach); // undefined

[1, 2, 3, 4].forEach((n) => {
  if (n === 3) return; // 3 だけスキップ。ループは続く
  console.log(n);
});
// 1
// 2
// 4

for (const n of [1, 2, 3, 4]) {
  if (n === 3) break;
  console.log(n);
}
// 1
// 2

const ids = [1, 2, 3];
 
// ❌ ほぼ同時に走り、完了を待てない
ids.forEach(async (id) => {
  await fetch(`/api/users/${id}`);
});
 
// ⭕ 1件ずつ待つ
for (const id of ids) {
  await fetch(`/api/users/${id}`);
}

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter((n) => n % 2 === 0);
 
console.log(evens); // [2, 4, 6]

const products = [
  { name: 'ノートPC', price: 120000, inStock: true },
  { name: 'マウス', price: 3000, inStock: true },
  { name: 'キーボード', price: 15000, inStock: false },
  { name: 'モニター', price: 45000, inStock: true },
];
 
const result = products.filter((p) => p.inStock && p.price >= 10000);
// [{ name: "ノートPC", ... }, { name: "モニター", ... }]

const inStockNames = products.filter((p) => p.inStock).map((p) => p.name);
// ["ノートPC", "マウス", "モニター"]

const result = [1, 2, 3].filter((n) => n > 10);
console.log(result); // []
console.log(result.length); // 0

const joined = ['a', 'b', 'c'].reduce(
  (accumulator, currentValue, currentIndex, array) => {
    // accumulator:  前回の戻り値（初回は初期値の ""）
    // currentValue: 現在の要素（"a", "b", "c"）
    // currentIndex: 現在のインデックス（0, 1, 2）
    // array:        元の配列自体（["a", "b", "c"]）
    const isLast = currentIndex === array.length - 1;
    return accumulator + currentValue + (isLast ? '' : ', ');
  },
  '',
);
// "a, b, c"

const numbers = [1, 2, 3];
const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0);
// 6

// 初期値あり: コールバックは3回呼ばれる（index は 0, 1, 2）
[1, 2, 3].reduce((acc, cur) => acc + cur, 0); // 6
 
// 初期値なし: acc の初回は 1、コールバックは2回だけ呼ばれる（index は 1, 2）
[1, 2, 3].reduce((acc, cur) => acc + cur); // 6

// ❌ 空配列でエラー
[].reduce((acc, cur) => acc + cur);
// TypeError: Reduce of empty array with no initial value
 
// ⭕ 初期値を指定すれば空配列でも安全
[].reduce((acc, cur) => acc + cur, 0); // 0

const scores = [72, 95, 58, 88, 100];
const max = scores.reduce((acc, cur) => Math.max(acc, cur), -Infinity);
// 100

const orders = [
  { product: 'PC', category: 'electronics' },
  { product: 'シャツ', category: 'clothing' },
  { product: 'マウス', category: 'electronics' },
  { product: 'パンツ', category: 'clothing' },
];
 
const grouped = orders.reduce((acc, order) => {
  const key = order.category;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(order);
  return acc;
}, {});

const grouped = Object.groupBy(orders, (order) => order.category);

// ❌ reduceで書いているが、やっていることはfilter + map
const result = numbers.reduce((acc, n) => {
  if (n > 3) acc.push(n * 2);
  return acc;
}, []);
 
// ⭕ 意図が明確
const result = numbers.filter((n) => n > 3).map((n) => n * 2);

const transactions = [
  { id: 1, type: 'income', amount: 50000, date: '2024-06' },
  { id: 2, type: 'expense', amount: 3000, date: '2024-06' },
  { id: 3, type: 'expense', amount: 15000, date: '2024-07' },
  { id: 4, type: 'income', amount: 80000, date: '2024-07' },
  { id: 5, type: 'expense', amount: 5000, date: '2024-06' },
];
 
const juneExpenses = transactions
  .filter((t) => t.type === 'expense')
  .filter((t) => t.date === '2024-06')
  .reduce((sum, t) => sum + t.amount, 0);
// 8000

const expenses = transactions.filter((t) => t.type === 'expense');
console.log('expenses:', expenses);
const total = expenses.reduce((sum, t) => sum + t.amount, 0);