関数はjavascriptの中で最も重要な核心概念であり、関数はscope、実行コンテキスト、モジュール、構造関数を通じてオブジェクトを作成する方法、this、prototype、モジュール化などに関連している.
プログラミングにおける関数とは,一連のプロセスを文で実現し,コードブロックを実行ユニットに囲んで定義することである.ここではJavaScriptの関数について説明します.

✨ Function

Javascriptでは、これと同様に、類似した操作を実行するコードを複数回呼び出すためにバンドルするために関数が使用されます.
すなわち,再利用可能領域とパッケージング情報領域を定義するための構文である.
一般に입력 👉 함수 👉 return 👉 출력の形で構成される.

特長

関数には、関数キーがあり、オブジェクトです.

関数は、定義/作成/出力することができる.

関数を呼び出す方法は、パラメータの宣言および伝達であってもよい.

使用方法

関数宣言式

オブジェクトまたはテキスト(=関数式)

の新しい演算子を使用する匿名関数と動的関数の選択

反復関数宣言

functionキーワードを使用して、関数の名前とパラメータを宣言できます.

function 함수명( 매개변수 ){
	// 구현 로직
}

👇 サンプルコードを表示します.

let age = 12;
function printPerson(){
  let name = "seohee";
  console.log(name);
  console.log(age);
}
printPerson();			// "seohee"
						// 12

関数宣言式で表されるprintName()関数には、関数内の領域変数nameが存在します.nameは함수 안에서만 접근であってもよい.ただし、ageは関数外部変数(グローバル変数)であり、関数内部で外部変数にアクセスおよび変更することができる.

🤔 同じ名前の変数が関数の外部/内部に存在する場合、どうなりますか?

let age = 12;
function printPerson(){
  let age = 24;
  let name = "seohee";
  console.log(name , age);
}
printPerson();			// seohee , 24

外部に宣言された変数は、内部領域変数によって隠された結果を決定することができる.
したがって,外部変数の使用はできるだけ避けることが望ましい.

👇 したがって、領域変数を変更するために必要な値を渡す場合は、パラメータを使用する必要があります。

function printPerson(age){
  let name = "seohee";
  console.log(name , age);
}
printPerson(24);			// seohee , 24

また、関数を呼び出すときに特定の値を返すこともできます.

function getAge(age){
  return age;
}
console.log(getAge(24));			// 24

return文に遭遇すると、関数の実行は終了します.

関数式まで

関数テキストとも呼ばれ、式の一部として関数を生成し、変数として格納することができます.

let 함수명 = function( ){
	// 구현 로직
}

関数式が変数に格納されている場合は、関数のように変数を使用できます.変数に格納されている関数は、関数名を必要とせず、変数名で呼び出されます.
👇 サンプルコードを表示します.

let sum = function(a,b){
  return a + b;
};
console.log(sum(1,2));		// 3

関数式は変数に格納されるため、式の末尾に;セミコロンを付ける必要があります.
既存-関数宣言/関数式エスケープでは、関数宣言文と関数式の違いについて説明します.参照してください.

ピボット矢印関数

矢印関数はES 6構文です.functionキーワードを使用して関数を作成するよりも、矢印関数は常に匿名であることを簡単に表現できます.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략
// 함수 몸체 지정 방법
x => { return x * x }  
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략, 암묵적으로 return
() => { return { a: 1 }; }
() => ({ a: 1 })  // 객체 반환시 소괄호를 사용한다.
() => {           
  const x = 10;
  return x * x;
};

👇 関数式によって作成された和()を矢印関数で置き換えます.

let sum =(a,b) => { return a + b; };

sum(1,3);		// 4

JavaScriptでは、矢印関数をコールバック関数として使用できます.

// ES6
let numbers = [1, 4, 9];
let oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 9]

この場合,一般的な関数式に比べて式が簡潔であることが分かる.

∧functionキーワードで生成される一般的な関数との違いは、this

JavaScriptでは、함수 호출 방식によってthis에 바인딩할 객체が動的に決定される.すなわち、関数を宣言するとき、バインドするオブジェクトは静的に決定されるのではなく、関数を呼び出すときにどのように呼び出されるかであり、この関数にバインドするオブジェクトが동적으로 생성であることが決定される.
関数の内部関数で、コールバック関数に使用されるthisはwindowです.

let person = {
	  name: "seohee",
  	getName: function () {
      	console.log(this) // 가.
		  setTimeout(function () {
			console.log(this) // 나.
			console.log(this.name); // 다.
		}, 1000);
    }
}

person.getName();
// 가. {name: 'seohee', getName: ƒ}
// 나. window
// 다. undefined -----> undefined인 이유는 window에 name이 없다.

一般関数から適切なthisを渡すこともできます.

// 함수안에 that 변수를 선언하기
let person = {
	  name: "seohee",
  	getName: function () {
      	let that = this;
		  setTimeout(function () {
			console.log(that.name); 
		}, 1000);
    }
}

person.getName();
// 1초 후에 ... "seohee"

bindを使用して、必要に応じてコールバック関数のバインドを決定できます.

// bind 사용하기
let person = {
	  name: "seohee",
  	getName: function () {
		  setTimeout(function () {
			console.log(this.name); 
		}.bind(this), 1000); // bind 사용
    }
}
person.getName();		
// 1초 후에 ... "seohee"

矢印関数を使用します.

let person = {
	  name: "seohee",
  	getName: function () {
		  setTimeout(() => {
			console.log(this.name); 
		}, 1000); 
    }
}
person.getName();		
// 1초 후에 ... "seohee"

「seohee」はcloser関数のように外部関数にアクセスし、thisを使用するため、正常に出力されます.
💜 JavaScript 💜 : thisを参照してください.

🌈 n/a.結論

関数を宣言する必要がある場合は、関数が宣言される前に関数を使用することもできます.そのため、関数宣言方式を使用することが望ましいです.ただし、関数宣言文が適切でない場合は、関数式を使用します.矢印関数は、本明細書に1行しか含まれていない関数を記述する場合に便利です.状況に応じて関数を書くことが重要です.
📚 学習の参考資料📚

2.15-関数

2.16-関数式

2.17-矢印関数デフォルト

関数式vs関数宣言式

6.3 Arrow関数矢印関数