前書き
*関数*は、アクションを実行するか値を返すコードのブロックです。 関数は、再利用可能なプログラマーによって定義されたカスタムコードであるため、プログラムをよりモジュール化して効率的にすることができます。
このチュートリアルでは、関数を定義し、関数を呼び出し、JavaScriptで関数パラメーターを使用するいくつかの方法を学習します。
関数を定義する
関数は、 `+ function +`キーワードで定義または宣言されます。 JavaScriptの関数の構文は次のとおりです。
function nameOfFunction() {
// Code to be executed
}宣言は `+ function +`キーワードで始まり、その後に関数の名前が続きます。 関数名は変数と同じ規則に従います-文字、数字、アンダースコア、ドル記号を含めることができ、https：//www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure- in-javascript＃identifiers [キャメルケース]。 名前の後にはオプションのパラメーターに使用できる括弧のセットが続きます。 関数のコードは、https：//www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript [for statement]またはhttps：/のように、中括弧で囲まれています/www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[if statement]。
最初の例では、*関数宣言*を作成して、挨拶文をコンソールに出力します。
// Initialize greeting function
function greet() {
console.log("Hello, World!");
}ここには、 `+ Hello、World！`を ` greet（）+`関数内に含まれるコンソールに出力するコードがあります。 ただし、*呼び出し*するか、関数を呼び出すまで、何も起こらず、コードは実行されません。 関数の名前に続けて括弧を書くことで、関数を呼び出すことができます。
// Invoke the function
greet();次に、それらをまとめて、関数を定義して呼び出します。
greet.js
// Initialize greeting function
function greet() {
console.log("Hello, World!");
}
// Invoke the function
greet();`+ greet（）; `を呼び出すと、関数が実行され、プログラムの出力として ` Hello、World！+`を受け取ります。
OutputHello, World!これで、 `+ greet（）+`コードが関数に含まれ、何度でも再利用できます。
パラメータを使用して、コードをより動的にすることができます。
関数パラメーター
+ greet.js`ファイルで、コンソールに + Hello、World`を出力する基本的な関数を作成しました。 パラメーターを使用して、コードをより柔軟にする追加機能を追加できます。 *パラメータ*は、名前として関数に渡され、ローカル変数として動作する入力です。
ユーザーがアプリケーションにログインすると、「Hello、World！」と言うだけでなく、プログラムが名前で挨拶するようにしたい場合があります。
関数に「+ name +」と呼ばれるパラメータを追加して、挨拶される人の名前を表します。
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}関数の名前は `+ greet `で、括弧内に単一のパラメーターがあります。 パラメーターの名前は、変数の名前付けと同じ規則に従います。 関数の内部では、 ` Hello、World +`で構成される静的な文字列の代わりに、https：//www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript#があります変数を含む文字列とテンプレートリテラル[テンプレートリテラル]パラメータを含む文字列。現在はローカル変数として動作しています。
「+ name 」パラメータがどこにも定義されていないことに気付くでしょう。 関数を呼び出すときに値を割り当てます。 ユーザーの名前がSammyであると仮定して、関数を呼び出し、ユーザー名を* argument *として配置します。 引数は、関数に渡される実際の値です。この場合、文字列 `" Sammy "+`です。
// Invoke greet function with "Sammy" as the argument
greet("Sammy");`" Sammy "`の値は、 `+ name `パラメータを介して関数に渡されています。 これで、関数全体で ` name `が使用されるたびに、 `" Sammy "+`の値を表します。 これがコード全体です。
greetSammy.js
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Invoke greet function with "Sammy" as the argument
greet("Sammy");上記のプログラムを実行すると、次の出力が表示されます。
OutputHello, Sammy!関数を再利用する方法の例があります。 実際の例では、関数は名前を引数値として直接指定する代わりに、データベースからユーザー名を取得します。
パラメータに加えて、変数は関数内で宣言できます。 これらの変数は*ローカル変数*と呼ばれ、独自の機能ブロックの_scope_内にのみ存在します。 変数スコープは変数のアクセシビリティを決定します。関数の内部で定義されている変数は、関数の外部からはアクセスできませんが、プログラム全体でその関数が使用されている限り何度でも使用できます。
戻り値
1つの関数で複数のパラメーターを使用できます。 関数に複数の値を渡し、値を返すことができます。 `+ x `と ` y +`で表される2つの値の合計を見つける関数を作成します。
sum.js
// Initialize add function
function add(x, y) {
return x + y;
}
// Invoke function to find the sum
add(9, 7);上記のプログラムでは、パラメーター「+ x 」と「 y 」で関数を定義し、「 9+」と「7」の値を関数に渡しました。 プログラムを実行すると、これらの数値の合計が出力として受信されます。
Output16この場合、 `+ 9 `と ` 7 `が ` sum（）`関数に渡されると、プログラムは ` 16 +`を返しました。
`+ return `キーワードが使用されると、関数は実行を停止し、式の値が返されます。 この場合、ブラウザはコンソールに値を表示しますが、コンソールに出力するために ` console.log（）+`を使用するのと同じではありません。 関数を呼び出すと、関数が呼び出された場所に正確に値が出力されます。 この値はすぐに使用するか、変数に入れることができます。
関数式
最後のセクションでは、関数宣言を使用して2つの数値の合計を取得し、その値を返しました。 変数に関数を割り当てることで、* https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function [関数式] *を作成することもできます。
同じ「+ add 」関数の例を使用して、返された値を変数に直接適用できます。この場合は「 sum +」です。
functionExpression.js
// Assign add function to sum constant
const sum = function add(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(20, 5);Output25これで、 `+ sum `定数は関数になりました。 この式を名前のない関数である*匿名関数*に変えることで、より簡潔にすることができます。 現在、関数の名前は ` add +`ですが、関数式では関数に名前を付ける必要はなく、名前は通常省略されます。
anonymousExpression.js
// Assign function to sum constant
const sum = function(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(100, 3);Output103この例では、関数の名前（ + add +）を削除し、匿名関数に変更しました。 名前付き関数式はデバッグを支援するために使用できますが、通常は省略されます。
矢印関数
これまで、 + function`キーワードを使用して関数を定義する方法を説明しました。 ただし、https：//www.ecma-international.org/ecma-262/6.0/ [ECMAScript 6]の時点で* arrow function expression *として知られる関数を定義する、より新しい、より簡潔な方法があります。 よく知られているように、矢印関数は等号とそれに続くより大きな記号で表されます： `+ ⇒ +。
矢印関数は常に匿名関数であり、関数式の一種です。 2つの数値の積を見つけるための基本的な例を作成できます。
arrow Function.js
// Define multiply function
const multiply = (x, y) => {
return x * y;
}
// Invoke function to find product
multiply(30, 4);Output120キーワード + function`を書く代わりに、 + ⇒ + `矢印を使用して関数を示します。 それ以外の場合、正規の関数式と同様に機能しますが、https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions [矢印関数Mozilla Developer Network]。
パラメーターが1つのみの場合は、括弧を除外できます。 この例では、2つの数値を引数として渡す必要がある「+ x +」を2乗しています。 括弧は省略されています。
// Define square function
const square = x => {
return x * x;
}
// Invoke function to find product
square(8);Output64`+ return `ステートメントのみで構成されるこれらの特定の例では、矢印関数により構文をさらに減らすことができます。 関数が1行のみの ` return `の場合、以下の例に示すように、中括弧と ` return +`ステートメントの両方を省略できます。
// Define square function
const square = x => x * x;
// Invoke function to find product
square(10);Output100これら3種類の構文はすべて同じ出力になります。 一般的に、独自の機能をどのように構成するかを決定するのは、好みや会社のコーディング標準の問題です。
結論
このチュートリアルでは、関数宣言と関数式、関数から値を返す、関数値を変数に割り当てる、ES6矢印関数について説明しました。
関数は、値を返すかアクションを実行するコードのブロックであり、プログラムをスケーラブルかつモジュール式にします。