var,let,constの違いをイメージで理解する
はじめに
javascriptの勉強する人であれば必ず学ぶvar
,let
,const
の違い.
まずは,ポイントとなる「再定義不可能」「再代入不可能」「スコープ」のイメージをつかんだうえで,var
,let
,const
の違いをイメージで理解していきたいと思います.
対象
再定義不可能のイメージ
一度定義した変数を定義し直すことができない状態を指します.
子供(変数)が,一度生まれたら,もう一度生まれ変わることはできないというイメージです.
再定義可能のイメージ
再代入不可能のイメージ
一度定義した変数の値を,別の値に代えることが出来ない状態を指します.
子供(変数)に常にボディガードがついているイメージです.
再代入可能のイメージ
ボディガードがいるため,プレゼンとを渡すこと(再代入)はできません(参照することはできます).
スコープのイメージ
グローバルスコープ
グローバルスコープの変数は,プログラムのどの場所からでも参照できます.
壁のない家に子供(変数)がいるようなイメージです.
グローバルスコープのイメージ
何も壁がないので,どこからでも変数を参照することが出来ます.
関数スコープ
関数スコープの変数は,その関数内であれば,どこからでも参照できます.
家(関数)の中に子供(変数)がいるようなイメージです.
関数スコープのイメージ
家の中にいるので,家の外からは参照することが出来ません.
ブロックスコープ
ブロックスコープの変数は,そのブロック内であれば,どこからでも参照できます.
家(関数)の中の部屋(ブロック)の中に子供(変数)がいるようなイメージです.
ブロックスコープのイメージ
部屋の中にいるので,部屋の外からは参照することが出来ません.
var
,let
,const
の違いをイメージ
これで準備は整ったので,さっそくvar
,let
,const
の違いをイメージしていきましょう.
var
のイメージ
var
は以下の特徴を持っています.
- 再定義可能
- 再代入可能
- グローバルスコープ(関数外で定義した場合)
- 関数スコープ(関数内で定義した場合)
家の外にいれば,どこからでも見えます(グローバルスコープ)が,家の中に入ると,外からは見えなくなる(関数スコープ)ようなイメージです.ボディガードはいない(再代入可能)ので,プレゼントを渡すこともできます.さらに,何度でも生まれ変わる(再定義可能)こともできます.
varのイメージ
let
のイメージ
続いて,let
は以下の特徴を持っています.
- 再定義不可能
- 再代入可能
- ブロックスコープ
部屋の外から見えなくなる(ブロックスコープ)ようなイメージです.ボディガードはいないので,プレゼントを渡すこともできます(再代入可能).ただし,var
と違い,生まれ変わることはできません(再定義不可能).
letのイメージ
const
のイメージ
最後に,const
は以下の特徴を持っています.
- 再定義不可能
- 再代入不可能
- ブロックスコープ
部屋の外から見えなくなる(ブロックスコープ)ようなイメージです.ボディガードがいるので,プレゼントを渡すことはできません(再代不入可能).ただし,var
と違い,生まれ変わることはできません(再定義不可能).
letのイメージ
おわりに
このようにイメージでとらえると,それぞれの定義方法の違いが理解しやすいのではないでしょうか?
また,スコープや再定義,再代入などをプライバシーやセキュリティとして直感的に認識することで,今まで変数定義をてきとうにしてしまっていた方も,しっかり自分の判断で定義することが出来るのではないかと思います.
参考
Discussion