async function 식별하기

 

📌 문제 상황

사내 프로젝트를 진행하다가 prop 으로 전달받은 함수의 반환값에 따라서

그 다음 호출되는 액션 핸들러를 제어하기 위한 경우가 생겼습니다.

아래는 이를 간략화한 예시 코드입니다.

 

interface ComponentProps {
    onAction: () => void
    onClick: () => unknown
}

export default function Component({ onClose }: ComponentProps) {
    // ...

    const handleClick = () => {
        onClick ? onClick() && onAction() : onAction()
    }

    return (
        <button onClick={handleClick}>try me!</button>
    )
}

 

여기서 onClick 이 동기 함수라면 아무런 문제가 발생하지 않는데..

Promise 를 반환할 경우 onClick() 의 결과가 항상 truthy 한 문제가 발생했습니다.

 

📌 어떻게 해결하지…? 🤔

1️⃣ async / await 을 사용하기

첫번째 방법은 위 코드에서 handleClick 을 async 함수로 바꾸고

onClick 의 결과값을 await 한 뒤에 그 반환값을 이용하는 것입니다.

Promise 객체는 반환값이 Promise 가 아니라면 알아서 resolved promise 로 변환하기 때문입니다.

 

2️⃣ 비동기 함수 식별하기

두번째 방법은 onClick 이 비동기 함수인지 판단하고

만약 비동기 함수라면 Promise 가 pending 이 끝날 때까지 기다렸다가 이 응답값을 통해서

다음 액션을 실행할 지 판단하는 로직을 넣는 것입니다.

첫번째 방법이 간단하고 깔끔하지만, 이번 기회에 두번째 방법을 이용해서

실제로 해당 함수가 async function 인지 판단하는 방법을 알아보고 싶었습니다.

이를 통해 새롭게 알 수 있는 것들도 있다고 생각했기 때문이죠.

 

📌 Function constructor 로 async 함수 식별하기

1️⃣ Function & Async Function

JavaScript 의 모든 function 은 Function 객체이며

async function 은 AsyncFunction 입니다.

ECMAScript 명세에 따르면 AsyncFunction 은 Function 의 하위 클래스라고 하네요.

 

2️⃣ Function name 으로 함수 식별하기

각각의 생성자 함수는 name 이라는 속성을 가지는데,

이를 통해서 해당 함수의 종류를 식별할 수 있습니다.

 

const f = () => {}
const asyncF = async () => {}

console.log(f.constructor.name) // ✅ Function
console.log(asyncF.constructor.name) // ✅ AsyncFunction

 

그러면 다음과 같은 코드를 작성할 수 있겠네요!

 

function isAsyncFunction(func) {
    return func.constructor.name === 'AsyncFunction'
}

 

그런데 위 코드는 async 키워드로 작성되지 않은 함수가 Promise 를 반환할 때 문제가 생깁니다.

다음은 이러한 경우에 대한 간단 예시 코드입니다.

 

const f = () => { return Promise.resolve('is AsyncFunction?') }

console.log(f.constructor.name) // 🚨 Function

 

함수 f 는 분명 Promise 를 반환하고 있지만, async 키워드로 선언되지 않았기에

name 속성이 Function 이 되는 것입니다.

 

📌 함수의 반환값이 Promise 인지 식별하기

💡 instanceof 연산자 활용하기

따라서 이 경우까지 처리할 수 있도록 반환값이 Promise 인지 판단하는 로직을 추가합니다.

특정 값이 Promise 인지는 다음과 같이 instanceof 연산자를 통해 알 수 있습니다.

이 연산자는 생성자의 prototype 속성이 특정 객체의 프로토타입 체이닝에 존재하는지 체크합니다.

 

function asyncCallback () {
    return Promise.resolve(1)
}

const response = asyncCallback()

console.log(response instanceof Promise) // true 

 

한가지 유의할 점은 instanceof 연산자가 피연산자로 객체와 생성자함수를 받는다는 것입니다.

따라서 instanceof 를 사용하기 전에 먼저 인자값이 객체인지도 확인이 필요합니다.

이를 위해 다음과 같이 isObject 유틸리티 함수를 구현해줍니다.

 

function isObject(obj) {
    return obj !== null && typeof obj === 'object'
}

 

위 두 함수를 조합하면 다음과 같이 Promise 객체인지 판단하는 함수를 구현할 수 있겠네요!

 

function isObject(obj: unknown): obj is Object {
    return obj !== null && typeof obj === 'object'
}

function isPromise(value: unknown): value is Promise<unknown> {
    return isObject(value) && value instanceof Promise
}

 

💡 Native Promise 가 구현이 안된 환경 (IE) 고려하기

다만 위 방법은 ES6 이상의 환경에서 Promise 객체를 온전히 지원하는 경우에만 사용할 수 있습니다.

만약 IE 와 같이 ES5 가 필요한 환경에서는 Promise 를 사용하기 위해서

bluebird 나 when.js 와 같은 라이브러리를 사용할 수도 있는데,

이러한 경우에도 호환 가능하기 위해서 thenable 체크를 사용하는 방법도 있습니다.

이는 특정 객체에 then 과 catch 함수가 구현되어있는지 확인하는 방법을 이용합니다.

 

function isPromise(value: any): value is Promise<any> {
  return (
    value &&
    typeof value.then === 'function' &&
    typeof value.catch === 'function'
  )
}

 

📌 이제 위 함수들을 조합합니다

 

위에서 정의한 함수들을 모두 합쳐서 다음과 같이 특정 함수가 비동기 값을 반환하는지 판단 가능합니다.

함수의 반환값이 Promise 인지 알기 위해서는 먼저 함수를 실행해봐야겠죠?

인자로 받은 function 이 우선 callable 한지 판단하기 위한 확인이 필요하며

이를 위한 isFunction 함수를 구현해줍니다.

 

function isFunction(value: unknown): value is Function {
    return typeof value === 'function'
}

 

마지막으로 위 함수들을 조합하여 다음과 같이 비동기 함수 판단 유틸리티 함수를 구현합니다.

 

function isAsyncFunction(func: unknown) {
    if (!isFunction(func)) {
        return false
    }

    const functionType = func.constructor.name
    if ( 
      functionType === 'AsyncFunction' ||
      functionType === 'Function' &&  isPromise(func())
    ) {
        return true
    }

    return false
}

 

여기서 func() 를 호출하여 반환값이 Promise 객체인지 확인하고 있습니다.

비용이 작은 함수라면 상관 없겠지만, 시간이 오래 걸리는 API 호출 등

여러 비동기 작업이 얽혀있는 경우라면 얘기가 달라지겠죠?

그래서 프로젝트에서는 AsyncFunction 유무와 함수의 반환값도 함께 전달하도록 했습니다 😀

위에서 구현한 함수를 확인해보기 위해 활용한 테스트 케이스는 다음과 같습니다.

 

const testFuncExpression = () => { return 1 }
const testAsyncFuncExpression = async () => { return 1 }
function testFuncDeclaration() { return 1 }
async function testAsyncFuncDeclaration() { return 1 }
const asyncCallbackFunc = () => { return Promise.resolve(1) }

console.log(isAsyncFunction(testFuncExpression)) // false
console.log(isAsyncFunction(testAsyncFuncExpression)) // true
console.log(isAsyncFunction(testFuncDeclaration)) // false
console.log(isAsyncFunction(testAsyncFuncDeclaration)) // true
console.log(isAsyncFunction(asyncCallbackFunc)) // true

const primitives = [1, true, null, undefined, Symbol(1), 'func']

for (const primitive of primitives) {
    console.log(isAsyncFunction(primitive)) // false * 6
}

 

📌 참고자료

How to Check if a Function is Async in JavaScript | bobbyhadz

Function - JavaScript | MDN

AsyncFunction - JavaScript | MDN

How to check if a variable is an object in JavaScript

How to check if an object is a Promise?