TIL_18_with Wecode 008 JavaScript about function

🐬 return 함수 정의

• return이라는 것은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻입니다.

예시)

    function multiplyTen(myNumber) {
      return 10 * myNumber;
    }

👻 인자가 하나인 multiplyTen 함수의 정의 → 받은 인자에 10을 곱하여 반환한 것.

🐬 return 함수의 호출
예시)

    multiplyTen(3); 
    multiplyTen(6); 
    multiplyTen(12);  

👻 위와 같이 여러번 함수를 호출할 수 있습니다.

🐬 return 함수의 호출 결과 확인

• 호출은 했지만, 어떤 값을 리턴했는지 알길이 없습니다. 호출된 함수의 return 값을 변수에 저장하는 수밖에!
• 아래와 같이 함수의 반환을 변수에 저장해서 console로 확인해볼 수 있습니다.

  let result1 = multiplyTen(3); 
  let result2 = multiplyTen(6); 
  let result3 = multiplyTen(12);  
  console.log(result1); 
  console.log(result2); 
  console.log(result3);

🐬 함수와 return 키워드

• 사실 함수는 모두 return을 합니다.
• '음.. 아닌데' 하고 생각이 드셨을 수도 있습니다. 분명 return이 없는 함수를 보신 적이 있을테니까요.
• 그 경우에도 return이라는 키워드를 생략했을 뿐 함수는 리턴을 합니다.
• return을 생략하면 함수는 undefined를 반환합니다.

    function consoleSuccess(month, name) {   
    console.log(month, name); 
  }  
  let result = consoleSuccess("30", "양지은");
  // 함수를 호출한 결과를 변수 result에 담아서 
  console.log("consoleSuccess 호출 값은" + result); 
  //결과는 "3 양지은". "consoleSuccess 호출 값은 undefined"

function getTax(price) {
  return price * 0.1;
}
function calculateTotal(price) {
  return price + getTax(price);
}
var result = calculateTotal(3500);
  console.log(result);

• 이렇게 함수 안에서 또 함수를 호출할 수도 있습니다.
• calculateTotal 함수 내부에서 getTax를 또 호출했습니다.
• 함수가 실행되는 시점은 함수를 호출하는 순간이겠죠?
• 왼쪽의 코드를 보면 2~8번 줄 까지는 "이런 함수가 있다.."고 선언해준 것 뿐입니다.
• 함수가 실행되는 시점은 바로 10번째 줄에서 calculateTotal(3500) 으로 호출 했을 때 입니다.

👻 Assignment
getTotal 함수를 만들어주세요! getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.

• 1. getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.
• 2. 인자이름은 원하는대로 지어주셔도 됩니다.
• 3. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.

참고)

• getTax 함수는 가격의 tax를 구하는 함수입니다.
• calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.
• getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다.

내가 처음에 쓴 답변

function getTax(price) {
  return price * 0.1;
}
function calculateTotal(price) {
  return price + getTax(price);
}  
function getTotal(price1, price2) {
  return price1 + price2;}
getTotal(1000,3000);
calculateTotal(1000);
calculateTotal(3000);

결과는
Expected: 440
Received: 400 으로 값이 맞지 않는다.
사실 3번 "getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요." 라는 문장을 제대로 이해하지 못한 것 같다.
인자로 받은 가격 1000, 3000원 각각 calculateTotal 함수에 넣어 호출했는데 결과값을 더해서 반환하라는게 정확히 뭔 말인지 이해가 안간다.. 내가 이렇게 맥락맹이었던가..
구글링을 해봐야겠다.

구글링 결과)

function getTax(price) {
  return price * 0.1;
} //세금을 구하는 함수.
function calculateTotal(price) {
  return price + getTax(price);
} //상품의 가격과 세금을 더한 값을 구하는 함수.
function getTotal(price1, price2){
  return calculateTotal(price1) + calculateTotal(price2) 
} //두개의 인자를 받아 두 상품의 가격을 더하는 함수.
getTotal(1000,3000);

아 역시 3번 마지막 문장을 내가 이해하지 못한 거였다.
getTotal 함수 내부에 calculateTotal 함수를 입력하고 인자 price1과 price2를 입력하여 더해서 반환하라는 것 이었다..

function getTax(price)라는 세금을 붙이는 함수를 정의하고, function calculateTotal(price)라는 함수에 세금을 붙이는 함수를 calculateTotal 함수 내부에 호출했다.
그러면 이제 calculateTotal(price) 함수 내부에서 두 개의 인자를 더해주기만 하면 우린 두 개의 인자를 받으면서 세금이 더해진 값도 구할 수 있게 되는거다.

내가 처음에 작성한 코드를 보면

function getTotal(price1, price2) {
  return price1 + price2;
}

이렇게 리턴을 해버리면 세금이 붙지 않은 가격값만 더해져서 나오게 되기 때문에 fail인 것이다.