🏠

var,let,constの違いをイメージで理解する

2023/02/02に公開約2,700字

はじめに

javascriptの勉強する人であれば必ず学ぶvarletconstの違い.

まずは,ポイントとなる「再定義不可能」「再代入不可能」「スコープ」のイメージをつかんだうえで,varletconstの違いをイメージで理解していきたいと思います.

対象

再定義不可能のイメージ

一度定義した変数を定義し直すことができない状態を指します.
子供(変数)が,一度生まれたら,もう一度生まれ変わることはできないというイメージです.

再定義不可能のイメージ
再定義可能のイメージ

再代入不可能のイメージ

一度定義した変数の値を,別の値に代えることが出来ない状態を指します.
子供(変数)に常にボディガードがついているイメージです.

再代入可能のイメージ
再代入可能のイメージ

ボディガードがいるため,プレゼンとを渡すこと(再代入)はできません(参照することはできます).

スコープのイメージ

グローバルスコープ

グローバルスコープの変数は,プログラムのどの場所からでも参照できます.
壁のない家に子供(変数)がいるようなイメージです.

グローバルスコープのイメージ
グローバルスコープのイメージ

何も壁がないので,どこからでも変数を参照することが出来ます.

関数スコープ

関数スコープの変数は,その関数内であれば,どこからでも参照できます.
家(関数)の中に子供(変数)がいるようなイメージです.

関数スコープのイメージ
関数スコープのイメージ

家の中にいるので,家の外からは参照することが出来ません.

ブロックスコープ

ブロックスコープの変数は,そのブロック内であれば,どこからでも参照できます.
家(関数)の中の部屋(ブロック)の中に子供(変数)がいるようなイメージです.

ブロックスコープのイメージ
ブロックスコープのイメージ

部屋の中にいるので,部屋の外からは参照することが出来ません.

varletconstの違いをイメージ

これで準備は整ったので,さっそくvarletconstの違いをイメージしていきましょう.

varのイメージ

varは以下の特徴を持っています.

  • 再定義可能
  • 再代入可能
  • グローバルスコープ(関数外で定義した場合)
  • 関数スコープ(関数内で定義した場合)

家の外にいれば,どこからでも見えます(グローバルスコープ)が,家の中に入ると,外からは見えなくなる(関数スコープ)ようなイメージです.ボディガードはいない(再代入可能)ので,プレゼントを渡すこともできます.さらに,何度でも生まれ変わる(再定義可能)こともできます.

varのイメージ
varのイメージ

letのイメージ

続いて,letは以下の特徴を持っています.

  • 再定義不可能
  • 再代入可能
  • ブロックスコープ

部屋の外から見えなくなる(ブロックスコープ)ようなイメージです.ボディガードはいないので,プレゼントを渡すこともできます(再代入可能).ただし,varと違い,生まれ変わることはできません(再定義不可能).

letのイメージ
letのイメージ

constのイメージ

最後に,constは以下の特徴を持っています.

  • 再定義不可能
  • 再代入不可能
  • ブロックスコープ

部屋の外から見えなくなる(ブロックスコープ)ようなイメージです.ボディガードがいるので,プレゼントを渡すことはできません(再代不入可能).ただし,varと違い,生まれ変わることはできません(再定義不可能).

constのイメージ
letのイメージ

おわりに

このようにイメージでとらえると,それぞれの定義方法の違いが理解しやすいのではないでしょうか?

また,スコープや再定義,再代入などをプライバシーやセキュリティとして直感的に認識することで,今まで変数定義をてきとうにしてしまっていた方も,しっかり自分の判断で定義することが出来るのではないかと思います.

参考

https://jsprimer.net/basic/function-scope/
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const

GitHubで編集を提案

Discussion

ログインするとコメントできます