자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #3

한국나이를 만드는 function을 만들자.

 

* console.log는 console에 결과를 표시해주는데, 궁극적으로 우리가 원하는 건 결과를 화면에 출력한다든지, 무언가를 변경한다든지, data를 받아서 사용하기를 원한다. 

* 함수가 그냥 어떤 기능을 수행하는 것이라고 생각하기보단, 어떤 일을 수행하고 그 결과를 알려주는 것이라고 생각하자.

*function 안에서 무언가를 return 하면, function을 실행할 때, 그 결과를 return 다음의 것으로 대체한다. 

const age = 100;
function calculaterKrAge (ageOfForeigner){
   return ageOfForeigner + 2;
}
const krAge = calculaterKrAge(age);

console.log(krAge);

102

 

calculaterKrAge를 실행시키면, 100이라는 argument가 age자리로 대체된다. 

 

ageOfForeigner은 calculateKrAge 함수에서 아직 할당되지 않은 변수라고 생각하시면 됩니다. 그래서 그 변수에 const age = 100으로 미리 할당한 값을 넣어준 것이지요.

예를 들어, 아래와 같은 과정이라고 생각하시면 됩니다.

const age = 100;
let ageOfForeigner;
ageOfForeigner = age;

 

console.log(krAge);로 썼기 때문에 102가 출력된다. 

 

 

---

 

const age = 100;
function calculaterKrAge (ageOfForeigner){
   ageOfForeigner + 2;
   return "hello";
}
const krAge = calculaterKrAge(age);

console.log(krAge);

hello

 

 

**무언가를 return 하면, 계산을 담당하는 function의 코드는 그 function이 return 하는 값과 같아질거야!

 

이 function이 작동을 완료했을때, function을 호출한 이 코드 (calculaterKrAge(age);) 는 function의 return 값이 된다. 

즉, krAge 는 calculaterKrAge의 반환값 (return 값)이 된다. 

 

 

function을 실행하고 return 값이 있다면 function을 실행했을때,  반환값(return value)를 준다. 

 

 

---

const calculator = {
    plus: function(a,b){
        return a,b;
    },
    minus: function(a,b){
        return a-b;
    },
    mul: 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,2);
const mulResult = calculator.mul(20,minusResult);
const divResult = calculator.div(mulResult,plusResult);
const powerResult = calculator.power(minusResult,2);

 

출력값은 없다. console.log() 안썼으니까!

 

 

returns을 쓰는 목적은 returns를 몰랐을때는 console.log를 써야만 바깥에서 값을 호출해서 쓸수있었는데

returns를 쓰면 console.log를 쓰지않고도 function의 값을 계속 바깥에서 활용할 수 있게 된다. 

 

 

한번 return하면 function은 끝난다. 

 

 

 

---

const age = prompt("How old are you?");
console.log(typeof "15", typeof parseInt ("15"));

string – "number"

 

 

---

prompt는 창 열어서 입력받을 수 있다. 

prompt는 답하기 전까지 자바스크립트 코드의 실행을 멈추게 한다, CSS를 적용못한다.
value의 type을 보려면 typeof라는 키워드를 써야한다.
숫자인지 알아보고 싶을때 parseInt()를 쓴다.

 

const age = parseInt(prompt("How old are you?"));
console.log(age);

15쓰면 15나옴

hi쓰면 NaN나옴 (not a number)

 

---

NaN인지 판별하는 방법: isNaN()

 

const age = parseInt(prompt("How old are you?"));
console.log(isNaN(age));

12 입력했더니 False 나옴.

 

boolean으로 알려준다. (true / false)

true = 숫자가 아니다.

false = 숫자다

 

---

if 조건문

조건문 식
if(condition){
/// condition == true
} else {
/// condition == false
}
여기서 condition은 boolean으로 판별 가능해야한다. 

 

 

&& and 둘 다 true이면 true
|| or 둘 중 하나만이라도 true이면 true

true || true === true
false || true === true
true || false === true
false || false === false

true && true === true
false && true === false
true && false === false
false && false === false

 

---

 

나이별 음주 가능 프로그램

const age = parseInt(prompt("How old are you?"));

if(isNaN(age) || age < 0){
    alert("please write a real positive again.");
}else if (age < 18){
    console.log("You are too young to drink.");
}else if (age >= 18 && age <= 80){
    console.log("You can drink.");
}else if (age === 100){
    console.log("wow!")
}else if (age > 80) {
    console.log("You are too old to drink.");
}

 

**

else if (age === 100) 

이 함수가 위치가 else if (age > 80) 보다 위에 있어서 출력된다. 

 

---

참고 about ===

JS에서만 사용하는 연산자 ===
== 은 값만을 비교하고
=== 은 유형도 비교하여 === 를 주로 사용하는걸 추천한다고 하네요.
ex)
0 == false ---> true
0 === false ---> false