関数と引数

しょうみゆ@WEBエンジニア

ひとまとまりの処理を予め関数として定義しておくことで、関数名を呼び出すだけで処理を実行させることができる。

関数宣言はfunctionを使う

// 関数宣言
function 関数名(引数) {
    処理;
}

// 関数の呼び出し
関数名();

引数はあってもなくても良い。また、ブロック内の処理は何行でも追加できる。

関数を使用する場合は処理を実行したいところで関数名を記述するだけで良い。

function showLog() {
    console.log('Hello World!');
}

...
...
showLog();

...

引数

値によって処理の結果を変えたい場合に引数を使用する。

functionで関数を定義する際に引数を使うよーと一緒に定義する必要がある。

function 関数名(仮引数) {
    処理;
}

例えば、〇〇 World!と前半部分に好きな文字を入れたい場合、下記のようにして前半部分を引数としておくと可能になる。

function showLog(text) {
    console.log(`${text} World!`)
}

showLog(Hello); // Hello World!と表示
showLog(GoodNight); // GoodNight World!と表示

関数の定義時には予め仮の引数を容易しておいて、処理内で引数を使うことを宣言しておく。

実際に処理を呼び出す時になんの値で（今回であればテキスト）で処理を実行させるかの正式な値を入れる。

処理を呼び出した際に今まで仮置きだった関数内の引数が、実際の値に置き換わって処理が実行される。

この関数内で定義している引数は仮置きの引数であることから仮引数といい、処理の際に呼び出す実際の引数を実引数という。

また、引数はいくつでも持たせることができる。ただし、実引数と仮引数の引数の数は同じでないといけない。

// 関数宣言
function 関数名(引数, 引数, 引数, ...) {
    処理;
}

// 呼び出し
関数名(引数, 引数, 引数, ...)

関数式

関数を定数や変数に値として代入することができる。関数そのものが定数や変数になるというイメージ。

構文は下記（定数の場合）。

// 関数宣言
const 定数名 = function(仮引数, 仮引数, ...) {
    処理;
    処理;
    return;
};

// 呼び出し
定数名(実引数, 実引数, ...);

定数名をつける代わりに関数式のfunctionには名前をつけないので無名関数と呼ばれる。

定数や変数に代入するような式の場合は、ブロックで終わっていてもセミコロンが必要になるので注意する。

定数や変数が処理を持っているひとかたまりだと思えば良い。

使用例

const sum = function(a, b, c) {
    return a + b + c;
}

const total = sum(1, 2, 3) + sum(4, 5, 6);
console.log(total); // 21と表示

上記の例ではa、b、cが足し算するという処理を持ったsumという名前の定数を宣言し、新たに作られた定数のtotalの中でsumとsumが計算されている。

呼び出し方は似ているが、関数そのものの処理なのか、定数や変数に代入された処理なのかという違いで捉えると良い。

return

returnを使用するとその処理結果の値を他の関数でも使用できるようになる。

返り値ともいう。

その処理でできた値を他の処理に使用したい場合にはreturnを指定しないと値の引渡しができない。

アロー関数

関数式を短く書いたもの。

const sum = (a, b, c) => {
    return a + b + c;
}

// 下記と同義
const sum = function(a, b, c) {
    return a + b + c;
}
①関数式からfunctionを削除
②仮引数の後に=>を記述

また、処理が1行でreturnを使用する場合にはさらに短くすることができる。

const sum = (a, b, c) => a + b + c;

// 下記と同義
const sum = (a, b, c) => {
    return a + b + c;
}
①returnを削除
②{ }を削除
③1行でまとめる

さらに引数がひとつの場合は( )も省略可能。

const double = a => a * 2;

// 下記と同義
const double = function(a) {
    return a * 2;
};



※このnoteはProgate・ドットインストール・Udemyなどの教材から学習した内容をまとめており、初心者から中級者になるレベルを目指しています。ご指摘点あればコメントにてお願いします。
+--------------------------------------------------------------------------+
しょうみゆ@WEBエンジニア
twitter@MykiiTech
インフラエンジニアとWEBマーケティングで仕事した人。日本×フィリピンのハーフ。ごはんと仕事とおしゃべりが大好き。ワンストップでサービス提供できるフルスタックエンジニアになるべく、まずはフロントエンドエンジニアから攻め中。HTML/CSSは得意。
+--------------------------------------------------------------------------+

いいなと思ったら応援しよう！