Zenn
🕌

JavaScriptを一から理解する: 関数について

2022/02/11に公開
JavaScript
Web
#
関数
tech

はじめに

こんにちは、Doxperと申します。
今回はJavaScriptの関数(function) について解説します。

この記事でできるようになること

  • 関数(function)とは何か学ぶことができる。
  • 引数、戻り値について学ぶことができる。
  • 関数の使い方/メリットを学ぶことができる。

対象読者

  • エンジニアを目指している同士
  • JavaScriptの基礎を身につけたい方
  • 過去にプログラミング学習に挫折した方
  • プログラミング言語は他に触ったことがない方

JavaScript Function

関数とは？

関数とは入力値(パラメーター)を受け取り、命令を実行しその結果を返すまでの複合文のことです。
関数を利用することで同じコードを繰り返し書く必要がなくなり、定義した関数を呼び出し再利用することができます。
JavaScriptには、parseInt()やparseFloat()など、多くの組み込み関数が用意されています。
また開発者自身が関数を定義することもでき、これをユーザー定義関数といいます。

function命令

function命令で関数を定義する方法は以下の通りです

構文
function 関数名() {
  //関数を呼び出したときの処理
}

関数の宣言を行うにはfunction命令を使用します。
関数名には処理の説明的な名前をつけるのが一般的です。

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

定義した関数は以下のようにして呼び出します。

//関数名();
greet();

引数

関数は引数をつけて宣言することもできます。
引数とは関数を宣言する時に渡されるパラメーターです。

function　関数名(引数,...) {
  //関数が呼び出された時に実行する処理
}
example
function greet(name) {
  console.log(`こんにちは${name}さん!`);
}

let name = prompt("あなたの名前は何ですか？");

//関数の呼び出し
greet(name);

//二つの数を掛けるプログラム
function multi(a, b) {
  console.log(a * b);
}
multi(3, 3); 
multi(2, 4);
output
9
8

戻り値

戻り値(返り値)は、関数を呼び出したときに呼び出し元へ返される値のことです。
return命令は戻り値を返すために使用します。
return命令は関数の終了を意味し、return以降のコードは実行されません。

戻り値がない関数ではreturn命令を省略することが可能です。

function add(a, b) {
  return a + b;
}
console.log(add(2, 2));
output
4

関数式

JavaScriptでは関数を式として定義することもできます。

const 関数名 = function (引数,...) {
  // 関数を呼び出したときの処理
  // ...
  return 関数の返り値;
};

const getTriangle = function (base, height) {
  return (base * height) / 2;
};
console.log(getTriangle(6, 6));
output
18

関数を使用するメリット

関数を使用するメリットは以下のようなものがあります。

  • 関数はコードの再利用を可能にする。
  • 関数は可読性を高める。
  • 各機能をまとめることによりデバッグ作業の効率を上げることができる。

おわりに

いかがでしたでしょうか？
今回はJavaScriptの関数についてご紹介しました。

関数は、JavaScriptだけでなく他の多くのプログラミング言語においても標準で備わっている基本的な機能です。今回の記事では紹介できなかったアロー関数やスコープについては次回以降の記事でご紹介します！

記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

関数と宣言 · JavaScript Primer #jsprimer
JavaScript Functions
JavaScript Function and Function Expressions (with Examples)

Discussion