目次
【解説】JavaScriptの色々な関数【アロー／コールバック／無名／即時】
JavaScriptには色々な関数の書き方があります。
主にこちら。
・関数宣言
・名前付き関数式
・無名関数
・アロー関数
・コールバック関数
・即時関数
順に見ていきましょう。
function 関数名(引数) {
// 処理
}一番基本的な書き方ですね。
functionのあとに関数を宣言します。
ちなみに関数宣言をする前に、関数を呼び出すことも可能です。
testFun('テスト')
function testFun(name) {
console.log(`おはようございます。${name}さん。`);
}ブラウザがJavaScriptを読み込むときに、関数を上に巻き上げてくれるからだそう。
let 変数名 = function 関数名(引数) {
// 処理
};名前付き関数式とは、関数式を変数に代入して記述したものです。
関数宣言と違い、関数式を書いた後しか呼び出せません。
let testFun = function nameFun (name) {
console.log(`おはようございます。${name}さん。`);
};
testFun('テスト');let 変数名 = function (引数) {
// 処理
};無名関数とは名前のない関数を、変数に代入して記述したものです。
関数宣言と違い、関数式を書いた後しか呼び出せません。
let testFun = function (name) {
console.log(`おはようございます。${name}さん。`);
};
testFun('テスト');let 関数名 = (引数) => {
処理
};アロー関数は、関数を簡潔に記述できるやり方です。
ジト
「=>」が矢印っぽいため、アローという感じですね。
ちなみに無名関数の置き換えのため、名前付き関数式のように名前を入れることができません。
例となる書き方がこちら。
let testFun = (name) => {
return `おはようございます。${name}さん。`;
};
console.log(testFun('テスト'));またアロー関数には下記の特徴があります。
- ①：1つの式をreturnするとき{}とreturnを省略可能
- ②：パラメータが1つのとき()を省略可能
- ③：thisを持たない
// ①{}とreturnを省略
let testFun = (name) => `おはようございます。${name}さん。`;
// ②パラメータの()を省略
let testFun = name => `おはようございます。${name}さん。`;
// ③thisを持たない
const testObj = {
name: 'テスト',
// 通常の関数例
normalFun: function() {
console.log(this.name);
},
// アロー関数例
arrowFun: () => {
console.log(this.name);
}
}
testObj.normalFun(); // 出力: テスト
testObj.arrowFun(); // 出力: undefinedfunction 関数①(コールバック関数) {
console.log("関数①の処理が始まりました");
コールバック関数();
console.log("関数①の処理が終わりました");
}
function 関数②() {
console.log("関数②が実行されました");
}
関数①(関数②);関数①の処理が始まりました
関数②が実行されました
関数①の処理が終わりましたコールバック関数は別の関数に引数として渡され、後で実行される関数のこと。
主に非同期処理やイベント処理などで使用されます。
例となる書き方がこちら。
function testFun1(callback) {
callback();
console.log(`おはようございます。`)
}
function testFun2() {
console.log(`こんにちは。`)
}
testFun1(testFun2);(function(引数) {
// 処理
})();即時関数は定義と同時に実行される関数です。
スコープの汚染を防ぎたいときに使われます。
例となる書き方がこちら。
(function(name) {
console.log(`おはようございます。${name}さん。`);
})('テスト');【解説】JavaScriptの色々な関数【アロー／コールバック／無名／即時】：まとめ
- 関数宣言
- 名前付き関数式
- 無名関数
- アロー関数
- コールバック関数
- 即時関数
ジト
関数を使う時はためしてみてね！
