Load to Professional...

最高の凡人系Webエンジニアへ。地に足をつける。

【Javascriptの基本】変数宣言の使い分け 〜var、let、const〜

■はじめに

Javascriptを学びはじめ、最初に疑問に思ったことが、
変数宣言の方法が2種類あること。

「var」 と 「let」 です。
定数を宣言する「const」も含めたら3種類になります。

Javascript(以下:js)学習に利用させていただいている
https://developer.mozilla.org/ja/ さん
では、

コードでは 「var」ではなく可能な限り「let」 を使用することをお勧めします。コードで古いバージョンの Internet Explorer をサポートする必要がない限り、var を使用する理由はありません

 

とあるのですが、

「巻き上げって何?」
「varはなぜ使う必要がないの?」
「constは?」

と思ってしまい、いまいち使い分けについて理解できませんでした。

今後の自分のために備忘録として、調べてみたことをメモしたいと思います。

■対象読者

・プログラム初学者の方
・将来の自分

■jsにおけるスコープ

スコープとは?

・変数名や関数名の有効範囲のこと

グローバルスコープ

・関数の外(トップレベル)で宣言した変数
・プログラム全体から参照可能

・関数スコープ

・関数の中で宣言した変数
・その関数の中でのみ参照可能

ブロックスコープ

・ブロックの中で宣言した変数
・そのブロックの中でのみ参照可能

# jsではこれまでブロックスコープは存在しなかったが、
ECMAscript5から「let」が登場し、ブロックスコープを作り出せるようになった。

■巻き上げとは?

JavaScriptは関数内のどこでもvarの宣言を書ける
・関数のどこで宣言しても、先頭で定義したものとしてみなされる
・先頭部分で使いたい変数は全て定義するのが定石

つまり
関数の外で宣言を書けば、コードの先頭
関数の中で宣言を書けば、関数の先頭
で、宣言したと見做されてしまう


■それぞれの性質

var

・変数を宣言する (再代入可能)
・関数スコープである
・巻き上げが起こる

let

・変数を宣言する (再代入可能)
・関数スコープかつブロックスコープでもある
・巻き上げが起こる

const

・定数を宣言する (再代入不可)
・関数スコープかつブロックスコープである
・巻き上げが起こる


■まとめ

・「var」は基本使わない。
・再代入が必要な場合(for文など)は、「let」を使う。
・再代入が不要な場合は、「const」を使う。
・巻き上げはどれを使っても起きるので、変数宣言はスコープの一番上で行う。

 

■参考記事様

・スコープについて

https://qiita.com/Kazuuuuuki/items/3c40bbe6e7bb7ff84e3e

 

・使い分けについて

https://qiita.com/wannabe/items/b2a0d63fc786eab13c48

https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27