🦁
【JavaScript】関数についてまとめた
はじめに
この記事は学習ノートです。
JavaScriptの関数について、学んだことをまとめました。
関数とは
- 様々な処理をまとめたもの
- 関数を定義しておけば、関数を呼び出すだけで同じ処理を実行できる
- 何度も同じ処理を書かなくて済むので、コードが綺麗になる
Javaのメソッドみたいなものかな〜と思いました。
関数とメソッドの違い
JavaScriptでは、オブジェクトのプロパティとして代入された関数をメソッドといいます。
以下の記事が分かりやすかったです。
関数定義の方法
以下の3パターンについて説明します。
- 関数宣言をする
- 関数リテラルを使う
- アロー関数を使う
※関数コンストラクタを使う方法は、推奨されていないようなので割愛します。
1. 関数宣言をする
functionのあとに関数名を指定して、関数を宣言します。
function 関数名(引数名) {
まとめたい処理
}
実際に書いてみると↓
sample.js
function greeting() { // 引数なし
console.log("Hi.");
console.log("I'm Akari.");
}
greeting(); // 関数呼び出し
// Hi.
// I'm Akari.
関数を定義するだけでは処理は実行されません。
関数を呼び出すことで処理が実行されます。
2. 関数リテラルを使う
定数に関数を代入します。
関数名を指定しないので無名関数とも呼ばれます。
const 定数名 = function(引数名) {
まとめたい処理
}
実際に書いてみると↓
sample.js
const greeting = function() {
console.log("Hi.");
console.log("I'm Saki.");
}
greeting();
3. アロー関数を使う
function() を () =>で記述できます。
const 定数名 = (引数名) => {
まとめたい処理
}
実際に書いてみると↓
sample.js
const greeting = () => {
console.log("Hi.");
console.log("I'm Kana.");
}
greeting();
アロー関数は条件によって、さらにシンプルに記述できます。
以下の記事が分かりやすかったです。
引数がある場合
今までは引数なしで書いていましたが、引数がある場合は以下のようになります。
アロー関数を使って引数を指定した場合↓
sample.js
const introduce = (name, age) => {
console.log("Hi.");
console.log(`I'm ${name}.`);
console.log(`I'm ${age}years old.`);
}
introduce("Mina", 25); // 関数呼び出し時に引数を渡す
// Hi.
// I'm Mina.
// I'm 25years old.
※関数宣言・関数リテラルを使う場合も同様に、はじめの()内に引数を指定することができます。
戻り値
return で関数の実行を終了して、関数の呼び出し元に値を返します。
return以降の処理は実行されません。
const 定数名 = () => {
return 戻り値;
// ここに処理を書いても実行されない！
}
// ここに書いた処理は実行される
実際に書いてみると↓
sample.js
const add = (x, y) => {
return x + y;
}
const ans = add(10, 5);
console.log(ans);
// 15 が表示される
真偽値を返すこともできます。
sample.js
const check = (number) => {
return number % 3 === 0;
}
console.log(check(9));
// true が表示される
おわりに
元々Javaを学んでいたので、定数に関数を代入することやアロー関数の理解に苦労しましたが、今はアロー関数を書くのが楽しいです！
次は配列の操作についてまとめたいと思います😊
参考
分かりやすい記事を書いてくださった方々、ありがとうございました！🙇♀️
Discussion
知ってたらすみません。
いきなりreturnで値を返す場合はこんな書き方もできますよ〜
あと、JavaScriptの関数についてだと、カリー化と部分適用について学ぶと楽しいと思います！
コメントありがとうございます！
1行で書けることは知っていたのですが、カリー化と部分適用という言葉は初めて聞きました…！
調べてみますね！😊