NEW ARTICLE
Rubyのエラー『SyntaxError: unexpected end-of-input』の解決方法
  1. HOME
  2. javascript
  3. javascript ブロックスコープの使い方

javascript ブロックスコープの使い方

javascript ブロックスコープの使い方

javascriptで、varとletとconstを使用したブロックスコープの使い方を記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.66
Javascript サンプル集はこちら

ブロックスコープ使い方

まずは、ブロック文（{}）の中で変数を定義してみます。

var a = 100;
let b = 100;

{
	var c = 100;
	let d = 100; // letを指定するとブロック文の中でのみ有効
}

console.log( a ); // 100
console.log( b ); // 100
console.log( c ); // 100
console.log( d ); // Uncaught ReferenceError: d is not defined

実行結果は、変数「a,b,c」までしか利用できません。

上記のように、letを指定するとブロック文の中でのみ有効な変数となります。

var a = 100;
let b = 100;

{
	var c = 100;
  let d = 100;
  console.log( d ); // 100
}

console.log( a ); // 100
console.log( b ); // 100
console.log( c ); // 100

constを指定しても、まったく同じ結果となります。

var a = 100;
const b = 100;

{
	var c = 100;
  const d = 100;
  console.log( d ); // 100
  
}

console.log( a ); // 100
console.log( b ); // 100
console.log( c ); // 100
console.log( d ); // error

ブロック文内であれば、すでに利用している変数名も使用することが可能です。

var a = 100;
let b = 100;

{
	var c = 100;
  let a = 200;
  let b = 200;
  console.log( a ); // 200
  console.log( b ); // 200
}

console.log( a ); // 100
console.log( b ); // 100
console.log( c ); // 100

ブロック内で同じ変数名を利用すると、エラーとなります。

var a = 100;
let b = 100;
let a = 200; // Uncaught SyntaxError: Identifier 'a' has already been declared