JavaScriptのスコープについてメモ

Published: 2016年3月17日 by tomsato

概要

JavaScriptのスコープについてまとめる

JavaScript勉強シリーズ

スコープについて

スコープとは変数名や関数名の有効範囲のこと
JavaScriptのスコープはたった2つだけ

グローバルスコープ 関数外で宣言したスコープ
関数スコープ 関数内で宣言したスコープ

関数スコープはグローバルスコープとの対比でローカルスコープとも呼ばれる
JavaScriptにはブロックスコープがないことに注意

スコープについて例

グローバルスコープと関数スコープを示す例

var x = 1;

function test() {
  print('x = ' + x);
  var x = 2;
  print('x = ' + x);
}

test();
// x = undefined
// x = 2

print('x = ' + x);
// x = 1

ローカル変数xのスコープは関数test内の全域になる
従って5行目でxを宣言しているのでxはローカル変数となり
4行目の時にはxに値を代入していないのでundefinedが出力されて
6行目の時には5行目で代入した2が出力される

関数testの中でxを宣言していない場合はグローバル変数のxが使われる

var x = 1;

function test() {
  print('x = ' + x);
}

test();
// x = 1

従ってローカル変数は関数の先頭で宣言するのが推奨されている

ブロックスコープについて

JavaScriptにはブロックスコープがない

var x = 1;
{
  // 関数と違ってundefinedにならない
  print('x = ' + x); // x = 1
  var x = 2;
  print('x = ' + x); // x = 2
}

// ブロックスコープがないためxには2が入ったまま
print('x = ' + x); // x = 2

letというものを使ってブロックスコープを実現することができるがECMAScript6で対応されているみたいなので何も考えずletを使おうとするとエラーになるので注意
【JavaScript 】【Chrome】let変数。chromeの”extended mode”

※ 3/19追記
letはすでにデフォルトで有効になっているためextended modeである必要はないみたいでした
試したところchromeだと「chrome://flags/」で「JavaScript の試験運用機能を有効にする」を行うとletが使えました
ご指摘ありがとうございます

参考

  • パーフェクトJavaScript (書籍)

コメントを書く

※ 個別に返信が必要な時のみご記入ください

※ Emailは公開されません

※ 承認されると名前・コメントが下記に表示されます

コメント一覧

最近の投稿

ビジュアルリグレッションテストについてまとめ、ネットで調べると数多くのライブラリがありどれがどんな立ち位置なのか全体像がわかりずらかったのでどんな種類があるのか入門の入門としてまとめます、またPlaywrightを使って実際に触ってみました

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

カテゴリ一覧

タグ一覧