익명 함수, 화살표 함수, 콜백 함수

1.   익명 함수 _ Anonymous Function

함수 자체를 다른 변수에 참조시킬 목적으로 함수를 정의할 때이름 없이 정의하는 함수이다.
함수 정의 형태가 대입문이기 때문에 중괄호 뒤에는 세미콜론( ; ) 작성
ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ_ 기입하지 않아도 오류가 나지는 않지만 최대한 작성할 것

const 변수 = function (ﾠ・・・ﾠ) {
ﾠﾠﾠﾠ・・・
} ;
원래는 function 뒤에 함수 이름을 작성하지만, 익명 함수에서는 이름이 없다.

★ 선언하는 변수에 함수를 대입 ( 익명 함수 )
★ 파라미터에 함수를 대입 ( 콜백 함수 )
★ 선언하는 변수에 함수를 대입 ( 클로저 )

 

 

2.   화살표 함수 _  Arrow Function

익명 함수 문법을 축약하여 사용하는 함수 형태이다.

< 익명 함수 >		< 화살표 함수 >
const 변수 = function( 파라미터 n ・・・ ) { ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ・・・ 처리 로직 ・・・ } ;	=	const 변수 = ( 파라미터 n ・・・ ) => { ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ・・・ 처리 로직 ・・・ } ;

 

function 키워드가 생략되고, 파라미터를 전달하기 위한 소괄호와 블록을 구성하기 위한 중괄호 사이에
" => " 기호가 추가된다.

 

1. 만약 파라미터가 하나일 경우 파라미터를 감싸는 소괄호도 생략 가능
   두 개 이상인 경우에는 생략 불가
   ﾠﾠﾠﾠconst 변수 = ( 파라미터 ) => {
   ﾠﾠﾠﾠ・・・ 처리 로직 ・・・
   ﾠﾠﾠﾠ}
   
   
2. 처리 로직이 한 줄인 경우(return 구문이 한 줄)에는 return과 중괄호까지 생략 가능
   ﾠﾠﾠﾠconst 변수 = 파라미터 => { 리턴 값
   ﾠﾠﾠﾠ・・・ 처리 로직 ・・・
   ﾠﾠﾠﾠ}

화살표 함수 (파라미터가 하나인 경우 / 처리 로직이 한 줄인 경우)

화살표 함수 호출에 JSON 구조분해 활용

 

 

 

3.   콜백 함수

파라미터로 전달되기 위해 사용하는 함수이다.

어떤 함수가 동작하는 과정 중 일부는 다르게 처리되어야 할 경우에 그 부분을 함수 형태로 묶어 파라미터로 설정

 

ﾠﾠﾠ1. 직접 함수 정의

콜백 함수 직접 정의

ﾠﾠﾠ2. 익명 함수 형태로 전달

 

콜백 함수 익명 함수 형태로 전달

 

ﾠﾠﾠ3. 익명 함수를 화살표 함수로 전달

콜백 함수 화살표 함수 형태로 전달 (왼쪽 - 처리로직이 여러줄 일 때 / 오른쪽 - 처리로직이 한 줄 일 때)