Var、Let、およびConst –違いは何ですか?

ES2015(ES6)には、多くの輝かしい新機能が搭載されています。そして今、2020年以来、多くのJavaScript開発者がこれらの機能に精通し、使い始めていると想定されています。

この仮定は部分的に正しいかもしれませんが、これらの機能のいくつかが一部の開発者にとって謎のままである可​​能性はあります。

ES6に付属する機能の1つは、変数宣言に使用できるletとの追加ですconst。問題は、var私たちが使用してきた古き良きものと何が違うのかということです。それでもこれについてはっきりしない場合は、この記事が役に立ちます。

この記事では、我々は説明しますvarletconst  その範囲、使用、および巻き上げに関して。あなたが読んでいるとき、私が指摘するそれらの間の違いに注意してください。

Var

ES6が登場する前は、var宣言が支配していました。varただし、で宣言された変数に関連する問題があります。そのため、変数を宣言する新しい方法が出現する必要がありました。まず、varこれらの問題について説明する前に、さらに理解を深めましょう。

varのスコープ

スコープとは、基本的に、これらの変数を使用できる場所を意味します。var宣言はグローバルスコープまたは関数/ローカルスコープです。

var変数が関数の外部で宣言されている場合、スコープはグローバルです。これはvar、関数ブロックの外部で宣言された変数はすべて、ウィンドウ全体で使用できることを意味します。

var関数内で宣言された場合、関数スコープです。これは、それが利用可能であり、その関数内でのみアクセスできることを意味します。

さらに理解するには、以下の例を見てください。

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

ここで、greeterhello関数スコープであるのに対し、関数の外部に存在するため、グローバルスコープです。したがってhello、関数の外部で変数にアクセスすることはできません。したがって、これを行うと:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

hello関数の外部で使用できないためにエラーが発生します。

var変数は再宣言および更新できます

これは、同じスコープ内でこれを実行でき、エラーが発生しないことを意味します。

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

そしてこれも

 var greeter = "hey hi"; greeter = "say Hello instead"; 

varの巻き上げ

巻き上げは、コードを実行する前に変数と関数宣言をスコープの先頭に移動するJavaScriptメカニズムです。これは、これを行うと次のことを意味します。

 console.log (greeter); var greeter = "say hello" 

これは次のように解釈されます。

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

したがって、var変数はスコープの先頭に引き上げられ、値undefined。で初期化されます。

varの問題

に伴う弱点があり  varます。以下の例を使用して説明します。

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

したがって、times > 3trueを返すため、greeterに再定義され"say Hello instead"ます。故意greeterに再定義したい場合は問題ありませんが、変数greeterが以前に定義されていることに気付いていない場合は問題になります。

greeterコードの他の部分で使用したことがある場合は、得られる出力に驚かれるかもしれません。これにより、コードに多くのバグが発生する可能性があります。これが理由でletありconst、必要です。

しましょう

let変数宣言に優先されるようになりました。それはvar宣言の改善として来るので、それは驚くべきことではありません。また、var先ほど説明した問題も解決します。なぜそうなのか考えてみましょう。

ブロックスコープを設定しましょう

ブロックは、{}で囲まれたコードのチャンクです。ブロックは中括弧で囲まれています。中括弧内はすべてブロックです。

したがって、ブロックで宣言された変数は、let  そのブロック内でのみ使用できます。これを例で説明しましょう:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped .

let can be updated but not re-declared.

Just like var,  a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

this will return an error:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

However, if the same variable is defined in different scopes, there will be no error:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)