JavaScriptの関数について

2024.12.20

今回は、最近授業で習ったJavaScriptの「関数」について記事にまとめていこうと思います。

関数ってなに？

JavaScriptの関数は、一連の処理をまとめたコードのブロック（部品）です。

関数を使って複数の処理を1つにまとめることで、同じ処理を何度も書く必要がなくなり、余分な重複を避けることができます。

関数を定義する方法には、おもに次の3つのパターンがあります。

①関数宣言

最も基本的な定義の方法です。『function』のあとに関数名を記述し、関数を宣言します。

function 関数名(引数名){
まとめたい処理
}

(引数については後で詳しく触れます) これを使って実際にコードを書いてみると、

<例>

function greeting(){ //引数なし
console.log('Hello,World!');
}

上記のようになります。

②関数式

２つ目は、関数式（関数リテラル）という方法です。この方法では、『定数に関数を代入』します。関数名を記述しなくていいため、『無名関数』や『匿名関数』とも呼ばれます。

const 定数名=function(引数名){
まとめたい処理
}

実際にコードを書くと、

<例>

const greeting=function(){
console.log('Hello,World!');
}

greeting();

上記のようになります。

③アロー関数

新しく導入された関数の書き方です。『function()』の部分を『()=>』で記述することができ、より簡潔な構文で関数を記述できます。

const 定数名 = (引数名) => { 
まとめたい処理
 }

実際にコードを書くと、

const greeting = () => { 
console.log('Hello,World!');
}

greeting();

上記のようになります。

関数宣言の場合
①重複して記述した場合、後からの記述で上書きされる
②実行文を先に書いても問題ない

関数式の場合
①重複して記述するとエラーとなる
②実行文を先に書くとエラーとなる

エラーとなるほうが間違いを防ぐことができ安全なため、関数式で記述するほうがいいかもしれません。

引数とは関数に渡される情報のことです。渡された側はその値に従って処理を行います。インプット（入力）にあたる部分です。

// 関数の宣言
function testFunc(val1, val2){
  console.log(val1 + val2);
}

// 関数の実行
testFunc(10, 20);

上記のコードのうち、val1,val2が引数にあたります。

戻り値とは、関数がその処理を完了した後に「返す」データのことです。アウトプット(出力)にあたる部分です。

return で関数の実行を終了して、関数の呼び出し元に値を返します。return以降の処理は実行されません。

function testFunc(value){ 
const hang = value * 2; 
return hang;
 }
 
const result = testFunc(10); 
console.log(result);

上記のコードをコンソールで確認したときにはresultにあたる20が表示されますが、

function testFunc(value){
 const hang = value * 2;
 // return hang;
 }

const result = testFunc(10); 
console.log(result);

このコードのようにrerurnを省いてしまうと、コンソールには『undefined』と表示されてしまいます。
計算はされていますが、結果が代入されていないからです。

関数の基本的な部分についておさらいしながら理解を深めることができてよかったと思います。関数についてはまだまだ理解しきれていないことが多いので、もっと勉強したり実際にコードを何度も書きながら覚えていきたいです。

最後まで見てくださりありがとうございました！