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 (書籍)

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧