JS勉強記④関数

JavaScriptにおける関数とは

タスクや値の計算を実行する一連の処理。入力値に基づいて決まった処理を実施し、その結果を返す。

標準関数はJSで予め用意されている関数。ユーザー定義関数は自分で定義した関数。関数の定義方法は以下の3種類。

function命令

function getRectangle(height, width){
 return height * width;
 }

 console.log(getRectangle(3, 5));

四角形の面積の求め方を関数で定義。

前半部分を文字で解読すると

function 関数名(引数1,引数2,…){
return 戻り値;
};

①console.logにおいてgetRectangle関数に(3, 5)が入力される

②この(3, 5)はgetRectangle関数の(引数1,引数2)に渡される

③その引数を使ってheight*widthが計算される

④計算の結果をreturnでconsole.logに返す

⑤コンソールに「15（計算結果）」が出力される

一番よく使うのがこのfunction命令だそうです。

関数リテラル

var getRectangle = function(height, width){
 return height * width;
 };

 console.log(getRectangle(4, 5));

前半部分を解読すると

var getRectangle = function(引数1,引数2,…){
 実行する処理
 };

varで関数を定義。そのあとはfunction命令と同じ流れ。今回は「20」が出力されればOK。関数名がないので「匿名関数」「無名関数」と呼ばれるそうである。

※varで定義した後の処理なので最後に「;」が必要？

Functionコンストラクター

var getRectangle = new Function('height', 'width', 'return height * width');
console.log(getRectangle(3, 4));

前半部分を解読すると

var 変数名 = new Function('引数1', '引数2', …, '実行する処理');

①varで変数getRectangleを定義

②new Functionに引数、処理を入力

③console.logで変数getRectangleを出力

④getRectangleに入力された(3,4)が引数として処理に利用される

⑤処理結果をコンソールに戻して出力

なんで必要なのかよくわからん。ググってもほかの記述で良いと書いてあった。

演習

問題：単価と値段を関数の引数に渡すと、合計金額を計算して返す関数を作成。作成した関数を呼び出して、合計金額はいくらになるか計算して、コンソールに出力する。（関数の定義方法は、function命令を用いる。関数名はprice。引数1＝単価の変数名はunitPrice、引数2=個数の変数名はn）

【自力で書いたコード】

function price(unitPrice, n){
 return unitPrice * n;
}
console.log(price(100, 13));

price関数で引数1＝unitPrice（単価）、引数2＝n（個数）を定義。戻り値の計算は「単価*個数」なのでunitPrice*nと設定。price関数を呼び出し引数の値を入力すると、その計算結果（今回の場合1300）がコンソールに返され出力される。このままで正解でした。

var/let/constの使い分け

JSについてググっているとvarで書かれているソースはほとんど見当たらない。違いについて調べると↓のような使い分けをするらしい。

JavaScriptで書く「var,let,const」の違いと使い分け方法JavaScriptで書く「let,var,const」の違い・使い分け | TechAcademyマガジン

var = なんでもおｋｗｗｗ呼び出されたらどこまでも行きますｗｗｗ

let = 再代入までならおｋｗｗｗアッシーはお断りｗｗｗ

const = 再代入も再宣言もアッシーお断りです

今までレクチャーの例題で同じ変数で何パターンか処理を試しているので、もしconstを使っているとエラーが返ってきてたようです。なのでコメントアウトは必須ですね。今後は基本的にはconstで記述してみることにします。