Javascript (ES6) 引数について

Question

js初学者です
引数で躓きました。
テキストではこう書いてあります。▽

const sample = (greeting,weather)=>{
     console.log(`鈴木さん${greeting}${weather}`);
}
 
 sample("おはようございます！","いい天気ですね！");

出力されると▽
鈴木さんおはようございます！いい天気ですね！

となります。

疑問に思ったことがあります。
何故、関数sample内で定義せず、
関数sample中括弧｛｝の外にわざわざsampleを呼び出して、
${greeting}${weather}の中身を
sample("おはようございます！","いい天気ですね！");と
定義してるのにしっかり出力されるんですか？
自分は実験で試しに
sample("おはようございます！","いい天気ですね！");を
関数sample中括弧｛｝内に収めたり
色々試しましたがエラーやしっかりと出力されませんでした。
なんでこんなわかり難い構成なんでしょうか？

追記です。
上手く行かなかったコードです。

コード１▽
const sample = (greeting,weather)=>{

console.log(`鈴木さん${greeting}${weather}`);
sample("おはようございます！","いい天気ですね！");
}

コード２▽
const sample = (greeting,weather)=>{
console.log(`おはようございます！${greeting}`);
console.log(`いい天気ですね！${weather}`);
}
console.log(`鈴木さん${greeting}${weather}`);

Comments

[miyabi_pudding]

もしかして、引数に対しての質問というよりは、
テンプレートリテラルの話だったりしませんか？
うまくいかなかったコードの方も記載いただくと、
解決に直結する回答を得られやすくなるかと思います。

[mamesora]

上手く行かなかったコード１▽
const sample = (greeting,weather)=>{

console.log(`鈴木さん${greeting}${weather}`);
sample("おはようございます！","いい天気ですね！");
}

コード２▽
const sample = (greeting,weather)=>{
console.log(`おはようございます！${greeting}`);
console.log(`いい天気ですね！${weather}`);
}
console.log(`鈴木さん${greeting}${weather}`);
です。
宜しくお願いします。

[miyabi_pudding]

そのコードを、質問本文に記載してください。

[mamesora]

更新しました。

[miyabi_pudding]

回答させていただきました。

Answer 1

実引数と仮引数

何故、関数sample内で定義せず、
関数sample中括弧｛｝の外にわざわざsampleを呼び出して、
${greeting}${weather}の中身を
sample("おはようございます！","いい天気ですね！");と
定義してるのにしっかり出力されるんですか？

「実引数から仮引数に値が渡される仕様」だからです。

function sample (arg1, arg2) {
  console.log(arg1, arg2);  // "Hello" "World"
}

var str1 = 'Hello', str2 = 'World';

console.log(str1, str2);  // "Hello" "World"
sample(str1, str2);

ReferenceError

言い換えるなら、仮引数「greeting」と仮引数「weather」が定義されているからです。
JavaScriptでは、未定義の変数参照時に ReferenceError が発生し、コードは実行されません。

foo; // ReferenceError: foo is not defined

ReferenceError が発生していないのなら、その変数は定義されているという事です。

Re: mamesora さん

Comments

[mamesora]

すみません。
もう少し先に進んでから質問するべきでした。
今渡されてるテキストを全部見て基本を一周してわからなかったら
また、質問してみようとおもいます。
ありがとうございました。

Answer 2

何故、関数sample内で定義せず、

関数sample中括弧｛｝の外にわざわざsampleを呼び出して、

関数は、基本的にほかから呼び出すために定義するものです。中から呼び出すこと（再帰呼び出し）も可能ですが、それは特殊な使い方に属します。

Comments

[maisumakun]

「何度も呼び出す」「非同期的に呼び出す」「複雑な処理を切り分ける」などの場面では、関数のメリットが目立ってきます（あるいは、関数を定義しないと書けません）。

今回の例は、あくまで「関数はこういうものですよ」という見本で、「やりたいこと以上に複雑になっている」のは間違いないです。

[mamesora]

今進めてるテキストがありまして
この次にスコープというのがあってもしかしたらこの先にヒントがあるかもしれないのでまたわからなかったら質問してみようと思います。
ありがとうございました。

Answer 3

引数に関しては、他の回答者の方の回答にありますので、
なぜ質問者さんの書いたコードの後者がエラーなどが発生しているのか、を回答いたします。

const sample = (greeting,weather)=>{

  console.log(`鈴木さん${greeting}${weather}`);
  sample("おはようございます！","いい天気ですね！"); 
}

sample("おはようございます！","いい天気ですね！"); 

これは、無限ループになるからです。
ある関数の中で、自身を再び呼び出すことを、再帰処理といいますが、
だいたいは、どれだけの深さの処理になるかわからない時に、条件付きで行います。
しかし、このコードでは、再帰させる条件が無く、再帰実行してるため、一度実行すると、際限なく自身を実行し続けるため、無限ループになり、RunTime Errorなどが起きます。

const sample = (greeting,weather)=>{
  console.log(`おはようございます！${greeting}`);
  console.log(`いい天気ですね！${weather}`);
}
console.log(`鈴木さん${greeting}${weather}`); 

これに関しては、think49さんの回答にも関わってきますが、
greetingとweather変数が定義されていない（参照範囲外）箇所で使用しようとしているためです。
変数の参照範囲に関しては、用語も含めて、とても重要になるため、よくよく勉強されるといいかと思います。

Comments

[mamesora]

わかりました。
一度基礎をやり終えてわからなかったらまた質問させて頂きます
参照範囲について勉強してみます。
ありがとうございました。