Arrow function =>

여기 한 함수가 있다.

const ten = function (x) {
    return x + 10
}
console.log(ten(5)) // 15

입력받은 수에 10을 더해 반환하는 함수이다.

 

그런데 이 함수는 이렇게 나타내기도 한다.

 

const tenArrow = (x) => {
    return x + 10
}
console.log(tenArrow(5)) //15

이를 화살표함수 (Arrow function)이라고 한다.

이 때, 함수 안에서 return 전에 오는 코드가 없다면 더욱 축약한 형태로도 사용할 수 있다.

 

const tenArrow = (x) => x + 10
 
console.log(tenArrow(5)) //15

더욱 축약된 상태의 코드

이 때, 위와 같이 매개변수가 1개 뿐이라면 매개변수를 감싸고 있는 괄호도 생략 가능하다

 

const tenArrow = x => x + 10
 
console.log(tenArrow(5)) //15

 

함수 내부에서 객체 데이터를 반환하고자 할 때에 중괄호 {} 로 바로 감싸서 사용하는 경우 화살표 함수의 블록으로 해석하게 되어 객체 데이터로 읽혀지지 않는다.

 

const tenArrow = x => {
    name: 'umilove98'
}
 

이럼 안된다... 

 

객체 데이터를 축약형으로 반환하고자 할 때에는 중괄호를 한 번 더 소괄호로 감싸주면 된다.

 

const tenArrow = x => ({
    name: 'umilove98'
})
 

 

기본적인 사용법을 알아보았고 더욱 자세한 내용은 더 공부한 후에 업데이트 예정