6.비교 연산자, 조건문(if,else)

이번 시간에는 비교 연산자에 대해 알아보고
그것을 활용한 조건문을 배워보도록 하겠다!

✔️ 비교 연산자

우리는 비교 연산자를 수학시간에 다룬 경험이 있다.
자바스크립트에서도 이와 다르지 않게 비교 연산자를 사용할 수 있다!

< 크다 
> 작다
<= 크거나같다 
>= 작거나같다
== 같다
!= 다르다

자바스크립트에서도 이러한 비교연산자를 물어볼 수 있다!

== 같다 할 때 왜 =를 두개 쓰고
!= 같지않다(다르다) 할 때 왜 !를 쓸까?

변수를 배웠을때 =을 한개쓰면 값을 할당하는 것을 의미한다.

a = 3 (a가 3인것이 아니라 a에 3을 할당해줌)
a == 3(a는 3이다) 같은지 알고싶을 때
a != 3(a는 3이 아니다) 다른지 알고 싶을때

이렇게 비교연산자를 사용하면 값을 반환하는데
반환값은 항상 boolean형이다
true나 false 값을 반환한다!

⌨︎ 입력

console.log(10>5);
console.log(10 == 5);
console.log(10 != 5);

💻 실행결과

true
false
true

10이 5보다 크다 -> true
10은 5와 같다 -> false
10은 5와 다르다 -> true

✔️ == 동등 연산자

참고로 == 이렇게 =를 2번쓰는 것을 동등연산자라고 하는데
이상하게 동작할 때가 있다.

⌨︎ 입력

// 동등 연산자

const a = 1;
const b = "1";

console.log(a == b);

💻 실행결과

true

a는 숫자 1이고 b는 문자 1인데
둘이 같다고 true값을 나타내고 있다. (숫자형과 문자형을 비교하였는데 같다고 나옴)

✔️ === 일치 연산자

=== (=을 세개쓰면 type까지 비교해준다)
⌨︎ 입력

const a = 1;
const b = "1";

console.log(a === b); // 일치 연산자

💻 실행결과

false

이를 일치 연산자라고 하는데
가급적 동등 연산자보다 type까지 비교해주는 일치 연산자를 사용하는게 좋다!
숫자1과 문자1을 같다고 판단하는 코드는 어떤 버그를 만들지 모르기 때문이다!

✔️ 조건문

조건문: 어떤 조건에 따라 이후 행동이 달라지게 하는 역할을 해준다.

✔️ If

If문: ( ) 괄호안에 들어가있는 조건을 평가해서 true면 실행해준다.

If : 만약이라는 뜻.

이 코드는 age가 19보다 크면 { } 중괄호 안에 있는 코드가 실행된다.
코드가 한줄 뿐이라면 { } 중괄호의 생략이 가능하지만 항상 중괄호를 써주는 것이 좋다!
코드의 통일성,가독성을 올리기 때문이다.

If 뒤의 ( )괄호안의 값은 항상 boolean형으로 변환된 뒤 판단된다.
형변환 시간에 배웠던 boolean형과 같이 동일하게 동작된다.

만약 19세 미만이 접속하였다면 안녕히 가세요 라는 문구를 보여주고 싶을때 두 코드 중 하나는 무조건 실행될 것이다.

이를 더 간단하게 작성하는 방법이 있는데 바로 else 이다.

✔️ Else

else는 if문의 조건이 false일 때 실행된다.

⌨︎ 입력

// if, else, else if

const age = 30;

if(age > 19){
 console.log('환영 합니다.');
}

if(age <= 19){
 console.log('안녕히 가세요.');
}

console.log('-------------------------------')

💻 실행결과

"환영 합니다."
"-------------------------------"

const age = 30; 으로 설정해주어
age가 30이기에

첫번째 조건문이 실행되었고, 두번째 조건문은 실행되지 않았다.
두번째 조건문은 else를 통해 간단하게 작성 가능하다.

⌨︎ 입력

// if, else, else if

const age = 30;

if(age > 19){
 console.log('환영 합니다.');
} else {
 console.log('안녕히 가세요.');
}

console.log('---------------------------')

else절은 if문이 false일 때 실행된다.
age가 19보다 크면 첫번째줄(환영 합니다.)가,
그렇지 않으면 두번째줄(안녕히 가세요.)가 실행된다!

⌨︎ 입력

// if, else, else if

const age = 10;

if(age > 19) {
 console.log('환영 합니다.');
} else {
 console.log('안녕히 가세요.');
}

console.log('--------------------------------')

💻 실행결과

"안녕히 가세요."
"--------------------------------"

age를 10으로 설정했을 때는 안녕히 가세요가 출력된다!

그런데 19살이면 수능 잘치세요 라는 문구를 추가하고 싶어졌다!
이렇게 age === 19 일치연산자를 써야될 것이다.
이럴 때 사용하는 것이 바로 elseif 이다!

다음과 같이 코드를 짜면된다.

만약 age가 19세 이상이면 '환영 합니다.'를,
19세라면 '수능 잘치세요.'를
19세 이상도 아니고 19세도 아니라면 '안녕히 가세요.'
를 반환할 것이다!

⌨︎ age가 30인 경우

const age = 30;

💻 실행결과

"환영 합니다."
"--------------------------------"

⌨︎ age가 10인 경우

const age = 10;

💻 실행결과

"안녕히 가세요."
"--------------------------------"

⌨︎ age가 19인 경우

const age = 19;

💻 실행결과

"수능 잘치세요."
"--------------------------------"