グローバル変数からコールバック関数まで！JavaScript 関数間で値を渡す7つの方法
JavaScript 関数に引数を渡して別の関数に値を渡す方法
引数の渡し方
関数を呼び出す際に、関数のカッコ内にカンマ区切りで引数を渡します。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("山田"); // 処理結果：こんにちは、山田さん！
上記の例では、greet 関数に name という引数を渡しています。関数内では、渡された引数 name を使って挨拶のメッセージを出力しています。
複数の引数
関数に複数の引数を渡すこともできます。
function calculateArea(width, height) {
return width * height;
}
const area = calculateArea(5, 3);
console.log(area); // 処理結果：15
上記の例では、calculateArea 関数に width と height という2つの引数を渡しています。関数内では、渡された引数を使って長方形の面積を計算し、その結果を戻り値として返しています。
戻り値の受け取り
別の関数で戻り値を受け取るには、関数呼び出しの後にカッコをつけて値を代入します。
function square(number) {
return number * number;
}
const result = square(10);
console.log(result); // 処理結果：100
上記の例では、square 関数から返された戻り値を result 変数に代入しています。
関数同士の連携
引数と戻り値を活用することで、複数の関数を連携させて処理を行うことができます。
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
function displayCircleInfo(radius) {
const area = calculateCircleArea(radius);
console.log("半径 " + radius + " の円の面積は " + area + " です。");
}
displayCircleInfo(5); // 処理結果：半径 5 の円の面積は 78.53979477294144 です。
上記の例では、calculateCircleArea 関数は円の面積を計算し、displayCircleInfo 関数は円の半径と面積を表示します。displayCircleInfo 関数は calculateCircleArea 関数の戻り値を利用して円の面積を取得しています。
このように、引数と戻り値を組み合わせることで、JavaScript 関数を効果的に連携させ、複雑な処理を行うことができます。
- 関数には引数を省略したり、デフォルト値を設定したりすることもできます。
- 関数は再帰的に呼び出すこともできます。
- 関数はオブジェクトとしてプロパティやメソッドを持つことができます。
詳しくは、以下のリソースを参考にしてみてください。
円柱の体積と表面積を計算するプログラム
このプログラムでは、円柱の半径と高さを引数として受け取り、円柱の体積と表面積を計算し、結果を表示します。
function calculateCylinderVolume(radius, height) {
const baseArea = Math.PI * radius * radius;
const volume = baseArea * height;
return volume;
}
function calculateCylinderSurfaceArea(radius, height) {
const baseArea = Math.PI * radius * radius;
const lateralArea = 2 * Math.PI * radius * height;
const surfaceArea = 2 * baseArea + lateralArea;
return surfaceArea;
}
function displayCylinderInfo(radius, height) {
const volume = calculateCylinderVolume(radius, height);
const surfaceArea = calculateCylinderSurfaceArea(radius, height);
console.log("半径 " + radius + "、高さ " + height + " の円柱:");
console.log(" 体積：" + volume);
console.log(" 表面積：" + surfaceArea);
}
const radius = 5;
const height = 10;
displayCylinderInfo(radius, height);
このプログラムは以下の処理を実行します。
calculateCylinderVolume関数：円柱の体積を計算し、戻り値として返します。displayCylinderInfo関数：円柱の半径と高さを表示し、calculateCylinderVolume関数とcalculateCylinderSurfaceArea関数から返された体積と表面積を表示します。- プログラム実行時に、半径 5、高さ 10 の円柱について、体積と表面積を
displayCylinderInfo関数を使って表示します。
これらのサンプルコードを参考に、さまざまな処理を関数に分割して、プログラムをより分かりやすく、再利用しやすくすることができます。
JavaScript 関数間で値を渡すその他の方法
グローバル変数
最もシンプルな方法は、関数間で共有したい変数をグローバル変数として宣言することです。
let globalValue = 10;
function function1() {
console.log(globalValue); // 10 を出力
globalValue = 20;
}
function function2() {
console.log(globalValue); // 20 を出力
}
function1();
function2();
利点:
- シンプルで分かりやすい
- コードが分かりにくくなり、意図しない値変更が起こりやすい
- テストが困難になる
- コードの再利用性が低くなる
クロージャ
関数内で宣言された変数に外部からアクセスできるようにする仕組みです。
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter1 = createCounter();
const counter2 = createCounter();
console.log(counter1()); // 1 を出力
console.log(counter1()); // 2 を出力
console.log(counter2()); // 1 を出力
- 関数内で宣言された変数を外部から参照・変更できる
- プライベートな変数を保持できる
- コードが分かりにくくなる場合がある
コールバック関数
非同期処理の結果を処理する関数を引数として渡す方法です。
function loadFile(fileName, callback) {
// ファイルを読み込む処理
const data = // ファイルの内容
// 読み込み完了後にコールバック関数を呼び出す
callback(data);
}
loadFile("data.txt", function(data) {
console.log(data);
});
- 非同期処理の完了後に処理を実行できる
- コードをモジュール化しやすい
イベントリスナー
DOM イベントなどのイベントを発生させた要素にイベントハンドラを設定する方法です。
const button = document.getElementById("button");
button.addEventListener("click", function() {
console.log("ボタンがクリックされました");
});
- GUI 操作などのイベントを処理しやすい
適切な方法の選択
- シンプルで分かりやすい方法が必要な場合は、グローバル変数が適しています。
- プライベートな変数を保持したり、関数内で宣言された変数を外部から参照・変更する必要がある場合は、クロージャが適しています。
- 非同期処理の完了後に処理を実行する必要がある場合は、コールバック関数が適しています。
- GUI 操作などのイベントを処理する必要がある場合は、イベントリスナーが適しています。
上記以外にも、Promise や async/await などの非同期処理を扱うための方法もあります。状況に応じて適切な方法を選択することで、より柔軟で maintainable なコードを書くことができます。
javascript
