👶

関数入門（JavaScript）

2023/12/08に公開

JavaScript

🌐 関数とは

🔥 この記事を読むとできるようになること

関数とは何か、何故使うのかわかる
関数を宣言できる
関数を呼び出せる
returnキーワードを使って関数から値を返すことができる
return文とconsole.logの違いがわかる
console.logを使ってコンソール上に値を出力できる

✅ 簡単な関数

関数とは、プログラミング時に細かな指示を一塊にし、それに付けたラベルのこと。

getGreetingという関数を作ってみよう！

getGreetingは文字列型の引数(ひきすう)を1つ取り、
アウトプットとして文字列型のデータを返す関数。

関数getGreeting

function getGreeting(name) {
  return "Hello, " + name + ".";
}

console.log(getGreeting("Mr Anderson"));
// => "Hello, Mr Anderson."

// function： コンピュータに関数を作ろうとしていることを宣言
// getGreeting： 関数名（この名前を使ってこの関数を呼び出す）
// (name)： (仮引数)で関数に渡すインプットを指す
// {return ~ }： {関数の中身}でコンピュータにさせたいこと
// return： JavaScriptの返り値は1つだけでreturn後の値が返される
// getGreeting()： 関数を呼び出すには関数名だけでfunctionはいらん
// ()： (実引数)で関数呼び出し演算子と呼ばれ、関数を実行する

引数（インプット）は任意。
例えば下記の関数meaningOfLifeは42という数字を返すだけで、
引数は取らない。

関数meaningOfLife

function meaningOfLife() {
  return 42;
}

console.log(meaningOfLife());   // => 42

🦾 実際に書いてみよう！

引数（数値型）を1つ取り、引数に10を足した数を返す
addTenという関数を作って下さい。

下記雛形を参考に書いてみよう！

関数addTen

function addTen(number) {
  // Your code here.
}

console.log(addTen(5));   // => 15

👾 関数をさらに理解する

もし、addTenがreturnキーワードを持っていなかったら？

全ての関数は何かしら返す。
もし、return文がない、つまり明示的に値を返していなければ、
undefinedを返す。

また、関数宣言をするとき、return文を書き忘れるよくあるミスに注意しよう。

undefinedを返す関数

function addTen(number) {
  number + 10;
}

console.log(addTen(5));   // => undefined

関数の中ではconsole.log()を使うこともできる。
関数が何をしているのか確かめるのに便利なテクニック。

console.log()の活用

function addTen(number) {
  console.log("The argument is", number);   // => "The argument is 5"
  return number + 10;
}

console.log(addTen(5));   // => 15

return文の後にコードを書くとどうなる？
何がコンソールに表示される？
コンピュータがreturn文に到達すると
関数は値を返して処理を終了する。

return文後に記述されたコードは実行されない。

return文の理解

function addTen(number) {
  console.log("The argment is", number);
  return number + 10;
  console.log("The return value is", number + 10);   // 実行されない
}

console.log(addTen(5));

🧐 returnとconsole.log()の違い

returnはreturn文の中の式の値を返す。
また、処理を終了します。

return

function addTen(number) {
  return number + 10;
}

addTen(5);   // => 15

console.log()はコンソール上に値を表示するだけで値を返さない。
また、途中で処理を終了しない。

console.log()

function addTen(number) {
  console.log(number + 10);
}

addTen(5);   // => undefined

📚 レビュー

関数とは
関数を呼び出すには？
関数宣言と関数呼び出しの違いは？
関数から値をアウトプットさせるためのキーワードは？
関数にreturn文がない場合、その関数が何を返す？