JavaScript-関数宣言文と関数式、関数エスケープと変数エスケープ

21735 ワード
てつうけ js 勉強する deep dive テキストリンク

n.関数


関数宣言文と関数式、関数シース、変数シースの違いを理解します.

関数とは?


関数は、入力値を加工して結果を返すコードブロックです.

関数を使用する理由

  • は、重複作業が同じコードで複数回書き込まれる可能性のあるエラーを防止し、コードの信頼性を向上させることができる.
    • let price = 0  // 물품 금액
let paidAmount = 0 // 지불한 금액
let change = 0   // 거스름돈 

price = 4800 
paidAmount = 10000
change = paidAmount - price // 5200 

price = 5500
paidAmount = 6000
change = paidAmount - price // 500

price = 400
paidAmount = 1000 
change = price - paidAmount // -600?? 실수로 반대로 빼서 완전히 잘못된 결과 반환
  • 特定のタスクを関数に変換して、関数を再使用します.
    // 위의 반복되는 코드를 하나의 함수로 만들면서 실수 방지 가능
const changeCalculator = function(paidAmount, price) {
  return paidAmount - price;
}; 

let change = 0;

// 반복되는 동작을 하나의 함수로 만들어서 재사용
change = changeCalculator(10000, 4800); // 5200
change = changeCalculator(6000, 5500); // 500
change = changeCalculator(1000, 400); // 600
  • 反復タスクを変更する必要がある場合は、1つの関数を変更するだけでメンテナンスの利便性が向上します.
    • // 오늘 하루만 구매한 가격에 50% 할인 이벤트!!!!
const changeCalculator = function (paidAmount, price) {
  return paidAmount - (price * 0.5);
}; // 함수에서만 수정해주면서 아래 코드는 건드리지 않아도 됨.

let change = 0;

change = changeCalculator(10000, 4800); // 7600
change = changeCalculator(6000, 5500); // 3250
change = changeCalculator(1000, 400); // 800
  • 識別子に割り当てられた名前を表示するだけで、関数の役割がわかり、コードの可読性が向上します.
    • const changeCalculator = function (..., ...) {
 ...
 ...
}; // 아~ 거스름돈을 계산해주는 함수구나.

    関数の構成



    JavaScriptで関数を使用するには、上図のように2つのステップが必要です.
    定義
  • 関数
    • 呼び出し
  • 関数
    • まず、関数の定義を詳しく説明しましょう.

    関数の定義


    関数を使用するには、使用する関数を事前に定義する必要があります.関数を定義する方法は4つあります.
  • 関数宣言
    • function add(x, y) {
  return x + y;
}
  • 関数式
    • const add = function (x, y) {
  return x + y;
};
  • 機能生成器関数
    • const add = new Function('x', 'y', 'return x + y');
  • 矢印関数
    • const add = (x, y) => x + y;
    4つのすべての関数を定義する方法ですが、それぞれの方法にはいくつかの違いがあります.
    関数宣言文と関数式の違いを理解します.

    関数式vs関数宣言


    JavaScriptの関数はオブジェクトです.オブジェクト文字でオブジェクトを作成できるように、関数文字で関数を作成することもできます.関数文字はfunction 함수이름(매개변수) {함수 몸체}として表現される.
    関数宣言文と関数式は、関数の文字形式と同じです.では、関数宣言文と関数式を区別する方法について説明します.
    // 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
const add = function add(x, y) {
  return x + y;
}
    どちらも関数文字(function add(x, y) {...})ですがjavascriptはコンテキストによって宣言か式かを判断します.
  • 関数式
    変数を宣言する場合は、変数に値が必要です.関数は1レベルのオブジェクトであり、値のように変数に割り当てることができるため、関数テキストで生成された関数オブジェクトを変数に割り当てると、関数式として解析されます.関数式の場合は、関数名を省略できます.通常、関数式では関数名を省略します.関数を呼び出すと、関数名で呼び出されるのではなく、関数オブジェクトを指す識別子である関数名で呼び出されると考えられる場合があります.
    • const add1 = function sum(x, y) {
  return x + y;
};

//함수이름을 생략한 함수 표현식
const add2 = function (x, y) {
  return x + y;
};

console.log(add1(1, 2)); // 3
console.log(sum(1, 2)); // ReferenceError: sum is not defined

console.log(add2(1, 2)); // 3
  • 関数宣言
    関数宣言はfunctionキーワードで始まり、関数名を省略することはできません.JavaScriptを関数宣言として解釈すると、関数名を使用して識別子が暗黙的に生成されます.したがって、関数を宣言したり、関数の外部から呼び出したりすることができます.
    • // 함수 선언문
function add(x, y) {
  return x + y;
}
// 자바스크립트가 암묵적으로 식별자를 생성했기 때문에 함수 외부에서 호출가능
console.log(add(1, 2)); // 3
    もう一度言いますが、関数呼び出しは関数名ではなく、関数オブジェクトを指す識別子で呼び出されます.

    関数の作成ポイントとオフセット

    console.log(add1(1, 2)); // 3
console.log(add2(1, 2)); // TypeError: add2 is not a function

function add1(x, y) {
  return x + y;
}
var add2 = function (x, y) {
  return x + y;
};
    上記のコードを実行すると、関数宣言の前に関数宣言として定義された関数を呼び出すことができ、関数宣言の前に関数式として定義された関数を呼び出すことはできません.
    この違いは、関数の作成時間が異なるためです.
    関数作成ポイントの違いを理解する前に、転送に関する情報について説明します.
    console.log(add1(1, 2)); // 3
console.log(str); // undefined

// 함수 선언문
function add1(x, y) {
  return x + y;
}
// 변수 선언문
var str = '호호'
    関数宣言文と変数宣言文を定義する前に、識別子が読み込まれていることがわかります.これは、実行時までに転送が発生したためです.
  • 関数宣言
    実行する前にJavaScriptエンジンで実行し、識別子を生成して関数オブジェクトに初期化します.
  • 変数宣言
    実行時の前にjavascriptエンジンによって最初に実行され、識別子が生成され、undefinedに初期化されます.
    • 最終的に、両方の宣言は実行時まで識別子を初期化するので、宣言文で関数と変数を定義する前に識別子を読み込むことができます.
    このように,宣言がコードの先端に引き上げられるように,動作のJavaScript固有の特徴をHostingと呼ぶ.
    関数の作成時間が異なる理由に戻ると、
    console.log(add1(1, 2)); // 3
console.log(add2(1, 2)); // TypeError: add2 is not a function

function add1(x, y) {
  return x + y;
}
var add2 = function (x, y) {
  return x + y;
};
    関数宣言は、実行時より前に関数オブジェクトとして初期化されており、関数定義の前に呼び出すことができ、関数式は実行時より前にundefinedに初期化されるため、add2 is not a functionというエラーが発生します.最終的に、関数式は、実行時にvar add2 = function ...の位置に達したときに関数を定義するため、関数宣言文と関数作成時間に差があります.
    [伯俊1450]退社10071]
    学習反応基礎#17 Springboot junitテスト3