関数のためのパーツ

1. function

JavaScript の関数は、実際にはすべて Function オブジェクトです。これは、 (function(){}).constructor === Function というコードが true を返すことで確認することができます。

Funciton コンストラクターと関数宣言の違い。Function コンストラクターで生成された関数は、生成コンテキストにクロージャを作りません。つまり常にグローバルスコープで生成されます。これを実行すると、 Function コンストラクターの呼び出し元のスコープは入らず、自身のローカル変数とグローバル変数だけにアクセスできます。これは関数式のコードに eval を使うのとは異なります。

// Funciton コンストラクターと関数宣言の違い
var x = 10;

function createFunction1() {
    var x = 20;
    return new Function('return x;'); // この |x| はグローバルの |x| を表す
}

function createFunction2() {
    var x = 20;
    function f() {
        return x; // この |x| は上記のローカルの |x| を表す
    }
    return f;
}

var f1 = createFunction1();
console.log(f1());          // 10
var f2 = createFunction2();
console.log(f2());          // 20

function Car() {}
car1 = new Car();

Car.prototype.color = "A";
console.log(car1.color);

2. return ステートメント

return 文は、関数の実行を終了して、関数の呼び出し元に返す値を指定します。

function getRectArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}

console.log(getRectArea(3, 4));
// expected output: 12

console.log(getRectArea(-3, 4));
// expected output: 0
function getRectArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}

console.log(getRectArea(3, 4));
// expected output: 12

console.log(getRectArea(-3, 4));
// expected output: 0

3. this

関数の this キーワード は、JavaScript ではほかの言語と少々異なる動作をします。また、strict モードであるかどうかでも違いがあります。

ほとんどの場合、this の値はどのように関数が呼ばれたかによって決定されます (実行時結合)。これは実行時に代入によって設定することはできず、関数が呼び出されるたびに異なる可能性があります。ES5 では bind() メソッドが導入され、関数がどのように呼ばれたかに関係なく `this` の値を設定するすることができるようになり、ES2015 では、自身では this の結び付けを行わないアロー関数が導入されました (これは包含する構文上のコンテキストの this の値を保持します)。

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

console.log(test.func());
// expected output: 42

4. function*

function* 宣言 (function キーワードにアスタリスクが付いたもの) は、 Generator オブジェクトを返すジェネレーター関数を定義します。

function* キーワードは、式の中でジェネレーター関数を定義するために使用することができます。

function* generator(i) {
  yield i;
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value);
// expected output: 10

console.log(gen.next().value);
// expected output: 20

const foo = function*() {
  yield 'a';
  yield 'b';
  yield 'c';
};

let str = '';
for (const val of foo()) {
  str = str + val;
}

console.log(str);
// expected output: "abc"

5. yield(yield*)

yield キーワードは、ジェネレーター関数 (function* または古いジェネレーター関数) を一時停止したり再開したりするために使用します。

yield* 式は別のジェネレーターや反復可能なオブジェクトに委任するために使用されます。

function* foo(index) {
  while (index < 2) {
    yield index;
    index++;
  }
}

const iterator = foo(0);

console.log(iterator.next().value);
// expected output: 0

console.log(iterator.next().value);
// expected output: 1

function* func1() {
  yield 42;
}

function* func2() {
  yield* func1();
}

const iterator = func2();

console.log(iterator.next().value);
// expected output: 42

6. async function

非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。 async および await キーワードを使用することで、プロミスベースの非同期の動作を、プロミスチェーンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。

非同期関数は式としても定義することができます。

async function キーワードは、式の中で async 関数を定義するために使用できます。

非同期関数は、 async function 文を使用して定義することもできます。

AsyncFunction コンストラクターは、新しい非同期関数オブジェクトを生成します。 JavaScript では、すべての非同期関数が実際に AsyncFunction オブジェクトです。

AsyncFunction はグローバルオブジェクトではないことに注意してください。これは以下のようなコードで取得することができます。

async function [name]([param1[, param2[, ..., paramN]]]) {
  statements
}

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

7. await

await 演算子はプロミス (Promise) を待つために使用します。通常の JavaScript コードで、 async function の内部でのみ使用することができます。によって Promise が返されるのを待機するために使用します。

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();

8. class(extends)

クラス宣言は、プロトタイプベースの継承を使って、指定された名前の新しいクラスを作成します。

オブジェクト指向プログラミングでは、クラスはオブジェクトの特徴を定義します。クラスはオブジェクトのプロパティやメソッドのひな形定義であり、オブジェクトのより具体的なインスタンスが描かれる「青写真」です。

extends キーワードはクラス宣言やクラス式の中で、他のクラスの子であるクラスを生成するために使用します。

class Polygon {
  constructor(height, width) {
    this.area = height * width;
  }
}

console.log(new Polygon(4, 3).area);
// expected output: 12

////////////////////////////////////

const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
};

console.log(new Rectangle(5, 8).area());
// expected output: 40

7. KnotTextでのECMAScriptの分類

参考：MDN Web DocsでのECMAScriptの分類

7-1. グローバルオブジェクトのプロパティ(JavaScriptの実行環境がWebブラウザーの場合)

7-2. ECMAScriptの演算子「計算・論理・代入」

7-3. ECMAScriptのステートメント

7-4. オブジェクトのためのパーツ

7-5. 配列のためのパーツ

7-6. 関数のためのパーツ

7-7. その他のパーツ