9. Javascript에서의 함수 리턴

 

지금까지 함수의 선언과 실행, this 바인딩을 살펴보면서 산발적으로 Javascript 함수의 리턴 규칙에 대해서 함께 배워왔습니다. 하지만 함수의 리턴 규칙은 코드 작성에 있어서 무엇보다도 중요한 영역입니다. 이번 아티클에서는 함수의 리턴 규칙에 대해 다시 한번 정리해 보도록 하겠습니다.

 

 

일반 함수, 메서드 - 리턴 값 미지정 시 undefined 리턴

 

일반적인 함수 또는 메서드 상에서, 특정 값이나 객체를 리턴하지 않을 경우에는 undefined가 리턴됩니다. 간단한 원칙이지만, 아래 예제를 통해서 특정 변수에 이런 형식의 함수를 대입하여 직접 살펴보도록 하겠습니다.

 

var noReturn = function() {
    console.log("got no return");
};

var result = noReturn();
console.log(result);

// 결과
// got no return
// undefined

 

위에서 함수 noReturn의 결과값을 변수 result에 대입하였습니다. 그리고 변수 result를 출력해 본 결과, undefined 인 것을 확인할 수 있습니다.

 

 

생성자 함수 - 리턴 값 미지정 시 생성된 객체가 리턴

 

우선 생성자 함수는 신규 객체를 생성하는 용도의 특성상, 별도로 리턴 값을 명시하지 않는다는 것을 배웠습니다. 그래서 위에서 살펴본 일반 함수, 메서드의 경우와 달리 리턴 값을 명시하지 않을 경우에는 새로 생성된 객체가 this에 바인딩되어 리턴되는 것을 기준으로 사용하게 됩니다.

 

다만, 예외적 상황이 있습니다. 생성자 함수에서 기본형 타입이 아닌 객체 리턴을 명시할 경우, 새로 생성된 객체가 아니라 명시한 객체가 리턴된다는 것 입니다. 여기서 중요한 점은 기본형 타입을 리턴할 경우는 해당하지 않는다는 점이죠. 예제를 통해서 살펴보도록 하겠습니다.

 

// 생성자 함수
function Rapper(rapName, age, lable){
    this.rapName = rapName;
    this.age = age;
    this.lable = lable;

    return { actorName: 'John Doe', age: 25, gender: 'male'};
}

var nextOne = new Rapper('SkyMinhyuk', 22, 'NOLABLE');
console.dir(nextOne);

// 출력
// { actorName: 'John Doe', age: 25, gender: 'male' }

 

위의 코드를 보겠습니다. Rapper 생성자 함수를 통해 프로퍼티 rapName, age, lable을 생성하도록 선언하였습니다. 그리고 이 생성자 함수를 이용해 nextOne이라는 새로운 변수에 new 연산자를 사용하여 Rapper 생성자 함수를 실행하였고, 인자 값도 모두 전달하였습니다. 다만, 생성자 함수 마지막에 전혀 엉뚱한 객체를 리턴하도록 선언해 두었습니다.

 

결과적으로 nextOne이라는 변수를 출력해보면 우리가 생성자 함수에 전달한 인자 값들은 전혀 반영되지 않았고, 리턴 객체가 그대로 출력됩니다. [[Prototype]]역시 Rapper.prototype이 아니라 Object.prototype입니다. new 연산자의 규칙을 무시하고 일반 객체를 리턴한 개념이 되었습니다.

 

그런데 만일, 여기서 리턴 값을 정수 50으로 수정하면 어떤 결과가 벌어질까요?

 

// 생성자 함수
function Rapper(rapName, age, lable){
    this.rapName = rapName;
    this.age = age;
    this.lable = lable;

    return 50;
}

var nextOne = new Rapper('SkyMinhyuk', 22, 'NOLABLE');
console.dir(nextOne);

// 출력
// Rapper { rapName: 'SkyMinhyuk', age: 22, lable: 'NOLABLE' }

 

위의 코드에서는 리턴 값만 수정하고 그대로 실행하였는데, 50이라는 리턴 값은 무시한 채 생성자 함수 Rapper가 의도대로 실행된 것을 확인할 수 있습니다. 앞서 설명했듯, 생성자 함수에서의 명시적 리턴 규칙은 기본형 데이터 타입을 리턴할 경우에는 발생하지 않으므로, 이를 무시하고 원래의 규칙대로 객체가 생성된 것입니다.