크롬 앱 만들기 3. JavaScript 기본 문법 익히기(3)

이 프로젝트는 '바닐라 JS로 크롬 앱 만들기'입니다.

이 주제의 경우, NOMAD CODERS에서 누구든지 들을 수 있는 수업입니다.

노마드 코더 Nomad Coders – Clone Startups. Learn to Code.

노마드 코더 Nomad Coders

오늘은 간단한 조건문과 입력, 강제 형 변환에 대해 정리하고자 합니다.

---

조건문은 개발자가 원하는 상황에서만 코드를 실행시키고 싶거나 상황에 따라 다른 코드를 실행시켜야 하는 상황에서 사용되는 방법입니다.

사용방법은 if(조건) 을 통해 선언할 수 있습니다.

const x = 10;
if(x<=10)
{
 console.log("x는 10 이상의 값");
}

가장 간단한 방식의 조건문이며, 조건에 맞지 않은 경우에는 다른 코드를 실행시키고 싶다면 else문을 사용하면 됩니다.

 

const x = 10;
if(x<=10)
{
 console.log("x는 10 이상의 값");
}
else
{
 console.log("x는 10 미만의 값");
}

 

조건을 여러개를 넣을 수도 있으며, 조건문 안에 조건문을 넣는 것 역시 가능합니다.

//조건 여러개를 사용하는 방법
const x = 100;
if(x===100)
{
 console.log("만점");
}
else if(x>=90)
{
 console.log("A");
}
else if(x>=80)
{
 console.log("B");
}


//조건 안에 조건을 넣는 방법
const y = 10;
if(y>=10)
{
 if(y<=12)
 {
  console.log("y는 10이상 12이하");
 }
}

 

---

다음은 변수에 값을 입력하는 방법입니다.

모든 변수를 작성할 때 값을 대입해서 프로그래밍을 할 수 없기 때문에 실행할 때 값을 입력할 수도 있습니다.

자바스크립트에서 값을 입력하는 방법은 prompt()를 사용하는 방법입니다.

prompt()의 경우 두 개의 변수를 받지만 하나의 변수만 적어도 작동합니다.

const age = prompt("나이를 입력하세요");
const name = prompt("이름을 입력하세요","예시");

첫 번째에 들어오는 변수는 질문영역에 속하며 두 번째에 들어오는 변수는 입력칸에 들어있는 변수가 됩니다.

하지만 첫번째의 age의 경우 문제가 발생할 수 있는데, prompt로 숫자를 적어도 문자열로 받아오기 때문입니다.

이 때에는 강제로 형태를 숫자로 바꾸어 주어야합니다.

문자열을 숫자로 바꾸어주는 방버은 parseInt이며, 위 age 코드를 수정하면

const age = parseInt(prompt("나이를 입력하세요"))

로 사용할 수 있습니다.

이 때, 숫자가 아닌 다른 문자(a,ㄱ,* 등)가 들어가면 parseInt의 리턴값은 NaN입니다. NaN은 Not a Number의 준말입니다.

---

오늘 적은 것을 종합하여 간단한 예시를 적어보자면

//강제형변환, 변수 입력 사용하기
const age = parseInt(prompt("나이를 입력하세요."));
//isNaN은 기본으로 제공되는 함수이며, NaN이면 True, 아니면 False를 리턴합니다.
if(isNaN(age))
{
 console.log("숫자만 입력해주세요");
}
//다중 조건문 사용하기
else if(age <=19)
{
 console.log("성인이 아닙니다.");
}

다음과 같이 사용할 수 있습니다.

지금까지 간단하게 문법을 익혀보았습니다. 이 외에도 사실 다양한 문법이 있으나, 필요한 부분은 배우면서 진행하도록 하며 프로젝트를 진행해보고자 합니다.