함수 반환 타입 그리고 ‘void’
자바스크립트에서 함수가 반환하는 값의 타입에 대해 고민해보신적 있으신가요? 음… 저는 없었던 것 같아요… 아마도 누군가 짜 놓은 코드를 보는 경우보다 제가 만들어서 사용하는 경우가 많아서 그런 것 같습니다.
만일 누군가 만들어 놓은 함수를(심지어 정말 긴) 리뷰 할 경우가 있을 때 함수가 반환하는 값의 타입을 잘 모르면 어떨까요? 물론 실행해보면 그만… 이겠지만, 순전히 코드만 봐야하는 경우에는 반환하는 값의 타입을 적어두면 조금 더 보기 편할 것 같다는 생각이 듭니다. 그래서 타입스크립트는 코드를 작성하는 사람이 함수가 반환하는 값의 타입을 지정 하게끔 합니다.
암묵적으로 타입스크립트는 함수가 반환하는 타입을 정합니다:
foo 함수가 반환하는 값의 타입은 무엇일까요? 바로 number 입니다. 전달받은 num1 과 num2 의 타입이 number 이고, 두 변수의 합 역시 number 이기 때문입니다.
혹은 함수가 반환하는 값의 타입을 직접 지정해줄 수 있습니다:
함수의 매개변수가 끝나는 지점에 타입을 설정해주면 됩니다. 그런데 위의 경우는 에러가 발생합니다. 전달 받는 두 변수는 number 타입인데, string 타입을 반환하려고 하니 에러가 발생하게 되죠. 반환하는 값의 타입을 number 로 변경해주면 에러는 사라지게 됩니다.
대부분의 경우 타입스크립트는 함수가 반환하는 타입을 자동으로 확인하여 설정하여 줍니다. 그러니 특별한 경우가 아니라면 함수가 반환하는 값의 타입을 지정하지 않아도 됩니다. 그리고 함수가 반환하는 타입을 확인하려면 IDE에서 함수의 이름에 커서를 가져다 대면 함수가 반환하는 타입을 알 수 있습니다.
void
이제 void에 대해서 알아봅시다. 다른 언어에서 void라는 키워드를 보신 분들이 많으실 겁니다. 저는 타입스크립트를 공부하면서 알게 된 키워드입니다. void는 자바스크립트에는 없는 키워드로써, 함수에 '이 함수는 아무것도 반환하지 않아'라는 의미를 부여합니다. 즉, 아무것도 반환하지 않는 함수에 사용하는 타입입니다.
void의 사용방법은 함수에 타입을 지정하는 방법과 동일합니다:
greetMaker 함수는 아무것도 반환하지 않습니다. 이렇게 아무것도 반환하지 않는 함수에 void타입을 지정하게 됩니다. 그리고 void가 지정된 함수는 undefined를 반환하게 됩니다. 앞서 함수에 타입을 지정할 때 처럼 타입스크립트 스스로 아무것도 반환하지 않는 함수에 void타입을 지정해줍니다. 그러니 void 타입을 별도로 지정해주지 않으셔도 됩니다.
그런데 void 가 붙은 함수는 undefined 를 반환한다고 했습니다. 그렇다면 함수에 undefined 타입을 지정해주면 되지 않을까요?
이렇게 말이죠. 하지만 이렇게는 사용할 수 없습니다. 자바스크립트에서 return 이 없는 함수가 undefined 를 반환하는 것은 맞지만, 타입스크립트는 return 이 없는 경우에는 void 를 사용하게끔 합니다. 따라서 위의 오류를 해결하려면 다음과 같이 작성하면 됩니다:
위의 방법으로 undefined 를 사용하면 되지만, void 를 사용하는 것이 조금 더 깔끔한 방법인 것 같다는 생각이 듭니다.
아무쪼록 타입스크립트는 함수가 반환하는 값의 타입을 지정합니다. 그리고 자동으로 타입을 지정해주기까지 하죠. 사용자는 IDE를 통해서 타입스크립트가 지정해 놓은 타입을 확인하기만 하면 됩니다. (함수 타입을 지정해주어야 하는 경우도 있지만요😂)
