JavaScript基礎思い出しシリーズ①：let/const/var・型変換・==と===

はじめに

ゲーム作りたいなーって思った時はやっぱjavascriptだよねってことを考えた私。
早速javascriptを入力すると…あれ。アロー関数ってどう書くんだっけ…いや.mapとか.filterの配置の仕方は…？rubyで言う所のブロック関数とかってjsだとどう書くんだっけ？
とだいぶ忘れているというか基礎的なことが頭から吹っ飛んでいたので基礎からまた思い出すところから始めます。
この記事はjavascriptの勉強したことをシリーズ化したものです

今回のスコープ

let, const, varの違い
型変換
==と===の使い分け

また今後はconsole.logの挙動の確認という部分じゃない限りはconsole.logについては記載せずコメントに出力結果を乗せます

再代入

まずlet, const, varは変数宣言に当たる。その上で細かい挙動が違います。

let a = [1, 2];
a = "string"; 
a // => string

const b = [1, 2];
// b = "string";
b // => error   constに再代入は不可
b.push(3); 
b // => [1, 2, 3]

この上でvarは基本的に再代入が可能です。

ただしvarだとバグが発生する場合があるので非推奨になっています。意図的にバグを出してみます

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var i = ", i), 1000);
}

// => ③var i = 3

console画面ではvar i = 3が3回表示される結果となります。これはforの3回ループの中で全て同じ変数の中に再代入してしまうためiの中身を3回呼び出しているという処理になります。
意図を考えるとこのロジックではできれば0, 1, 2とそれぞれ表示したいので、こういう時はvarではなくletを使うといい感じに動作します。
実コードはほぼ同じなので省きますが、結果としてlet i = 0, let i = 1, let i =2とコンソールに1秒後にドンと表示されます。

型変換

javascriptは演算子を用いる際にオペランドの型が別の場合型を変換します。
ただし、唯一+だけが特殊な動作を起こします。

console.log(1 + "1"); // => "11" これは+の場合だけ型変換を文字列にするため
console.log(5 - "3"); // => 2 +以外は型変換を数字にするため
console.log(6 * "3"); // => 18
console.log(6 / "2"); // => 3 ちなみにRubyと違って割り算をしてもfloat値にはならない

余談ですが-, *, /は算術演算子にしか用いないけれど、+だけは算術演算以外にも文字列変換の役目もあり、文字列変換を優先するためこのような挙動になります。

`==`と`===`の違い。

==は等価。型を揃えてから値が同じかであるかを評価する。
===は厳密等価。型も値も同じであるかを評価する。

0 == false // => true これはfalseはboolean型であり、型変換を起こすと0になるため
0 === false // => false 型変換をしないためfalse
"1" == 1 // => true 型変換をすると同じ1であるためtrue
"1" === 1 // => false 型変換をしないため違うのでfalse

まとめ

基本的にRubyの書き方に慣れているため挙動を忘れています。ちなみにRubyの場合、1 + “1”は型変換をせずTypeErrorを起こします。
メインは確かにRubyを覚えている最中ですが、フロントエンドをいじる上で絶対に外せないのがjavascriptであるため多少混じっても良いのでjavascriptも並行して思い出して行こうと思います。

JavaScript基礎思い出しシリーズ①：let/const/var・型変換・==と===

はじめに

今回のスコープ

再代入

型変換

==と===の違い。

まとめ

`==`と`===`の違い。