[JS] 화살표 함수 반환 규칙

목차

1. 개요

2. 비교

---

개요

프로젝트에서 화살표 함수를 헷갈렸던 경험을 정리하려고 합니다.

 

헷갈렸던 표현식은 아래와 같습니다.

type ResponsePageDto = {
    hasNext: boolean
    content: []
}

// fetchFn() 반환 타입 ResponsePageDto

1. () => (() => fetchFn())

2. () => (fetchFn())

3. () => fetchFn()

4. () => {fetchFn()}

비교

---

() => (() => fetchFn())

함수가 실행되면 fetchFn() 함수가 호출되는 것이 아니라 함수 자체(function 타입)를 반환하게 됩니다.

예상

타입 : ResponsePageDto

 

결과

타입 : function

 

그렇기 때문에 해당 화살표 함수가 반환한 결과에 .hasNext에 접근한다면 undefined오류가 발생하게 됩니다.

 

const result = () => (() => fetchFn());

console.log(result.hasNext); //undefined오류

---

() => (fetchFn())

표현식에서 괄호는 표현식을 감싸는 용도입니다. ㅠ되어있기 때문에 함수의 결과를 반환합니다.

그렇기 때문에 fetchFn함수가 호출되고 그 결과를 가져오게 됩니다.

 

예상

타입: ResponsePageDto

 

예상

타입: ResponsePageDto

 

const result = () => (fetchFn());

console.log(result.hasNext); //true

 

---

() => fetchFn()

표현식에서 함수만 정의한다면, 괄호로 감싸진것과 동일한 동작을 합니다. 마찬가지로 return이 생략되어있습니다.

그렇기 때문에 fetchFn함수가 호출되고 그 결과를 가져오게 됩니다.

 

예상

타입: ResponsePageDto

 

예상

타입: ResponsePageDto

 

const result = () => fetchFn();

console.log(result.hasNext); //true

---

() => {fetchFn()}

중괄호는 표현식을 함수 몸체를 표현합니다. 이 경우에는 return이 생략되어있지 않지 않습니다.

그렇기 때문에 fetchFn함수는 호출되기만하고 결과는 반환하지 않습니다.

 

예상

타입: ResponsePageDto

 

예상

타입: undefined

 

const result = () => {fetchFn()};

console.log(result.hasNext); //undefined오류

---

참고