Javascript 関数　各種関数一覧、普通関数・classとの違いも

無名関数の他の代入例

別の関数の引数として記述できる。　イベントリスナーに無名関数を使用できる。

アロー関数

• 『function』が無くなって『=>』が付く書き方がシンプルな形。
• 無名関数、即時関数、Callback関数の時によく使用される。
• 引数が1つの時、()を省略できる。
• 1行の時は{}もreturnを省略できる。
• 本体内でyieldを使用できない。
• function()関数との違いは色々あるので、要確認。（thisの違い、コンストラクタにならない、argumentsを持たない等他）

// (引数1,引数2,...) => {
//     関数内の記述
//     return 結果`;
// }

(a,b)=> {
  return a*b;
}

//アロー関数を使った無名関数。
const myfunc = (a,b) => {
  return a*b;
}
//アロー関数を使った即時関数。
((a,b)=> {
  console.log(`結果:　${a*b}`);
})(100,200);
//引数が１個の時、()を省略できる。。
const myfunc = name => {
  console.log(`Hellow ${name}`);
}
//1行の時は{}もreturnを省略できる。
const myfunc = (a,b) => a*b;
//これを利用してReact ComponentでJSXの場合
const myfunc = (a,b) => <h1>Hello, world</h1>;

クロージャ―関数

• closure(閉鎖、囲まれた)：内部に閉鎖 (closeの名詞) されたと言う意味。
• 変数を関数の中に閉じ込めて、関数内では使えるが、外から読み書きできなくして保護するもの。
• ECサイトの買い物かご情報などをオブジェクト毎に持たせたりする場合や、
• 大きなプロジェクトで他の人のプログラムから書き換えられないようにする場合等に便利。
• 下のコードの例では、func2に()=>{ }の部分とa=10として閉じ込められる。
• func2()を実行したら、閉じ込められた()=>{ }を、a=10から1ずつ増やしていく。
• func2内の()=>{ }とaは既にfunc1から別物としてfunc2内に存在してる。　このaは関数（クロージャ―）の中に閉じ込められてた変数。　
• aは、classのプロパティの様に値を保持するが、読み書きできないところがclassのプロパティと異なる。

function func1() {
  var a = 10;
  return ()=>{
      a += 1;
      console.log(a);
  };
};

const func2 = func1();
func2();  //-> 11
func2();  //-> 12
func2();  //-> 13

コールバック関数

• 引数で渡して他の関数で実行して貰う関数の事。
• 下の例では、cal1とcal2はfunc1で実行して貰っている。
• コールバック関数のメリットは、func1を作る場合にどんな計算をしなければならないか決めなくても良い。　もし２つの異なる計算を呼ぶ場合、func1とfunc2と２度記述するか、ややこしい分岐で実行しないといけない。　コールバック関数だと、そのどちらも不要。

const func1=function(a, b, callback){
  let c = callback(a,b);
  console.log(c);
}

function cal1(a,b){
  return a * b;
}
function cal2(a,b){
  return a + b;
}

func1(10,20,cal1); //-> 200
func1(10,20,cal2); //-> 30r

タイマーもコールバック関数を使っている

• タイマー関数の第一引数はコールバック関数。
• 時間の前にカンマがあるのは、第一引数がコールバック関数で時間は第二引数なので、間の区切りでカンマがある。（私は長らく不思議に思っていました。）
• まずらわしかったのは、第一引数がコールバック関数を直書きしてあるから、コールバック関数に思えなかったからでした。

//setTimeout(callback, time);
setTimeout(() => {console.log('Done');}, 500);
//上記は以下と同じ
const func1 = () => {console.log('Done');}
setTimeout(func1, 500);

ジェネレータ関数　function*

• function*はGeneratorオブジェクトを返すジェネレータ関数。
• ジェネレータ関数はPromiseと組み合わせると非同期プログラミングの強力なツールとなる。
• next()でvalueとdoneのプロパティを含むオブジェクトを返す。（IteratorResultオブジェクト）
• yieldキーワードの左に書かれた値をvalueに入れて、done:falseにして返す。
• yieldキーワードの数だけnext()で値(value)を取り出せる。 下の例 g-1ではyieldキーワードは４個なので、next()４回目まで値（value）を取る出せる。　next()5回目以降は、valueはundefinedとなり、done(完了）がtrueとなる。
• クロージャ―関数同様、まずconst gen = gFunc(1); でiに1を入れてジェネレータオブジェクトを作っておく。
• gen.next().valueとすると値だけ取り出せる。

function* gFunc(i) {
  yield i;
  yield i + 10;
  yield i - 1;
  console.log("stop,",i);
  yield i + 3;
}
const gen = gFunc(1);
console.log(gen);
for (let i = 0; i < 10; i++) {
  console.log(i,gen.next());
}

Object [Generator] {}
0 { value: 1, done: false }
1 { value: 11, done: false }
2 { value: 0, done: false }
stop, 1
3 { value: 4, done: false }
4 { value: undefined, done: true }
5 { value: undefined, done: true }
6 { value: undefined, done: true }
7 { value: undefined, done: true }
8 { value: undefined, done: true }

function* gFunc2(i) {
  while (i < 5) {
    yield i;
    i++;
  }
}

const iter = gFunc2(0);
for (let i = 0; i < 10; i++) {
  console.log(iter.next());
}

{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }

function* gFunc2(i) {
  while (i < 5) {
    yield i;
    i++;
  }
}

const iter2 = gFunc2(-2);
for (const val of iter2){
  console.log(9,val);
}
for (const val of iter2){
  console.log(8,val);
}

9 -2
9 -1
9 0
9 1
9 2
9 3
9 4

next()に引数を入れて渡す方法

• step = yieldとすると、next()の引数に入れた値がstepに渡される。
• しかしこの値が使えるのは、次のnext()時。

function* gFunc(...arg) {
  let step;
  let [i,j] =arg;
  yield i;
  yield i + 10 + j;
  step = yield ++i;
  if(step) {
    i+=step;
  }
  yield i + 3;
  yield step;
  console.log("end",i, step);   //iもjもstepも覚えている
}
const gen = gFunc(1,2);
for (let i = 0; i < 6; i++) {
  console.log(i,gen.next(100));
}

0 { value: 1, done: false }
1 { value: 13, done: false }
2 { value: 2, done: false }
3 { value: 105, done: false }
4 { value: 100, done: false }
end 102 2 100
5 { value: undefined, done: true }

function* gFunc(start, end) {
  while (start < end) {
    yield ++start;  //start++にすると0から
  }
}
const gen = gFunc(0,10);

const t1 = setInterval(()=>{
  let a = gen.next();
  (a.done)? clearInterval(t1): console.log(a.value);
},500)

1
2
3
4
5
6
7
8
9
10

function* gFunc() {
  yield* [1, "v", 3]; // 配列はイテラブル
  yield* "ichiri";     // 文字列はイテラブル
}

const gen = gFunc();
console.log(gen);
const t1 = setInterval(()=>{
  let a = gen.next();
  (a.done)? clearInterval(t1): console.log(a);
},500)

{ value: 1, done: false }
{ value: 'v', done: false }
{ value: 3, done: false }
{ value: 'i', done: false }
{ value: 'c', done: false }
{ value: 'h', done: false }
{ value: 'i', done: false }
{ value: 'r', done: false }
{ value: 'i', done: false }

非同期関数　async function

• JavaScriptはマルチスレッドも可能ですが、意図的にマルチスレッドを使用しなければ、基本的にシングルスレッドで実行されます。
• しかしネットワークリクエストやファイル読書やタイマー処理など時間がかかる処理があります。
• それらの処理が完了するまで次の行を実行出来なれば、全体のプログラム実行が遅くなります。　例えば、『マウスが動かないとか』、『画面表示が変わらない（動画が止まる）』等。
• なので、時間がかかる処理は全て非同期関数や非同期APIと言われ、バックグラウンドで並列に処理され、その間JavaScriptは次の行の実行を進めます。　バックグラウンドでの処理が終わった順番にキューに入れられ(push)、イベントループで順番が来た時にキューから取り出され（pop)結果が実行されます。
• async functionは非同期関数で、Promiseを返すPromise-baseの関数。
• キューにはPromise-base用のマイクロタスクキューと古い非同期API用のタスクキューがあり、マイクロタスクキューの方が早く実行されるのと、Promise-baseは記述がcallback-hellにならないので、Denoの非同期処理はほとんどがPromise-baseとなっていて、NodeもPromise-baseへの移行を進めています。　例えば、XHRHttpRequestは古い非同期APIですが、axiosやfetchはPromise-baseになっています。
• Promise-baseはECMAScript2015に出てきた比較的新しい定義ですが、今後は更にPromise-base化が進むと予想されます。
• async functionはPromise-baseの非同期関数の定義で内部でawaitを使えます。
• 下の例は古い非同期APIのsetTimeout()をPromise化（Promisification)してasync function内でawaitを使って順番に実行しています。
• タイマーの場合、順序が違っていても問題にならないかもしれませんが、ファイル読み出し完了前やHTTP requestでデータ受信完了前に次の処理が実行されると、プログラムが正しく動作しません。　そんな時、Promise-baseでawaitを使って分かりやすく順序制御ができます。　awaitで待っている間はその関数は環境runtimeによってバックグラウンドで並列処理されているので、他の処理は止まりません。

function wait(time) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`${time}ms`), time);
  });
};

async function myAsyncFunc(){
  const start = performance.now();
  await wait(300);
  let result =(performance.now()-start).toPrecision(5);
  console.log('async time#1:', result,'ms');
  await wait(50);
  result =(performance.now()-start).toPrecision(5);
  console.log('async time#2:', result,'ms');
  await wait(20);
  result =(performance.now()-start).toPrecision(5);
  console.log('async time#3:', result,'ms');
  await wait(200);
  result =(performance.now()-start).toPrecision(5);
  console.log('async time#4:', result,'ms');
  await wait(100);
  result =(performance.now()-start).toPrecision(5);
  console.log('async time#5:', result,'ms');
};

function myFunc(){
  const start = performance.now();
  let result;
  setTimeout(()=>{
    result =(performance.now()-start).toPrecision(5);
    console.log('time#1:', result,'ms');
  },300);
  setTimeout(()=>{
    result =(performance.now()-start).toPrecision(5);
    console.log('time#2:', result,'ms');
  },50);
  setTimeout(()=>{
    result =(performance.now()-start).toPrecision(5);
    console.log('time#3:', result,'ms');
  },20);
  setTimeout(()=>{
    result =(performance.now()-start).toPrecision(5);
    console.log('time#4:', result,'ms');
  },200);
  setTimeout(()=>{
    result =(performance.now()-start).toPrecision(5);
    console.log('time#5:', result,'ms');
  },100);
};

myAsyncFunc();
setTimeout( _ => myFunc() ,1000);

async time#1: 310.41 ms
async time#2: 370.85 ms
async time#3: 401.80 ms
async time#4: 606.15 ms
async time#5: 715.50 ms
time#3: 34.875 ms
time#2: 51.233 ms
time#5: 114.44 ms
time#4: 208.14 ms
time#1: 301.02 ms

静的関数、静的メソッド

• staticキーワードを使ってインスタンス化しなくてもclass名で直接呼び出せるメソッドを静的メソッドや静的関数と呼ぶ。
• 普通のclassのメソッドはnewでインスタンスを作って、そのインスタンスで呼び出す。
• 最初にnewかstaticメソッドかstaticプロパティが呼ばれたら、static { }内が実行される。
• staticプロパティは静的プロパティと言われる。

class myClass {
  static sProp = 100;
  static sMethod() { return 'static method'}
  Prop = 200;
  Method() { return 'method'}
  static { console.log('Class static init block1') }
  static { console.log(this.sMethod(),"<<BLOCK2>>") }
}

console.log(myClass.sProp);
console.log(myClass.sMethod());

const a = new myClass();
console.log(a.Method());

Class static init block1
static method <<BLOCK2>>
100
static method
method

オブジェクトにメソッド定義

const obj = {
  method1: function() { 
    // 基本形メソッド定義
  },
  func2: () => {
    // アロー関数メソッド定義
  },
  myFunc3() {
    // 短縮記法メソッド定義
  },
};

アロー関数と普通の関数の違い

this固定

通常function関数の場合は、新しいオブジェクトを生成するとき、このオブジェクトが新たな親オブジェクトになるのでfunction関数内の新しいthisを生成する。　アロー関数は、関数が生成された際に読み込んだ親オブジェクトをthisとして固定してしまう。　以下の例で、アロー関数は親オブジェクトのwindowオブジェクトに固定してしまうが、新しいオブジェクト生成の時読み込むfunction関数、新しオブジェクトを親オブジェクトとしてthisを持つ。

window.sample_item1='apple';
window.sample_item2=1;
const myFunc = function() {
    console.log('myFunc :',this.sample_item1);
    console.log('myFunc :',this.sample_item2);
};
const myArrow = ()=> {
    console.log('myArrow:',this.sample_item1);
    console.log('myArrow:',this.sample_item2);
};
//両方とも呼び出し元のオブジェクトであるwindowの値を参照している。
myFunc();　                        //-> myFunc : apple
                                   //-> myFunc : 1
myArrow();　                       //-> myArrow: apple
                                   //-> myArrow: 1
console.log(window.sample_item2);　//-> 1
var obj1 ={
    sample_item2:100,
    func:myFunc
}
var obj2 ={
    sample_item2:100,
    func:myArrow
}
window.sample_item2=3;
console.log(window.sample_item2);　//-> 3
//windowオブジェクトを参照しておらず、obj1で宣言した変数がthisに入っている。
//親のwindowオブジェクトに影響を与えず、別Objectから値を与えてfunctionを実行できる。
obj1.func();　                     //-> undefined　　sample_item1 は親obj1での宣言がない。
                                   //-> 100
//windowオブジェクトの値を参照していて、アロー関数内で使うthisには反映されていない。
obj2.func();　                     //-> apple
                                   //-> 3
console.log(obj2.sample_item2);　　//-> 100

• アロー関数は直書きの場合(myArrow)もオブジェクト内アロー関数(obj2.func)もwindowオブジェクトをthisとして参照する。
• function関数は、親オブジェクトをthisにする。　直書きmyFuncは、window.myFuncnの省略形でwindowオブジェクトが親オブジェクトでthisとなる。
• しかしfunction関数がオブジェクト内だと、obj1.funcなのでobj1を親オブジェクトでthisとなる。　その為、obj1.funcの場合は、obj1.itemを変更するとobj1.itemを参照する。

//以下の結果はブラウザでnon-strictモードで実行の場合。
//nodeJSで実行の場合やstrictモードの場合は結果が異なる。
var item='apple';
console.log(window.item === item); //ブラウザで実行の場合はtrue

const myFunc = function() {
    console.log(this.item);
};
const myArrow = ()=> {
    console.log(this.item);
};
let obj1 = {
    item: 'ichiri',
    func: myFunc
  }
let obj2 = {
    item: 'Mike',
    func: myArrow
  }
myFunc();                       //-> apple
myArrow();                      //-> apple
obj1.func();                    //-> ichiri
obj2.func();                    //-> apple

item='banana';  
myFunc();                       //-> banana
myArrow();                      //-> banana
obj1.func();                    //-> ichiri
obj2.func();                    //-> banana
obj1.item='John'; 
obj2.item='Max'; 
obj1.func();                    //-> John
obj2.func();                    //-> banana
myFunc();                       //-> banana
myArrow();                      //-> banana

別の例　『Developer.mozilla.org』から引用しています。　分かりやすかったのでこれも記しておきます。

var obj = { // 新しいスコープを作成しない
    i: 10,
    b: () => console.log(this.i, this),
    c: function() {
      console.log(this.i, this);
    }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

call, apply, bindのthisの指定（無視される）

エラーにはならず無視される

コンストラクタを持たない (newができない）

• コンストラクタはnewで作るが、アロー関数はコンストラクタを持たないのでTypeErrorとなる。
• またnewが出来ないので.prototypeプロパティを持たない。

let foo = function(name, age){
  this.name = name;
  this.age = age;
};
let getInfo1 = new foo('Mike', 28);
console.log(getInfo1.name, getInfo1.age);   //-> Mike 28
let hoge = (name, age)=>{
  this.name = name;
  this.age = age;
};
let getInfo2 = new hoge('John', 32);       //->TypeError: hoge is not a constructor
console.log(getInfo2.name, getInfo2.age);  //->

argumentsを持たない

• 普通の関数の場合、宣言した引数以上の数の引数が渡されたら、argumentsで読み込むことができるが、アロー関数の場合は使えない。
• アロー関数内で、argumentsよ呼び出すと、アロー関数はargumentsを持っていないので引数を取り込まないが、関数外のargumentsを取ってくる。　タイミングによりargumentsは変化しているので、アロー関数内では不確かなargumentsは実際使用してはいけない。

function myFunc1(a, b, c) {
  console.log(a,b,c);
  console.log(arguments);
}
myFunc1(1, 2, 3, 4, 5,[1,2,3],{name:'ichiri'});  
//アロー関数の場合でなく、普通の関数の場合の例
//-> [arguments]{
  '0': 1,
  '1': 2,
  '2': 3,
  '3': 4,
  '4': 5,
  '5': [ 1, 2, 3 ],
  '6': { name: 'ichiri' }
}

default exportが一行で書けない

自分のLibraryを作成する場合、default exportを一行で書けるfunction宣言の方が便利。

default export function myFunc(){} // 一行で便利

メソッドチェーンが出来る関数やメソッドを作れない

アロー関数は、thisを持たないのでメソッドチェーンが出来る関数やメソッドには使用できない。