return이란?

우리가 자바스크립트를 사용하여 함수를 작성할 때, return이라는 예약어를 자주 사용하고는 한다. 이렇게 자주 사용되는 예약어임에도 불구하고, return이라는 예약어가 무엇이고 어떤 역할을 하는지 잘 모르는체로 사용하는 경우가 많다. return의 역할이 무엇이고 어느 때에 사용하는지 알아보자.

return이 하는 일

return이 하는 역할 중에 가장 중요한 일은 함수를 사용시에 반환값을 얻는 일이다. 여기서 반환값이란, 말 그대로 함수가 완료되었을 때 함수가 반환하는 값을 뜻한다. 즉, 함수에서 return을 사용하게 되면, 그 함수의 결과를 함수에서 얻을 수 있게 되는 것이다.

또한, return은 현재 진행중인 함수를 중지시킬 수 있는 역할도 한다. 아직 실행해야 할 함수들이 남은 상황에서도 return을 사용하면 뒤에 위치한 코드들은 자동적으로 중지되게 된다.

1. 함수의 반환값을 얻을 때 사용한다.
2. 현재 진행 중인 함수를 중지(탈출)시킬때 사용한다.

그럼, 예제를 통해 어떻게 사용되는지 알아보자.

반환값

  const foo = () => {
   const x = 100;
}

foo(); //결과값이 나타나지 않음.

위와 같은 코드를 실행하게 되면, foo()에 대한 결과값은 나타나지 않는다. 왜 그럴까? return을 통해, 반환할 값이 선언되지 않았기 때문이다. 만약 x의 값을 얻고 싶다면 다음과 같이 구현하면 된다.

const foo = () => {
   const x = 100;
    return x;
}

foo(); //100

함수 중지

return은 함수를 중지시키는 기능 역시 수행한다고 했다. 예제를 통해 알아보자.

const foo = () => {
   const x = 100;
   if (x == 100) {
      return x;
   }
   x = x + 1;
   (...)
}
  
foo(); //100

위와 같이, return 밑에 더 많은 코드들이 있지만, 함수의 반환값은 결국 return 값인 100이 나오게 된다. 이 처럼, return은 현재 구문을 중지하고 빠져나오는(escape) 방법으로 사용이 가능하다.

자동 세미콜론 삽입

return 명령문은, 자동 세미콜론 삽입(ASI)의 영향을 받는다. return 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없다.

return
a + b;

이 코드는 ASI에 의해 아래처럼 처리된다.

return;
a + b;

그렇기 때문에, 문제를 해결하려면 괄호를 사용해 ASI를 방지해야 한다.

return (
a + b
);

참조 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return
https://webisfree.com/2016-06-18/[javascript]-%ED%95%A8%EC%88%98%EC%9D%98-%EC%98%88%EC%95%BD%EC%96%B4-return%EC%9D%B4%EB%9E%80
https://kyounghwan01.github.io/blog/JS/JSbasic/returnRoleFunction/