ES6では、Promises、async / await、ES6 destructuringなど、JavaScriptに多くの便利な追加機能があります。letとconstはそれらの追加の1つです。

今日このブログでは、Javascriptのvar、let、constの違いについて説明します。それでは始めましょう。

Javascriptのletvs var

ES6 javascriptの前varは、グローバルスコープしかなく、いくつかの欠点があるキーワードを使用していました。letJavaScriptの追加のブロックレベルのスコープ。

いくつかの例で違いについて説明しましょう。

// ES5 Code
var x = 10;
console.log(x) // 10
var x = "Hello Reader"
console.log(x) // Hello Reader
var x = 12.2
console.log(x) // 12.2

varキーワードに、我々は、することができました再宣言し、既に宣言されていた変数を。これにより、コードが大きくなると混乱が生じます。すでに別の場所で同じ名前で宣言された変数があり、それを認識せずに再宣言している場合はどうなりますか？次に、変数値をオーバーライドして、デバッグが困難になる可能性があります。

しかしlet、JavaScriptで使用する場合、すでに宣言されている変数を再宣言しようとするとエラーが発生します。これは良いことです。

// ES6 Code
let x = 10;
console.log(x); // 10
let x = "Hello Reader"
// Uncaught SyntaxError: Identifier 'x' has already been declared

// ES6 Code
let x= 10;
console.log(x); // 10

x = "Hello Reader";
console.log(x); // Hello Reader

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

次に、以下のコードを見てください。

// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); 
// Uncaught ReferenceError: number is not defined

しかし、ifブロックの外でletを宣言するとどうなりますか？見てみましょう。

// ES6 Code
let isValid = true;
let number = 10;
if(isValid) {
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // 10

Javascriptでletvs const

constキーワードは正確に同じ動作しますletキーワード。また、ブロックレベルのスコープもあります。では、それらは互いにどのように異なるのでしょうか？見てみましょう

変数をとして宣言するconstと、値が変更されない定数変数と見なされます。

以下のコードを見てください

// ES6 Code
let x = true;
x = "Hello Reader";
console.log(x) // Hello Reader

// ES6 Code
const x = true;
x = "Hello; 
// Uncaught TypeError: Assignment to constant variable.

ただし、オブジェクトと配列に関してconstは、のこの動作は異なります。しばらくオブジェクトを更新することはできませんが、そのプロパティを更新することができます。これは、オブジェクトがjavascriptの参照型であるためです。const

以下のコードを見てください

// ES6 Code
const person= {
 name: 'Taran',
 age: 18
};

person.age = 22;

// ES6 Code
const person= {
 name: 'Taran',
 age: 18
};
person = {
 firstName: "Taran",
 lastName: "Arora"
}

var、let、およびconstのまとめ

1. キーワードletとconstJavaScriptのブロックスコープを追加します。
2. var 変数は、そのスコープ内で更新および再宣言できます
3. let変数は更新できますが、再宣言constすることはできません。変数を更新したり、再宣言したりすることはできません。