ep.05 조건문

조건문이라는 도구는 우리가 일일이 많은 작업을 하지 않아도 되게 도와주는 아주 혁신적인 도구라고 할 수 있습니다.

다른 프로그래밍 언어를 배워보셨다면 이미 알고 계실 거라 생각이 들지만, 한번 정리해보도록 하겠습니다.

 

 

비교 연산자와 Boolean 데이터 타입

 

일단 우리가 수학 시간에 잠을 자지 않았다면, 

1=1, 1 <2 등 등호와 부등호가 무엇인지 알고 있을 겁니다. 조금 더 나아가서 x <1이라던지, x=2라는 말도 알고 있을 텐데요, 우리는 이 등호와 부등호를 사용하여 조건을 제시하고, 그 조건을 만족할 때 이러한 명령어를 실행해라.라는 조건문을 만들 수 있습니다.

다만, 우리가 알고 있는 것과는 살짝 다르게 비교 연산자는 1===1이라고 표기하게 되는데요,

a===1이라는 뜻은 a가 1과 같으냐?를 묻는 말입니다. (왼쪽의 값이 오른쪽의 값과 일치하느냐를 판단)

이때 나온 결과 값은 true혹은 false가 될 겁니다. 이렇게 true나 false로 나타낼 수 있는 함수가 바로 boolean 데이터 타입이 되는 것이죠.

 

조건문과 boolean데이터 타입은 절대 떼어 놓을 수 없는 관계인데요, boolean의 true와 false값을 이용하여 조건문을 만들기 때문입니다. 기본적으로 문법은 if와 else로 구성이 되는데 말 그대로 if는 만약, else는 그 밖의 것이라는 뜻입니다. 

그럼 조건의 참일 경우에는 if의 명령을 실행하고 조건이 거짓이라면 else를 실행하게 되는 것이죠! 쉽게 예시를 들어볼게요.

 

이렇게 하면 바뀌기는 하는데 button의 value속성이 day로 바뀌지 않아 반복적인 실행은 불가능한 걸 알 수 있습니다. 그래서 배경과 글자색을 바꾸고 난 후, value속성을 day로 바꿔주면 다시 흰 화면으로 돌아가겠죠?

 

 

 

조건문 코드

if(조건){
	명령		<-- 조건이 참일 때
} else {
	명령		<-- 조건이 거짓일 때
}

예시 코드

<h1>web</h1>
   <input id= "n_d" type="button" value="night" onclick="
       if(document.querySelector('#n_d').value==='night'){
           document.querySelector('body').style.background='black';
           document.querySelector('body').style.color='white';
           document.querySelector('#n_d').value = 'day';
       }else{
           document.querySelector('body').style.background='white';
           document.querySelector('body').style.color='black';
           document.querySelector('#n_d').value = 'night';
       }
   ">
   <p>안녕하세요. 정민입니다. 안녕하세요. 정민입니다.</p>

이때 value를 선택하는 연산자는

document.querySelector('#n_d'). value = 'night';

 

#n_d와 night에는 여러분이 필요하신 변숫값을 넣으면 되겠죠? 구글에 javascript get value 정도만 쳐도 여러분이 원하는 명령어 문법을 알 수 있으니 검색을 해가면서 코드를 짜주시면 됩니다! 항상 오타를 주의하면서 코드를 짜주세요! 왜 안 돌아가지?라는 의문이 들 땐 오타가 있는지 항상 다시 확인하며 찾아가는 재미도 꽤 쏠쏠합니다. 오타와의 싸움에서 이기길...!

 

한 줄 요약:

 

if( 조건 ){       

명령           <--조건이 참일 때

} else {

명령           <-- 조건이 거짓일 때 

} 

 

오타를 주의 하자!

 

 

 

 

 

 

 

 

 

---

리팩토링  중복의 제거

 

우리가 이렇게 코드를 짜다보면 중복이 되어 두 번째 버튼에 명령을 줬는데 첫 번째 버튼에 영향이 가는 등 다양한 버그가 생기게 됩니다. 더군다나 한 웹사이트 안에는 수많은 중복이 있을 것이고 그 요소 하나하나를 일일이 다른 이름으로 잡아둔다면 유지보수가 굉장히 어려워지게 됩니다. 이때 우리는 중복을 없애고 한 번에 모든 공통적인 요소를 바꿀, 코드를 깔끔하게 만들 방법을 찾아보는 작업을 해야 합니다. 이때 우리는 두 가지만 기억하면 됩니다.

 

1. this를 잘 사용하자.

2. 공통되는 요소는 하나의 변수로 묶어 유지보수를 쉽게 하자.

 

 

아무리 버튼이 여러개가 있더라도, this를 사용하여 코드를 짠다면 충돌될 일이 없게 됩니다. 중복되는 코드들 때문에 버그가 생기는 현상을 예방하게 되는 것이죠. 두 번째로는 하나의 변수로 묶어 유지보수를 쉽게 한다는 말입니다. 일일이

document.querySelector('body') 이런 긴 코드를 입력할 필요 없이, 간단하게

var    target = document.querySelector('body')을 사용하여 "document.querySelector('body')"이 코드가 필요할때마다 target을 쓰면 됩니다. 간단하게 예시를 들어볼까요?

 

<h1>web</h1>
   <input id= "n_d" type="button" value="night" onclick="
      
       var target = document.querySelector('body');
      
       if(this.value==='night'){
           target.style.background='black';
           target.style.color='white';
           this.value = 'day';
       }else{
           target.style.background='white';
           target.style.color='black';
           this.value = 'night';
       }
   ">
   <p>안녕하세요. 정민입니다.안녕하세요. 정민입니다.안녕하세요. </p>

훨씬 깔끔하고 정돈되었고, 유지보수가 쉬워지는 코드로 바뀌었죠? 이렇게 우리는 this와 변수를 잘 사용하여 리팩토링을 잘해주어야 더 좋은 코드를 만들 수 있게 되는 것입니다.

 

한 줄 요약: 

1. this를 잘 사용하자.

2. 공통되는 요소는 하나의 변수로 묶어 유지보수를 쉽게 하자.