바닐라 JS로 크롬 앱 만들기 #2 (5)

#2.11 Returns

 

계산기 코드를 작성해서 브라우저 콘솔창으로 결과를 출력해보면 계산기가 잘 작동하는 것을 확인할 수 있다!

그치만 이번 강의에서 요지는 위 계산기 코드에서 console.log를 사용하지 않고 코드를 작성해보는것이다!

 

console.log를 사용하지 않고 한국나이를 계산하는 프로그램을 만들어보자

 

이 한국 나이 계산 프로그램의 결과를 코드로 받고 싶다면 어떻게 해야할까?

함수가 그냥 어떤 기능을 수행하는거라기보다는 어떤 일을 수행하고 그 결과를 알려주는 것이라고 생각해보자!

한국나이를 계산하는 포로그램을 작성하고 콘솔창에 출력해보면 아직 정의가 되지 않았다고 출력된다.

calculateKrAge에서 console.log를 사용하지 않았고 뭔가를 했는데 결과가 안 나오는 이유는 무엇일까?

return을 빼먹었기 때문이다!!

 

return을 쓰면 무슨 일이 벌어지나?

누군가 함수를 실행할 때, const krAge = calculaterKrAge(age); 코드 부분을 결과로 대체한다.

console.log(krAge)를 했을 때 98이라는 결과값이 발생하는 이유

calculaterKrAge를 실행시키면 96이라는 인수가 age 자리에 대체가 되고 96 + 2를 return한다.

return을 함으로써, 함수를 호출하는 코드 98이 완성된다.

 

 

콘솔에 출력하려고 함수를 쓰지 않는다면

대신해서 어떤 작업을 처리하고 그 결과를 return하기 위해서 함수를 사용해야한다.

함수를 쓸 때 조용히 작업만 시키고 결과는 필요 없는 경우가 있고,

어느 작업을 할 때, 그 작업의 결과를 알려주는 함수를 원할 때가 있는데 후자의 경우, 그 기능을 return이 수행한다.

 

강의 초반에서의 계산기 코드를 return을 사용해서 코드를 수정해주자면 위와 같은 코드가 된다!

위 코드에서는 코드 내부에서 console.log를 사용하지 않았다.

return을 사용하고 함수 내부에서 console.log를 안한다면

함수의 외부에서 값을 얻은 뒤에 그 값으로 사용자가 원하는 모든것을 할 수 있다.

 

# 2.13 Conditionals

 

다음 챕터로 가기 전에 조건문을 먼저 알아야하는데

Conditional(조건문)은 true인지  false인지 알려주기 때문에 아주 중요하다!

예를 들면 사용자가 로그인되어 있다면 무언가를 보여준다든지, 사용자가 무언가를 할 때 반응하는 것을 만들때!!

키워드는 if 이다!! 만약 로그인을 했다면?, 만약 숫자가 30보다 크다면?

 

Conditionals 강의에서 만들어볼 예제 코드는 음주가 가능한 나이인지 아닌지를 알려주는 계산기이다!

 

prompt는 사용자에게 창을 띄울 수 있도록 해주는 브라우저에서 할 수 있는 가장 직접적인 방법이다.

보통 prompt은 두개의 인자를 받는데 하나는 message(문자), 하나는 default이다.

 

위와 같은 코드를 작성해서 브라우저에 들어가면 페이지가 계속 로딩하는 것으로 뜨고

나이가 얼마인지를 물어보고 콘솔창에서는 아무 반응이 없다.

즉, 아직 console.log(age);  코드까지 넘어가지 못하고

 const age = prompt("How old are you?"); 라는 코드에서 우리의 응답을 기다리고 있다!

 

사용자가 응답을 하지 않으면 JS는 계속 일시정지 상태가 되는데 이것이 prompt를 사용하지 않는 이유 중 하나이다.

prompt는 message가 별로 안 예쁘고, css를 적용시킬 수 없기 때문이다.

prompt는 아주 예전에 쓰던 방법이였고, 현재는 대부분이 HTML과 CSS로 만든 자신만의 창을 이용한다!

 

Type을 변경하는 방법

어떻게 string을 number로 바꿀 수 있을까? 바로 parselnt이라는 함수를 사용하는 것

parseInt를 사용해서 자료형을 나타냈을 때와 아닐 때, 각각 string과 number이 나온다.

 

age의 출력값인 앞 15는 string이고 parseInt(age)의 출력값인 뒤 15는 number이다!

 

보이는 것만 입력한 값 그대로 나오면 되지 자료형이 그렇게 중요한가?

문자일때는 어느 숫자가 더 큰지를 비교할 수 없지만, 숫자일 때는 숫자를 서로 비교하고 어느 쪽이 큰지 알 수 있다!

예시에서 만들 음주가 가능한 나이인지 판별하는 계산기도 입력한 숫자가 기준의 숫자보다 큰지 작은지를 비교해야한다.

 

수정된 코드

숫자를 입력했을 때

문자를 입력했을 떄

원래의 코드에서 parseInt한 후 나이가 숫자형이 아니라면 NaN이라는 메세지를 뜨게 수정해주었다!

첫번째로 실행된 함수는 prompt("How old are you?");로 먼저 사용자의 나이를 물어보고

두번째로 parseInt()를 사용해서 입력받은 값을 string에서 number로 바꿔주는 함수를 실행했다.

 

#2.14 Conditionals part Two

 

문자를 넣었을 입력 받았을 때는 parseInt가 숫자로 바꿔주지 못하는데

무언가가 NaN인지 판별해주는 함수는 isNaN이다.

isNaN은 boolean으로 알려줄 것이다.

* boolean은 true(참) 아니면 false(거짓)이다.

 

isNaN은 하나의 인수를 주면 숫자인지 아닌지를 알려준다.

isNaN은 boolean을 반환하는데 방금 코드에서는 boolean을 반환했다.

분명 parseInt()를 사용해서 숫자로 바꿔줬는데 왜 false가 나왔는가에 대한 의문이 들었는데

number이 아닌것(NaN)이 아니라는 뜻이다! 즉, 숫자라는 뜻!!

 

조건문을 사용하는 방법은 매우 간단하다!

condition 자리에는 조건이 들어가는데 자료형은 boolean이어야한다.

그 말은 condition은 boolean으로 true와 false가 판별가능해야한다는 뜻이다.

만약 조건이 만족한다면 a에 쓰인 코드가 실행될 것이고

만약 조건을 만족하지 못했을 경우에는 b에 쓰인 코드가 실행될 것이다.

조건문에서 else는 생략할 수 있지만(그럴 경우 조건에 만족하지 않으면 아무것도 실행되지 않는다.)  if는 생략할 수 없다!

 

조건 코드를 작성해서 숫자가 아닌 문자형일 때 숫자를 입력해달라는 문구가 나오도록 설정했다.

가운데 사진은 숫자 15를 입력했을 때의 결과이고, 맨 오른쪽 사진은 문자형인 haha를 입력했을 때 출력되는 값이다.

else를 사용해서 조건에 만족하지 않을 때 실행될 코드를 작성해줬다!

그 경우 15를 입력했을 때 else에 있는 코드가 실행되어 "Thank you for writing your age."라는 문구가 출력된다.

 

# 2.15 Conditionals part Two

 

이번 강의에서는 정말로 음주가 가능한 나이인지 판별하는 계산기를 만들어볼 것이다.

바로 전 강의에서는 if와 else를 하나씩만 사용했지만 조건이 많이 필요한 경우에는 if가 하나 이상 사용될 수 있다.

그럴 때는 if 다음에 else를 사용하는게 아니라 else if로 연결하면 된다.

else if는 처음 if의 조건에 만족하지 않는다면 한가지 조건을 더 사용할 수 있도록 해준다.

 

브라우저에 숫자가 아닌 문자를 입력한다면 if 문의 코드가 실행되고

 

15세라고 입력을 하면 문자가 아닌 숫자를 입력했기에 if문은 실행되지 않지만

else if문을 실행해서 술을 마시기엔 너무 어리다는 문구를 출력하게 합니다.

 

만약 18세 이상으로 입력하면 당신은 술을 마실 수 있다는 문구가 출력된다.

 

이때 7번째 줄에 있는 &&는 and라는 뜻이다! && 앞뒤에 있는 조건 모두가 true여야한다.

둘 중 하나만이라도 false가 된다면 else코드로 넘어간다.

true && true	true
false && true	false
ture && false	false
false && false	false

 

이 외에 OR도 있는데 이 연산자는 둘 중 하나만 true여도 실행할 수 있다.

* || ←이 기호는 shift + \ 키를 누르면 된다!!

true || true	true
false || true	true
true || false	true
false || false	false

 

완성된 음주가능한 나이를 판별하는 계산기 코드이다!!