JavaScriptの関数:基礎から応用まで

関数の基本概念

関数は特定のタスクを実行するコードのブロックであり、オブジェクトとして扱われます。関数を利用することで、コードを再利用可能な単位にまとめ、必要なときに呼び出して実行できます。

関数の作成方法

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());

タグ: javascript 関数 スコープ this コンストラクタ

9月19日 15:47 投稿