/**
 * 関数を返す関数
 * @returns {() => string}
 */
function funcFactory() {
  /** これが、返す関数です */
  const theFunction = function() {
    return 'こんにちは！';
  };

  // え？　何を返してるの？！
  return theFunction;
};

  /** これが、返す関数です */
  const theFunction = function() {
    return 'こんにちは！';
  };

  // え？　何を返してるの？！
  return theFunction;

/** 関数という値が、代入されました */
const receivedFunc = funcFactory();
/** だから、こんな事ができます */
const text = receivedFunc();
console.log(text); // こんにちは！

// せっかちさんは、こんな書き方をしたいかも？
console.log(funcFactory()()); // こんにちは！

/**
 * 関数を受け取って、関数を返す関数
 * @param {(p0: string) => string} fn 引数として受け取る関数
 * @returns {(p1: string) => string}
 */
function funcFactory(fn) {
  /**
   * 返す関数の中で、引数の関数を使ってみます
   * @param {string} p1
   * @returns {string}
   */
  const theFunction = function(p1) {
    return fn('こんにちは') + p1;
  };

  return theFunction;
};

/** 引数としての関数 */
const fn = function(text) {
  return text + '、';
};
/** fn を引数にして、新たな関数を取得します */
const receivedFunc = funcFactory(fn);
/** この関数を使ってみると… */
const text = receivedFunc('世界！');
// こうなります！
console.log(text); // こんにちは、世界！

// せっかちさんは、こんな書き方をしたいかも？
console.log(funcFactory(fn)('世界！')); // こんにちは、世界！

/**
 * 先ほどと同じコード
 * @returns {() => string}
 */
const funcFactory = () => { 
  return () => 'こんにちは！';
};

/**
 * 元の関数
 * @param {number} paramA
 * @param {number} paramB
 * @param {number} paramC
 * @returns {number} 引き算の結果
 */
const origFunc = (paramA, paramB, paramC) => {
  return paramA - paramB - paramC;
};

/**
 * …を、「カリー化」する関数
 * @param {number} paramA
 * @returns {(paramB: number) => (paramC: number) => number} 「カリー化」した関数
 */
const curriedFunc = paramA => { 
  return paramB => {
    return paramC => origFunc(paramA, paramB, paramC);
  };
};

// 元の関数を使う
const origResult = origFunc(4, 2, 1); // 4 - 2 - 1 の結果、つまり 1

// カリー化すると……
const secondFunc = curriedFunc(4); // origFunc(4, paramB, paramC) の paramB を必要とする関数が生まれる
const lastFunc = secondFunc(2); // origFunc(4, 2, paramC) の paramC を必要とする関数が生まれる
const curriedResult = lastFunc(1); // origFunc(4, 2, 1) の結果を得られる

// 短く書くなら……
const result = curriedFunc(4)(2)(1); // 要するに、このように書けるようにする事が「カリー化」の目的です

/**
 * 元の関数
 * @param {number} paramA
 * @param {number} paramB
 * @param {number} paramC
 * @returns {number} 引き算の結果
 */
const origFunc = (paramA, paramB, paramC) => {
  return paramA - paramB - paramC;
};

/**
 * …を、「部分適用」する関数
 * @param {number} paramC
 * @returns {(paramB: number) => number} 「部分適用」した関数
 */
const paFunc = paramC => { 
  // 最初から第１引数を入れてしまっていることに注意！
  return paramB => origFunc(4, paramB, paramC);
};

// 元の関数を使う
const origResult = origFunc(4, 2, 1); // 4 - 2 - 1 の結果、つまり 1

// 部分適用関数を使うと……
const tempFunc = paFunc(1); // origFunc(4, paramB, 1) の paramB を必要とする関数が生まれる
const paResult = tempFunc(2); // origFunc(4, 2, 1) の結果を得られる

// 短く書くなら……
const result = paFunc(1)(2); // 要するに、このように書けるようにする事が「部分適用」の目的です

interface Geolocation {
  getCurrentPosition(
    /** 座標の取得に成功したときのコールバック */
    success: (position: GeolocationPosition) => void,
    /** 座標の取得に失敗したときのコールバック */
    error?: (positionError: GeolocationPositionError) => void,
    /** その他のオプション */
    option?: PositionOptions,
  ): void;
}

/**
 * コールバック形式の非同期関数を Promise 化する
 * @template T
 * @template {unknown[]} U
 * @param {(success:(p0:T)=>void, error:(p1:any)=>void, ...args:U)=>void} fn 対象の関数
 * @param {unknown} [thisObj] 任意の this バインディング（例：navigator.geolocation)
 * @returns {(...args:U)=>Promise<T>} プロミス化関数
 */
const promisify = (fn, thisObj) => {
  // その関数にとっての this が `fn` でなければ、this を bind する必要がある
  /** 対象の関数 */
  const boundFn = thisObj ? fn.bind(thisObj) : fn;

  return (...args) => {
    return new Promise((resolve, reject) => {
      // ここで、本来の関数の使い方をする
      boundFn(resolve, reject, ...args);
    });
  };
};

// ↑の関数の使い方

/** プロミス化関数。option を引数として呼び出せるようになる */
const getCurrentPosition = promisify(
  navigator.geolocation.getCurrentPosition,
  navigator.geolocation
);

try {
  /** 成功時は、値を直接得られる！ */
  const geopos = await getCurrentPosition({timeout: 3000});
  console.log(geopos.coords.latitude, geopos.coords.longitude);
} catch(e) {
  // 失敗時の e は、もともとの失敗時のコールバック引数がそのまま来る！
  console.log(e);
}

/**
 * クロージャを作る関数（エンクロージャ）
 */
const createClosure = () => {
  // ここは「レキシカル環境」
  /** レキシカル環境に定義された変数を「レキシカル変数」と呼びます */
  const lexicalVar = 5;
  /**
   * クロージャ
   * @param {number} param
   */
  const closure = param => {
    return lexicalVar + param;
  };
  
  return closure;
};

/** クロージャを得ます */
const myFun = createClosure();

  const lexicalVar = 5;
  /**
   * クロージャ
   * @param {number} param
   */
  const closure = param => {
    return lexicalVar + param;
  };

/**
 * クロージャを作る関数（エンクロージャ）
 * @param {number} initialValue
 */
const createClosure = initialValue => {
  // ここは「レキシカル環境」
  /** レキシカル環境に定義された変数を「レキシカル変数」と呼びます */
  let accumulator = initialValue;
  /**
   * クロージャ
   * @param {number} param
   */
  const closure = param => {
    const result = accumulator + param;
    accumulator++;

    return result;
  };
  
  return closure;
};

/** クロージャを得ます */
const myFun = createClosure(5);

  let accumulator = initialValue;
  /**
   * クロージャ
   * @param {number} param
   */
  const closure = param => {
    const result = accumulator + param;
    accumulator++;

    return result;
  };

const createClosure = initialValue => {
  // ここは「レキシカル環境」
  /** レキシカル環境に定義された変数を「レキシカル変数」と呼びます */
  let accumulator = initialValue;
  /**
   * クロージャ
   * @param {number} param
   */
  const closure = param => {
    const result = accumulator + param;
    accumulator++;

    return result;
  };
  
  return closure;
};

createClosure(5) で呼び出したよ！

// よし、関数スコープの変数を評価しよう！
{
  initialValue: これは「引数」そのもの。つまり 5。
  accumulator: それに初期化される。つまり 5。
  closure: これは関数だから評価は据え置き。あとで評価する時は、今の initialValue, accumulator を参照できるようにしなくちゃ。
}

/**
 * 複数人の銀行口座を作成する関数
 * @param {number} initialBalance 最初に入金する金額
 */
const createAccount = initialBalance => {
  /** この口座の残高 */
  let balance = initialBalance;
  /**
   * この口座の取引
   * @param {number} amount 取引額（負数は出金）
   */
  return amount => {
    balance += amount;
    return balance;
  };
};

/** A さんの口座を開設 */
const accountA = createAccount(1000);
/** B さんの口座を開設 */
const accountB = createAccount(10);

/**
 * クロージャを作る関数（エンクロージャ）
 * @param {string} color 色名
 * @param {HTMLElement} text HTML要素
 * @returns {()=>void} クロージャ
 */
const createClosure = (color, text) => {
  /**
   * クロージャ
   */
  return () => text.style.color = color;
};

// 以下は省略したコードです
const text1 = document.querySelector('#text1');
const red = createClosure('red', text1);
const black1 = createClosure('black', text1);

// ボタン1を押すと、指定した文字が赤くなる
button1.addEventListener('click', red);
// リセット1を押すと、指定した文字が黒くなる
reset1.addEventListener('click', black1);

/** 演算関数を渡して、クロージャを得ます */
const myFun1 = createClosure((p) => p + 3);
const myFun2 = createClosure((p) => p - 5);
const myFun3 = createClosure((p) => p * 2);

/** 再代入可能な let で、クロージャを受けます */
let myFun1 = createClosure((p) => p + 3);
let myFun2 = createClosure((p) => p - 5);
let myFun3 = createClosure((p) => p * 2);

/** 不要になったら、 null を再代入して参照を切り離します */
myFun1 = null;
myFun2 = null;
myFun3 = null;

/** そもそも変数がスコープ内なら、処理がスコープを抜けるたびに、変数への参照が切り離されます */
button1.addEventListener('click', () => {
  const value = +output1.value;
  const myFun = createClosure((p) => p + 3);
  const result = myFun(value);
  output1.value = `${result}`;
});
button2.addEventListener('click', () => {
  const value = +output2.value;
  const myFun = createClosure((p) => p - 5);
  const result = myFun(value);
  output2.value = `${result}`;
});
button3.addEventListener('click', () => {
  const value = +output3.value;
  const myFun = createClosure((p) => p * 2);
  const result = myFun(value);
  output3.value = `${result}`;
});