JavaScript Programming ( Sutras 写経 of Software Design 2022/02)

js-closure.md

Closure in JavaScript

Closureとは? - 定義時のコンテキストへの参照を持つ関数。JSでは関数を作成すると裏側でクロージャが作成され、関数がどこからも参照されなくなるとクロージャも消失する

• Callオブジェクト（Activation Object）: 関数が呼び出されたときに自動的に生成されるオブジェクト。複数回呼び出されると、それごとにCallオブジェクトが生成される
  • 下記の例の場合、変数cntはcreateCounterのCallオブジェクトに格納されているのでそこで変数cntは解決される
  • このCallオブジェクト自体へはプログラムから直接参照・操作できず、show関数を介してのみアクセス可能
  • → これがクロージャを利用して擬似的にプライベート変数を実現するテクニックのカラクリ

const createCounter = function() {
  let cnt = 0;
  const show = function () {
    cnt = cnt + 1;
    console.log(cnt);
  };
  return show;
};
const counter = createCounter();
counter(); // 1
counter(); // 2
counter(); // 3

js-functional-programming.md

Functional Programming

This is sutras of the article on JavaScript Functional Programming in Software Design 2022/02

命令形のプログラミングではhowを記述し、関数型プログラミングではWhatを記述するパラダイム 関数型プログラミング

• 再帰（recursion）
• 三項演算子: (condition)?(a):(b)
• map関数： map(関数、配列)
  • map((x=>x**2), [1,2,3,4]) => [1,4,9,16]
• reduce関数: データ構造（配列）を単一の値（数、配列、オブジェクト）にまとめる
  • (配列).reduce((accumulator, currentValue) => {処理}, initialValue)

const reverse = arr => arr.reduce((acc, current)=>[current, ...acc],[])
// 第２引数（initialValue）を省略した場合、配列の先頭がAccumulatorの初期値として使われる
const max = arr => arr.reduce((acc,current)=> current>acc ? current: acc) 
const map = (f,arr) => arr.reduce((arr,current) => [...acc, f(current)],[])

• Javascriptは動的型付け言語（実行時に型が割り当てられる）
• 参照透過性と副作用
  • 参照透過性がある：inputが同じだったらoutputがおなじになる。参照透過性のないものはテストが難しい
  • 副作用：関数とは引数を受けて値を返すことであり、それ以外の振る舞いは副作用
• 高階関数: map関数。引数として関数を受け取ったり、戻り値として関数を返したりする関数のこと。プログラミングの再利用性を高める
• カリー化とは？多引数関数を「関数を返す関数」を使って表現すること
  • ただのアロー： const add = (x, y)=> x + y
  • カリー化： const add = x => y => x + y。 右辺をx => (y=> x + y)とみると引数ｘをうけとって関数 y=> x + yを返す関数