greet(name)について

Question

いちばんやさしいJavaScriptという本の内容で挨拶プログラムを作るという項目について質問なのですが。

var name = prompt("名前を入力してください");
greet(name);

function greet (name) {
  var message = "こんにちは"
  alert(message + name)
  return;
}

コード

このコードの中の上から二番目。greet(name)はなぜfunctionで定義する前に
書いておかないといけないのでしょうか。

greetはどこから出てきたものなのでしょう。

Answer 1

2行目は4行目以降で定義しているgreet関数の呼び出し処理です。
JavaScriptは一度コード全体を読み込んでから実行されるため、
関数定義よりも前に呼び出しの記述があっても動作します。

ですので、必ずしもこの順番でなくてはいけないわけではなく、
下記のように書いても同じように動作するかと思います。

var name = prompt("名前を入力してください");

function greet (name) {
  var message = "こんにちは"
  alert(message + name)
  return;
}

greet(name);

ただし、上記の記述だと1行目が実行された後、
次に処理されるのがどこかわかりづらくなりますので、
関数定義と処理内容はそれぞれまとめて記述した方がよいでしょう。

function greet (name) {
  var message = "こんにちは"
  alert(message + name)
  return;
}

var name = prompt("名前を入力してください");
greet(name);

処理内容を下側にまとめると上記のようになりますが、
これでもJavaScriptをこれから始める人が読む際に
どこが実行されるのかがわかりづらくなったように思います。

このため、1行目から処理内容がまとめて記載されているのは、
わかりやすく説明を行おうとする著者の意図によるものかと思います。

Comments

[kanta-]

わかりやすい説明ありがとうございました！

また機会があればよろしくお願いいたします。

Answer 2

そのような(greet(name)を先に書かなければならない)という決まりはありませんが?

javascriptの場合、

  var name = prompt("名前を入力してください");

  function greet (name) {
    var message = "こんにちは"
    alert(message + name)
    return;
  }

  greet(name);

でも普通に機能します。むしろこっちが普通です。

しかし質問者様が載せられたコードが普通に動くというのは、実はずいぶんと便利なことでして、C言語※なんかはもちろん、同じスクリプト言語のpythonですら、

print(hoge(1))

def hoge(n):
    return "hoge : " + str(n)

とこのように関数の定義を後にするとエラーとなります。

この場合は「hoge関数は定義されていません」と言われます。

そもそもスクリプト言語なのにも関わらず関数の定義が後でも動作してくれるjavascriptはこの点については、「やさしい言語」と言えるでしょう。

(長文失礼しました。m(_ _)m)

※C言語とかだとプロトタイプ宣言なんかがあるのでそこまで問題ではないです。

Comments

[kanta-]

回答ありがとうございました！

Answer 3

greet(name)はなぜfunctionで定義する前に

書いておかないといけないのでしょうか。

前でも問題ないです。

function greet (name) {
  var message = "こんにちは"
  alert(message + name)
  return;
}
var name = prompt("名前を入力してください");
greet(name);

【function - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function

関数宣言の巻き上げ

JavaScript の関数宣言は、関数の定義を巻き上げます。関数を宣言する前に使用することができます:

Comments

[kanta-]

回答ありがとうございました！