JavaScriptにおける関数の扱い方


ccc

東京都内でサラリーマンをしているAI・育児ブロガー、CCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。


JavaScriptにおける関数の扱い方を教えてください。


ccc

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、JavaScriptにおける関数の扱い方をサンプルを用いて解説します。

関数を定義する

functionを使って関数を定義します。

function getTest(temp){
 return temp*100;
}

関数を呼び出す

定義した関数を呼び出すには次のように記述します。
引数とreturn文は省略可能です。return文の返り値(または返り式)を省略することもできます。

function getTest(temp){
 return temp*100;
}

console.log(getTest(3));
//300

配列を変数に分割代入

配列を戻り値として指定し、配列の各要素を異なる変数に代入することができます。

function getTest(a, b){
 return [a*10, b*10];
}

let [aa, bb]=getTest(3, 6);
console.log(aa, bb);
//30 60

変数に関数を代入して関数を定義

変数に関数を代入して関数を定義できます。

let temp=function(a, b){
 return a+b;
};

console.log(temp(3, 6));
//9

アロー関数

変数に関数を代入して関数を定義するとき、アロー関数を使うと関数の定義を簡略化できます。

let temp=(a, b)=>{
 c=a+b;
 return c;
};

console.log(temp(3, 6));
//9

引数が1つだけのときは括弧()を省略できます。

let temp=a=>{
 c=a*100;
 return c;
};

console.log(temp(3));
//300

ブロック内の記述がreturn文だけのとき、角括弧{}を省略できます。

let temp=a=>a*100;

console.log(temp(3));
//300

戻り値がオブジェクトのとき、オブジェクトを括弧()で囲む必要があります。

let temp=a=>({b:a*100, c:a*200});
console.log(temp(3));
{b: 300, c: 600}

コールバック関数

関数を呼び出すとき、引数として別の関数を渡し、関数内から呼び出される関数のことをコールバック関数と呼びます。

function temp(a, temp2){
 temp2(a);
}

temp(3, a=>console.log(a));
//3