44
10

【JavaScript Primer学習メモ】const、let、varそれぞれの方法で宣言した変数の違い

Last updated at Posted at 2024-07-30

はじめに

JavaScript Primerの変数と宣言の内容を復習しやすいように、まとめました!
js初学者で、変数を宣言する場合はconstを使用するのが良いのかな...?くらいのあいまいな理解だったので、const、let、varの違いについてしっかり学べてスッキリしました!

const

  • 再代入できない変数の宣言とその変数が参照する値(初期値)を定義できる
    const 変数名 = 初期値;
    
  • 再代入をすると、エラー(TypeError)が発生する。 エラーが発生するとそれ以降の処理は実行されなくなる
    const bookTitle = "JavaScript Primer";
    bookTitle = "新しいタイトル"; // => TypeError: invalid assignment to const 'bookTitle'
    

let

  • 値の再代入が可能な変数を宣言できる
  • 何度でも値の代入が可能
    let count = 0;
    count = 1;
    count = 2;
    count = 3;
    
  • letはconstとは異なり、初期値を指定しない変数も定義できる
    • 初期値が指定されなかった変数はデフォルト値としてundefinedという値で初期化される(undefinedは値が未定義ということを表す値)
      let bookTitle;
      // `bookTitle`は自動的に`undefined`という値になる
      

var 

  • varの使い方はletとほとんど同じ。「letはvarを改善したバージョン」
    • 値の再代入が可能な変数を宣言できる
      var bookTitle = "JavaScript Primer";
      
    • 初期値がない変数を宣言でき、変数に対して値の再代入もできる
      var bookTitle;
      bookTitle = "JavaScript Primer";
      bookTitle = "新しいタイトル";
      
  • varを利用することは避けたほうがよい
    • varには同じ名前の変数を再定義できてしまう等のさまざまな問題がある
    • ほとんどすべてのケースでvarはconstかletに置き換えが可能

まとめ

再代入を禁止することで、ミスから発生するバグを減らすことが期待できる。
そのため変数を宣言する場合には、まずconstで定義できないかを検討し、できない場合はletを使うことを推奨している。

44
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
10