Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

JavaScript

JavaScriptのletとは?変数宣言で使われるletの意味やサンプルプログラム

投稿日:2021年5月31日 更新日:

<目次>

(1) JavaScriptのletとは?変数宣言で使われるletの意味やサンプルプログラム
 (1-1) letとは?
 (1-2) letのサンプルプログラム
 (1-3) 参考:スコープの種類

(1) JavaScriptのletとは?変数宣言で使われるletの意味やサンプルプログラム

(1-1) letとは?

JavaScriptで「ブロックスコープ」内で有効なのローカル変数を定義する際に変数の前につけるキーワードです。

変数の定義だと「var」が馴染み深いと思いますが、決定的な違いは「var」は「ファンクションスコープ」なのに対して、「let」は「ブロックスコープ」内でのみ有効なので「if文」、「switch文」、「forループ」、「while文」などの内部でのみ参照・更新可能となります。
 
(参考)スコープの種類については「(1-3) 参考:スコープの種類」で説明しています。
 

(1-2) letのサンプルプログラム

実際に簡単なプログラムを使って動作確認してみます。こちらはX=のテキストボックスに数字を入れてボタンを押すと、その二乗(X*X)を計算して表示するプログラムです。

if文の中で、変数x1を「var」&x2を「let」で宣言した際に、それぞれif文の外でも結果を表示できるか?をチェックしています。

(図131)「var x1」は正常に処理されるが、「let x2」はエラーになる。

(操作動画)
 
そして想定通り、if文の外でx2を参照しようとするとエラーになっています。
 
(表)

x1 – ブロックスコープ内 OK(参照可能)
x2 – ブロックスコープ内 OK(参照可能)
x1 – ファンクションスコープ内 OK(参照可能)
x2 – ファンクションスコープ内 NG(参照不可能)

function Multiply(){

    let x0 = $('#xnum01').val();

    if(x0 >= 0){
        //# Xを2乗する
        var x1 = Math.pow( $('#xnum01').val() , 2 );
        let x2 = Math.pow( $('#xnum01').val() , 2 );

        //# var&ブロック内 → OK
        console.log("x1_block_scope="+x1)
        $('#result1_blscope').text(x1);

        //# let&ブロック内 → OK
        console.log("x2_block_scope="+x2)
        $('#result2_blscope').text(x2);
    }
    //# var&ファンクション内 → OK
    console.log("x1_function_scope="+x1)
    $('#result1_fnscope').text(x1);

    //# let&ファンクション内 → NG
    console.log("x2_function_scope="+x2)
    $('#result2_fnscope').text(x2);
}

 

目次にもどる

(1-3) 参考:スコープの種類

・①グローバルスコープ
ファンクションの外で定義された変数は「グローバルスコープ」になります。
 
var myName = "Rainbow";
function testFunc(){
  //# 変数myNameはtestFunc内で使用可能
}
//# 変数myNameはtestFunc外でも使用可能
 
・②ファンクションスコープ
ファンクション内で定義された変数は「ファンクションスコープ」になります。
 
function testFunc(){
  var myName = "Rainbow";
  //# 変数myNameはtestFunc内で使用可能
}
//# 変数myNameはtestFunc外では使用不可
 
・③ブロックスコープ
通常のvarで定義した変数は「ブロックスコープ」を取り得ないが、letだとそれが可能です。
 
{
  var x = 1;
  let y = 2;
}
//# xはここからアクセス出来る
//# yはここからアクセス出来ない

 

(表)

x1 – ブロックスコープ内 OK(参照可能)
x2 – ブロックスコープ内 OK(参照可能)
x1 – ファンクションスコープ内 OK(参照可能)
x2 – ファンクションスコープ内 NG(参照不可能)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Ajaxでの繰り返し処理の順序性を保つ方法について

<目次> (1) Ajaxでの繰り返し処理の順序性を保つ方法について  (1-1) JavaScriptやAjaxの処理順序について  (1-2) Ajax処理順序制御②:同一処理ループ時の順序性保持 …

JavaScriptで外部ファイル(.js)を呼び出す方法+JSPでのサンプルプログラムも紹介

<目次> (1) JavaScriptで外部ファイル(.js)を呼び出す方法  (1-1) 構文  (1-2) 外部JavaScriptファイル呼び出し手順   (1-2-1) 外部JavaScrip …

jQueryのremove()メソッドの意味や使い方

<目次> (1) jQueryのremove()メソッドの意味や使い方  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) jQueryのremove()メソッドの意味や …

JavaScriptでformをPOSTリクエストでsubmitするプログラムの例

  <目次> (1) JavaScriptでformをPOSTリクエストでsubmitするプログラムの例  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム  (1-4 …

JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)

  <目次> (1) JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)  (1-1) 概要  (1-2) tagEditorの導入方法  (1-3 …

  • English (United States)
  • 日本語
Top