varとletの違い

前回の記事で、var、let、constについて説明したけど、じゃあvarとletってどっち使えばいいのさ？って考えに至ったので、より詳しくvarとletについて調べてみよう!

...

関数スコープとブロックスコープ

前回varとletの違いについて、varが再宣言可能で、letが不可であるといったが、それよりも大きな違いがあって、それが、varが関数スコープ、letがブロックスコープという違いである。

スコープとは?　大きく分けて2種類

• グローバルスコープ ... ページ全体でどこからでも参照できる。

//グローバル変数を宣言
var name = "Suga";

function output_Name(){
console.log('My name is' + name);
};

//値を書き換えれる。
output_Name(); // => 'My name is Suga'
name = "Sato";
output_Name(); // => 'My name is Sato'

外に変数を宣言しちゃうようなこんな書き方だと、プログラムのどこからでもアクセスして書き換えれちゃうんだなこれが。そんなの嫌だわ。こんな書き方したくねえ！

そこでもう一つのスコープ。

• ローカルスコープ ... ページ内の部分的な範囲のみ参照できる。

ここで、ローカルスコープの一つで見出しにもあった関数スコープの登場。

関数スコープはfunctionの中に置かれた関数や変数はその内部でしかアクセス、書き換えができない

//グローバル関数
function read_Name(){
//ローカル変数
var name = "Suga";
//ローカル関数
function output_Name(){
console.log('My name is' + name);
};
output_Name();

//グローバル関数は呼び出せるが、ローカル変数、ローカル関数は呼び出せない。
read_Name(); // => 'My name is Suga'
console.log(read_Name.name);         // => undefined 
console.log(read_Name.output_Name); // => undefined 
};

グローバルな場所にnameを宣言しても関数read_Name()にはなんの影響もうけない。
また、read_Name.name(もしくは.output_Name)として変数を代入、アクションを代入することはできるが、関数read_Nameにはなんの影響も受けない。

関数スコープは以下のようなメリットがある

変更に強いモジュールが作れる。
変数の名前衝突を考える時間が減る

時短時短。時短は大事。何事においてもね。

次にブロックスコープ

function(){
 if (true){
        console.log(x); //2
        x = 3;
        let y = "a";
    }
    console.log(x); //3
    console.log(y); //error y is not defined
}

letはブロックスコープといって、if文中で宣言したので、そのif文で囲まれたブロック内でしか扱えない
よって、その外にある関数ではこの変数は呼び出せないのである。
...

なんかだんだん、まだ早いのに変にレベルの高いところに突っ込んでる気がする。いい傾向なのか悪い傾向なのか.....