[부스트코스][BoostCourse] 4. Javascript 제어문(1/2) (비교 연산자/ 조건문)

본 게시글은 생활코딩 강의를 듣고 정리한 글입니다

---

프로그래밍

JS는 프로그래밍 언어이다

프로그래밍은 프로그램을 만드는 행위고,

프로그램은 "순서"라는 의미가 있다

컴퓨터를 사용할 때에 다양한 기능을 "순서"대로, 반복적으로 이용하게 된다

 

HTML로 만든 웹페이지는 한 번 만들어지면 바뀌지 않는다

별다른 순서가 없이 태그를 중심으로 웹페이지를 구현하고, 그저 구조와 요소를 정의한다

이 작성한 코드를 한 번에 페이지로 출력되면 끝이므로 HTML을 프로그래밍 언어라고 부를 수 없다

 

그러나 JS는 사용자와 상호작용하고, 여러 기능이 실행되어야 하므로 프로그래밍 언어라고 부를 수 있다

 

---

비교 연산자 (Comparison Operators)

조건문에 앞서, 비교 연산자에 대해 알아보자

 

우리는 이전에 데이터 타입을 들어보았다 (snupi.tistory.com/92)

[부스트코스][BoostCourse] 3. 웹과 Javascript (콘솔, 이벤트, 데이터 타입; 문자열과 숫자, 변수와 대입

• undefined
• null
• Boolean
• Number
• BigInt
• String

이 중 Boolean의 결과는 True 혹은 False, 두가지가 존재한다

그리고 비교 연산자는 True 혹은 False, Boolean 타입을 결과값으로 내놓는다

예를 들면 다음과 같다

 

var x = 1;  // x는 1이다
var y = (x < 2);  // y는 (x는 2보다 작다)

// y는 True

 

위 예시에서 "<"가 비교를 하는 비교 연산자이다

 

비교 연산자는 다음과 같은 것들이 있다

 

• a < b : a가 b보다 작으면 True
• a > b : a가 b보다 크면 True
• a <= b : a가 b보다 작거나 같으면 True
• a >= b : a가 b보다 크거나 같으면 True
• a === b : a가 b와 같으면 True (==와 달리 형변환을 하지 않음, 엄격하게 변수 타입까지 비교)
• a !== b : a가 b와 같지 않으면 True (!=와 달리 형변환을 하지 않음, 엄격하게 변수 타입까지 비교)

그리고 이들은 이항 연산자이고,

HTML에서 꺽쇠 기호를 표현하려면 다음과 같이 작성해야 한다

 

&lt; <!-- < -->
&gt; <!-- > -->

 

---

조건문 (Conditional statements)

우리는 살면서 수많이 조건에 따라 행동한다

ex)
편의점에 가서
이 과자를 사면 1,500원을 지불해야 한다
이 음료수를 사면, 2,500원을 지불해야 한다

이와 같이 조건문은 조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업을 실행하는 문장이다

 

다음은 조건문인 if문의 예시이다 (switch문도 있으나 이는 따로 공부해보도록 하자)

 

var a = 1;
var b = 2;

// a가 b보다 크면, { } 실행
if(a > b) {
  document.write("a가 크다");
}
// 그게 아니라면, { } 실행
else {
  document.write("a가 크지 않다");
}

 

구조가 명확하여 이해하기 어렵지 않다고 생각한다

 

다음은 한 버튼의 value 값을 기준으로, 이 value가 night면 day 버전으로 바뀌는 코드를,

day면 night 버전으로 바뀌는 코드를 실행하도록 프로그램이다

 

<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';
  }
  
">

 

어려워 보일 수 있지만 하나씩 읽어보면 이해할 수 있다

 

1. 버튼 형식의 input 태그
2. onclick 속성에다가 JS 코드를 작성하였다
3. if-else 문의 구조로 작성하였다
4. 만약 id의 값이 night_day인 태그의 value값이 'night'이라면,
5. { } 세 줄을 실행시킨다
6. 그것이 아니라면,
7. { } 세 줄을 실행시킨다

위 코드를 리팩토링으로 중복을 변수로 제거한다면 다음과 같이 수정해볼 수 있다

 

<input id="night_day" type="button" value="night" onclick="

  var target = document.querySelector('body');
  
  if(this.value === 'night') {
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    this.value = 'day';
  }
  else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value = 'night';
  }
  
">

 

이처럼 중복을 끝까지 없애는 것(this나 변수 선언 활용 등) 이 코딩을 잘하는 법 중 하나라고 한다

 

---