Javascript 関数の学習メモ
関数の特徴
「関数とは、複数の処理をひとまとまりにしたもの」
「関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようにできる」
「JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われる。」
「関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴」
関数の使い方
「関数宣言」で関数を定義する方法
もっとも代表的な関数定義の方法として「関数宣言」がある。
function 関数名(引数) { 処理 } という記法で関数を定義する。
関数宣言
//広告を呼び出す為の関数
function showAD(message ="AD") { // message=仮引数 "AD"がデフォルト値(←必ず必要なわけではない)
console.log("--------------------");
console.log(`-----------${message}------------`); //messageの部分に実引き数が代入される
console.log("--------------------");
}
//showADで関数の処理をしている。
showAD("Header"); //Header AD＝実引数
console.log("Tom is great!");
console.log("BoB is great");
showAD(); //AD＝実引数が入力されていないためデフォルト値が代入される
console.log("Steave is great");
console.log("Richard is great");
showAD("Footer"); //Footer AD＝実引数
returnで値を返す
〇 return文は主に以下の２つの目的で使われる
- 呼び出し元に値を返したい
→関数の中で return 文を使用することで呼び出し元へ値を返すことができる - 関数の実行を終了したい
関数宣言
function 関数名(仮引数1, 仮引数2, ...) {
処理;
処理;
return 返り値;
}
呼び出し
関数名(実引数1, 実引数2, ...);
関数宣言：実例
function sum(a, b, c) { // ()内が仮引数
return a + b + c; //returnで値を返す(計算することを「sum」に命じている？)
}
const total = sum(1, 2, 3) + sum(3 ,4, 5); //実引数を仮引数に入れ、「sum」で計算している？
console.log(total); //18
「関数式」で関数を定義する方法
const 定数名 = function(仮引数) { 処理 }; という記法で関数を定義する
＊関数式の場合、最後がブロックで終わっているが、最後に; が必要。
関数式
const 定数名 function 関数名(仮引数1, 仮引数2, ...) {
処理;
処理;
return 返り値;
}; ///定数で始まる時は、ブロックで終わっているが;が必要
呼び出し
定数名(実引数1, 実引数2, ...);
関数式：実例
const sum = function (a, b , c) {
return a + b + c;
};
const total =sum(1,2,3) + sum(3, 4, 5);
console.log(total); /// 18
関数宣言と関数式の違い
- 関数式は関数の引数として直接代入できる
- 関数宣言は巻き上げが起こる (関数式は起こらない)
- 同じ関数名を定義すると、先の関数が上書きされて呼び出せなる。→ ＊同じ関数名をつけてもエラーにはならない？(関数宣言の場合、関数名が必要なので問題が起きる可能性がある？)
＊どちらを優先的に使用するべきかは現状の知識では判断が難しいが
ひとまずはconstを使用する関数式を優先的に使おうかと考える。
dotinstall
https://dotinstall.com/questions/gllx7h7
アロー関数 (関数式)
省略した書き方
/// 通常の関数宣言
function sum(a,b,c) {
return a+b+c;
};
アロー関数 (関数宣言)
/// 通常の関数宣言
function sum(a,b,c) {
return a+b+c;
};
/// アロー関数の書き方
(a,b,c) => {
return a + b + c;
};
/// さらに、処理の中身がreturnするだけの場合、下記のような書き方も可能。
/// (本文が1文の場合は｛｝とreturnを省略できる)
(a,b,c) => a + b + c;
/// 引数が一つの場合は、引数の( )も省略できる。
a => a + b + c;
/// 引数が無い場合は( )を省略しない
() => console.log('Hello world!');
アロー関数 (関数式)
/// 通常の関数式
const sum =function(a,b,c) {
return a+b+c;
};
/// アロー関数の書き方
const sum = (a,b,c) => {
return a + b + c;
};
/// さらに、処理の中身がreturnするだけの場合、下記のような書き方も可能。
/// (本文が1文の場合は｛｝とreturnを省略できる)
const sum = (a,b,c) => a + b + c;
/// 引数が一つの場合は、引数の( )も省略できる。
const sum = a => a + b + c;
/// 引数が無い場合は( )を省略しない
const sum = () => console.log('Hello world!');
まとめ
まだまだ、関数についてはいろいろ学ぶべきものがありそうですが、ひとまず今日はここまでとします。