JavaScript関数

関数は、呼び出されたり呼び出されたりするときに、プログラム(スクリプト)のどこかに再利用される特定のタスク(アクション)を保持するブロックスコープを含んでいます.
以下の関数の構文を参照ください.
文法

function functionName(para1, ..., paraN) {
    // statements
};

// calling, invoking, executing or running a function below
functionName(arg1, ..., argN); 

上記の構文は次のとおりです.
function head : functionキーワードを含みます.function , 関数名.functionName , と括弧内のパラメータ.(para1, ..., paraN) .
パラメータは値を保持する変数のようです.
関数本体のパラメータを必要としない関数頭は、括弧を空白にすることができます.

function functionName() {...}

2 .)関数本体:関数本体は、どんな括弧で括っても{} . 関数本体の1つ以上の変数、文、式が局所的にスコープされますvar 変数.
3 ) function caller :関数呼び出し元は再利用可能ですが、グローバルスコープになります.これは実際に呼び出し関数と呼ばれています.
上記の構文では、関数呼び出し元はfunctionName(arg1, ..., argN) . 関数呼び出しは呼び出し、実行、実行、または関数を呼び出します.
文法

functionCaller = functionName(arg1, ..., argN);
functionCaller;

引数はパラメータの値です.
以下の例を参照ください.

const currentAge = 3; // Global Variable

function getAge(birthYear, currentYear) {
    const currentAge = currentYear - birthYear; // Local variable
    console.log(currentAge);
};

const myAge = getAge(1993, 2050); // function caller in an expression
console.log(currentAge); // 3

myAge; // 57

/*
57
3
*/

括弧内のパラメータは既に関数本体で宣言されます.それは必要ないlet or const 関数本体内の変数を再定義するには.
上の例ではcurrentAge はローカル変数です;中myAge はグローバル変数です.

Local variables are in the function body (local scope), while global variables are outside the function body (global scope).

4つの関数を作成する方法があります.

関数宣言

関数コンストラクタ

関数式

匿名関数

矢印関数

関数宣言

関数を作成または宣言するには、以下の構文に従います.

function name(parameters) {
  // function body statements
}

以下の例を参照ください.

function getAge() {
  let birthYear = 1993; 
  let currentYear = 2050;
  const currentAge = currentYear - birthYear;
  console.log(currentAge);
};

const myAge = getAge(); // function caller in an expression

myAge;

上のコードスニペットは以下の通りです.

function getAge(birthYear, currentYear) {
  const currentAge = currentYear - birthYear;
  console.log(currentAge);
};

const myAge = getAge(1993, 2050);

myAge;

3つ以上のパラメータを含む関数では、RESTパラメータを使用することをお勧めします

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript - MDN.

関数宣言

現在のスコープの先頭に移動した宣言をhoistingと呼びます.
以下の例を参照ください.

// called function before declaration
console.log( getMessage('John', 2055, 2150) ); 

function getMessage(name, birthYear, currentYear) {
  const currentAge = currentYear - birthYear;
  console.log(`${name} is ${currentAge} years old.`);
};

下記はエンジンが上記のコードを解釈する方法を示します.

function getMessage(name, birthYear, currentYear) {
  const currentAge = currentYear - birthYear;
  console.log(`${name} is ${currentAge} years old.`);
};

console.log( getMessage('John', 2055, 2150) ); 

関数コンストラクタ

関数コンストラクタを使用して関数を作成します.
関数は、JavaScriptの第一のクラスオブジェクトであるため、以下の構文が可能です.

const calcArea = new Function ("length", "width", "return length * width");

const area = calcArea(4.3, 3.1);

console.log(`The area is ${area} m²`);

文法

function = new Function ([arg1, arg2, ...argN], functionBody);

The new キーワードは新しいインスタンスを生成するFunction オブジェクト.
上の例は以下の通りです.

function calcArea(length , width) {
  return length * width;
  // console.log('Statements after the return statement get ignored!')
}

const area = calcArea(4.3, 3.1);

console.log(`The area is ${area} m²`);

return文の後のステートメントは無視されます!The return 文関数から値を返します.
ファンクションコンストラクターはサポートしません.
コンソールに結果を出力する別の例を見ましょう.
以下の例を参照ください.

const greet = new Function('console.log("Good day!")');

greet(); // Good day!

The new Function は一般的ではありませんが、任意の文字列を関数に変換します.
下記を参照

const str = ... dynamically receive code from a server ...

const func = new Function(str);
func();

その他の機能

リターン

The return キーワードとconsole.log オブジェクトは、関数を呼び出すときに結果をコンソールに出力するために、関数本体で使用されます.
The return キーワードは、関数呼び出しからグローバルまたはローカルスコープに値を返すことができます.
以下の例を参照ください.

function calcSum(a=4, b=5) {
    const result = a + b;

    return result;
}

calcSum();
const sum = calcSum()

function showMessage() {
    console.log(`The sum is ${sum}.`); 
}

showMessage(); // The sum is 9.

If console.log() はreturn を返します.undefined 別の関数やローカルスコープで.
以下の例を参照ください.

function calcSum(a=4, b=5) {
    const result = a + b;

    console.log(result); // 9
}

calcSum();
const sum = calcSum()

function showMessage() {
    console.log(`The sum is ${sum}.`); 
}

showMessage(); // The sum is undefined.

上の例では、別の関数で関数を持つことができます.高次関数と呼ばれる.あとでもっとお使いになります.

デフォルトパラメータ

値は呼び出される前にパラメータに代入できます.パラメータのこれらの型は、パラメータを定義していない間違いを避けますundefined ).
以下の例を参照ください.

function getName(name='Bello') {
    return(`My name is ${name}.`);
}

console.log( getName() ); // My name is Bello.

既定のパラメーターが作成されると、関数に引数を渡す必要はありません.
呼び出し元の関数が引数(s)を含んでいる場合は、既定のパラメータ(s)をオーバーライドできます.

function getName(name='Bello') {
    return `My name is ${name}.`;
}

console.log( getName('John') ); // My name is John.

ECMAScript 2015の前にデフォルトパラメーターを作成する古いコードスタイルは以下の通りです.

function getName(name) {
    if (name === undefined) {
        name = 'Bello'
    }

    return `My name is ${name}.`
}

console.log( getName() ); // My name is Bello.

関数式を処理します.

Techstackメディア

1年と無料のSSL証明書のための無料のドメイン名でウェブサイトを得てください.

1クリックWordPressのインストールと24分の7のサポート.

3.95ドル/月から始まる.

30日のマネーバック保証.