diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index ede6bbe7a..0c615fa62 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -104,16 +104,38 @@ document.write(multiply(3, 4)); ## 変数スコープ {/* prettier-ignore */} -関数内で宣言された変数は、関数内でのみ有効です。変数が有効な範囲のことを、その変数**スコープ**と呼んでいます。 +関数やif文などの中で`let`や`const`を使って宣言された変数は、それらの内部でのみ有効です。変数が有効な範囲のことを、その変数**スコープ**と呼んでいます。 -{/* prettier-ignore */} -関数外で宣言された変数関数内でも利用できます。 +次の例では、関数`greet`の中で変数`message`を宣言しています。 + +```javascript +function greet() { + let message = "Hello!"; + document.write(message); // Hello! と表示される +} + +greet(); +``` + +ここで、関数の外側から`message`を利用しようとするとエラーになります。 + +```javascript +function greet() { + let message = "Hello!"; +} + +greet(); + +// document.write(message); これはエラーになる +``` + +一方で、関数の外側で宣言された変数関数の内側から利用することは可能です。 ```javascript let guestCount = 0; function greet() { - guestCount += 1; + guestCount = guestCount + 1; document.write("あなたは" + guestCount + "人目のお客様です。"); } @@ -121,44 +143,22 @@ greet(); // あなたは1人目のお客様です。 greet(); // あなたは2人目のお客様です。 ``` -この例における、`greet`関数は、呼び出されるたびに`guestCount`に1を加えています。 - :::tip[複合代入演算子] [**複合代入演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BB%A3%E5%85%A5%E6%BC%94%E7%AE%97%E5%AD%90) は、計算と代入を同時に行うことができる演算子です。 `x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。 -```javascript -guestCount += 1; -``` - -は以下の文のように読み替えられます。 +上の例の ```javascript guestCount = guestCount + 1; ``` -::: - -:::warning[変数**スコープ**] - -{/* prettier-ignore */} -スコープが終わった変数は、その時点で破棄されます。 +は以下のように書き換えることができます。 ```javascript -let outer = 0; - -function increment() { - let inner = 0; - outer += 1; - inner += 1; - document.write(outer); // 1ずつ増える - document.write(inner); // 常に1 -} - -increment(); -increment(); +guestCount += 1; ``` :::