JavaScript Ⅲ

関数の代入
関数の定義を少し詳しく見てみましょう。関数の定義で、実際に関数を表している部分は以下の図のオレンジ線で囲んだ部分です。その関数を定数「introduce」に代入することで、関数を定義しています。
次は、関数の呼び出しだけでなく、関数の定義から書いてみましょう!

// 定数helloに関数を代入してください
const hello = function() {
console.log(“こんにちは!”);
console.log(“私の名前は○○です”);
};

// 定数helloに代入された関数を呼び出してください
hello();

アロー関数(1)
右の図のように、「function()」の部分を「() =>」としても、これまでと同じように関数を定義することができます。これはES6から導入された新しい書き方で、「function」を用いるよりシンプルに書くことができます。
また、この関数の書き方のことを、特別にアロー関数と呼びます。

// 定数greetにアロー関数を代入してください
const greet = () => {
console.log(“こんにちは!”);
};

// 定数greetを呼び出してください
greet();

引数を受け取る関数の定義
それでは、引数を受け取る関数を定義してみましょう。
図のように、「(引数名) =>」と括弧の中に引数名を書くことで
引数を受け取ることができます。

// 関数の引数にnameを追加してください
const greet = (name) => {
// 「こんにちは、〇〇さん」となるように出力してください
console.log(`こんにちは、${name}さん`);
};

// greetの引数に「ひつじ仙人」を渡して呼び出してください
greet(“ひつじ仙人”);

// 関数の引数にnumber1とnumber2を追加してください
const add = (number1, number2) => {
// number1とnumber2を足した値をコンソールに出力してください
console.log(number1 + number2);

};

// 引数に5と7を渡して関数を呼び出してください
add(5, 7);

戻り値とは
ここからは、関数の処理結果を呼び出し元で受け取る方法を学びます。
呼び出し元で受け取る処理結果を戻り値(もどりち)と呼び、このことを「関数が戻り値を返す」と言います。
下のイメージ図では、関数addが「3」と「7」を受け取り、処理結果の「10」を呼び出し元に返しています。戻り値にあたるのがこの「10」です。

戻り値のある関数
関数の中でreturnを使うと、呼び出し元で値を受け取れるようになります。
「return 値」と書くことで、関数はその値を戻り値として返します。

const half = (number) => {
// numberを2で割った値を戻り値として返してください
return number / 2;
};

// 定数resultを定義してください
const result = half(130);

// 「130の半分は〇〇です」となるように出力してください
console.log(`130の半分は${result}です`);

returnによる処理の終了
returnについて詳しく見てみましょう。
returnは、戻り値を返すだけでなく、関数の処理を終了させる性質も持っています。よって、returnの後にある関数内の処理は実行されませんので注意しましょう。

const check = (number) => {
// numberが3の倍数かどうかを戻り値として返してください
return number % 3 === 0;
};

// if文の条件式で、checkを呼び出してください
if (check(123)) {
console.log(“3の倍数です”);
} else {
console.log(“3の倍数ではありません”);
}

関数の中の定数
関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことができません。
下の図の場合、introduceの中で定義されている定数nameは、この関数の中でしか使うことができません。このようなそれぞれの定数や変数の使用できる範囲のことをスコープと呼びます。

関数の外の定数
一方、関数の外で定義した定数や変数は、関数の中でも使うことができます。
下の図の例では、定数nameは関数の外で定義されていますので、関数の中でも外でも使うことができます。

関数以外のスコープ
関数だけでなく、ifやswitchなどの条件文、forやwhileなどの繰り返し文などの、中括弧「{}」を使う構文でもスコープを作ります。

総合課題にチャレンジしよう
3つの整数から最大値を取得できるgetMax関数を作成しましょう。
図のように、getMax関数は3つの整数を引数に取り、最大値を戻り値とします。

const number1 = 103;
const number2 = 72;
const number3 = 189;

// getMax関数を定義してください
const getMax = (a, b, c) => {
let max = a;

if (b > max) {
max = b;
}
if (c > max) {
max = c;
}

return max;
};

// 「最大値は○○です」と出力してください
const max = getMax(number1, number2, number3);
console.log(`最大値は${max}です`);

シェアする

  • このエントリーをはてなブックマークに追加

フォローする