JavaScript　#4　関数

2020年10月17日

今回は、JavaScriptの関数に関してまとめていきたいと思います。
関数とは、実行したい一連の処理をまとめ、機能を表わす名前をつけて定義したものです。毎回同じような処理を書くのは大変ですし、無駄にコードが長くなります。
関数のメリットは、同じ処理を一つにまとめ名前をつけることで、他のプログラムからはその関数名を呼び出すことで定義した処理をここに書かずとも同様の動作ができることです。
JavaScirptには自身で処理を作成する（ユーザ関数）と言語としてもともと用意している関数（組み込み関数）との２つがあります。

ユーザ関数

ユーザ関数の作り方を見ていきましょう。関数は英語でfunctionと訳されるため、JavaScriptでもfunctionを使って定義していきます。
以下の例では、HelloQtaroという名前の関数を定義しており、関数の中ではあいさつを表示させる処理を書いています。それを関数の外側から呼び出しています。結果としては、こんにちわみなさん〜と２回表示されるはずです。

function helloQtaro(){
  console.log('こんにちはみなさん');
  console.log('わたしはＱ太郎です');  
}

helloQtaro();
helloQtaro();

上記の例のようにある一連の処理を関数としてまとめると、関数を利用するプログラムは、何度も同じ処理を書き続けなくても良くなります。１回きりの処理であれば関数として定義しなくても良いですが、２回以上同じ祖y理を使う場合には、関数として定義したほうがコードが短くなる。同じ処理をしている部分を直すときに何箇所も修正する必要がなくなります。

とはいえ、これだけの使い方では単にプログラムの記述する量がへるだけですので、もう少しまとめて行きましょう。関数には、呼び出し側から値を渡すことができます。
以下の例では、関数helloにたろうとじろうを入れることで表示する内容が変わってきます。

function hello(name){
  console.log('こんにちはみなさん');
  console.log('わたしは' + name + 'です');  
}

helloQtaro('たろう');
helloQtaro('じろう');

これだけだとまださびしい感じがしますね。関数には結果を呼び出しもとに返すことができます。
以下の例では、関数sunNumberという２つの数字を受け取り、足し算をして結果を呼び出し元に返すという関数を作ってみました。呼び出し元は足し算したい２つの数字をsumNumber関数に渡します。このとき渡す数字の順番通りに関数は受け取ります。変数aには３、変数bには5が渡されます。関数の処理結果を呼び出し元に返したい場合は、retrunを使うと呼び出し元に値を返すことができます。結果として足し算結果の8を関数の呼び出したプログラムは受け取ることができます。

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

let answer = sumNumber(3,5);
console.log(answer);

このようにして同じような動作を行う処理を関数として定義することで、呼び出し元は関数を呼び出すだけで一連の処理を実行できるようになります。また、関数に処理してほしい値を受け渡し、結果を受け取ることができます。

組み込み関数

組み込み関数とは、JavaScript言語にもともと定義されている関数がいくつかあります。ここでは後述するオブジェクトに依存しない、組み込み関数をいくつかまとめていきたいと思います。ここではデータ型を変換するものを中心にまとめてみました。

いくつかコードの例を記述してみます。以下の例では数値型の変数numを文字列型に、文字列型の変数charNumを数値それぞれ変換しています。

let num = 10;
let charNum = '20';

console.log(typeof num);
console.log(typeof charNum);

let cnvNnum = String(num);
let cnvCharNum = Number(charNum);

console.log(typeof cnvNnum);
console.log(typeof cnvCharNum);

以上、今回は関数に関してまとめてみました。