Javascript学習のやり直し

# はじめに

本当に久しぶりにJavascriptを勉強しているのですが、色々と知らない文法が出てきて、混乱中です。
自分用の備忘録として、こんな文法があるんだ、ということをメモ書きです。

あくまで備忘録なので、詳しい解説は期待しないで下さい。
勉強するたびに、この記事の内容は増えていきます。

javascriptの学習メモ、というやつです。

# 引数分割束縛

### 検証環境
nodejs : v11.10.0
OS : Windows 10

### 説明

Vuexを勉強していて出てきた内容ですが、関数の引数の中に`{}`があるコードが出てきました。

```javascript:01-1.js
function call({ commit }, keyword) {
    commit(keyword)
}
```

これは、`{}`内に記載されたメソッドを持つオブジェクトを、引数として受け付けるよ、という意味だと解釈しました。
引数分割束縛とか言うらしいです。（Vuexのドキュメントによると）

下記コードを書いてみて、何となく理解しました。
`callEcho(b)`には、`call`というメソッドが無い為、実行時エラーとなります。

因みに、メンバ変数でもOKの様です。ただし、メンバ変数の場合、エラーとはならずに、`undefined`となります。
`undefined`という値を返すから、という事なのだと思います。

```javascript:01-2.js
"use strict";

class A {
    constructor() {
        this.value = "A::value"
    }

    call() {
        console.log("A::call")
    }
}

class B {
    call_ext() {
        console.log("B::call_ext")
    }
}

const a = new A()
const b = new B()

function callEcho({call}) {
    call();
}

function callValue({value}) {
    console.log(value)
}

callEcho(a)     // OK
callValue(a)    // メンバ変数でもOK
//callEcho(b)   // Error!!!
callValue(b)    // undefinedと表示される。
```

```console:01-2.js-result
A::call
A::value
undefined
```

`{}`内には2個以上のメソッドを入れる事も可能です。
`callEcho(B, "hello")`を呼び出すと、`callEcho()`内の`call()`までは実行されますが、`call2(str)`は定義されていないので、そこで実行時エラーとなります。

```javascript:01-3.js
"use strict";

const A = {
    call() {
        console.log("A::call")
    },

    call2(str) {
        console.log("A::call2", str)
    }
}

const B = {
    call() {
        console.log("B::call")
    },

    call2_ext() {
        console.log("B::call_ext")
    }
}

function callEcho({call, call2}, str) {
    call();
    call2(str);
}

callEcho(A, "hello")    // OK
//callEcho(B, "hello")  // Error, 厳密には、callEchoのcallまでは実行される。
```

```console:01-3.js-result
A::call
A::call2 hello
```

これで理解した、と思ったらこの様な記事を発見しました。

vuexで登場する分割代入の説明
https://qiita.com/mogya/items/7b4f9a2f3fa08909a135

MDNにある分割代入という記法なんですね……。そのうち纏めます。

分割代入 - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

これを書いたら納得しました。

```javascript:01-4.js
"use strict"

let call, obj // 変数名は、aのプロパティ名と同一の必要がある。

const a = {
    call : () => console.log("hello, world"),
    obj : "a"
};  // ここにセミコロンが無いと、SyntaxErrorとなる。

({call, obj} = a)

call()
console.log(obj)
```

### 参考文献

https://sekaiokaeru.com/tips/javascript-argument-destructuring
https://vuex.vuejs.org/ja/guide/actions.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

# メソッド名における算出されたキーの使用

### 検証環境
nodejs : v11.10.0
OS : Windows 10

### 説明

これも、Vuexを勉強していて出てきた話です。

オブジェクトのメソッド限定の様ですが、定義された変数が持つ値を、メソッド名として使用する事が可能です。
`[]`を使って書くことが出来ます。下記の様に書くと、`class A`のメソッド`[CALL_ECHO]`と書かれている部分は、`a.calling()`の様に、`CALL_ECHO`で指定した文字列で呼び出す必要があります。


```javascript:02-1.js
"use strict";

const CALL_ECHO = "calling"

class A {
    [CALL_ECHO] () {
        console.log("A::CALL_ECHO");
    }
}

const a = new A();

a.calling();        // a.CALL_ECHO()では無い点に注意
//a.CALL_ECHO();    // NG!
```

```console:02-1.js-result
A::CALL_ECHO
```


### 参考文献

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions

# getter/setter

### 検証環境
nodejs : v11.10.0
OS : Windows 10

### 説明

getter/setterは他言語でも使われているので、説明は不要だと思います。
その為、コードを載せるのみに留めておきます。

```javascript:03-1.js
"use strict";

const a = {
    get value () {
        console.log("call - get value")
        return this.condition_;
    },

    set value (val) {
        console.log("call - set value")
        this.condition_ = val;
    },

    condition_ : 0
};

a.value = 123;
console.log("a.value : ", a.value)
console.log("a.condition_ : ", a.condition_)
```

実行結果は下記の通り。

```console:03-1.js-result
call - set value
call - get value
a.value :  123
a.condition_ :  123
```

### 参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set