(13) JavaScript - 추상화 / return 과 console.log 차이

처음 자바스크립트를 접할 때 리턴문이랑 console.log를 헷갈려 하는 경우가 있다.

몇 가지 상황을 보면서 둘 차이를 명확히 체크해보자

 

return 과 console.log 차이

아래 코드에 두 개의 함수가 정의되어 있는데

printSquare 함수는 파라미터 x의 제곱을 콘솔에 출력하는 함수이고

getSquare 함수는 파라미터x를 제곱해서 리턴해주는 함수이다.

    function printSquare(x) {
        console.log(x * x);   
    }

    function getSquare(x) {
        return x * x
    }

 

각 함수들을 호출해보자

printSquare(3)

▲ printSquare 함수의 숫자 3이 파라미터 x에 전달하여 x * x 는 3 * 3이 되어 최종 출력 값은 9이다.

 

getSquare(3)

▲ getSquare 함수의 숫자 3이 파라미터 x에 전달하여 리턴 x * x 가 리턴 3 * 3이 되어 최종 출력 값은 9이다.

 

그런데 함수 호출 부분이 9로 대체되기만 했지 그 다음 동작에 대해서 작성된 코드가 없다.

프로그램을 그대로 종료되며 실행해보면 아무것도 출력이 되지 않는 것을 확인 할 수 있다.

한번 getSquare에 console.log를 감싸주면 어떻게 될까?

console.log(getSquare(3));

▲ 방금 getSquare(3)은 9가 된다는걸 확인 했으니 결국 이 코드는 console.log(9)가 된다는 말이다.

실행해보면 9가 출력이 된 것을 확인할 수 있다.

 

만약 getSquare가아니라 printSquare를 하게되면 어떻게 될까?

console.log(printSquare(3));

▲ 처음에 printSquare(3)을 하게되면 콘솔에 9를 출력하고 종료가 됐었다.

그런데 이번에는 printSquare를 실행하고 또 console.log 함수도 실행해야한다.

printSquare 함수에는 리턴문이 작성되어 있지 않는데 이렇게 리턴문이 없는 함수를 실행하면

함수 호출 부분은 undefined 값 (=처음부터 아무것도 할당하지 않았다는 걸 알려주는 값) 을 리턴 받게 된다.

실행해보면 9와 undefined 값이 출력 되는 것을 볼 수있다.

 

9는 console.log(3 * 3)의 결과이고 undefined는 console.log(printSquare(3)) 의 리턴 값을 출력한 결과이다.

즉 함수를 선언 할 때 리턴문을 따로 작성하지 않으면 undefined 값을 리턴한다는 점을 기억하자.

 

결론은 리턴은 함수를 실행하고 어떤 값을 돌려주는 것이고 

console.log는 콘솔에 어떤 것을 출력해 주는 함수이다.

명확히 구분하여 사용하자.

 

---

★ GitHub 주소 ( return 과 console.log 차이 )

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/6-%EC%B6%94%EC%83%81%ED%99%94/6.return%2Cconsole%EC%B0%A8%EC%9D%B4.html

JavaScript_soloPlay/Basic/6-추상화/6.return,console차이.html at main · SeopE9611/JavaScript_soloPlay

 

★ notion 예시 문제 풀이

https://www.notion.so/10ae9530b3e180489ac7e56a0c9d1664?pvs=4