スコープ、等価演算子(==)と厳密等価演算子(===)ついて

スコープは「変数の有効範囲」のことと下記の著書では言及しています。またJavaScriptには以下のようなスコープが存在します。

・グローバルスコープ

・ローカルスコープ

・関数スコープ

・ブロックスコープ

またクラスに関係する変数もスコープに関連してきます。一般的に次のようなものがあります。

・インスタンス変数

・クラス変数

複雑なコードを書くようになると、スコープを小さくすることでバグの原因を減らしたりすることができます。

グローバルスコープ　＞　クラス変数　＞　インスタンス変数　＞　関数スコープ　＞　ブロックスコープ

ブロックスコープが変数の有効範囲が狭く、特別な意図がない場合には、なるべく使用したほうがいいです。

ブロックスコープ

ブロックとは{}で囲まれたコードを示します。constやletで宣言された定数や変数はこのブロックスコープで扱われます。

ブロックスコープ

if(true){
const block = ‘1:これがブロックスコープの変数です。’;
console.log(block);
}else {
const block = ‘2:これもブロックスコープの変数です。’;
console.log(block);
}

if(true)としているので、コンソールには’1:これがブロックスコープの変数です。’が表示されます。 if(false)とすると、’2:これもブロックスコープの変数です。’が表示されます。

関数スコープ

関数の中が変数の有効範囲になるスコープです。

関数スコープ

function Scope() {
var fucScope = ‘これが関数スコープの変数です。’;
console.log(fucScope);
}
Scope();
console.log(fucScope)

グローバルスコープ

もっとも広いスコープで、プログラムのどこからでも参照できてしまいます。

関数に囲まれていない領域での変数を宣言したり、関数内でも変数を宣言する際にVarやconst,let付けずに使うと、それもグローバルスコープになります。

グローバルスコープ

var Global = ‘グローバルスコープ’;

function Global(){
myGlobal = ‘var,let,constが使われてないのでグローバルスコープになります’
}

変数の巻き上げとブロックスコープ

これは同じ関数内で同名の変数を複数回宣言した場合、同一の変数として扱われることになります。

varで変数宣言した場合の動作を確認してみましょう。

変数の巻き上げ

function hoisting(){
var myhoisting = ‘変更前’;
console.log(myhoisting)

if(true){
var myhoisting = ‘変更後’
console.log(myhoisting)
}
console.log(myhoisting)
}
hoisting()

varにてmyhoistingという変数が宣言されていますが、どちらもhoisting全体がスコープとなっていますので、同一の変数として扱われてしまいます。

最後のコンソールログでは’変更後’となってしまいます。

function hoisting(){
let myhoisting = ‘変更前’;
console.log(myhoisting)

if(true){
let myhoisting = ‘変更後’
console.log(myhoisting)
}
console.log(myhoisting)
}
hoisting()

letやconstを利用すると最後のコンソールログで確認すると「変更前」となります。つまり「変数の巻き上げへの心配」をしなくて済むようになります。

等価演算子「==」と厳密等価演算子「===」

console.log(‘1’ == 1)
console.log(‘2’ === 2)

等価演算子「==」では文字列型の１と数値型の１とではtrueと評価されます。

しかし、厳密等価演算子「===」ではfalseと評価されます。

様々なロジックにて誤りを減らすためにもなるべく厳密等価演算子「===」で比較したほうがいいですね。

レベルアップにプロからの学びを。