JavaScriptの関数

1.関数とは？

関数は、操作を実行するために必要な文(statement)のセットを定義したコードブロックで、名前とパラメータがあり、必要に応じて呼び出すことができ、コードブロック内で文を一括して実行することができ、再利用に役立ちます.

2.JavaScriptの関数

JavaScriptの関数は1レベルのオブジェクトとして扱われ、他の値のように使用できます.変数、オブジェクト、または配列を格納したり、他の関数に渡して引数として使用したり、関数の戻り値として使用したりできます.
一級オブジェクトとしてのJavaScript関数の特徴
1.無名の文字で表現できる
2.変数や資料(オブジェクト、配列など)に格納可能
3.関数としてのパラメータ伝達
4.戻り値が使用可能
また、JavaScriptの関数は通常、戻り文を省略できますが、内部ではundefinedが返されます.

3.関数の定義

JavaScriptでは、関数には、一般的な関数、矢印関数、コンストラクション関数、メソッドなど、多くの種類があります.関数を定義する方法には、関数宣言、関数式、コンストラクション関数が含まれます.

//1. 함수선언문
function fnc(){}
//2. 메서드 : 일종의 객체의 프로퍼티의 value가 함수인 경우
const obj = {
	prop: function(){}
}
//3. 생성자함수: 특정 인스턴스를 만들어낼 수 있는 함수
function MyObj(){}
//4. 화살표함수 : ES6부터 추가된 함수
const arrFnc = ()=>{}

1.関数宣言

関数宣言は、関数定義子のみが存在し、個別の割り当てコマンドがないことを示します.したがって、関数名を定義する必要があります.
ただし、関数宣言文では、コードが長くなり、同じ名前を繰り返し記述し、関数を呼び出すと予知できない結果値をもたらす繰り返し宣言とエスケープの問題があります.

function func(parma1, parma2) {
 	return param1 + param2 
}

function func() {
 	return 'param1 + param2';
}

func() //같은 이름의 함수가 있는 경우 마지막에 작성된 함수가 호출됩니다.

2.関数式

関数式は、関数の1レベルのオブジェクトプロパティを使用して関数を定義し、変数に割り当てる方法です.変数は管理されるため、関数名が(名前付き)または(匿名)でなくても管理されます.ただし、通常は関数名を省略します.
定義された関数を個別の変数に割り当てることで、関数宣言に重複宣言やエスケープの問題が発生することを回避できます.

// 익명 함수 표현식
const func1 = function(){
	return 'func';
}

//기명 함수 표현식
const func2 = function func() {
 	return 'func';
}

func()

変数は、関数名ではなく指定された関数を示す参照値を格納します.したがって、関数を呼び出すときは、関数名ではなく変数名を使用する必要があります.

変数を使用して関数を呼び出さず、シンボル関数の関数名を使用して関数を呼び出すとエラーが発生します.

3.Functionコンストラクタ

Function作成者関数はFunctionです.prototype.コンストラクション関数Propertyからアクセスできます.ただし、通常はFunctionジェネレータ関数を使用して関数を作成しません.

new Function(arg1, arg2, ... argN, functionBody)

var square = new Function('number', 'return number * number');
console.log(square(10)); // 100

4.矢印関数

ES 6に追加された矢印関数は、より軽く、より簡単な利点を有する.しかし、操作方式においては、従来の関数とは大きく異なる(パラメータ、thisなど)
そのため、この点を考慮する必要があります.

ArrowFunction 
 () => {}
가장큰 차이는 축약형으로 줄일 수 있다는 점이다.
단, 만약 return 키워드 앞에 특정 로직이 들어 있다면 축약이 어렵다

ex) 
const doubleArrow = (x) => {
  console.log(123)
  return x*2
}

축약은 실행문을 제외하고 {}와 return을 생략해줄 수 있다.
const dobuleArrow = (x) => x*2

또한 매개변수가 1개인 경우에는 ()도 생략을 해줄 수 있다.
const dobuleArrow = x => x*2

단, 실행문 부분을 {}로 감싸게 되면 실행문이 반환될 수 없다.
//const doubluArrow = x => { x*2 } // 잘못된 부분
반환을 하기 위해서는 return 키워드를 반드시 써야한다.

参考資料
poiemaweb