undefinedになる理由と、if(true)の読み方を教えて頂きたいです

Question

var book = 'book1';
function fn() {
    console.log(book);
    var book = 'book2';
}
fn();

上記の実行結果は、var book = 'book2’;を入れますと、
undefinedになってしまい、var book = 'book2’;がないと、実行結果は、book1になります。
私の想定では、var book = 'book2’;がある場合でも、ない場合でも、実行結果は、book1となると思うのですが、なぜvar book = 'book2’;を入れますと、undefinedになるのでしょうか。

また、以下のコードの if(true)につきまして、
もし〇〇がtrueの場合、a = ‘Hello’;を実行せよの意味だと理解しているのですが、
以下の場合の〇〇は何になるのでしょうか？

function fn() {
    let a;
    if(true) {
        a = ‘Hello’;
    }
    return a; 
}
const result = fn();
console.log(result);

よろしくお願いいたします。

Answer 1

上記の実行結果は、var book = 'book2’;を入れますと、undefinedになってしまい、var book = 'book2’;がないと、実行結果は、book1になります。私の想定では、var book = 'book2’;がある場合でも、ない場合でも、実行結果は、book1となると思うのですが、なぜvar book = 'book2’;を入れますと、undefinedになるのでしょうか。

変数の「ホイスティング（巻上げ）」による影響（かつ、varを使っている影響）によります。

質問のコードの場合、関数fnの中でvarで宣言されている変数bookは、その関数fnの先頭部分で宣言されたものと解釈されます（＝var/巻上げ）。

たとえば、var book = 'book2’;がある場合、質問のコードは下記のように解釈されます。

function fn() {
    var book; // 変数のホイスティング
    console.log(book);
    book = 'book2';
}

console.log(book); を実行する時点では、book は宣言されてるだけなので、undefinedになります。

　

一方、var book = 'book2’;がない場合、具体的には

var book = 'book1';
function fn() {
    console.log(book);
}
fn();

この場合、関数内の「book」は、先頭で宣言されているグローバル変数である「book」を指すと解釈されるため、
「book1」と表示されます。

（関数内で var book = 'book2’;がある場合、bookは、関数内のローカル変数となってしまう）

---

また、以下のコードの if(true)につきまして、もし〇〇がtrueの場合、a = ‘Hello’;を実行せよの意味だと理解しているのですが、以下の場合の〇〇は何になるのでしょうか？

→「もし〇〇がtrueの場合」と言う部分は、正しくは
「if の括弧の中の評価結果が、偽値 (falsy) として定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN) を除くすべての値 の場合」です。

質問のコードの場合 if()の括弧の中が、trueという「falsyではない値」なので、
a = ‘Hello’ が実行されます。

「falsy」「truthy」については下記を見てください。
https://developer.mozilla.org/ja/docs/Glossary/Falsy
https://developer.mozilla.org/ja/docs/Glossary/Truthy

Comments

[javastudy]

貴重なお時間をお使い、ご回答くださいまして、誠にありがとうございます。

みなさまのおかげで、知らない知識を知ることができまして、無事理解することができました。
非常に助かっております。

皆さんに助けられましたが、今回は、みなさんからもグッドをいただいております
kotori_aさんのご回答をベストアンサーにさせていただければと思います。

またご機会がございましたら、よろしくお願い申し上げます。

誠にありがとうございます。

Answer 2

なぜvar book = 'book2’;を入れますと、undefinedになるのでしょうか。

関数内にvar book = 'book2';の行があるため、宣言以前も含めこの関数内ではbookはローカル変数の方を指します。そして、最初のconsole.logは初期化より前にあるので、未初期化のundefinedが得られます。

（余談ですが、関数内の宣言をletやconstにした場合、宣言前の参照はエラーを発生させます）

もし〇〇がtrueの場合、a = ‘Hello’;を実行せよの意味だと理解しているのですが、

違います。「trueがtrue相当なら」という意味です（書いたtrueは主語です）。条件分岐としては働かず、常にif以降を実行します。

Comments

[javastudy]

貴重なお時間をお使い、ご回答くださいまして、誠にありがとうございます。

最終的に、letやconstの疑問にも行きつきました為、letやconstのご教授につきましても助かりました。

みなさまのおかげで、知らない知識を知ることができまして、無事理解することができました。
非常に助かっております。

皆さんに助けられましたが、今回は、みなさんからもグッドをいただいております
kotori_aさんのご回答をベストアンサーにさせていただければと思います。

またご機会がございましたら、よろしくお願い申し上げます。

誠にありがとうございます。

Answer 3

if文の方だけ補足で

if(true)につきまして、もし〇〇がtrueの場合、a = ‘Hello’;を実行せよの意味だと理解しているのですが、以下の場合の〇〇は何になるのでしょうか？

そのif文の理解が間違えています。以下のように書いた場合、

    if(x == true) {
        a = ‘Hello’;
    }

「ｘにtrueが代入されていた場合」となり、また以下のような場合

    if(ly > 100) {
        a = ‘Hello’;
    }

「yに代入されているものが100より大きい場合」となります。
if文はこのような書式で使われることがおおいので、if文は「何かを比較した結果」を判定しているように見えますが、そうではありません。

javascriptのif文の()には比較の式だけでなく任意の式を入れることができます。if文が実行されるとその式は実行され結果として値が返ります。if文では返ってきた値が真(truthy)であるか偽(falsy)であるかによって判定を行ないます。
また、javascirptでは全ての値は真か偽のどちらかない分類することができます。偽になるのは「false, 0, -0, 0n, "", null, undefined, NaN, document.all」のいずれかで、それ意外はすべて真と判定されます。
(引用元: https://developer.mozilla.org/en-US/docs/Glossary/Truthy)

質問のように if(true){}とした場合、trueは実行されてtrueが返り、上記のどれでもないので真と判定され、 {}内が実行されます。
たとえば、if(0){}とした場合は、0は実行されて0が返り、上記のリストに含まれるので偽と判定され{}内は実行されません。

Comments

[javastudy]

貴重なお時間をお使い、ご回答くださいまして、誠にありがとうございます。

先日もご回答くださいまして、誠にありがとうございます。

If文の主語がないことで、まだ十分に理解ができなかったのですが、
「if(true){}とした場合、trueは実行されてtrueが返り、上記のどれでもないので真と判定され、 {}内が実行されます。」
>こちらの内容で、十分に理解を進めることができました。

みなさまのおかげで、知らない知識を知ることができまして、無事理解することができました。
非常に助かっております。

皆さんに助けられましたが、今回は、みなさんからもグッドをいただいております
kotori_aさんのご回答をベストアンサーにさせていただければと思います。

またご機会がございましたら、よろしくお願い申し上げます。

誠にありがとうございます。

Answer 4

変数の巻き上げですね。
https://analogic.jp/hoisting/
https://codezine.jp/article/detail/15431

Comments

[javastudy]

貴重なお時間をお使い、ご回答くださいまして、誠にありがとうございます。

頂きましたリンクにつきましても、拝見させて頂きまして、
最終的に、letやconstの疑問にも行きつきました為、とても役に立ちました。

みなさまのおかげで、知らない知識を知ることができまして、無事理解することができました。
非常に助かっております。

皆さんに助けられましたが、今回は、みなさんからもグッドをいただいております
kotori_aさんのご回答をベストアンサーにさせていただければと思います。

またご機会がございましたら、よろしくお願い申し上げます。

誠にありがとうございます。