JavaScript の変数の動作は、宣言時に const 、 let 、または var ステートメントが使用されたかどうかによって異なります.

Web 開発者の仕事を探していたとき、このトピックは、私が出席したほぼすべての技術面接で最初の質問の 1 つに含まれていました.

これは驚くべきことではありません.これは、すべてのプロの Web 開発者が知っておくべき JavaScript の基本事項の 1 つです.

この投稿が、技術面接の準備をしている場合や、すでに就職している場合の復習に役立つことを願っています.

スコープの分離

const または let を使用して宣言された変数のアクセシビリティは、var ステートメントで作成された変数とは異なります.前者はブロックスコープのバインディングで、後者は関数スコープです.

実際には、中括弧で区切られたブロック内で const または let を使用して変数を作成すると、そことすべてのネストされたブロックでアクセスできますが、そのブロックの外側のコードでは表示されません.
var 個の変数の場合はそうではありません — それらは定義されたブロックで分離されません.したがって、それらは外部のコードで表示されます.

if (true) {
  const bar = '👾'  // `let` will behave identically
  if (true) {
    console.log(bar) // prints value
  }
}
console.log(bar) // throws ReferenceError: bar is not defined

if (true) {
  var foo = '👽'
  if (true) {
    console.log(foo) // prints value
  }
}
console.log(foo) // also prints value

関数内で変数を宣言すると ( var 、 const 、または let ステートメントでは問題になりません)、この関数のスコープ内で分離されます.

function lilu () {
  var foo = "👽" // `let` and `const` will behave similarly
  if (true) {
    console.log(foo)
  }
}
lilu() // prints value
console.log(foo) // throws ReferenceError: foo is not defined

再割り当て

const ステートメントを使用して変数を宣言すると、値への永続的な参照が作成されます — この参照は変更できません.そのため、const 変数は、宣言時に値に初期化する必要があります.

対照的に、let および var 変数は再割り当てできます.したがって、宣言の時点でそれらに値を割り当てることは必須ではありません.

const lilu // throws SyntaxError: Missing initializer in const declaration
const lilu = "👾"
lilu = "👽" // throws TypeError: Assignment to constant variable

var foo
let bar
console.log(foo) // prints undefined
console.log(bar) // prints undefined

foo = "👾"
bar ="👽"
console.log(foo) // prints value
console.log(bar) // prints value

const 変数は値への永続的な参照を保持しますが、データ自体の不変性とは関係ありません.たとえば、const 変数がオブジェクトや配列などの構造型データを指している場合、この値を変更できます.

再宣言

var 変数を重複した名前で宣言しても、エラーが発生することはありません. const および let 変数の場合 (再宣言は禁止されています)、それらの識別子は一意でなければなりません.

var foo = "Hello"
var foo = "World!"
console.log(foo) // prints "World!"

const bar = "Hello"
const bar = "World!" // throws SyntaxError: Identifier 'bar' has already been declared

var lilu = "Hello"
const lilu = "World!" // throws SyntaxError: Identifier 'lilu' has already been declared

初期化

var ステートメントで宣言された変数は、現在のスコープの先頭で自動的に初期化されます — その時点で、それらは undefined 値を保持します.そのため、宣言した行の前で使用することができます.
const および let 変数の場合はそうではありません — インタープリターが宣言を含む行に遭遇するまで、それらは初期化されません.したがって、宣言の前に const および let 変数を使用することはできません.

(function () {
  /* current scope */
  console.log(foo) // prints undefined
  foo = 1
  console.log(foo) // prints 1
  var foo = 2
  console.log(foo) // prints 2
})()

{
  /* current scope */
  console.log(lilu) // throws ReferenceError: Cannot access 'lilu' before initialization
  const lilu = 1 // `let` will behave identically
}

変数を再割り当てする必要がない場合は const を使用して変数を宣言し、値を変更する予定がある場合は let を使用して変数を宣言するのが一般的です. var 変数の使用は直感的でなく、トリッキーなバグにつながる可能性があります.

そこにあります!読んでくれてありがとう!

...そして、次の技術面接での幸運を祈ります🚀