javascriptの引数について。

Question

var a = null; //aを初期化
function myFunc(x){
  x.key = "value";
} //myFuncという関数を定義
myFunc(a || (a = {}));//<=ここ。
console.log(a); //=>{"key": "value"}と出力される

引数で(a||(a = {}))と有るんですけど、一体全体どういう意味なのでしょうか。
そして、なぜ初期化の時にnull,undefined,0の時のみmyFuncが実行された後に{"key": "value"}と出力されるのでしょうか。もし、(a || (a = {}))で代入されるのだったらaが上3つ以外でも全てきちんと出力されるんじゃないんですか。

Comments

[ozwk]

「aが上3つ以外でも全てきちんと出力されるんじゃないんですか。」->されますよ?

[kakakakaka]

Number,Stringとかの時に{}が代入されるんじゃないだろうか。という意味です。分かりにくくてすいませんm(_ _)m

Answer 1

引数で(a||(a = {}))と有るんですけど、一体全体どういう意味なのでしょうか。

JavaScriptの||は、
左辺がtrueっぽい値ならば左辺を持ってくる。
左辺がfalseっぽい値ならば右辺を持ってくるという動きをします。

(a||(a = {}))の場合、左辺はaですね。
trueっぽい値、例えば1、"hoge"、{name: "taro"}等が入っている場合、右辺は実行されずそのままaの値が使われます。
falseっぽい値、例えば0、""、null、undefined等が入っている場合、左辺は値が無いので右辺を実行して値を探しに行きます。

右辺は(a = {})のようです。
代入式の実行結果は右辺がそのまま使われますから、
aに{}を代入しつつ、右辺の評価結果は{}という空オブジェクトになります。

なぜ初期化の時にnull,undefined,0の時のみmyFuncが実行された後に{"key": "value"}と出力されるのでしょうか。

少し難易度の高い話になりますが、
JavaScriptにはNumber、String、Booleanといったプリミティブ値と、
Object、Array、Functionといったオブジェクト系の値の2種類があります。

JavaScriptは完全なオブジェクト指向言語ではないので、
NumberやString、Booleanといったプリミティブ値はオブジェクトになったりそうでなかったり内部では変換を繰り返し、行ったり来たりします。

var b = "taro";
// Stringであるbはこの瞬間だけString型のオブジェクトに変身するので別にエラーになったりはしない
b.key = "value";
// その行を抜けるとプリミティブ値に戻るが、その時keyに代入した"value"は捨てられてしまう
console.log(b.key); // undefined
console.log(b); // "taro"

// Stringオブジェクトとして生成してみる(非推奨なので普段はやらないでね)
var c = new String("jiro");
c.key = "value";
console.log(c.key); // "value"
console.log(c); // String {"jiro", key: "value"}

// Stringオブジェクトは.toString()で正式な文字列として変換できるが、その際やっぱりkeyは捨てられる
var d = c.toString();
console.log(d); // "jiro"
console.log(d.key); // undefined

この辺の事情で、数値や文字列をaに代入すると上手く動かないという主張どおりになります。
逆に最初から何かしらのオブジェクトをaに与えておくと、正しく動作するはずです。
一度試してみて下さい。

Comments

[miyabi-sun]

余談ですが、この「trueっぽい値」や「falseっぽい値」にはちゃんとした正式名称があります。
それぞれTruthyとFalsyで、それを和訳すると…まぁそうなるわけです。
名前を知ってればいざという時にすぐググれるので、覚えておくと良いでしょう。
https://developer.mozilla.org/ja/docs/Glossary/Truthy
https://developer.mozilla.org/ja/docs/Glossary/Falsy

[kakakakaka]

なるほど。丁寧に説明ありがとうございます。理解出来ましたm(_ _)m

Answer 2

引数で(a||(a = {}))と有るんですけど、一体全体どういう意味なのでしょうか。

aがnullだったりした場合は空オブジェクトをaに代入してaを渡す。
そうでない場合はそのままaを渡す。

そして、なぜ初期化の時にnull,undefined,0の時のみmyFuncが実行された後に{"key": "value"}と出力されるのでしょうか。もし、(a || (a = {}))で代入されるのだったらaが上3つ以外でも全てきちんと出力されるんじゃないんですか。

var a={some:"value"}とでもすれば
ちゃんと{ some: 'value', key: 'value' }と出力されますよ?

Comments

[kakakakaka]

なるほど。回答ありがとうございますm(_ _)m

Answer 3

null,undefined,0の時のみ

""やfalseも同じですね

[null,0,"",undefined,false].forEach(function(x){
  a=(x||{});
  console.log(a);
});

宣言されてないならこうですが

function myFunc(x){
  x.key = "value";
}
myFunc(a=((typeof a!=="undefined" && a)||{}));
console.log(a);

strictだとどっちにしろエラーになるのであまり気にすることないかもしれません

ただし、考え方として1やら"0"やらのデータはオブジェクトにならないのに
0だとオブジェクトにキャストされてしまうのは、仕様がわるいと思いますけどね

Comments

[kakakakaka]

なるほど。回答ありがとうございますm(_ _)m
下のコードの
(typeof a!=="undefined" && a)←ここがちょっと理解できないんですけど、どゆことでしょうか

[kakakakaka]

すいません、理解出来ました。