화살표 함수

손성오·2024년 2월 15일

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

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

(userName) => { ... }

을 다음과 같이 사용 가능하다

userName => { ... }

단 이때 매개 변수가 없을 경우에는 괄호를 생략해서는 안된다

() => { ... } 

이와 같이 작성해야 한다

또한 매개변수가 두개 이상일 경우에도 괄호를 생략해서는 안된다

userName,userAge => { ... } 이와 같이 사용해서는 안된다
(userName,userAge) => { ... } 옳은 방식

2. 함수 본문 중괄호 생략하기

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

number => {   return number * 3;} 
number => number * 3 
다음과 같이 사용 가능하다
const index = hobbies.findIndex((el) => {
return el === "d"
});
const index = hobbies.findIndex((el) => el === "d");

3.객체만 반환 하는 경우

2번에서 사용한 방법으로 객체를 반환 하려는 경우 문제가 발생한다

number => { age: number }; 잘못된 방법
number => ({ age: number });

자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 wrapper로 취급하기 때문에 첫번째 코드는 유효하지 않다.

0개의 댓글