【JavaScript】関数の基本と使い方｜宣言・式・アロー関数の違い・引数・コールバック・クロージャまで解説

function greet(name) {
  return `こんにちは、${name}さん！`;
}

console.log(greet('田中')); // "こんにちは、田中さん！"

const greet = function(name) {
  return `こんにちは、${name}さん！`;
};

console.log(greet('田中')); // "こんにちは、田中さん！"
// ※ 宣言より前に呼ぶと TypeError になる（ホイスティングされない）

// 基本形
const greet = (name) => {
  return `こんにちは、${name}さん！`;
};

// 引数が1つのときは () を省略可
const double = x => x * 2;

// 式がそのまま戻り値のときは {} と return を省略可（暗黙的 return）
const add = (a, b) => a + b;

console.log(double(5));  // 10
console.log(add(3, 4));  // 7

function greet(name = 'ゲスト', greeting = 'こんにちは') {
  return `${greeting}、${name}さん！`;
}

console.log(greet());              // "こんにちは、ゲストさん！"
console.log(greet('田中'));         // "こんにちは、田中さん！"
console.log(greet('田中', 'おはよう')); // "おはよう、田中さん！"

// undefined を渡してもデフォルトが適用される
console.log(greet(undefined, 'こんばんは')); // "こんばんは、ゲストさん！"

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

// 先頭の引数は通常通り受け取り、残りをまとめる
function log(level, ...messages) {
  console.log(`[${level}]`, messages.join(' '));
}

log('INFO', 'サーバー', '起動完了'); // "[INFO] サーバー 起動完了"

// オブジェクトの分割代入（名前付き引数のような使い方）
function createUser({ name, age = 0, role = 'user' }) {
  return { name, age, role };
}

const user = createUser({ name: '田中', age: 30 });
console.log(user); // { name: '田中', age: 30, role: 'user' }

// 配列の分割代入
function getFirstTwo([first, second]) {
  return { first, second };
}

console.log(getFirstTwo([10, 20, 30])); // { first: 10, second: 20 }

// オブジェクトで返す（名前付きで分かりやすい）
function divide(a, b) {
  if (b === 0) return { result: null, error: 'ゼロ除算エラー' };
  return { result: a / b, error: null };
}

const { result, error } = divide(10, 3);
if (error) {
  console.error(error);
} else {
  console.log(result.toFixed(2)); // "3.33"
}

// 関数を引数として受け取る高階関数
function applyTwice(fn, value) {
  return fn(fn(value));
}

const double = x => x * 2;
console.log(applyTwice(double, 3)); // 12（3 → 6 → 12）

// 処理タイミングをコールバックで制御
function fetchData(onSuccess, onError) {
  // ... 非同期処理のイメージ
  const success = true;
  if (success) {
    onSuccess({ id: 1, name: '田中' });
  } else {
    onError(new Error('取得失敗'));
  }
}

fetchData(
  (data) => console.log('成功:', data.name),
  (err)  => console.error('失敗:', err.message)
);

const products = [
  { name: 'りんご',   price: 120, inStock: true  },
  { name: 'バナナ',   price: 80,  inStock: false },
  { name: 'みかん',   price: 100, inStock: true  },
  { name: 'ぶどう',   price: 300, inStock: true  },
];

// 在庫ありの商品だけ抽出（filter）
const available = products.filter(p => p.inStock);

// 価格を10%引きにした名前リストを作成（filter + map）
const salePrices = available
  .map(p => ({ name: p.name, price: Math.floor(p.price * 0.9) }));

console.log(salePrices);
// [{ name: 'りんご', price: 108 }, { name: 'みかん', price: 90 }, ...]

// 価格合計（reduce）
const total = available.reduce((sum, p) => sum + p.price, 0);
console.log(total); // 520

// 価格昇順ソート（sort）
const sorted = [...available].sort((a, b) => a.price - b.price);
console.log(sorted.map(p => p.name)); // ['みかん', 'りんご', 'ぶどう']

// 特定の倍率をかける関数を生成するファクトリ
function makeMultiplier(factor) {
  return (value) => value * factor;
}

const triple = makeMultiplier(3);
const quadruple = makeMultiplier(4);

console.log(triple(5));    // 15
console.log(quadruple(5)); // 20

// よく使うバリデーターをファクトリで生成
function makeRangeChecker(min, max) {
  return (value) => value >= min && value <= max;
}

const isAdult      = makeRangeChecker(18, 120);
const isValidScore = makeRangeChecker(0, 100);

console.log(isAdult(25));       // true
console.log(isValidScore(105)); // false

function createCounter(initialValue = 0) {
  let count = initialValue; // 外側の関数のローカル変数

  return {
    increment() { return ++count; },
    decrement() { return --count; },
    reset()     { count = initialValue; return count; },
    getCount()  { return count; },
  };
}

const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.decrement()); // 11
console.log(counter.reset());     // 10

// count は外から直接アクセス・変更できない（プライベート変数）
console.log(typeof count); // "undefined"

// 同じ引数で再度呼ばれたときにキャッシュから返す
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key); // キャッシュヒット
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveCalc = memoize((n) => {
  console.log(`計算中: ${n}`);
  return n * n;
});

console.log(expensiveCalc(5)); // "計算中: 5" → 25
console.log(expensiveCalc(5)); // キャッシュヒット → 25（再計算なし）
console.log(expensiveCalc(6)); // "計算中: 6" → 36

let total = 0;

// 外部変数を変更している → 副作用あり
function addToTotal(value) {
  total += value; // 副作用：外部の状態を変えている
  return total;
}

console.log(addToTotal(5)); // 5
console.log(addToTotal(5)); // 10 （同じ引数なのに結果が変わる）

// 外部状態に依存せず、引数だけで結果が決まる
function add(a, b) {
  return a + b;
}

console.log(add(3, 5)); // 8
console.log(add(3, 5)); // 8 （何度呼んでも同じ）

// 配列を変更せずに新しい配列を返す（純粋関数）
function appendItem(array, item) {
  return [...array, item]; // 元の配列を変えない
}

const original = [1, 2, 3];
const newArr = appendItem(original, 4);
console.log(original); // [1, 2, 3]（変更なし）
console.log(newArr);   // [1, 2, 3, 4]

// アロー関数 IIFE（現代的な書き方）
const result = (() => {
  const x = 10;
  const y = 20;
  return x + y;
})();

console.log(result); // 30
// x, y はこのスコープの外からアクセスできない