[바닐라 JS로 크롬 앱 만들기] returns

const calculator = {
    plus: function (a, b) {
        alert(a + b);
    },
    minus: function (a, b) {
        alert(a - b);
    },
    multiply: function (a, b) {
        alert(a * b);
    },
    divide: function (a, b) {
        alert(a / b);
    },
    power: function (a, b) {
        alert(a ** b);
    },
};

console.log(calculator.plus(2, 3));

위 코드의 결과는 아래와 같다.

calculator의 plus를 호출했기 때문에 alert함수를 통해 알람이 뜬다.

그 후에 console.log를 호출하는데, 이런.. 결과가 undefined가 나오게 되었다.

우리는 2+3의 결과인 5를 calculator.plus(2,3)의 결과로 얻고 싶다!

함수: 어떤 일을 수행하고, 그 결과를 알려주는 것

함수의 결과를 변수에 저장해보자.

const age = 16;
function calculateKrAge(ageOfForeigner) {
    ageOfForeigner + 2;
}

const krAge = calculateKrAge(age);

console.log(krAge);

krAge로 함수의 결과를 받아오려고 했지만, 원하는 결과를 얻지 못했다.

함수 안에서도 코드를 수정해야한다!

const age = 16;
function calculateKrAge(ageOfForeigner) {
    return ageOfForeigner + 2;
}

const krAge = calculateKrAge(age);

console.log(krAge);

됐다! return을 통해 함수의 결과를 함수의 밖으로 전달해줄 수 있다.

 

함수의 결과가 필요없는 경우에는 return을 사용하지 않고,

함수의 결과가 필요한 경우에 return을 사용하자.

 

# 그럼 저번 포스트에서 만들었던 계산기 코드를 수정해보자.

const calculator = {
    plus: function (a, b) {
        return a + b;
    },
    minus: function (a, b) {
        return a - b;
    },
    multiply: function (a, b) {
        return a * b;
    },
    divide: function (a, b) {
        return a / b;
    },
    power: function (a, b) {
        return a ** b;
    },
};

const a = 100;
const b = 2;
const plusRetsult = calculator.plus(a, b);
const minusRetsult = calculator.minus(a, b);
const multiplyRetsult = calculator.multiply(a, b);
const divideRetsult = calculator.divide(a, b);
const powerRetsult = calculator.power(a, b);

console.log(plusRetsult, minusRetsult, multiplyRetsult, divideRetsult, powerRetsult);

콘솔창에 변수를 직접 입력해서 결과를 확인할 수 있다.