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は公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

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

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

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

NetlifyのFormsやSplit Testing、Functionsについて使い方をまとめる FormsはNetlifyに標準機能として用意されているフォーム機能でコメント保存用にサーバを用意する必要がない Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

カテゴリ一覧

タグ一覧