자바스크립트 - 조건문

조건문

if

<if>() {} else {}
이용하여 특정 상황에 따른 조건을 출력

Comparison Operator(비교연산자)와 Boolean

===

비교연산자(===)의 경우 좌항과 우항을 비교하여 같다면 true, 다르면 false를 출력
Boolean의 경우 true, false를 지칭

조건문 활용

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

(클릭에 따른 방법 적용)

리팩토링

중복된 코드를 낮추고 불필요한 코드를 제거하여 효율성을 높이는 작업
→ 유지보수에 용이

리팩토링 예시

위 코드에서 자기자신을 지칭하는 <input>을 this로 지칭하고,
중복되는 값을 var target 으로 지정하여 리팩토링이 가능하다

<input id="night_day2" 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' ;
  }
">

Take-Away

• 큰따옴표와 작은따옴표의 구분
  한 태그를 작성할때 큰 따옴표를 사용했다면, 내부 값에서 큰 따옴표를 재사용하게 되면 오류가 생길 수 있다.
  예를 들어,
  아래 코드에서 <input> 태그의 onclick 속성에서 큰따옴표를 썼으면, 내부 body 값 등을 지칭할때에는 작은 따옴표를 써야한다.
  저거 잘 몰랐다가 배운거 복습할 때 잘 안돼서 큰일날뻔 했다.
  지금부터라도 습관을 잘 들여놔야 나중에 가서 실수하지 않을 듯 싶다.

<input id="night_day2" 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' ;
  }
">

• 프로그래밍 언어 입문에 대한 소고
  본격적으로 조건문등과 같은 챕터에 들어가기 시작하면서 뇌에 과부하가 오기 시작했다.
  천천히 배운걸 리뷰해보고, 내가 하고자 했던 것에 적용하는 것이 가장 빨리 늘거 같긴 하다.
  근데 아직 배운게 너무 없기도 해서 머리가 복잡하다.