はじめに
本当に久しぶりにJavascriptを勉強しているのですが、色々と知らない文法が出てきて、混乱中です。
自分用の備忘録として、こんな文法があるんだ、ということをメモ書きです。
あくまで備忘録なので、詳しい解説は期待しないで下さい。
勉強するたびに、この記事の内容は増えていきます。
javascriptの学習メモ、というやつです。
引数分割束縛
検証環境
nodejs : v11.10.0
OS : Windows 10
説明
Vuexを勉強していて出てきた内容ですが、関数の引数の中に{}があるコードが出てきました。
function call({ commit }, keyword) {
commit(keyword)
}
これは、{}内に記載されたメソッドを持つオブジェクトを、引数として受け付けるよ、という意味だと解釈しました。
引数分割束縛とか言うらしいです。（Vuexのドキュメントによると）
下記コードを書いてみて、何となく理解しました。
callEcho(b)には、callというメソッドが無い為、実行時エラーとなります。
因みに、メンバ変数でもOKの様です。ただし、メンバ変数の場合、エラーとはならずに、undefinedとなります。
undefinedという値を返すから、という事なのだと思います。
"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と表示される。
A::call
A::value
undefined
{}内には2個以上のメソッドを入れる事も可能です。
callEcho(B, "hello")を呼び出すと、callEcho()内のcall()までは実行されますが、call2(str)は定義されていないので、そこで実行時エラーとなります。
"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までは実行される。
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
これを書いたら納得しました。
"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で指定した文字列で呼び出す必要があります。
"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!
A::CALL_ECHO
参考文献
getter/setter
検証環境
nodejs : v11.10.0
OS : Windows 10
説明
getter/setterは他言語でも使われているので、説明は不要だと思います。
その為、コードを載せるのみに留めておきます。
"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_)
実行結果は下記の通り。
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