JavaScript 基礎編 Vol.3

JavaScript備忘録 Vol.3

目次

• アロー関数
• スコープ

今回もJavaScriptの記事になっています。

アロー関数

まずは前回の記事でも使用した例文

const sum = function(a, b, c){
  return a + b + c;
};

const total = sum(1,2,3) + sum(3,4,5);
console.log(total);

出力結果

これをもっと短くするためにアロー関数を使って書いていきます。

const sum = (a, b, c) => {
  return a + b + c;
};

functionを消し、( )と{ }を=>で繋ぐことでアロー関数とすることができます。

行われる処理は一緒ですね。

さらに

この例文の場合関数内の処理が1つなので

const sum = (a, b, c) => a + b + c;

といった具合に1行で書くことができます。

全体を見ると

const sum = (a, b, c) => a + b + c;

const total = sum(1,2,3) + sum(3,4,5);
console.log(total);

こうなります。

出力結果も変わりませんね。

さらに、アロー関数では引数が一つの場合、( )も省略することができます。

別の例を見てみましょう。

const double = function(a){
  return a * 2;
};

こんな関数式があります

doubleという定数に、引数を2倍にして返す関数を代入しています。

これを省略して書くと

const double = a =>  a*2;

こうなります。

const double = a =>  a*2;

console.log(double(12));

このように、引数に12を入れてコンソールに出力する指示を書くと

こうなります。

スコープ

次はスコープについてみていきましょう。

スコープは、有効範囲という意味です。

function f(){
  const x = 1;
  console.log(x);
}

f();

f( )という関数があり、その中でxという定数に1が代入されています。
同じ関数内でコンソールにxを表示させる指示を書きます。
最後にこのf( )を呼び出します。

結果はこうですね。当たり前ですが、１が出力されます。

ここがポイントなんですが

ブロック内で宣言された変数や定数はブロック内のみが有効範囲となります。

ではブロックの外でxを出力してみましょう。

function f(){
  const x = 1;
}

//f();
console.log(x);

こんな感じでxどこ？的なエラーになってしまいます。

ここでxという定数名を使いたい場合には

const x = 2;

function f(){
  const x = 1;
}

f();
console.log(x);

このように関数の外でxを定義してあげましょう。

そうするとこんな感じで出力することができます。

xという同じ定数名ですが、出力される値が違いますよね？

1行目のconst x = 2;

このようなブロックの外で宣言された定数は全ての範囲で有効となり、このようなスコープを

グローバルスコープ

といいます。

ただ、今回のようにブロック内とブロック外で同じ名前の定数が宣言されている場合、

ブロック内ではブロック内で宣言された値が優先されます。

よって、今回は同じ x でも 1 と 2 が出力されています。

ちなみにif文やwhile文でもブロックがあるので、同じようにスコープが適用されます。

今回はここまで

次回は・・・まだまだJS！

それではまた次回！