では、先ほどの3つの関数について、呼び出しごとの処理の流れを図でステップ表示できるように整理します。
視覚的に追いやすいように「関数の呼び出し → 引数 → 処理 → 戻り値/出力」の順で示します。
練習問題 1：sayHi()
呼び出し: sayHi()
ステップ1: 関数 sayHi を見つける
ステップ2: {} の中の処理を順番に実行
→ console.log("こんにちは")
ステップ3: コンソールに "こんにちは" が表示される
💡 イメージ図
sayHi() 呼び出し
│
▼
[console.log("こんにちは")]
│
▼
コンソール: こんにちは
練習問題 2：greet(name)
呼び出し例: greet("Alice")
呼び出し: greet("Alice")
ステップ1: 関数 greet を見つける
ステップ2: 引数 name に "Alice" を代入
ステップ3: {} の中の処理を順番に実行
→ console.log(name + "さん、こんにちは")
→ "Aliceさん、こんにちは" が生成される
ステップ4: コンソールに表示
💡 イメージ図
greet("Alice") 呼び出し
│
▼
name = "Alice"
│
▼
console.log(name + "さん、こんにちは")
│
▼
コンソール: Aliceさん、こんにちは
別の呼び出し例: greet("Bob")
name = "Bob"
console.log(name + "さん、こんにちは")
コンソール: Bobさん、こんにちは
練習問題 3：multiply(a, b)
呼び出し例: multiply(3, 4)
呼び出し: multiply(3, 4)
ステップ1: 関数 multiply を見つける
ステップ2: 引数 a に 3, b に 4 を代入
ステップ3: {} の中の処理を順番に実行
→ return a * b
→ 3 * 4 = 12 が計算される
ステップ4: 戻り値 12 が呼び出し元に返される
ステップ5: result1 に 12 が代入
ステップ6: console.log(result1) → コンソールに 12 が表示
💡 イメージ図
multiply(3, 4) 呼び出し
│
▼
a = 3, b = 4
│
▼
return a * b
│
▼
戻り値 12
│
▼
result1 = 12
console.log(result1)
│
▼
コンソール: 12
別の呼び出し例: multiply(5, 6)
a = 5, b = 6
return a * b → 30
result2 = 30
console.log(result2) → コンソール: 30
💡 まとめのポイント
- 関数を呼び出すと「箱（関数）の中の処理」が実行される
- 引数は呼び出し時に渡す情報
returnは呼び出した側に計算結果を返す- console.log はコンソールに出すだけで、戻り値にはならない
See the Pen Function Step-by-Step Execution Sample by MONO365 -Color your days- (@monoqlo365) on CodePen.
See the Pen Function Step-by-Step Execution Sample by MONO365 -Color your days- (@monoqlo365) on CodePen.
