はじめに
アロー関数について学んだので、使い方についてまとめてみました。
function関数
関数の宣言でfunction関数の使い方について、まず記述させていただきます。
function func1(str) {
return str;
}
console.log(func1("func1です。"));
console
func1です。
一般的な関数の宣言になります。functionを関数の前に記述し関数の宣言を行っております。console.logで関数を呼び出し、引数には「"func1です。")」を渡しています。
宣言した変数にfunction関数を代入する方法
const func2 = function (str) {
return str;
};
console.log(func2("func2です。"));
console
func2です。
上記は関数の宣言した変数の中に関数を代入し、関数呼び出しをする方法です。
変数に入れており、func();のように使えないと最初は思いましたが「関数式を代入した変数」として関数と同じように使えるのが特徴です。
アロー関数の記述方法
const func3 = (str) => {
return str;
};
console.log(func3("func3です。"));
console
func3です。
上記がアロー関数の記述方法となります。
アローの形を用いた処理の書き方が特徴で最初は慣れないですが、この書き方も使えるようにしていきたいです。
func：関数名
()：引数
{}：処理
const func = () => {};//記述方法
省略したアロー関数
下記は「{}」を省略した書き方です。returnも省略できる特徴的な書き方なので注意しましょう。
const func4 = (str) => str;
console.log(func4("func4です。"));
console
func4です。
引数が一つの時は、「()」も省略できるようになります。
const func5 = str => str;
console.log(func5("func5です。"));
func5です。
引数を二つ受け取るアロー関数
const func6 = (num1, num2) => {
return num1 + num2;
};
console.log("合計は" + func6(10, 20) + "です");
console
合計は30です
引数を二つ受け取り文字列としてコンソールに出力しています。
複数の変数をまとめて返す方法
const func7 = (deuce1, deuce2) => ({
drink1: deuce1,
drink2: deuce2,
});
console.log(func7("カルピス", "コーラ"));
console
{drink1: 'カルピス', drink2: 'コーラ'}
関数は戻り値を一つしか返せませんが、オブジェクトにまとめて返すことで実質的に複数の戻り値を返すことができます。
functionとアロー関数の違い
function関数
const obj = {
name: "takaki",
sayname: function () {
console.log(this.name);
},
};
obj.sayname();
const fn = obj.sayname;
fn();//this.name は undefinedになる
console
takaki
saynameはただの関数オブジェクトです。
重量なのは関数を呼ぶときに「どのオブジェクトのプロパティとして呼ばれたか」でthisが決まります。
もしobj の this を保持したまま使う場合は bind を使う
const fn = obj.sayname.bind(obj);
fn();
console
takaki
アロー関数
const obj = {
name: "Taro",
sayName: () => {
console.log(this.name);
}
};
obj.sayName(); // → undefined （objではなく外側のthisを見る）
アロー関数は自分自身でthisは持たず「定義された外側のthis」を引き継ぐ特徴があります。
おわりに
関数の宣言方法には複数の方法がありfunction関数、アロー関数どちらも使いこなすことが重要だと知り、functionが古いという考えをせず使い分けていくイメージが大切だと感じました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！