[JS] 화살표 함수 구문

💡 화살표 함수 구문

익명 함수

export default function(){
	console.log("Hello");
}

위와 같이 함수를 모듈화해서 default로 내보낼 수 있다.

화살표 함수는 function 키워드를 작성하지 않는다.

export default (userName, message) =>{
	return userName + message;
}

하나의 매개변수만 사용하는 경우 묶는 괄호를 생략할 수 있다.

(uerName) => { return `Hello ${userName}`; }
userName => { return `Hello ${userName}`; }

• 하지만 함수에 매개변수가 없는 경우에는 괄호를 생략해서는 안된다.
• 함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안된다.
  () => {...};

함수 본문 중괄호 생략하기

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

(number) => { return number * 3; }  // 생략 하지 않고 작성한 구문
number => number * 3; 	     // return 키워드와 중괄호 생략
number => return number * 3; // 이 경우 return 키워드는 생략되어야 하므로 오류 발생
number => if(number === 2) { return 5; };	// 이 경우 if문은 반환될 수 없으므로 오류 발생

만약 위와 같은 대안으로 자바스크립트 객체를 반환하려고 한다면 유효하지 않은 코드가 나올 수 있다.

number => { age : number };

이는 객체를 반환하려고할 때 객체 리터럴이 중괄호 {} 안에 바로 반환되는 값으로 해석되기 때문에, 반환을 명시적으로 하려면 return키워드를 사용해야 한다.
여기서 발생하는 문제를 해결하려면 두가지 방법이 있다.

1. return키워드를 사용

	const getAge = (numger) =>{
     	return { age: number }; 
    };

console.log(getAge(29));	// { age: 29 }

위 방법은 return 키워드를 명시적으로 사용하는 방법이다.

2. 객체를 반환하는 구문을 한 줄로 쓰고싶다면 객체 리터럴 앞에 괄호()를 추가

const getAge = (number) => ({ age : number});
// const getAge = number => ({ age : number }); 

console.log(getAge(29));	// { age : 29 }

위 방법은 객체 리터럴을 반환할 때 중괄호를 괄호로 감싸서 한 줄로 반환할 수 있게 하는 방법이다.