なぜこれは「未定義」ですか？

Question

私はJavaScriptを初めて使いました。なぜなら、「z」がなぜ定義されていないのか理解しようとしています。

var z = functionWithParameters(4, 3); 
 
function functionWithParameters(x, y) { 
 
    if (typeof z !== 'undefined') { 
 
     document.getElementById("functionWithParameters").innerHTML = z; 
 
     console.log('inside function: ' + z); 
 
     console.log('inside function: z is a ' + typeof z); 
 
    } 
 
    console.log('before return: z = ' + z); 
 
    return x * y;  
 
} 
 
console.log('outside function: z = ' + z);

<p id = "functionWithParameters"></p> 
 
    <script> 
 
     functionWithParameters(4, 3); 
 
    </script>

私は、コードを実行した場合はそのまま、何もコメントせずに、それはと結果：私は削除した場合

before return: z = undefined 
outside function: z = 12 
inside function: 12 
inside function: z is a number 
before return: z = 12 

：！（typeof演算Z == '未定義の' の場合）、コード結果は次のようになります。

inside function: undefined 
inside function: z is a undefined 
before return: z = undefined 
TypeError: document.getElementById(...) is null[Learn More] (from Firefox), 

および行：console.log（ 'outsi機能：z = '+ z）。実行されません。私は関数がreturnステートメントを持っているからですが、戻り値をコメントアウトしても結果は変わらないからです。

これを理解する助けがあれば素晴らしいと思います。 フィードバックいただきありがとうございます。

Answer 1

このStack Overflowは、DOMがロード/実行される順序に関する質問に答えます。

あなたが書いた：私は削除した場合

を：（！typeof演算Z == '未定義'）場合 [..]、とのコードの結果をライン：はconsole.log（ '外の機能： z = '+ z）である。実行されません。私は関数がreturnステートメントを持っているからですが、戻り値をコメントアウトしても結果は変わらないからです。 pタグがロードされる前に、あなたが見つけようとしているpタグが一度に存在していないという理由だけで、エラーをスローdocument.getElementById("functionWithParameters")にもたらされるfunctionWithParameters機能を実行するためだ

。

Answer 2

変数zの値をfunctionWithParametersの戻り値として設定します。 したがって、関数functionWithParametersが値を返す前に、変数zの値は未定義です。 functionWithParametersが値を返す前に値を取得しなかったので、これは です。

console.logが機能しない理由は、 です。スクリプトにアクティブなエラーがあり、スクリプトを停止する必要があるためです。

Answer 3

TypeError: document.getElementById(...) is null[Learn More] (from Firefox) 

この関数は例外をスローしています。したがって、zは決して値を取得できません。この例外の理由は、ドキュメントのロードが完了する前に要素にアクセスしようとしているためです。

これを簡単に修正するには、スクリプトをhtmlファイルの最後に貼り付けます（</body>の前に）。

Answer 4

機能の実行フローがわかりません。

 var z = functionWithParameters(4, 3); 
     //call functionwithParamarters,and run into function body, 
     //at this time the value of z is undefined, 
     //the if statement block is not executed,then output z is undefined. 
     //after call functionWithParameters ,z is 12 
     function functionWithParameters(x, y) { 
      if (typeof z !== "undefined") { 
       document.getElementById("functionWithParameters").innerHTML = z; 
       console.log('inside function: ' + z); 
       console.log('inside function: z is a ' + typeof z); 
      } 
      console.log('before return: z = ' + z); 
      return x * y; 
     } 
     console.log('outside function: z = ' + z); 
     //at this line z is 12 
     functionWithParameters(10, 10); 
     //z still is 12 , calling functionWithParameters dont change value of z 
     //and if statement block is executed.