노마드 코더 3일차
2일차까지의 내용을 바탕으로 만들 수 있는 계산기
const calculator = {
add: function (a, b) {
console.log(a + b);
},
minus: function (a, b) {
console.log(a-b);
},
multiply: function(a, b){
console.log(a*b);
},
divide: function(a,b){
console.log(a/b);
},
square: function(a,b){
console.log(a**b);
},
};
calculator.add(19,3);
calculator.minus(19,3);
calculator.multiply(19,3);
calculator.divide(19,3);
calculator.square(19,3);
console.log는 이름 그대로 console에 결과를 표시해 준다.
그렇다면 함수 내부에서 출력하지않고 값만 받아오려면 어떻게 해야할까?
(나이를 한국 나이로 바꾸어주는 코드)
const age = 96;
function calculateKrAge(ageOfForeigner){
return ageOfForeigner + 2;
}
const krAge = calculateKrAge(age);
console.log(krAge); //98
답은 return 이다
age를 받아 calclateKrAge 라는 함수의 인자로 주면 +2를 해서 값을 리턴해준다.
리턴 받은 값을 console.log(krAge)해주면 처음 지정한 age = 96 에서 2를 더한 값 = 98이 출력된다.
자바와 같이 return한 값을 받을 변수도 필요하다!! (위 코드의 const krAge)
return으로 값을 받아 변수에 저장하면 function의 결과를 console에서 확인하는 것 이외에 다양한 활용이 가능하다.
const calculator = {
add: function (a, b) {
return a + b;
},
minus: function (a, b) {
return a-b;
},
times: function(a, b){
return a*b;
},
divide: function(a,b){
return a/b;
},
power: function(a,b){
return a**b;
},
};
const plusResult = calculator.add(2, 3);
const minusResult = calculator.minus(plusResult, 10);
const timesResult = calculator.multiply(10, minusResult);
const divdeResult = calculator.divide(timesResult, plusResult);
const powerResulr = calculator.power(divdeResult, minusResult);
함수의 연산 결과인 --Result를 다른 함수의 매개변수값으로 사용이 가능하다.
const calculator = {
add: function (a, b) {
console.log (a + b);
}
};
const plusResult = calculator.add(2, 3);
함수내에서 값을 console.log만 하고 return하지 않는다면 위와 같이 결과는 console에 표시되지만 plusResult의 값은 정의되지 않은 것을 알 수 있다.
※ 주의할 점 : 함수내에서 값을 return하게 되면 그대로 함수의 동작이 끝나게 되므로 return 명령어 이하의 명령은 실행되지 않는다.
const calculator = {
add: function (a, b) {
console.log("hello");
return a + b;
console.log("bye");
}
};
const plusResult = calculator.add(2, 3);
조건문
if else
음주가 가능한 나이인지 아닌지 출력하는 프로그램만들기
함수 : prompt
-> 사용자에게 메세지를 보여주고 값을 입력할 수 있도록 하는 함수.
prompt는 2가지 인자를 받으며 하나의 인자는 사용자에게 보여질 메세지, 또다른 인자는 사용자에게 입력받은 값이다.
const age = prompt("How Old are you?");
console.log(age);
위 처럼 입력 시 아래와 같이 알림창이 뜨게되고 자바스크립트는 사용자의 입력을 받기 전까지 다음 라인을 실행 시키지 않고 대기한다. 사용자가 값을 입력하면 그 값이 변수에 저장되고 console.log 명령에 의해 console에 출력된다. (만약 입력을 취소한다면 null이 console에 출력되고 아무것도 입력하지 않고 확인을 누른다면 빈 String이 age 저장되고 출력된다.(아무것도 출력되지 않음))
(prompt는 팝업을 통해 입력을 받고 이 팝업은 CSS로 스타일을 변경할 수 없음+팝업 차단 등으로 사용이 제한 되는 경우가 있으므로 현재는 잘 사용되지 않는다.)
현재 입력받은 값의 데이터 타입을 확인해보면
console.log(typeof age);
문자열 타입인 것을 확인 할 수 있다. -> 만들고자 하는 프로그램에서는 "나이", 즉 정수 타입을 입력받아야 하므로(성인인지 아닌지 알기 위해서는 정수의 크기비교가 필요하다) type을 변경하는 법을 알아보자
함수: parseInt()
-> String 을 number로 변환하는 함수
const age = prompt("How Old are you?");
console.log(typeof age + ", " + typeof parseInt(age));
마찬가지로 나이를 입력받고 parseInt를 사용하기 전과 후의 데이터타입을 비교해보면
전자는 String 후자는 number 타입인 것을 확인 할 수 있다.
또 parseInt를 사용하면 숫자타입이 아닌 다른 데이터타입의 입력을 인지할 수 있다.
const age = prompt("How Old are you?");
console.log(age + ", " + parseInt(age));
문자열을 입력했을 때 parseInt함수를 사용하게되면 결과값으로 NaN(Not a Number)이 출력된다.
따라서 if문을 사용하여 paseInt(age)가 NaN이면 경고 메시지를 띄우도록 설정할 수 있을 것이다.
함수 : isNaN( )
NaN이라면 true, NaN이 아니라면 false를 리턴하는 함수
if문의 작성 방법
if(condition) {
// condition === true
} else {
//condition === false
}
(자바와 같이 else부분은 작성하지 않아도 된다.)
isNaN과 if문을 조합하면 문자를 입력헀을 때 경고문구가 나오도록 코드를 짤 수 있다.
const age = parseInt( prompt("How Old are you?") );
if(isNaN(age)) {
console.log("Please write a number.");
}
숫자를 입력하면 isNaN이 false이기 때문에 아무 일도 일어나지 않지만
문자열을 입력하면 isNaN이 true가 되어 console에 "Please write a number. 가 출력되게 된다.
2개 이상의 조건을 사용하고 싶다면 else if를 사용하면 된다.
const age = parseInt( prompt("How Old are you?") );
if(isNaN(age) || age<0) {
console.log("Please write a positive number.");
} else if(age<18) {
console.log("You are too young.")
} else if(age>=18 && age<=50) {
console.log("You can drink.")
} else if(age>50 && age<=80) {
console.log("You should exercise")
} else {
console.log("You better not drink")
}
각 조건 별로 console에 출력 되는 내용
1번 조건 (NaN이 true이거나 age<0일 때) : Please write a positive number.
2번 조건 (NaN이 false이면서 0<=age<18일 때) : You are too young.
3번 조건 (NaN이 false이면서 18<=age<=50일 때) : You can drink.
4번 조건 (NaN이 false이면서 50<age<=80일 때 ) : You should exercise
5번 조건 (NaN이 false이면서 age>81일 때) : You better not drink
끝
다음 시간에는 HTML과 상호작용하기!