JavaScript:お手伝いしているプログラミングスクールで聞かれた質問【let/var/constの違い】
- 2021.04.04
- JavaScript備忘録
- const, JavaScript, let, var, スクリプト備忘録, ひとりごと, 変数宣言, 定数宣言
JavaScript:お手伝いしているプログラミングスクールで聞かれた質問【let/var/constの違い】
最近になり縁あってプログラミングスクールのお手伝いをするようになりました。その生徒さんといろいろお話している中で出てきた『よく理解できなかった事』について「そう言えば自分も最初詰まった」と感じたものがいくつかあったので、この際まとめておこうかと。
具体的にはこんな内容です。
- let と const と var は何が違うの?<=【今回の内容】
- functionって何?ある時とない時で何が違うの?
- オブジェクトは { } で囲われているというけど、function(){ } の { } の中もオブジェクトなの?
- this. ってどこを指しているの?
- JavaScriptとJavaは同じなの?
let と const と var は何が違うの?
プログラムをJSから始めた人は多分みんな通る道なのではないでしょうか。
定数や変数を宣言することは『エラーのないプログラム』を作るうえでも、とても重要な工程です。
JSでは3つの宣言が使われますが、今後は2つにまとまっていくと思われます。
- 定数を宣言するconst(コンスト)
- 変数を宣言するlet(レット)
- 定数でも変数でも関係なく宣言するvar(バー)
Google先生に聞いて出てくる情報だとvar が一番多いかなと思いますが、テキスト系(書籍)だと let の出現率が高くなります。
これは、let やconst が2015年6月に標準化された JavaScriptの「ECMAScript 2015(ES6)」から使えるようになった事に由来します。
ネット上の情報はもっと前から蓄積されているので、varで宣言している参考事例を目にする率が高まります。
「varは使わないようにしよう」が基本的な流れ
ES6より前では宣言はvarしかありませんでした。そのため、定数であれ変数であれvarを利用していました。
しかし【ブロックレベルのスコープに対応できるlet】と【変更を拒否するconst】ができたため「letとconstを使ってvarはやめよう」という流れになっています。
それでも(私を含め)2015年以前からスクリプト書いている人はついつい「var」って宣言してしまうと思いますが。手が勝手にvarって打ってるんですよね。
ブロックレベルのスコープって?
こことこことここを参照してください。これで感覚はつかめると思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//test.jsファイル内だとして // グローバル変数 var test_a = 10; //ローカル変数 let test_b = 10; function test() { //test関数ブロック内 var test_c = 100; let test_d = 100; } console.log(test_a); //結果 => 10 console.log(test_b); //結果 => 10 console.log(test_c); //結果 => 100 ※function内で作成した変数でもfunctionの外で呼び出せる console.log(test_d); //結果 => エラー:not defined ※同じブロックレベル内に test_d は存在しない |
function内で宣言した場合、varで宣言するとfunctionの外で使うことができますが、letで宣言した場合はこれができません。
test.jsのサンプルコードを見てみると、let で宣言した【test_b】はトップレベルに存在し、ログ記録パートもトップレベルに存在します。
しかし【test_d】はtest関数(function test())内に存在していて、ログ記載パートと異なるブロックレベルに存在しています。
そのため「同じ階層にいない = test_dなんて変数は知らない」となっています。
1 2 3 4 5 6 7 8 9 10 11 |
//test.jsファイル内に中身を下に入替え let num = 2; function test(){ if (num == 1){ num = 10; }else{ num = 20; } return(num); } console.log(test()); |
ちなみに、このように記載するとログには20を記載します。
1 2 3 4 5 6 7 8 9 10 11 |
let num = 2; function test(){ let num2 = 0; if (num == 1){ num2 = 10; }else{ num2 = 20; } return(num2); } console.log(test()); |
このように記載しても20を記録しますが、
1 2 3 4 |
let num = 2; function test(){ var num = 0; (以下略) |
とするとエラーが発生します。これはletが再宣言禁止となっているからです。
まとめ
続けて書こうと思いましたが、このネタだけで長くなってしまったので続きはまた別の記事で。
- let と const と var は何が違うの?<=【今回の内容】
- functionって何?ある時とない時で何が違うの?
- オブジェクトは { } で囲われているというけど、function(){ } の { } の中もオブジェクトなの?
- this. ってどこを指しているの?
- JavaScriptとJavaは同じなの?
-
前の記事
Django:QuerySetのJSON変換で大ハマリした件 2021.03.30
-
次の記事
JavaScript:お手伝いしているプログラミングスクールで聞かれた質問【functionって何?】 2021.04.05
コメントを残す