JavaScript「関数」要点まとめ
関数とは
- 処理のまとまりに名前をつけて再利用できる仕組み。
- 入力（引数）→ 処理 → 出力（戻り値） の流れで動く。
- JavaScriptでは関数も**値（オブジェクト）**として扱える。
function greet(name) {
return `こんにちは、${name}さん！`;
}
console.log(greet("Halu")); // こんにちは、Haluさん！
JavaScript関数の定義方法
| 種類 | 書き方 | 特徴 |
|---|
| 関数宣言 | function fn() {} | 先に呼び出してもOK（ホイスティングあり） |
| 関数式 | const fn = function() {}; | 代入して使う。ホイスティングなし |
| アロー関数 | const fn = (x) => x * 2; | 簡潔記法。this が外側と共有される |
| 名前付き関数式 | const fn = function name() {}; | デバッグ時に便利 |
引数（parameters）と戻り値（return）
function f(x, y) { return x + y; }- 戻り値がないときは自動的に
undefined。
- 可変引数は
...rest で受け取れる。
function sum(...nums) {
return nums.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3)); // 6
JavaScriptスコープ（scope）
- 変数の有効範囲。
- 関数内で宣言した変数はその関数内でのみ有効。
- 外側の変数は内側からアクセスできる（ネストスコープ）。
let outer = "外";
function inner() {
let inside = "中";
console.log(outer); // OK
// console.log(outside); // ❌
}
JavaScriptクロージャ（closure）
- 関数が定義されたときの環境を覚えている仕組み。
- 外の変数を関数内から保持・操作できる。
function makeCounter() {
let count = 0;
return () => ++count;
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
JavaScriptthis とメソッド
this は呼び出し方で中身が変わる。- オブジェクト内の関数（メソッド）では、そのオブジェクトを指す。
const user = {
name: "Halu",
hello() { console.log(`こんにちは ${this.name}`); }
};
user.hello(); // こんにちは Halu
JavaScript関数の高度な使い方
| 機能 | 説明 | 例 |
|---|
| 再帰 | 関数が自分自身を呼ぶ | 階乗や木構造処理など |
| call / apply / bind | this を指定して関数を呼ぶ | fn.call(obj) など |
| 即時関数 (IIFE) | 定義と同時に実行される関数 | (function(){})(); |
まとめのイメージ
| 概念 | キーワード | イメージ |
|---|
| 関数 | 再利用・整理・出力 | 「命令を箱に入れる」 |
| スコープ | 範囲・独立性 | 「見える・見えない」 |
| クロージャ | 記憶・状態保持 | 「箱の中にメモを残す」 |
