関数の基本概念
関数は特定のタスクを実行するコードのブロックであり、オブジェクトとして扱われます。関数を利用することで、コードを再利用可能な単位にまとめ、必要なときに呼び出して実行できます。
関数の作成方法
1. 関数コンストラクタを使用する方法
Functionコンストラクタを使用して関数オブジェクトを作成できます。ただし、この方法は実用的ではありません。
var myFunc = new Function('console.log("コンストラクタから作成された関数")');
myFunc();
2. 関数宣言を使用する方法(推奨)
最も一般的な関数の定義方法です。
function calculateSum(x, y) {
var result = x + y;
console.log('計算結果: ' + result);
return result;
}
3. 関数式を使用する方法
変数に関数を代入する方法です。
var multiply = function(a, b) {
return a * b;
};
4. アロー関数(ES6)
より簡潔な関数の記述方法です。
const divide = (numerator, denominator) => numerator / denominator;
関数の引数
関数は引数を受け取って処理を行うことができます。JavaScriptでは、仮引数と実引数の数が一致しなくてもエラーにはなりません。
function processData(firstParam, secondParam) {
console.log('第一引数:', firstParam);
console.log('第二引数:', secondParam);
// argumentsオブジェクトの使用例
console.log('渡された引数の数:', arguments.length);
for (var i = 0; i < arguments.length; i++) {
console.log('引数' + i + ':', arguments[i]);
}
}
processData(10, 20, 30);
関数の戻り値
return文を使用して関数から値を返すことができます。return文がない場合、関数はundefinedを返します。
function getMaximumValue(numbers) {
if (numbers.length === 0) {
return null;
}
var max = numbers[0];
for (var i = 1; i < numbers.length; i++) {
if (numbers[i] > max) {
max = numbers[i];
}
}
return max;
}
var result = getMaximumValue([5, 2, 9, 1, 7]);
console.log('最大値:', result);
スコープ
JavaScriptにはグローバルスコープと関数スコープがあります。
グローバルスコープ
スクリプト全体でアクセス可能なスコープです。
var globalVariable = 'グローバル変数';
function displayGlobal() {
console.log(globalVariable);
}
関数スコープ
関数内でのみ有効なスコープです。
function outerFunction() {
var outerVar = '外部変数';
function innerFunction() {
var innerVar = '内部変数';
console.log(outerVar); // アクセス可能
console.log(innerVar); // アクセス可能
}
innerFunction();
// console.log(innerVar); // エラー: アクセス不可
}
ホイスティング(巻き上げ)
JavaScriptでは、変数宣言と関数宣言がコードの先頭に移動される現象が起こります。
// 変数のホイスティング
console.log(hoistedVar); // undefined(エラーにならない)
var hoistedVar = '初期化後の値';
// 関数宣言のホイスティング
hoistedFunction(); // 実行可能
function hoistedFunction() {
console.log('ホイスティングされた関数');
}
// 関数式はホイスティングされない
// functionExpression(); // エラー: TypeError
var functionExpression = function() {
console.log('関数式');
};
thisキーワード
thisの値は関数の呼び出し方によって変わります。
var context = 'グローバルコンテキスト';
function showContext() {
console.log(this.context);
}
var obj1 = {
context: 'オブジェクト1のコンテキスト',
display: showContext
};
var obj2 = {
context: 'オブジェクト2のコンテキスト',
display: showContext
};
// 直接呼び出し
showContext(); // グローバルコンテキスト
// メソッドとして呼び出し
obj1.display(); // オブジェクト1のコンテキスト
obj2.display(); // オブジェクト2のコンテキスト
コンストラクタ関数
オブジェクトを作成するための特別な関数です。
function Product(name, price, category) {
this.name = name;
this.price = price;
this.category = category;
this.getInfo = function() {
return this.name + ' - ¥' + this.price + ' (' + this.category + ')';
};
}
var product1 = new Product('ノートPC', 98000, '電子機器');
var product2 = new Product('本', 1500, '書籍');
console.log(product1.getInfo());
console.log(product2.getInfo());
オブジェクトファクトリパターン
コンストラクタを使用せずにオブジェクトを生成する方法です。
function createEmployee(id, name, department) {
return {
id: id,
name: name,
department: department,
introduce: function() {
return 'ID: ' + this.id + ', 氏名: ' + this.name + ', 部署: ' + this.department;
}
};
}
var emp1 = createEmployee(101, '田中太郎', '営業部');
var emp2 = createEmployee(102, '鈴木花子', '開発部');
console.log(emp1.introduce());
console.log(emp2.introduce());