볼 때마다 헷갈리는 return

return은 하나씩 살펴보면 어렵지 않지만 이상하게 헷갈린다.

하나씩 봐보자.

const calculator = {
  add : function (a,b) {
    console.log(a+b)
  },
  minus : function (a,b) {
    console.log(a-b)
  },
  divide : function (a,b) {
    console.log(a / b)
  },
  multiplication : function (a,b) {
    console.log(a * b)
  }
};

calculator.add(2,3);
calculator.minus(2,3);
calculator.divide(2,3);
calculator.multiplication(2,3);
--------------------------------
5
-1
0.6666666666666666
6

지금까지 배웠던 variable, object, function을 이용해서 간단한 계산식을 만들었다.

console.log를 이용해 console에 결괏값이 나타나게 했다.

이렇게 되면 console에 결과가 나오고 끝난 거다.

그 결괏값을 가지고 더 이상 뭔가를 할 수가 없다.

결과를 console이 아닌 화면에 출력한다든지

무언가를 변경한다거나, data를 받아서 사용하거나 할 수 없다.

return

a+b를 console.log 하지 않고 기억해두었다가 사용하고 싶다.

const calculator = {
  add : function (a,b) {
    a+b
  }
};
console.log(calculator.add(2,3));
---------------------------------
undefined

console.log만 쏙 빼면 a+b가 제대로 저장됐는지 확인해보니

값이 없다고 나온다. 

값이 제대로 돌지 않았다.

const calculator = {
  add : function (a,b) {
    return a+b
  }
};
console.log(calculator.add(2,3));
-----------------------------------
5

a+b 앞에 return을 추가해서 보면 결괏값이 잘 나왔다.

calculator.add(2,3)이 5가 되었다는 건데

a =2, b=3 이 되고 2+3이 되어서

해당 function을 불러낸 자리로 return 된다.

calculator.add(2,3)이 5로 return 된 것.

calculator.add(2,3) 값이 코드상에 저장되었기에 다른 뭔가에 사용할 수 있다.

 

다른 예제

function에 string을 console에 나오게 추가했다.

const age=96;
function calculateKrAge(ageOfForeigner) {
  console.log("Hello");
  ageOfForeigner + 2;
  console.log("good");
};
const KrAge = calculateKrAge(age);

console.log(KrAge);
---------------------
Hello
good
undefined

return 되지 않은 ageOfForeginer은 결괏값이 없다고 나오고

나머지 string들은 잘 나왔다.

const age=96;
function calculateKrAge(ageOfForeigner) {
  console.log("Hello");
  return ageOfForeigner + 2;
  console.log("good");
};
const KrAge = calculateKrAge(age);

console.log(KrAge);
--------------------
Hello
98

return ageOfForeigner +2를 하고 나니

return 된 98과 Hello는 나왔는데 good은 나오지 않았다.

이유는

return은 해당 function을 종료시키는 역할도 하기 때문.

return 아래에 적힌 good은 실행하지 않아 나오지 않았다.