新入社員JavaScript事始め(#1)「自由であることの簡単な説明」

2016 年 8 月 19 日 by 山平

今年度入社の新人と一緒に仕事をする機会がありました。
2年間(Web系の)Javaをやってきただけあってとても優秀です。

私に教えられることはあまりないのですが、広く技術を身に着けていく手始めに、Javaとは対照的なJavaScriptについて簡単に説明しました。

ちょっと面白かったので、3回に分けて当ブログにも残しておこうと思います。

歴史的な経緯から、名前がJavaとよく似ているJavaScriptですが、中身は正反対の「自由、自由、アンド自由」な言語です。
名前が長いので、以下「JS」と略記しますね。

以下のコードを見てください。

[JS]
var x = y = z = 1;
[/JS]

JSに慣れていないとびっくりするような書き方ですが、問題なく動きます。

[JS]
console.log([x,y,z]);//=> [1, 1, 1]
[/JS]

何が起きているかというと、式の戻り値を利用して変数を初期化していて、カッコを省略しているだけなのです。
JSで代入を行うと、戻り値として代入した値が返ってきます。

[JS]
console.log(a = 1);//=> 1
[/JS]

なので、先ほどのコードは、「z = 1」代入の戻り値「1」が「y」への代入、さらに「x」への代入となったわけです。
少し冗長に書くと以下のようになります。

[JS]
var x = (y = (z = 1));
[/JS]

久しぶりにこんな書き方をしたので、x,y,zともにグローバルに定義してしまっていないか心配になってきました。
以下のコードで確認します。

[JS]
(function(){
var x=y=z=1;
console.log([x,y,z]);//=>[1, 1, 1]
})();
console.log([x,y,z]);//ReferenceError: x is not defined
[/JS]

大丈夫ですね。
この「(function(){})();」という書き方も訳分かんないかもしれないですが、これは第三回で説明する予定ですので、一旦置いて置きます。

さて、第一回目はJSの自由さを感じてもらうことを目的に説明しましたが、最近では以下のような書き方もサポートされているようです。

[JS]
var [a, b, c] = [1, 2, 3];
console.log([a, b, c]); //=>[1, 2, 3]
[/JS]

ちょっとrubyっぽいですね。

タグ:

TrackBack