変数が届く範囲

01 / 05

関数の中で作った変数は外から見えない

関数の { } の中で const や let を使って作った変数は、その関数の中だけで使える。

この「変数が届く範囲」のことをスコープと呼ぶよ。

下のコードは最後の行でエラーになる。total は関数の中にしかいなくて、外から呼んでも見つからないからだね。

function showTotal() {  const total = 500;  console.log(total);}showTotal();console.log(total);

02 / 05

逆向きは通る。関数の外で作った変数は、関数の中から見えるよ。

外側は内側から見える。内側は外側から見えない。この一方通行がスコープの基本だよ。

const shopName = "みどり商店";function showName() {  console.log(shopName);}showName();

実行結果

みどり商店

03 / 05

外と中で同じ名前の変数を作ったらどうなるだろう。答えは「近いほうが使われる」。

関数の中では中で作ったほうが見え、外では外のほうが見える。中で書き換えたつもりが外に影響しない、というのはこれが理由だよ。

const label = "そと";function show() {  const label = "なか";  console.log(label);}show();console.log(label);

実行結果

なか
そと

04 / 05

スコープを作るのは関数だけじゃない。if や for の { } の中で let / const を使って作った変数も、その { } の中だけのものだよ。

for (let i = ...) の i が繰り返しの外で使えないのも同じ理由。ためる変数を繰り返しの外に置いてきたのは、これが理由だったんだ。

let total = 0;for (let i = 1; i <= 3; i++) {  const twice = i * 2;  total += twice;}console.log(total);

実行結果

05 / 05

スコープが分かると、関数の作り方の指針が見えてくる。

こうしておけば、外の変数に直接さわらなくて済む。関数を別の場所に持っていってもそのまま動くし、どこで値が変わったのかも追いやすいよ。

それじゃあ、範囲を意識しながら書いてみよう。

function addTax(price) {  const tax = price / 10;  return price + tax;}console.log(addTax(800));

実行結果