diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index ede6bbe7a..1ebcb1855 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -104,61 +104,62 @@ document.write(multiply(3, 4)); ## 変数スコープ {/* prettier-ignore */} -関数内で宣言された変数は、関数内でのみ有効です。変数が有効な範囲のことを、その変数**スコープ**と呼んでいます。 +関数やif文などの中で`let`や`const`を使って宣言された変数は、それらの内部でのみ有効です。変数が有効な範囲のことを、その変数**スコープ**と呼んでいます。 -{/* prettier-ignore */} -関数外で宣言された変数関数内でも利用できます。 +次の例では、関数`greet`の中で変数`siteName`を宣言しています。 ```javascript -let guestCount = 0; - function greet() { - guestCount += 1; - document.write("あなたは" + guestCount + "人目のお客様です。"); + const siteName = "田中のブログ"; + document.write("ようこそ、" + siteName + "へ!"); } -greet(); // あなたは1人目のお客様です。 -greet(); // あなたは2人目のお客様です。 +greet(); // ようこそ、田中のブログへ! と表示される ``` -この例における、`greet`関数は、呼び出されるたびに`guestCount`に1を加えています。 - -:::tip[複合代入演算子] +ここで、関数の外側から`siteName`を利用しようとするとエラーになります。 -[**複合代入演算子**](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) は、計算と代入を同時に行うことができる演算子です。 +```javascript +function greet() { + const siteName = "田中のブログ"; + document.write("ようこそ、" + siteName + "へ!"); +} -`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。 +greet(); // ようこそ、田中のブログへ! と表示される -```javascript -guestCount += 1; +document.write(siteName); // これはエラーになる (Uncaught ReferenceError: siteName is not defined) ``` -は以下の文のように読み替えられます。 +一方で、関数の外側で宣言された変数関数の内側から利用することは可能です。 ```javascript -guestCount = guestCount + 1; +const siteName = "田中のブログ"; + +function greet() { + document.write("ようこそ、" + siteName + "へ!"); +} + +greet(); // ようこそ、田中のブログへ! と表示される ``` -::: +:::tip[複合代入演算子] -:::warning[変数**スコープ**] +[**複合代入演算子**](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) は、計算と代入を同時に行うことができる演算子です。 -{/* prettier-ignore */} -スコープが終わった変数は、その時点で破棄されます。 +`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。 + +次の例の`greet`関数は、呼び出されるたびに`guestCount`に1を加えています。`guestCount += 1;`は、`guestCount = guestCount + 1;`のように読み替えられます。 ```javascript -let outer = 0; - -function increment() { - let inner = 0; - outer += 1; - inner += 1; - document.write(outer); // 1ずつ増える - document.write(inner); // 常に1 +let guestCount = 0; + +function greet() { + guestCount += 1; + document.write("あなたは" + guestCount + "人目のお客様です。"); } -increment(); -increment(); +greet(); // あなたは1人目のお客様です。 +greet(); // あなたは2人目のお客様です。 ``` :::