JavaScript関数の使用方法：ステップバイステップガイド

JavaScript関数は、再利用できるコードのカスタムブロックです。関数を使用すると、コードをよりモジュール化でき、オブジェクト指向プログラミングに不可欠です。関数は、宣言または式を介して定義できます。

---

JavaScriptを学び、基本を知りたい場合、JS関数は間違いなく知っておく必要のあるものです。プログラミング言語での作業に時間を費やしたことがあれば、関数が複雑なプログラムの構成要素であることはご存知でしょうが、それらがどのように機能するかわからない場合があります。関数を使用すると、コードを複数回繰り返すのではなく、一般的なプロセスに対して1回だけコードを記述できます。

関数は、アクションを実行し、値を返す可能性のあるコードのブロックです。関数はニーズに基づいてカスタマイズでき、コードをより効率的でモジュール式にするために使用できます。

このチュートリアルでは、関数の基本、つまり関数を定義する方法、関数を呼び出す方法、およびそれらがいつ役立つかについて説明します。

JavaScript定義関数の使用方法

JavaScriptで関数を定義するには、宣言と式の2つの方法があります。関数を定義する宣言メソッドから始めましょう。

JavaScript関数宣言

関数宣言は、名前付き関数を定義します。このタイプの関数を定義するには、functionでコードを開始する必要があります キーワードの後に​​関数の名前が続きます。次に例を示します：

function nameOfYourFunction() {
	// Function code
}

関数名は変数と同じ規則に従います。関数名は、leer、アンダースコア、数字を使用でき、多くの場合、キャメルケースを使用して記述されます。次に、変数名の後に、オプションのパラメータを保持できる一連の括弧を含めます。これらについては、記事の後半で説明します。

次に、forまたはifステートメントのように、関数のコードは中括弧で囲まれます。 Googleを出力する関数の例を次に示します。 コンソールへ：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

function printGoogle() {
	console.log(“Google”);
}

printGoogle()内 JS関数はconsole.log()です 関数が呼び出されたときに実行されるステートメント。ただし、関数を呼び出すまでは何も起こりません。関数を呼び出したい場合は、次のコードを使用できます。

printGoogle();

それでは、コードを1つの関数にマージしてから、次のように呼び出します。

// Declare the printGoogle() function
function printGoogle() {
	console.log(“Google”);
}

// Invoke the printGoogle() function
printGoogle();

を呼び出します

この関数の出力はGoogleになります 。 printGoogle() 関数は、呼び出されたときに結果を返します。この場合は最後の行です。

これで、印刷コードが関数内にあり、printGoogle()を呼び出すことで、何度でも実行できます。 関数。

JavaScript関数式

関数を宣言する別の方法は、関数式を作成することです。これを行うには、変数に関数を割り当てます。

上記と同じ例を使用してみましょう。関数を単独で宣言するのではなく、代わりに変数に割り当てることができます。次に例を示します。

const google = function printGoogle() {
	console.log(“Google”);
}

この式を呼び出すために、google()を追加します 式を実行する場所へのコード行。

関数パラメーター

関数を宣言する2つの方法がわかったので、プログラミングのこの機能をカスタマイズする方法を探ります。上記のコードでは、Googleを出力する関数を作成しました。 コンソールに。

Facebookなどの別の名前を印刷するには、コードを変更する必要があります。当社のウェブサイトにアクセスしたユーザーに、お気に入りの会社の名前を入力してコンソールに印刷してもらいたい場合、当社の機能は機能しません。

したがって、パラメータを利用する必要があります。 nameを追加すると JS関数のパラメーターを指定すると、関数を介して任意の名前をコンソールに出力できます。次に例を示します。

function printCompany(name) {
	console.log(`My favorite company is ${name}!`);
}

関数の名前はprintCompany()です。 パラメータはnameと呼ばれます 。その後、JavaScript関数内でパラメーターを呼び出すことができます。上記の例では、nameパラメーターを使用して、console.log()に出力される内容を変更します。 コード行。

しかし、私たちはまだ私たちの名前を定義していません。パラメータを定義するには、JavaScript関数を呼び出すときに値を割り当てる必要があります。お気に入りの会社がSnapchatだとしましょう。関数を呼び出し、会社名を引数として配置します 関数呼び出し内。

例を次に示します：

// Call printCompany() function with “Snapchat” as “name”
printCompany(“Snapchat”);

このコードを実行すると、次のように出力されます。

My favorite company is Snapchat!

この例では、printCompany()を使用して関数を呼び出します。 、次に括弧内に名前を割り当てます。これで、関数を異なる名前で複数回再利用できるようになりました。

必要な数のパラメータを使用でき、それらを順番に参照することに注意してください。以下に、これを実際に示す例を使用します。

戻り値

これまでの例では、値を返していません。代わりに、コンソールにテキストを印刷しました。ただし、関数を使用すると、処理するパラメータをいくつか指定して、returnの内容に基づいて値を返すことができます。 声明。

2つの数値を加算して合計を求める関数の例を次に示します。

function addNumbers(first, second) {
	return first + second;
}

addNumbers(1, 2);

このプログラムでは、関数が呼び出され、2つの数値が関数を通過します。この関数を実行すると（上記の例の最後の行で）、答えは3になります。 その見返りに。パラメータのリストはコンマで区切られています。

プログラムは1と2を追加し、パラメータ名はfirst およびsecond そしてそれらをコードに戻しました。これらの値を確認したい場合は、console.log()を追加できます。 addNumbers(1, 2)を呼び出す行の周りで関数 。

矢印関数

ECMAScript 6の時点で、矢印関数と呼ばれる関数を定義するためのより簡潔な方法があります。これらは、次の式を使用して表されます。=> 。

これらの関数は、関数式の一種です。例を使用して、実際の矢印関数を紹介しましょう。

const addNumbers = (first, second) => {
	return first + second;
}

addNumbers(10, 15);

functionを書く代わりに 、矢印記号を使用して、関数を宣言していることを示すことができます。矢印関数と通常の関数には微妙な違いがいくつかありますが、ほとんどのユースケースではそれらについて知る必要はありません。

1つの変数のみを操作する場合は、変数を括弧で囲む必要はありません。また、変数を使用していない場合は、空の括弧のセットを含める必要があります() 変数が宣言される場所。

結論

関数の基本について知っておく必要があるのはこれだけです。このチュートリアルでは、関数宣言、関数式、関数からの戻り値、および矢印関数について説明しました。

全体として、関数は、アクションを実行して変数を返すことができるコードのブロックです。関数は、プログラム全体で何度も実行する必要のある複数行のコードがある場合に役立ちます。

使用する必要があるたびにこれらの複数行のコードを記述する代わりに、それらを関数に追加し、コードを実行する必要があるときに関数を呼び出し、使用する必要のある値を関数に渡すことができます。

この記事の主なポイントは次のとおりです。

• 関数は、特定のコード行を実行するように設計されたサブプログラムです。
• 関数は、呼び出されたときにのみ実行されます。これを関数の呼び出しと呼びます。
• 値を関数に渡して、関数内で使用できます。
• 関数は値を返すことができます。