[JS] return문의 이해 (console.log와 return 명령의 차이)

함수를 실행하고 결과값을 출력할 때 보통 console.log 명령을 하여 결과값을 출력하게 됩니다.

오늘은 흔히 사용하는 명령인 console.log 와 return 명령의 차이를 알아보는 시간을 가져보겠습니다!

(먼저 위 차이에 대해 상세하게 설명해준 니꼬쌤 땡큐)

 

다음 player2라는 객체에 각각 plus, minus함수를 실행하기 위해 할당해줍니다.

비교를 위해 plus함수는 console.log 를 이용해 해당 매개변수의 값을 출력하도록 하고

minus함수는 return 키워드를 이용해 값을 출력하도록 명령했습니다.

 

// plus, minus함수를 player2변수에 할당
const player2 = {
    name: "SJ",
    points: 100,
    plus: function (a,b) {
        console.log(a + b); // console.log 명령을 통한 결과 출력
    },
    minus: function (a,b) { 
        return a - b; // return 명령을 통한 결과 출력
    },
};

console.log(player2.plus(7,3)); // 결과는 10 (7 + 3)
console.log(player2.minus(7,3)); // 결과는 4 (7 - 3)

plus, minus함수 매개변수로 값을 보내기 위해

인수를 player2.plus(7,3); player2.minus(7,3); 으로 주었습니다.

각각의 결과는 10, 4가 출력될 것으로 예상할 수 있습니다.

 

    

console.log 를 통해 명령을 한 plus함수의 결과는 10으로 나왔으나, 바로 밑에 undefined(정의되지않음) 에러가 납니다.

그에 반해 return은 에러없이 결과 4를 잘 출력한 모습입니다.

 

여기에서 알 수 있는 것은?

console.log 를 이용한 명령은 값을 결과로 정의하지 않고, 단순 결과값을 콘솔창에 표시해라~ 입니다.

그러나 return 을 이용한 명령은 다음의 결과로 함수의 값을 정의하고 함수를 종료하겠다는 의미를 가집니다.

 

return은 return 키워드가 등장한 부분을 끝으로, 해당 함수의 실행을 종료하겠다는 것으로

retrun 명령 뒤 콘솔창 표시 명령 등을 했을 때도 실행되지 않습니다. 

 

 

return 명령 뒤에서 콘솔창 표시 명령을 했음에도 화면에는 표시되지 않죠?

실행되지 않음을 표시하듯 해당 빨간영역 부분만 색이 다른 모습입니다!

그러나 해당 명령을 return 명령 앞에서 실행할 경우는 결과창에 표시됩니다. 

 

 

인수 a * b 표시 명령을 잘 실행한 모습이죠? (a=7, b=3 이니, a*b 할 경우 결과는 21!)

 

return은 앞서 말한 것처럼

해당 함수의 실행을 종료하고, 해당 값을 결과로 정의한다는 의미를 내포하고 있기 때문에

 

임의의 변수를 생성해서 값을 할당해줄 수 있습니다.

 

 

minusResult 라는 임의의 변수를 생성해서 player2객체의 minus함수 값을 할당해주었습니다.

해당 변수의 결과 표시 명령을 했을 때 값은 4로 잘 실행되는 모습입니다.

 

이렇게 return 키워드를 이용한 명령을 하면 어떤 점이 좋냐! 하면

plusResult + minusResult 함수 결과의 총합을 나타낼 수 있다는 점 입니다.

 

 

minus, plus함수의 결과값을 각각 임의의 변수(minusResult, plusResult)에 할당해주고

그 결과의 총합을 sum 변수에 할당해서 결과의 총합을 표시되도록 했습니다.

 

이렇듯 함수 실행식의 결과를 변수에 저장하여 재사용할 수 있다는 점에서,

함수 실행시 return 키워드를 사용하면 많은 이점이 있다는 것을 알 수 있습니다.

 

 

*이해에 도움이 됐던 강의 출처:

https://youtu.be/k5TzPLITuqY (노마드코더 - 1 12 Recap)

https://youtu.be/B5JWd9v5G78 (수코딩 - #13. 자바스크립트 함수의 return문 이해하기!!)