様々なプログラミング言語を操る、ユゲタです。
中でも特に好きで、仕事に直結して、世の中で最も利用範囲の大きくて、将来性が高いプログラミング言語として、Javascriptは、これからプログラミングを学習する人にはオススメしています。
何故ならJavascriptは、インターネットブラウザであれば、ほぼどれでも全て動作する唯一のプログラム言語なのだからですね。
しかも、インターネットブラウザって、パソコンやスマートフォンだけじゃなく、家庭用ゲーム機にも使われているし、最近では家電製品で画面にインターネットが表示されるものは
大体がインターネットブラウザとして利用されています。
テレビなどは分かりやすいんですが、URLを入力してモニタで表示されるものは、インターネットブラウザと考えていいでしょう。
かつては携帯電話のインターネットブラウザだけは、Javascriptが使えない端末として、サービス提供者は苦労していたのも、懐かしく感じるぐらい、最近ではJavascriptが溢れています。
そんなJavascriptの裏技をいくつか紹介しておきますｎ。
配列の結合
通常、Javascriptで配列を結合する時は、concatを使えば簡単にできますが、もっと簡単に結合する方法があります。
まず、次のサンプル配列を2つ用意しておきます。
var a = [1,2,3];
var b = [4,5,6];
concat結合
var c = a.concat(b);
console.log(c);
> [1,2,3,4,5,6]
もっと簡単な書き方
var c = [...a,...b];
console.log(c);
> [1,2,3,4,5,6]
文字数にするとあまり変わらないんですが、見た目のシンプルさがダントツに違いますね。
連想配列の結合
では、配列ではなく、key値を持った連想配列の場合は、concatは使えず、Object.assignという命令を使わなければいけません。
とりあえず、サンプルを用意してみました。
var a = {a:1 , b:2};
var b = {c:3 , d:4};
var c = Object.assign(a,b);
console.log(c);
> {a:1 , b:2 , c:3 , d:4}
これを、配列とほぼ同じ書き方で書いてみると、
var a = {a:1 , b:2};
var b = {c:3 , d:4};
var c = {...a , ...b};
console.log(c);
> {a:1 , b:2 , c:3 , d:4}
こりゃあ便利だ！
配列の場合は、[...]ブランケットで、連想配列の場合は、{...}ブレースで扱うというのがポイントですね。
混合も可能
面白いことに、配列と連想配列を一緒の変数に結合して入れることもできます。
var a = [5,6,7];
var b = {c:3 , d:4};
var c = {...a , ...b};
console.log(c);
> {0: 5, 1: 6, 2: 7, c: 3, d: 4}
でも、結果をみて分かる通り、配列を強制的に連想配列に変換されてしまっているのが注意点ですね。
簡単解説
Javascriptでは、ArrayやObjectといった、それぞれの型に応じた便利な機能が設けられているのに、どうしてこんなパッと見わかりにくい書き方が存在するのかというと、
これは、ビット演算の一種で、バイナリデータを扱う時の計算式として使える方式を、も利用できてしまうという裏技なんですね。
~~(1.2345) -> 1
このように、チルダ２つで、小数点の切り捨てが出来たり、
var a = b || null;
bの変数に値がbooleanでfalse扱いになる場合に、nullを代入するというこうした簡易な書き方ができるJavascriptは、この手の裏技を使っているからなんですね。
Javascriptで少しスキルアップできる思考
こうした裏技的な書き方をすると、言語になれていない人が、プログラムが読みづらくなるというデメリットも思うかもしれませんが、
実際に書いてみると、とてもシンプルに書けるというメリットもあるので、苦手意識を無くして、裏技をたくさん覚えてみると、
次第にJavascriptで、素敵なコードが書けるようになりますよ。
まだまだ、裏技をたくさん秘めているJavascript、基礎学習が終わったら、少しスキルの高そうな人の書いたコードを見ると、かなり勉強になりますよ。
そして、そんなコードは、インターネットブラウザのページソースを見ることで簡単に学習できるという裏技も、最後にお伝えしておきます。
Good study of Javascript !!!
