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で書かれているソースはほとんど見当たらない。違いについて調べると↓のような使い分けをするらしい。
var = なんでもおkwww呼び出されたらどこまでも行きますwww
let = 再代入までならおkwwwアッシーはお断りwww
const = 再代入も再宣言もアッシーお断りです
今までレクチャーの例題で同じ変数で何パターンか処理を試しているので、もしconstを使っているとエラーが返ってきてたようです。なのでコメントアウトは必須ですね。今後は基本的にはconstで記述してみることにします。