関数の処理の仕組みについて

Question

現在、javascript関数の勉強をしています。

function sample(name, age) {
 
    console.log(name + 'さんの年齢は' + age + 'です！');
 
}
 
//引数に値を渡す
sample('太郎', 32);

上記のコードについて質問があります。

//引数に値を渡す
sample('太郎', 32);

で、sampleの引数について値が渡されていますが。

function sample(name, age) {

    console.log(name + 'さんの年齢は' + age + 'です！');

}

sample('太郎', 32);より上にconsole.log(name + 'さんの年齢は' + age + 'です！');
が記述されていて、ちゃんと表示がされていることが疑問です。

javascriptは上から処理されるものと考えていたため、console.log(name + 'さんの年齢は' + age + 'です！');は一番最後にきた方がいいのではないのかと考えていました。

さらに、このままの記述でいくと、

//引数に値を渡す
sample('太郎', 32);

の後に、returnのような記述で、戻り値として上の関数内でもう一度定義してconsoleに組み込めるものだと考えていました。

理屈の部分がよく理解できてないとこがあるので、教えていただけると幸いです。

恐縮ですが教えていただけると幸いです。よろしくお願いいたします。

Answer 1

関数定義と関数呼び出し

関数には定義と呼び出しの過程があります。

function sample(name, age) {  // (1) 関数定義
  console.log(name + 'さんの年齢は' + age + 'です！');
}

sample('太郎', 32); // (2) 関数呼び出し

関数を定義してから、定義した関数を呼び出しする、という考え方でいくと、この書き方はしっくりきます。
変数定義のタイミングを絡めると、話が変わってきますが…。

変数の巻上げ

変数初期化過程で巻き上げが発生する為、先のコードは逆順に書いても動作します。

• JavaScript - 関数と変数の巻き上げの違いとは｜teratail

var, let, const を使うと、「定義と呼び出し」の考え方に即した動作になります。

sample('太郎', 32); // ReferenceError: Cannot access 'sample' before initialization

const sample = function sample (name, age) {
  console.log(name + 'さんの年齢は' + age + 'です！');
}

let, const で定義された変数は**TDZ(Temporal dead zone)**によって、const宣言前に使用する事が出来ません。

• let - JavaScript | MDN

Re: tooju さん

Comments

[think49]

> ReferenceError: Cannot access 'sample' before initialization

Google Chrome 85.0.4183.121ではTDZ特有のエラーメッセージとなるようです。
通常、未定義変数参照時には「ReferenceError: foo is not defined」のエラーを返すので、見分けるポイントになりそうですね。

[tooju]

リンクもつけてくださり、丁寧な回答ありがとうございます！
TDZと言われるものには気をつけます！

Answer 2

function xxx(){}
で、宣言された関数は「巻き上げ」られます

• 関数宣言 - JavaScript | MDN

Comments

[ozwk]

sample('太郎', 32);の行から
console.log(name + 'さんの年齢は' + age + 'です！');の行に行っている、
上から処理してないじゃん! 下から上に戻ってるじゃん!

って質問ではないかなと

[yambejp]

ozwkさんのおっしゃりたい意図がわかりません。
それが「関数の定義の巻き上げ」の回答とどう違うのでしょうか？

[think49]

ozwkさんの意図はおそらく、「↓のコードが動作する意味が分からない、という質問への解になっていない」ではないかと思います。

function sample(name, age) { console.log(name + 'さんの年齢は' + age + 'です！');}
sample('太郎', 32);

yambejpさんの回答は↓が動く原理を説明していて、逆の説明になっているような気がします。

sample('太郎', 32);
function sample(name, age) { console.log(name + 'さんの年齢は' + age + 'です！');}

[ozwk]

「上から下に処理が進む」とするなら、
sample()の呼び出しの後にsampleの定義があるべきではないか、
なぜsampleの定義の後にsample()の呼び出しがあってよいのか?
という質問だと解釈しました

それに対して
「JavaScript の関数宣言は、関数の定義を巻き上げます。関数を宣言する前に使用することができます」
という回答では
「sample()の呼び出しの前でも後でもsampleの定義を書いても問題ない」ということの説明であり
なぜsampleの定義の後にsample()の呼び出しがあってよいのか?に対しての答えにはなっていないかと。

[yambejp]

あーなるほど。
命題が「関数定義を先にすることが理解できない」ということですね
呼び出し時点で定義されていない関数を実行するのが正という
着眼点はなかったです。失礼しました。

[tooju]

関数内のローカル変数の取り扱い方にも気づくことができました！
ありがとうございます！