Java Scriptの基本その6　functionの基本

イントロダクション

JavaScriptの基本的な関数の使い方について解説します。"use strict"を使って厳密モードを有効にし、関数を定義します。関数宣言、関数式、アロー関数を用いて数値の計算や文字列の生成を行い、関数内で別の関数を呼び出す方法も紹介しました。例えば、関数fruitProcessorではリンゴとオレンジの数を引数に取り、フルーツジュースを作るメッセージを生成します。これらの方法を理解することで、より安全で効率的なコードを書けるようになります。

1. 基本的な関数の使い方

まずは、基本的な関数の使い方から見てみましょう。このコードでは、callTextという関数を定義しています。

"use strict";

/*funtionの基本*/
function callText() {
  console.log("Wake up time!");
}
callText();
/*10を入れても変化しない */
callText(10);

解説

• "use strict"; は厳密モードを有効にし、より厳しいエラーチェックを行います。

• function callText() は callText という名前の関数を定義しています。この関数は "Wake up time!" というメッセージをコンソールに表示します。

• callText(); は定義した関数を呼び出します。

• callText(10); は引数を渡していますが、この関数は引数を受け取らないため、無視されます。

2. 関数の戻り値と引数の利用

次に、関数の戻り値と引数の利用について説明します。このコードでは、fruitProcessorという関数を使っています。

/* returnの結果を表示*/
function fruitProcessor(apple, orrange) {
  console.log(apple, orrange);
  const fruitJuice = `私は${apple}つのリンゴ🍎と${orrange}つのオレンジ🍊を使ってフルーツジュースを作った`;
  return fruitJuice;
}

const fruitJuiceResult = fruitProcessor(5, 1);

console.log(fruitJuiceResult);
console.log(fruitProcessor(3, 2));

fruitProcessor(7, 8);
console.log(fruitJuiceResult);

解説

• function fruitProcessor(apple, orrange) は、リンゴとオレンジの数を引数に取ります。

• 関数内で、引数の数をコンソールに表示し、fruitJuice という文字列を作成して返します。

• fruitProcessor(5, 1); では、リンゴ5つとオレンジ1つを使ってジュースを作るメッセージを生成し、その結果を fruitJuiceResult に格納しています。

• console.log(fruitProcessor(3, 2)); では、新たにリンゴ3つとオレンジ2つでジュースを作り、その結果を表示します。

• 最後に console.log(fruitJuiceResult); で最初のジュース作成結果を再度表示しています。

3. 関数の多様な表現方法

関数の定義方法には複数あります。ここでは、関数宣言、関数式、アロー関数を紹介します。

//funtionの表し方
//Function Decolation
function calcNumber_1(number) {
  return number * 2;
}
//Function Expression
const calcNumber_2 = function (number) {
  return number * 2;
};

//Arrow Expression
const calcNumber_3 = (number) => number * 2;

const number_1 = calcNumber_1(10);
const number_2 = calcNumber_2(10);
const number_3 = calcNumber_3(10);

console.log(number_1, number_2, number_3);

解説

• function calcNumber_1(number) は関数宣言で、渡された数値を2倍にして返します。

• const calcNumber_2 = function (number) は関数式で、同様に渡された数値を2倍にして返します。

• const calcNumber_3 = (number) => number * 2 はアロー関数で、より簡潔に書くことができます。

• それぞれの関数を呼び出し、結果を console.log で表示しています。

4. 複雑な処理のアロー関数

複雑な処理を行うアロー関数では、複数のステップを含む場合 return 文を使用します。

const retirementAge = 65;
const currentYear = 2024;
const yearofRetirement = (birthYear, firstname) => {
  const yearsLeft = birthYear + retirementAge - currentYear;
  return `${firstname}さんは定年退職まであと${yearsLeft}年働かないといけないよ。ガンバ。`;
};

console.log(yearofRetirement(1989, "ケンタ"));
console.log(yearofRetirement(2001, "太郎"));

解説

• yearofRetirement はアロー関数で、引数として生年と名前を取ります。

• yearsLeft で現在年から定年までの残り年数を計算し、メッセージを返します。

• console.log で計算結果のメッセージを表示しています。

5. 関数から別の関数を呼び出す

最後に、関数内で別の関数を呼び出す方法について説明します。

//functionから違うfunctionを呼ぶ方法
function interestCalc(japaneseYen) {
  return japaneseYen * 1.01;
}

function bankAccount(balance) {
  const futureBalance = interestCalc(balance);
  return `あなたの預金${balance}円は金利${
    ((futureBalance - balance) / balance) * 100
  }%のおかげで${futureBalance}円になりました。よかったね。`;
}

console.log(bankAccount(1000));
console.log(bankAccount(100000000));

解説

• interestCalc 関数は引数として渡された金額に対して1%の利息を計算します。

• bankAccount 関数は interestCalc を呼び出し、将来の預金額を計算します。

• 計算結果を含むメッセージを返し、 console.log で表示しています。

まとめ

これで、JavaScriptの基本的な関数の使い方とその応用について解説しました。関数の多様な定義方法や引数、戻り値の利用、さらには関数内で別の関数を呼び出す方法など、さまざまなテクニックを駆使して、より高度なプログラムを書くことができます。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！