JavaScript 関数とは？function・引数・returnを初心者向けにわかりやすく解説【第5講】

■ 今回のゴール

前回は繰り返し処理を学びました。
今日は「関数」を学びます。

今日のゴールは1つです。
処理をまとめて再利用できるようになることです。

画面に「こんにちは」と3回表示したいとします。

console.log("こんにちは");
console.log("こんにちは");
console.log("こんにちは");

同じコードが何回も出てきます。

このようなときに使うのが関数です。

関数とは処理をひとまとめにして必要なときに呼び出せる仕組みです。

基本形はこちらです。

function greet() {
    console.log("こんにちは");
}

この時点では実行されません。

実行するには呼び出します。

greet();

すると「こんにちは」と表示されます。

何回でも呼び出せます。

greet();
greet();
greet();

次に、値を渡す方法です。

function greet(name) {
    console.log("こんにちは " + name);
}
greet("田中");
greet("佐藤");

このnameを引数といいます。

呼び出すときに値を渡せます。

関数は処理した結果の値を戻すことが出来ます。この関数を呼び出した結果の値を戻り値と言います。

function add(a, b) {
    return a + b;
}

let result = add(3, 5);
console.log(result);

return は結果を返すという意味です。

関数は入力して、処理して、結果を返せます。

次にアロー関数です。

const greet = () => {
console.log("こんにちは");
}

最近のJavaScriptではよく使います。

ただし今日は通常のfunctionを中心に理解しましょう。

では演習です。

税込価格を計算する関数を作ってください。

関数は処理をまとめる仕組みです。
引数で値を受け取れます。
returnで結果を返せます。