INTP의 멋대로 개발 세상

[생활코딩 JavaScript] 14강-15강. 조건문 & 비교연산자 & boolean 본문

JavaScript

[생활코딩 JavaScript] 14강-15강. 조건문 & 비교연산자 & boolean

인팁구름 2023. 4. 12. 03:26

 

이번 포스팅은

조건문이라는 아주아주 중요한 개념을 배워볼 것이다😎

 

 

 

조건문이라는 것은,

하나의 프로그램이 하나의 흐름으로 가는 것이 아니라

조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것❗

 

 

이전 강의에서 만든 예제.

주간모드와 야간모드 버튼을 만들었는데,

하나의 버튼으로 만들어보고 싶다면?

(밝은 상태에서 클릭하면 깜깜하게, 깜깜한 상태에서 클릭하면 밝은 상태로)

(= 이런 걸 토글이라고 한다)

 

버튼 하나로 day와 night를 왔다갔다하는 토글!

 

(문법XXX 조건문이 이렇게 생겼다라는 것만 보자!)

토글의 코드는 이렇게 생겼다.

if 조건에 'day' 모드이면 if {} 중괄호 안의 코드가 실행되고,

else, 즉 night 모드이면 else {} 중괄호 안의 코드가 실행된다는 뜻이다.

영어랑 똑같이 해석되기 때문에 의미 파악은 어렵지 않다😎

 

 

 

 

비교연산자, boolean, 조건문은

서로 유기적인 관계라서 함께 공부하는 것이 이해에 편하다.

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>비교연산자 & boolean & 조건문</h1>
    <h2>=============================</h2>

    // 1과 1을 비교
    <h3>1===1</h3>
    <script>
        document.write(1 === 1);
    </script>

    // 1과 2를 비교
    <h3>1===2</h3>
    <script>
        document.write(1 === 2);
    </script>
</body>

</html>
더보기

'===' 은 연산자 왼쪽의 값과 오른쪽의 값이 같으냐는 표시이다

결과값은 true / false 로 나온다

ex) 1===1 ➡ true

1===2 ➡ false

'===' 는 비교 연산자이자 이항 연산자라고 부른다.

좌항과 우항이 있고

좌항과 우항을 결합해서 어떠한 데이터를 만든다.

왼쪽의 값과 오른쪽의 값을 비교해서 같다면 true, 다르면 false를 리턴한다.

1+1 도 같은 맥락이다. +가 이항 연산자이다 (좌항과 우항의 값을 더함)

 

 

그리고  true와 false 값을 묶어서 'boolean' 이라고 부른다.

 

앞에서 잠깐 배운 데이터 타입 종류가 하나 늘었다!

1. Number

2. String

3. Boolean

 

Number와 String은 무한한 갯수를 가지지만 Boolean을 단 2개의 데이터 타입만을 가지고 있다.

 

 

이번엔 1이 2보다 작은 것인가 라고 물어보고 싶다.

원래 우리는 평소에 1 < 2 이런 식으로 쓰지만

HTML에서는 꺾쇠가 문법 때문에 연산자로 인식하지 않아서 다르게 써 주어야 한다.

바로 이렇게! 🔽

lt 는 Less Than 이라는 뜻이다

반대는

&gt;

 

자바스크립트의 연산자도 바꿔주고, 화면을 확인해 보자

 

h3 태그의 1&lt;2 도 < (꺾쇠)로 잘 표현이 되었고

결과도 true ( 1은 2보다 작으니까) 로 잘 출력되었음을 볼 수 있다😮

 

마찬가지로 숫자를 바꿔서 써 넣어도

 

 

거짓이니까 false라고 잘 출력 된다.

부등호 방향이 반대로 되는 케이스도 마찬가지다.

 

 

 

 

☝ 한 줄 요약 ☝

비교 연산자(===)의 결과는 true, false 둘 중 하나이고

이 두 가지를 묶어서 Boolean이라고 부른다!

 

 

 

 

저작자표시

'JavaScript' 카테고리의 다른 글

[생활코딩 JavaScript] 12강. 자바스크립트로 HTML, CSS 동적으로 만들기(주간모드, 야간모드)  (0) 2023.04.10
[생활코딩 JavaScript] 7강. 변수와 대입연산자  (0) 2023.04.09
[생활코딩 JavaScript] 6강. 데이터 타입(String, Number)  (0) 2023.04.07
[생활코딩 JavaScript] 5강. Console  (0) 2023.04.07
[생활코딩 JavaScript] 4강. 이벤트(Event)  (0) 2023.04.07
'JavaScript' Related Articles more
Comments