質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

1508閲覧

スコープについて教えてください

haruniku

総合スコア527

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/05/19 18:52

編集2019/05/19 18:54

こんにちは

現在、javascript勉強中です
スコープの概念についてどうしてもわからないことがあるので質問させて頂きます。

グローバル変数が保持する値はプログラムが終了するまで保持される
ローカル変数は関数が実行されるたびに初期化される

グローバル変数とローカル変数の特性を踏まえて動作検証行ってます。
script①とscript②の違いは下記部分の記述が外側内側にあるかの違いです

var btn = document.getElementById("cntBtn");

しかし、script①とscript②の処理結果が同じになってしまいます。
script①とscript②の違いがイマイチわからないのでどなたかご教示いただけないでしょうか。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>関数を使用して押した回数だけカウントする</title> 6</head> 7<body> 8 <input type="button" id="cntBtn" value="カウントボタン 0" onclick="onBtn()"> 9 <script> 10 var count = 0; 11 var btn = document.getElementById("cntBtn"); 12 function onBtn(){ 13 count++; 14 btn.value = "カウントボタン" + count; 15 } 16 </script> 17</body> 18</html>

javascript①

javascript

1 <script> 2 var count = 0; 3 var btn = document.getElementById("cntBtn"); 4 function onBtn(){ 5 count++; 6 btn.value = "カウントボタン" + count; 7 } 8 </script>

javascript②

javascript

1 <script> 2 var count = 0; 3 function onBtn(){ 4 var btn = document.getElementById("cntBtn"); 5 count++; 6 btn.value = "カウントボタン" + count; 7 } 8 </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/05/19 20:32

「同じ結果」とは? 期待していた結果と実際の結果を記載してください
think49

2019/05/19 22:08

引用文があるようですので、引用元(URL、書籍名など)を明らかにしてください。
guest

回答4

0

ベストアンサー

onBtn()処理結果が同じなので違いがわからないということですね。
最後にconsole.log(btn);を追記してみてください。
①と②で結果が異なります。

これが{}のスコープによる違いなので
実際に実行していただければ直感的にご理解いただけると思います。

②のvar btnはonBtn(){}の内側でしか定義されないため
外側でconsole.log(btn); を実行しても
btn is not defined (btnは未定義)となります。

js

1// javascript① 2var count = 0; 3var btn = document.getElementById("cntBtn"); 4function onBtn() { 5 count++; 6 btn.value = "カウントボタン" + count; 7} 8console.log(btn); 9// => <div id="cntBtn"></div>

js

1// javascript② 2var count = 0; 3function onBtn() { 4 var btn = document.getElementById("cntBtn"); 5 count++; 6 btn.value = "カウントボタン" + count; 7} 8console.log(btn); 9// => Uncaught ReferenceError: btn is not defined

投稿2019/05/19 23:20

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

haruniku

2019/05/20 12:52

わかりやすい解説ありがとうございます。 今回のベストアンサーとさせて頂きます。 他の方々も回答頂きありがとうございました。
guest

0

ローカル変数

ローカル変数は変数宣言された関数の外側から参照できません。

JavaScript

1var count = 0; // グローバル変数 2 3function onBtn () { 4 var btn = document.getElementById("cntBtn"); // ローカル変数 5 count++; 6 btn.value = "カウントボタン" + count; 7} 8 9console.log(count); // 0 10console.log(btn); // ReferenceError: btn is not defined

ガベージコレクション

グローバル変数が保持する値はプログラムが終了するまで保持される
ローカル変数は関数が実行されるたびに初期化される

間違ってはいませんが、スコープの説明でメモリ管理の説明から入るのはおかしいので、この文章は補足に過ぎない可能性があります。

Re: haruniku さん

投稿2019/05/19 22:19

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

javascript

1var count = 0; 2 3```が今は 4```javascript 5function onBtn() { 6} 7 8```の外にあります(①も②も)が、これを 9```javascript 10function onBtn() { 11} 12 13```の中に移して比較してみたらどうでしょうか? 14```javascript 15 <script> 16 function onBtn(){ 17 var btn = document.getElementById("cntBtn"); 18 var count = 0; 19 count++; 20 btn.value = "カウントボタン" + count; 21 } 22 </script> 23 24```こうすると count がローカル変数のため onBtn() の中でしか有効ではなく onBtn() が実行される毎に 0 で初期化されてしまうため何度ボタンを押しても「カウントボタン1」としか表示されなくなるのを確認できると思います。 25グローバル変数の場合は count++; で加算された結果をonBtn()が終了した後も保持してくれますが、onBtn()の中でしか存在できないローカル変数にしてしまうと+1した結果を保持できない事が理解しやすくならないでしょうか? 26```javascript 27var btn = document.getElementById("cntBtn"); 28 29```はボタンを参照(特定)するだけなのでその結果自体がローカルかグローバルかというのは今回の事例ではあまり重要ではなくボタンカウント数表示をして違いを理解するという趣旨にはあまり適していないように思います。

投稿2019/05/20 05:22

HiroshiWatanabe

総合スコア2160

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

グローバル var count; function onBtn(){ count++; } と ローカル function onBtn(){ var count; count++; }

function内で定義するとローカル

投稿2019/05/19 20:30

hentaiman

総合スコア6389

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問