[바닐라 JS로 크롬 앱 만들기] # 2.11 Returns

Gata·2023년 11월 13일

오늘의 요약: console.log는 그림의 떡. 꺼내먹으려면 return 필요

console.log

console.log : 콘솔에 무언가를 log하는 것 (결과를 기록하여 보여줌)

//return을 이용하지 않은 간단한 계산기
const calculator = {
    plus: function (a, b) {
        console.log(a + b);
    },
    minus: function (a, b) {
        console.log(a - b);
    },
    times: function (a, b) {
        console.log(a * b);
    },
    divide: function (a, b) {
        console.log(a / b);
    },
    power: function (a, b) {
        console.log(a ** b);
    }
};

calculator.plus(7,2); //9
calculator.minus(10,2); //8
calculator.times(2,3); //6
calculator.divide(9,3); //3
calculator.power(3,3); //27

return

//return을 이용한 간단한 계산기
const calculator = {
    plus: function (a, b) {
        return a + b;
    },
    minus: function (a, b) {
        return a - b;
    },
    times: function (a, b) {
        return a * b;
    },
    divide: function (a, b) {
        return a / b;
    },
    power: function (a, b) {
        return a ** b;
    }
}

const plusResult = calculator.plus(2, 3);
const minusResult = calculator.minus(plusResult, 1); //return해서 얻은 반환값으로 또다른 계산을 할 수 있다. 연쇄작용.
const timesResult = calculator.times(10, minusResult);
const divideResult = calculator.divide(timesResult, plusResult);
const powerResult = calculator.power(divideResult, minusResult);
  • console.log는 '믹서기 안에 있는 망고주스를 보고만 있고 마실 수 없는 것'과 같고, return을 하면 '믹서기에서 주스를 꺼낼 수 있는 것'과 같다.

  • console.log는 function의 결과 값을 단순히 콘솔창에 보여주는 것 뿐이고 우리가 더이상 터치하지 못한다. return은 function의 결과값을 우리 손에서 갖고 놀 수 있다. 즉, 결과값을 다른 function에서 다시 사용할 수 있는 등 지지고 볶고 할 수 있다.

  • 위의 코드에서 variable인 plusResult, minusResult, timesResult, divideResult, powerResult는 이 variable 자체가 function의 return value를 갖는다.

  • 위 코드에서 console.log를 하지 않았기 때문에 콘솔창에는 아무것도 보이지 않지만, return을 썼기 때문에 반환값을 얻을 수 있다.

  • 언제 사용해?
    사용자의 위치에 따라 날씨를 알고 싶을때 날씨 정보를 구한 다음 console에 출력하는 것(console.log)이 아닌 값을 받아서(return) 화면에 출력할 것이다.

🚩return의 주의사항

한번 return을 하면 해당 function은 끝난다.

그래서 return 뒤에 작업을 하면 실행되지 않고, return 앞에 작업을 하면 실행된다.
즉, function은 영원히 살아있지 않다. function은 return이 있을 수 있는 이유이자 코드의 시작이지만 '언젠가'는 동작을 멈춘다. 그 '언젠가'는 언제일까?

function이 코드를 실행하고 return으로 반환값을 뱉고 나면, funtion은 더이상 작동을 멈추고 끝내버린다.

const calculator = {
    plus: function (a, b) {
        console.log("hello")
        return a + b;
        console.log("bye") //return을 하면 function이 종료됨. hello는 출력되고 bye는 출력되지 않음.
    }
}
const plusResult = calculator.plus(2, 3);
profile
개발은 즐거워🪇

0개의 댓글