JavaScriptで関数を定義する方法

序章

関数は、アクションを実行するか、値を返すコードのブロックです。 関数は、プログラマーによって定義された再利用可能なカスタムコードであるため、プログラムをよりモジュール化して効率的にすることができます。

このチュートリアルでは、JavaScriptで関数を定義し、関数を呼び出し、関数パラメーターを使用するいくつかの方法を学習します。

関数の定義

関数は、functionキーワードで定義または宣言されます。 以下はJavaScriptの関数の構文です。

function nameOfFunction() {
	// Code to be executed
}

宣言はfunctionキーワードで始まり、その後に関数の名前が続きます。 関数名は変数と同じ規則に従います。文字、数字、アンダースコア、ドル記号を含めることができ、キャメルケースで記述されることがよくあります。 名前の後には、オプションのパラメーターに使用できる一連の括弧が続きます。 関数のコードは、forステートメントまたはifステートメントのように、中括弧で囲まれています。

最初の例では、関数宣言を作成して、挨拶文をコンソールに出力します。

// Initialize greeting function
function greet() {
	console.log("Hello, World!");
}

ここに、greet()関数内に含まれるコンソールにHello, World!を出力するコードがあります。 ただし、呼び出しを実行するか、関数を呼び出すまで、何も起こらず、コードは実行されません。 関数の名前の後に括弧を付けることで、関数を呼び出すことができます。

// Invoke the function
greet();

次に、それらをまとめて、関数を定義し、呼び出します。

// Initialize greeting function
function greet() {
	console.log("Hello, World!");
}

// Invoke the function
greet();

greet();を呼び出すと、関数が実行され、プログラムの出力としてHello, World!を受け取ります。

Output
Hello, World!

これで、greet()コードが関数に含まれ、何度でも再利用できます。

パラメータを使用すると、コードをより動的にすることができます。

関数パラメーター

greet.jsファイルでは、Hello, Worldをコンソールに出力する基本関数を作成しました。 パラメータを使用して、コードをより柔軟にする機能を追加できます。 パラメータは、名前として関数に渡され、ローカル変数として動作する入力です。

ユーザーがアプリケーションにログインするときに、「Hello、World！」とだけ言うのではなく、プログラムに名前で挨拶してもらいたい場合があります。

nameというパラメーターを関数に追加して、挨拶される人の名前を表します。

// Initialize custom greeting function
function greet(name) {
	console.log(`Hello, ${name}!`);
}

関数の名前はgreetで、括弧内に1つのパラメーターがあります。 パラメーターの名前は、変数の名前付けと同じ規則に従います。 関数内には、Hello, Worldで構成される静的文字列の代わりに、パラメーターを含むtemplateliteral文字列があります。これはローカル変数として動作しています。

nameパラメータがどこにも定義されていないことに気付くでしょう。 関数を呼び出すときに値を割り当てます。 ユーザーの名前がSammyであると仮定して、関数を呼び出し、ユーザー名を引数として配置します。 引数は関数に渡される実際の値であり、この場合は文字列"Sammy"です。

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

"Sammy"の値は、nameパラメーターを介して関数に渡されます。 これで、関数全体でnameが使用されるたびに、"Sammy"の値が表されます。 これがコード全体です。

// Initialize custom greeting function
function greet(name) {
	console.log(`Hello, ${name}!`);
}

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

上記のプログラムを実行すると、次の出力が表示されます。

Output
Hello, Sammy!

これで、関数を再利用する方法の例があります。 実際の例では、関数は名前を引数値として直接指定するのではなく、データベースからユーザー名を取得します。

パラメータに加えて、変数は関数内で宣言できます。 これらの変数はローカル変数と呼ばれ、独自の機能ブロックのスコープ内にのみ存在します。 変数スコープは変数のアクセシビリティを決定します。 関数の内部で定義された変数は、関数の外部からはアクセスできませんが、プログラム全体で関数が使用される回数だけ使用できます。

戻り値

1つの関数で複数のパラメーターを使用できます。 関数に複数の値を渡して値を返すことができます。 xとyで表される2つの値の合計を求める関数を作成します。

// Initialize add function
function add(x, y) {
	return x + y;
}

// Invoke function to find the sum
add(9, 7);

上記のプログラムでは、パラメーターxおよびyを使用して関数を定義し、9および7の値を関数に渡しました。 プログラムを実行すると、これらの数値の合計が出力として受信されます。

Output
16

この場合、9と7がsum()関数に渡されると、プログラムは16を返しました。

returnキーワードを使用すると、関数の実行が停止し、式の値が返されます。 この場合、ブラウザはコンソールに値を表示しますが、console.log()を使用してコンソールに印刷するのと同じではありません。 関数を呼び出すと、関数が呼び出された場所に正確に値が出力されます。 この値は、すぐに使用することも、変数に配置することもできます。

関数式

前のセクションでは、関数宣言を使用して2つの数値の合計を取得し、その値を返しました。 変数に関数を割り当てることで、関数式を作成することもできます。

同じadd関数の例を使用して、戻り値を変数（この場合はsum）に直接適用できます。

// Assign add function to sum constant
const sum = function add(x, y) {
	return x + y;
}

// Invoke function to find the sum
sum(20, 5);

Output
25

これで、sum定数が関数になりました。 名前のない関数である無名関数に変換することで、この式をより簡潔にすることができます。 現在、関数の名前はaddですが、関数式では関数に名前を付ける必要はなく、通常は名前が省略されます。

// Assign function to sum constant
const sum = function(x, y) {
	return x + y;
}

// Invoke function to find the sum
sum(100, 3);

Output
103

この例では、関数の名前addを削除し、無名関数に変換しました。 名前付き関数式は、デバッグを支援するために使用できますが、通常は省略されます。

矢印関数

これまで、functionキーワードを使用して関数を定義する方法について説明してきました。 ただし、 ECMAScript 6 の時点で、矢印関数式として知られる関数を定義するためのより新しくより簡潔な方法があります。 矢印関数は、一般的に知られているように、等号の後に大なり記号が続く=>で表されます。

矢印関数は常に無名関数であり、関数式の一種です。 2つの数の積を見つけるための基本的な例を作成できます。

// Define multiply function
const multiply = (x, y) => {
	return x * y;
}

// Invoke function to find product
multiply(30, 4);

Output
120

キーワードfunctionを書き出す代わりに、=>矢印を使用して機能を示します。 それ以外は、通常の関数式と同様に機能しますが、Mozilla DeveloperNetworkの矢印関数で読むことができるいくつかの高度な違いがあります。

パラメータが1つしかない場合は、括弧を除外できます。 この例では、xを二乗しています。これは、引数として1つの数値を渡すだけで済みます。 括弧は省略されています。

// Define square function
const square = x => {
	return x * x;
}

// Invoke function to find product
square(8);

Output
64

returnステートメントのみで構成されるこれらの特定の例では、矢印関数を使用すると、構文をさらに減らすことができます。 関数が1行のみの場合return、以下の例に示すように、中括弧とreturnステートメントの両方を省略できます。

// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);

Output
100

これらの3つのタイプの構文はすべて、同じ出力になります。 独自の関数をどのように構成するかを決定するのは、一般的に好みまたは会社のコーディング標準の問題です。

結論

このチュートリアルでは、関数宣言と関数式、関数からの値の戻り、変数への関数値の割り当て、およびES6矢印関数について説明しました。

関数は、値を返すかアクションを実行するコードのブロックであり、プログラムをスケーラブルでモジュール式にします。