BETA

letを初めて知った・・・

投稿日:2019-01-20
最終更新:2019-01-21

letってなんだよ

私は現在仕事でJavaをメインで触っています。
ブラウザ上で動くアプリを作っているので当然JavaScriptを触ることも少なくないわけですが、先日初めてletというものを目にしました。
といっても業務の中で目にしたわけではなく、休憩時間に「実用的な何かJavaScriptで作ろ」と思い立ち、調べていたときのことです。

let xxx = 1;

え?letって何!?varじゃないの?
業務で触るJavaScriptでは大抵varで変数を宣言しており、
letは初めて見たのでなんじゃこれと自分なりに調べてみました。

letはブロックスコープ

まずはvarの例

function hogehoge(){  
    var xxx = "スコープの外だよ";  
    console.log(xxx);  
    if(1==1){  
        xxx = "スコープの中だよ";  
        console.log(xxx);  
    }  
    console.log(xxx);  
}

この場合コンソールには
「スコープの外だよ」
「スコープの中だよ」
「スコープの中だよ」
が出力される。

対して、letの例

function fugafuga(){  
    let xxx = "スコープの外だよ";  
    console.log(xxx);  
    if(1==1){  
        xxx = "スコープの中だよ";  
        console.log(xxx);  
    }  
    console.log(xxx);  
}

この場合コンソールには
「スコープの外だよ」
「スコープの中だよ」
「スコープのだよ」
が出力される。

おわかり頂けただろうか。
つまり、varはブロックのスコープを無視するのに対して、
letはブロックのスコープを認識します。

・・・・・・・・え?じゃあletで良くね?

追加されたのはECMAScript2015(ES6)から

varとletでバグが少なくなるのは明らかにletの方でしょう。
では何故私の今の現場でvarが使われているのでしょうか。
答えはletがECMAScript2015(ES6)から追加された機能だからです。
ECMAScriptとはJavaScriptの中核仕様を抜き出して標準化したもので、
その第6弾がECMAScript2015です。ES6と呼ばれるのが一般的みたいですね。
それでこのES6なんですが、古いブラウザだと読めないみたいです。
私が業務で作成しているアプリはIE9に対応しなければならないので、
ES6で書いていなかったということでした。
Babel等構文をトランスパイルしてくれるものもありますが、
現場では導入していないです。

constってのもある

ES6から追加された機能の一つでconstというものもあります。
constは再代入を行わない変数の宣言をする際に使用します。

例えば

function foo(){  
    let yyy = "変数だよ"  
    console.log(yyy);  
    if(1==1){  
        yyy = "再代入するよ"  
        console.log(yyy);  
    }  
    console.log(yyy);  
}

この場合コンソールには
「変数だよ」
「再代入するよ」
「変数だよ」
が出力されます。

では

function foo(){  
    const yyy = "変数だよ"  
    console.log(yyy);  
    if(1==1){  
        yyy = "再代入するよ"  
        console.log(yyy);  
    }  
    console.log(yyy);  
}

この場合何が出力されるでしょうか?

答えは「エラーになる」です。
constは他の言語でいう「final」と同じで宣言した変数は再代入できなくなります。

基本はletとconstを使おう

基本的にletとconstを使うべきです。
varを使う場合は対応ブラウザが古くてES6で書けない場合のみ限定しましょう。
ぐっとバグを抑えられると思います。
知っていた方は今更知ったのかよと思うかもしれませんが、
私のようにレガシーブラウザ対応をしなくてはならない仕事をしている人は
案外知らなかったりするのではないでしょうか。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@doldolceの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!