.png)
🪄 Return
function으로부터 값을 얻기 위한 과정
어제 니코 쌤이 과제로 낸 계산기 만들기를 완성했다. 그런데 니코 쌤은 이번 강의에서 이 계산기에서 console.log를 쓰지 않겠다고 했다. 그럼 console.log 말고 무엇이 있을까?
console.log는 console에 무언가를 기록해서 보여주는 수단이다. 하지만funciton 밖에서 결과값을 얻기에는 부적절하다.
우리가 만든 계산기는 console.log에 의해 "그 결과"를 브라우저의 console에서 볼 수 있다. 하지만 내가 console에 "요구"를 하면 console.log는 계산의 결과를 나에게 "제공"하지 않는다. alert도 마찬가지다.
const calculator = {
plus: function (a, b) {
alert(a + b);
},
};
console.log(calculator.plus(2,3));
---
👉 After refreshing and the console result in the browser
🛎 alert : This page say 5
> undefined 👈 알람창이 뜬 후 기록된 plus의 값function의 예시로 한국 나이 계산기를 만들어 본다.
일단 함수가 어떤 일을 수행하고 그 결과를 알려주는 것이라고 생각해보자.
const age = 89;
function calculateKrAge(ageOfForeigner){
ageOfForeigner + 2;
}
const krAge = calculateKrAge(age);
console.log(krAge);function calculateKrAge(ageOfForeigner){ageOfForeigner+2} 이 계산에서 코드로 계산 결과를 얻으려 한다.
그런데, 엥? 이 코드에서는 undefined라고 뜬다. 분명 console.log도 사용하지 않고 무언가를 했는데!
내가 여기서 빠뜨린건 바로 return이다.
const age = 96;
function calculateKrAge(ageOfForeigner){
return ageOfForeigner + 2;
}
const krAge = calculateKrAge(age);
console.log(krAge);
---
👉 After refreshing and the console result in the browser
98이 return의 실행 순서는 아래와 같다.
-
const krAge = calculateKrAge(age);를 실행시키면, const age = 96;의 96이라는 argument가 (age)의 자리로 대체 된다. 그럼 const krAge = calculateKrAge(96);이 된다,.
-
const krAge = calculateKrAge(96);의 96은 function calculateKrAge(ageOfForeigner){~}의 자리로 간다. 그럼 function calculateKrAge(96){~}이 된다.
-
그리고 return ageOfForeigner + 2 에서 96 + 2를 return한다. 그럼 return ageOfForeigner + 2는 return 98이 될 것이다.
-
return을 함으로써, function을 호출하는 코드가 const krAge = calculateKrAge(96);에서 const krAge = 98이 된다.
이것이 console.log(krAge) 했을 때 98이 뜨는 이유고, function이 function의 밖과 소통하는 방법이다.
무슨 소리지.. 한국어로 해주세요..
하지만 설명 듣고 이렇게 적어놓고 보면 꽤 복잡한데 직접 해보면 이해가 간다..
두번째 예시로
const age = 96;
function calculateKrAge(ageOfForeigner){
ageOfForeigner + 2;
return "hello";
}
const krAge = calculateKrAge(age);
console.log(krAge);
---
👉 After refreshing and the console result in the browser
hello위의 방식대로 하면 분명 ageOfForeginer + 2 에서는 98이라는 값을 낼텐데, return에서 "hello"를 입력하면 이 function을 호출한 코드 const krAge = calculateKrAge(age)는 function의 return의 값이 된다.브라우저 안의 콘솔에서는 "hello"라는 값을 보내준다.
이제 우리가 만든 계산기로 전부 return으로 작업 해보자.
const calculator = {
plus: function (a, b) {
return a + b;
},
minus: function (a, b) {
return a - b;
},
times: function (a, b) {
return a * b;
},
div: function (a, b) {
return a / b;
},
power: function (a, b) {
return a ** b;
},
};
const plusResult = calculator.plus(2, 3);
const minusResult = calculator.minus(plusResult, 10);
const timesResult = calculator.times(30, minusResult)
const divResult = calculator.div(minusResult, timesResult);
const powerResult = calculator.power(divResult, plusResult);
👉 After refreshing and the console result in the browser
> plusResult
< 5
-
> minusResult
< -5
.
.
.위와 같이 여기에 있는 것들은 console을 부르지 않기 때문에 console에서는 보이지 않을 것이다.
const plusResult = calculator.plus(2, 3);와 같이 작성하면 계산기는 이 결과 값을 줄 것이다. 그래서 return에서 plusResult를 호출해서 저장된 결과를 가지고 올 수있다.
그리고 이렇게 const minusResult = calculator.minus(plusResult, 10);와 같은 상호 의존시켜서 결과 값을 낼 수 있다.
음.. 니코 쌤이 말한 예를 적자면
자판기에서 망고주스를 꺼내 마시고 싶은데 망고주스가 안나오는 상황.
자판기 = console in browser
망고주스 = returnResult
내 생각엔 이렇게 하는 것 같은데 아니면 수정해야지..
console.log()만 하면 console창에서는 결과값만 나오지, 우리가 직접 입력해서 나오는게 아니라는 것이다.
처음에 봤을 때는 너무 헷갈리기 쉽고 어려운 개념인 것 같다.. 그래도 알기 쉽게 예를 들어가면서 설명해준 니코 쌤의 강의를 한 두세번? 돌려보고 난 뒤, 어느 정도 이해하게 된 것이다.. 음 완전히 내 것이 된 건 아니지만 하다보면 익숙해지겠지 싶다..
