portfolio.prodouga.com

JavaScriptの関数

JavaScriptでは、関数を使用して処理をまとめることができます。関数を定義するには、functionキーワードを使用します。

function myFunction() {
  // 関数の処理
}

関数を呼び出すには、関数名を使用します。

myFunction();

関数の引数

関数には、引数を渡すことができます。引数は、関数の処理で使用できる変数です。

function myFunction(name) {
  // 関数の処理
  console.log(name);
}
 
myFunction("John Doe"); // 出力：John Doe

関数の戻り値

関数は、戻り値を返すことができます。戻り値は、関数の処理の結果です。

function myFunction() {
  // 関数の処理
  return "Hello, world!";
}
 
const result = myFunction();
console.log(result); // 出力：Hello, world!

関数のスコープ

関数は、関数スコープに属します。関数スコープは、関数内だけで参照できる変数のスコープです。

function myFunction() {
  let name = "John Doe";
 
  // 関数内では、nameを参照できる
  console.log(name); // 出力：John Doe
}
 
// 関数外では、nameを参照できない
console.log(name); // エラー

関数のクロージャ

関数は、クロージャを返すことができます。クロージャは、関数とそのスコープを組み合わせたものです。

function myFunction() {
  let name = "John Doe";
 
  return function() {
    // クロージャ内では、nameを参照できる
    console.log(name); // 出力：John Doe
  };
}
 
const closure = myFunction();
closure(); // 出力：John Doe

関数の例

関数は、さまざまな用途で使用できます。以下に、いくつかの例を示します。

数値の計算

function add(a, b) {
  return a + b;
}
 
const result = add(1, 2);
console.log(result); // 出力：3

文字列の操作

function reverse(str) {
  return str.split("").reverse().join("");
}
 
const reversedStr = reverse("Hello, world!");
console.log(reversedStr); // 出力：!dlrow ,olleH

データの取得や処理

function getData() {
  // データの取得や処理を行う
  return data;
}
 
const data = getData();
console.log(data); // 出力：取得したデータ

イベントの処理

function onClick() {
  // クリックイベントの処理
}
 
const element = document.getElementById("my-element");
element.addEventListener("click", onClick);