Help us understand the problem. What is going on with this article?

JavaScriptの基本箇所についての復習:寄り道(変数var)

はじめに

JSの変数宣言には3つの方法があります。
var,let,constです。
これから3回にわたって、この3つの違いについて解説したいと思います。
最初はvarです。

実行

varは昔からある書き方のようで、宣言した関数の中でしか使えない変数です。
次の関数を実行すると、意味がわかると思います。

var name = "suzuki";

function Say() {
    var name = "satou";
    console.log(name);
}

Say();
console.log(name);

まずnamesuzukiを代入し、その次にSay関数を定義します。
Say関数では、最初にnamesatouを代入し、console.logで出力する、という処理を行います。
関数を定義した後は、Sayを実行し、最後にnameの中身をconsole.logで出力します。

この一連の処理を行うと、どういう風に出力されるでしょうか?
まず一番最初に出力を行うのは、Say();の部分です。関数Sayでは、前述の通りnameにsatouを代入して、それを出力するという処理を行うので、ここではsatouと出力されそうです。
その後のconsole.log(name);との間で、nameに新しい値を代入してないので、ここでもsatouと出力されそうな気がします。つまり、

satou
satou

という出力結果になりそうです。
しかし実際は予想と違って、

satou
suzuki

と出力されます。
Say();を実行した時に、一度var name = "satou"とし、実際にその通りに出力されているのに、Say()*の処理が終わった瞬間、nameが最初に代入されたsuzukiに戻っています。

これこそが、varで宣言した変数は、関数の中でしか使えない変数の具体例になります。
var name = "satou"と宣言したのは関数Sayの中なので、nameにsatouが代入されている事は、関数Sayの処理を行っている時だけであり、関数Sayの処理が終わればnameは元に戻るという事になります。
今回の関数でいえばSay関数の処理が終われば、nameは最初に代入したsuzukiに戻るという事になります。

基本的な部分ですが、この事を知らないと「ちゃんと変数を上書きしたのに!?」と慌てることになるので、しっかり覚えておきましょう。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away