JavaScriptを学び始めると、何度も同じ処理を書くのが面倒に感じる場面が出てきます。そんなときに使うのが関数です。結論からいうと、関数とは「処理をまとめて名前を付けた再利用できる部品」です。
関数を理解すると、コードの重複を減らし、読みやすく保守しやすいプログラムを書けるようになります。この記事では、JavaScriptの関数とは何か、書き方、引数と戻り値、よくあるつまずきを初心者向けに整理します。
まずは「同じ処理を何度も使い回すための仕組み」と覚えるだけでも十分です。
結論：関数で押さえたいのは3つだけ
- 関数は処理のまとまり
- 引数は関数に渡す入力
- 戻り値は関数が返す結果
function add(a, b) {
return a + b;
}
const result = add(3, 5);
console.log(result); // 8
この短いコードだけでも、関数の基本が詰まっています。add が関数名、a と b が引数、return a + b; が戻り値です。
1. 関数とは何か
関数は、一連の処理をひとまとまりにしたものです。たとえば「税込価格を計算する」「あいさつ文を作る」「ボタンが押されたら実行する処理」などを関数として切り出せます。
関数を使うメリットは主に次の3つです。
- 同じコードを何度も書かずに済む
- 処理の意味が名前で分かるようになる
- 修正箇所を1か所にまとめやすい
2. JavaScriptで関数を書く基本形
もっとも基本的な書き方は、function を使う関数宣言です。
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
greet("田中");
この例では、greet という名前の関数を定義し、後から greet("田中") のように呼び出しています。
書き方の流れは次のとおりです。
| 要素 | 意味 |
|---|---|
function | 関数を定義するという宣言 |
greet | 関数名 |
(name) | 引数 |
{ ... } | 実行する処理 |
3. 引数と戻り値を理解すると実用的になる
関数は外から値を受け取り、その結果を返せます。これが引数と戻り値です。
function getTaxIncludedPrice(price) {
return price * 1.1;
}
const total = getTaxIncludedPrice(1000);
console.log(total); // 1100
price が引数、price * 1.1 が戻り値です。こうしておくと、1000円でも2000円でも同じ関数を再利用できます。
初心者の方は、引数 = 入力、戻り値 = 出力 と考えると整理しやすいです。
4. 関数宣言と関数式の違い
JavaScriptでは、関数は function で宣言する以外に、変数へ代入する形でも書けます。これを関数式といいます。
const greet = function(name) {
console.log("こんにちは、" + name + "さん");
};
動作の考え方は似ていますが、書き方や呼び出せるタイミングに違いがあります。関数式の基本を知りたい方は、関数式の記事も合わせて読むと理解が深まります。
また、最近のJavaScriptではこの関数式を短く書けるアロー関数もよく使われます。関数を別の関数へ渡して使う形は、コールバック関数として押さえると理解がつながりやすいです。
5. 関数の中で作った変数は外では使えない
関数には独自のスコープがあります。つまり、関数の中で宣言した変数は、外からは参照できません。
function sample() {
const message = "関数の中だけ";
console.log(message);
}
sample();
// console.log(message); // ReferenceError
このルールを知っておくと、「なぜその変数が使えないのか」で悩みにくくなります。スコープをしっかり整理したい方は、JavaScriptのスコープ解説もおすすめです。あわせて、関数の呼び出し方で意味が変わる this の記事 も読むと理解が深まります。
6. よくあるつまずき
関数を定義しただけで実行されたと思い込む
関数は定義しただけでは実行されません。最後に () を付けて呼び出して初めて動きます。
return と console.log を同じものだと思ってしまう
console.log は表示するだけ、return は関数の結果を返すためのものです。ここを区別できると、関数の理解が一気に進みます。
引数を受け取る関数に値を渡し忘れる
関数に必要な引数を渡さないと、undefined になることがあります。エラーではなく動いてしまう分、初心者が見落としやすいポイントです。
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
greet(); // こんにちは、undefinedさん
関連して学びたい記事
まとめ
JavaScriptの関数は、文法そのものよりも「何のために使うのか」が分かると覚えやすくなります。まずは短い関数を自分で書いて、引数と戻り値の流れに慣れていくのがおすすめです。