노마드 코더 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);

 

bye는 출력 X

 

조건문

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과 상호작용하기!