[JavaScript] 화살표 함수

매개변수 목록 괄호 생략하기

화살표 함수가 매개변수를 하나만 사용할 경우, 묶는 괄호를 생략할 수 있다.

(userName) => { ... }

가 아니라

userName => { ... }

 

매개변수가 없는 경우에는, 괄호를 생략하면 안된다.

() => { ... }

 

매개변수가 두 개 이상인 경우에도 괄호를 생략하면 안된다.

userName, userAge => { ... }

가 아니라

(userNAme, userAge) => { ... }

 

 

 

함수 본문 중괄호 생략하기

화살표 함수에 반환문 외에 다른 로직이 없는 경우, return 키워드와 중괄호를 생략할 수 있다.

number => {
	return number * 3;
}

가 아니라

number => number * 3;

라고 쓸 수 있다.


// 아래와 같이 쓰면 오류 발생
number => return number * 3;                // 오류 : 이 경우는 return 생략해야 함
number => if (number === 2 ) { return 5 };  // 오류 : 이 경우 if 문은 반환딜 수 없으므로 오류 발생

 

 

특수한 경우: 객체만 반환하는 경우

다음과 같이 객체를 반환하는 코드는 유효하지 않음.

number => { age: number }

 

자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 래퍼로 취급한다.

객체를 생성하고 반환해야 한다고 자바스크립트에 알려주려고 하면 다음과 같이 코드를 수정해야 한다.

number => {{ age: number }};