【初心者でも分かる!】JavaScriptの関数とスコープの基礎

公開日:2018-10-28
最終更新:2018-10-28
※この記事は外部サイト(https://qiita.com/watuyo_2/items/eae72610c...)からのクロス投稿です

スコープとは

  • 関数や変数などの参照できる範囲
  • 基本的には関数の内側(スコープ内)で作成した変数は外側(スコープ外)では参照できない

基本的なスコープ(変数)

  • 関数fnA、Bを定義し、変数xを新規作成する。
  • console.logで変数xをコンソールに表示する。fnA、Bをそれぞれ実行する。

function fnA() {
  let x = 2;
  console.log(x)// 2
}
fnA()

function fnB() {
  let x = 3;
  console.log(x)// 3
}
fn(B)

console.log(x) //ReferenceError: x is not defined

すると、スコープの対象は範囲が一目瞭然ですね。 fn()関数だけ実行できます。

基本的なスコープ(関数)

  • fn(関数)に仮引数xを定義、xをコンソールに表示する。
function fn(){
  console.log(x);// 4
}
fn(4);

console.log(x)// ReferenceError: arg is not defined

こちらもfn()関数の外では仮引数xを参照できません。

letを用いた変数作成について

上記2つのコードはいずれも「let x = 数字」で再代入しています。 同じスコープ内で再代入をするとエラーとなりますが、異なるスコープ内では再定義可能です。 以下は例です。

function fnA(){
  let x = 5;
  let x = 6; //SyntaxError
  console.log(x);
}
fnA();//SyntaxError: Identifier 'x' has already been declared

function fnB(){
  let x = 7;
  console.log(x)
}
fnB();// 7

function fnC(){
  let x = 8;
  console.log(x)
}
fnC();//8
`

グローバルスコープについて

名前の通りもっとも外側にあるスコープです。

const global = 9;
{
  console.log(global);//9
}
function fn(){
  console.log(global);//9
}
fn();

グローバル変数はあらゆるスコープから参照できる変数なので、いずれも9と表示されます。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@QA8SrqqPrVZPs6LSの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする