はじめに

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

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

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

引数分割束縛

検証環境

nodejs : v11.10.0
OS : Windows 10

説明

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

01-1.js

function call({ commit }, keyword) {
    commit(keyword)
}

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

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

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

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と表示される。

01-2.js-result

A::call
A::value
undefined

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

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までは実行される。

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

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

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で指定した文字列で呼び出す必要があります。

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!

02-1.js-result

A::CALL_ECHO

参考文献

getter/setter

検証環境

nodejs : v11.10.0
OS : Windows 10

説明

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

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_)

実行結果は下記の通り。

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