return을 사용하거나 사용하지 않는 경우

return을 사용할 때와 사용하지 않을 때 차이점

return을 사용하거나 사용하지 않는 것은 함수나 메서드의 기능과 관련이 있다. return 키워드는 함수를 종료하고, 함수의 호출자에게 값을 반환한다. 반면, void 타입인 메서드나 함수는 return을 사용하지 않으며, 호출자에게 값을 반환하지 않는다.

아래 예제를 통해 return 사용 여부의 차이점에 대해 명확히 알아보자.

class Counter{
  #value;
  constructor(startValue){
    if(isNaN(startValue) || startValue < 0){
      this.#value = 0;
    }else{
      this.#value = startValue;
    }
  }
  
  // 현재 카운터 값을 반환하는 게터
  get value(){
    return this.#value;
  }
  
  // 카운터 값을 하나 증가시키는 메서드
  increment = () => {
    this.#value++;
  }
}

const counter = new Counter(2);
// increment 메서드를 두 번 호출하여 카운터 값을 증가시킴
counter.increment();
counter.increment();
console.log(counter.value);  // 4 출력

위의 예제에서 increment 메서드는 return 키워드를 사용하지 않았다. 따라서 이 메서드는 호출자에게 값을 반환하지 않고 단순히 this.#value 값을 하나 증가시킨다.

즉, increment 메서드를 호출하면 아무런 값도 반환되지 않으며, 다음과 같이 사용할 수 없다.

const result =  counter.increment(); // result => undefined
console.log(result); //undefined 출력

만약, increment 메서드가 호출된 후 증가된 값을 반환하도록 하려면, return 키워드를 사용하면 가능하다.

  increment = () => {
        this.#value++;
        return this.#value;  // 증가된 값 반환
    };

위와 같이 increment 메서드에 return 키워드를 추가하면, 메서드를 호출한 후 증가된 값을 반환받을 수 있다. 이를 통해 increment 메서드가 값을 반환하는지 여부에 따라 호출자의 사용 방법이 달라지게 된다.

요약하면

• return 을 사용하지 않는 경우 : 메서드가 값을 반환하지 않으며, 단순히 내부 상태를 변경한다. 호출 결과는 항상 undefined 가 된다.
• return 을 사용하는 경우 : 메서드가 호출 후 특정 값을 반환하며, 호출자는 그 값을 받아서 사용 가능

void 사용 시기

• JavaScript: JavaScript에서는 직접적으로 void 타입이 존재하지 않지만, 반환값이 없는 함수 또는 메서드를 암묵적으로 undefined로 처리합니다.
• TypeScript: TypeScript에서는 void 타입을 사용하여 함수가 반환값이 없음을 명시적으로 표현할 수 있습니다. 이를 통해 함수의 의도를 더욱 명확히 하고, 호출자가 이 함수의 결과값을 기대하지 않도록 할 수 있습니다.

요약

• JavaScript: 반환값이 없는 함수는 암묵적으로 undefined를 반환합니다.
• TypeScript: void 타입을 사용하여 함수가 반환값이 없음을 명시적으로 나타낼 수 있습니다.