[생활코딩|WEB_JavaScript#5] 조건문 上 : 조건문 예고, 비교 연산자와 Boolean 타입 2020.01.30

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

#1. 조건문 예고

지금부터 조건문이라고 하는 굉장히 중요한 주제를 살펴보겠습니다.

조건문이라고 하는 것은,

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

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

우리는 프로그래밍을 통해 반복 업무에서 해방되는 혁명적인 시대에 살고 있습니다.

또한, 조건문은 아주 복잡한 업무까지도 해방되도록 하는 더 혁명적인 시대에 우리를 살게 해줍니다.

 

#1-2.

See the Pen NWPezwQ by nani6765 (@nani6765) on CodePen.

 

 

이 때까지 작업해왔던 제 코드입니다.

생활코딩 사이트와 그 내용이 조금 다르지만, 지금 우리가 알아보고자 하는 주제에 있어서는

큰 지장이 없으므로 이대로 진행하도록 하겠습니다.

저희는 저번에 night와 day버튼을 통하여 글자색과 배경색을 변경하는 대단한 기능을 구현하였습니다.

하지만 이 버튼을 쓰다보니 불만족이 생기는 겁니다.

이 기능을 조금 더 세련적이고 깔끔하게 바꾸고 싶은 욕심이 생겼습니다.

버튼이 두개로 구현하는 것이 아니라,

깜깜한 상태에서 버튼을 클릭하면 밝게 되고

밝은 상태에서 버튼을 클릭하면 깜깜하게 바뀌는 기능을 구현하고 싶어졌습니다.

이런 것을 토글(toggle)이라고 합니다.

 

#1-3.

See the Pen ExazNMa by nani6765 (@nani6765) on CodePen.

 

 

위에서 제가 글로 설명해 놓은 기능을 실현한다면, 위와 같은 코드가 될 것입니다.

<input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night'){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      document.querySelector('#night_day').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">

2번째 줄을 확인해 보시면 if라는 조건문이 존재하고,

if라고 하는 조건문에 따라서 만약 현재 day모드/주간모드 라고 한다면 L3 ~ L5의 코드가 실행되고,

6번째 줄에 else 즉, day모드/주간모드가 아니라면 = 야간모드 이라면, L7 ~ L9의 코드가 실행되게 되어 있습니다.

그리고 또한 '==='등의 비교연산자를 알아보고,

비교 연산자라는 걸 통해서 만들어지는 결과인 Boolean Type도 알아보겠습니다. 

만약, 프로그래밍을 경험한 적이 있고, 조건문, 비교 연산자, Boolean 이라는 주제를 알고 있으시다면,

생활코딩 사이트에서는 '비교 연산자와 Boolean 타입' 강의를 생략하기를 권하고 있습니다.

시간을 절약할 수 있는 방법이긴 하지만, CSS의 수업때와 마찬가지로 생략하지 않고 진행하겠습니다.

 

#2. 비교 연산자와 Boolean 타입

비교연산자라는 것과 비교 연산자를 통해 만들어지는 Boolean Data Type을 살펴보겠습니다.

그리고 이후 조건문을 살펴 보겠습니다.

이 셋은 아주 깊은 연관성을 가지고 있기에 묶어서 알아보도록 하겠습니다.

 

#2-1.

See the Pen JavaScript#4 by nani6765 (@nani6765) on CodePen.

 

위 코드는 생활코딩에서 확인하실 수 있으십니다.

<h1>Comparison operators & Boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
  document.write(1===1);
</script>

<h3>1===2</h3>
<script>
  document.write(1===2);
</script>

<h3>1&lt;2</h3>
<script>
  document.write(1<2);
</script>

<h3>1&lt;1</h3>
<script>
  document.write(1<1);
</script>

Comparison opeartor(비교연산자)와 Boolean에 대하여 학습해보겠습니다.

먼저 "===" 이것의 의미는 무엇일까요?

동등 비교연산자라 칭하며 왼쪽에 있는 값과, 오른쪽에 있는 값이 같으냐?

를 묻는 기능을 합니다.

그리고 그 결과에 따라 true or false를 출력합니다.

'1 === 1'의 구문에서는 true가, '1 === 2'의 구문에서는 false가 출력됨을 확인할 수 있습니다.

동등 비교연산자는 동시에 이항연산자이기도 합니다.

좌항과 우항을 결합하여 어떠한 데이터를 생성하기 때문입니다.

다른 예시를 살펴 보겠습니다.

'<' 좌항의 값이 우항의 값보다 작냐 / 우항의 값이 좌항의 값보다 크냐를 묻는 이 친구는

꺽쇠라고 하여 HTML에서 '&lt;'로 사용합니다.

1<2 에서는 true값이, 1<1에서는 false값이 출력됨을 확인할 수 있습니다.

 

#2-2.

지금까지 살펴본 Data Type으로는 Number, String 그리고 오늘 학습하는 Boolean이 있습니다.

숫자와 문자의 데이터 타입에 들어갈 수 있는 데이터 영역은 무수히 많습니다.

(물론 숫자는 컴퓨터 입력체계에 따라 유한적일 수 있지만.. 지금은 이게 중요한게 아니죠!)

하지만 Boolean에는 True 혹은 False 이 두개의 데이터로만 이루어져 있습니다.

이 Boolean data type으로 인해 저희는 적용되는 조건문을 통해 우리는 복잡한 코딩을 구현할 수 있게 됩니다.