조건문의 활용

생활코딩 WEB2 - JavaScript 강의를 듣고 기억하고 싶은 내용을 정리했습니다.

조건물을 활용해서 night day 버튼을 하나로 만들 수 있습니다. 우선 input 태그에 id 값을 주고,

<input id="night_day" type="button" value="night" onclick=" if 조건문 실행 ">

아래와 같이 조건문을 작성합니다.

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

night_day 라는 id 값을 가진 버튼의 value 값을 조건으로 조건문을 실행합니다. 위 코드는 중복이 많으므로 리팩토링을 진행합니다. 자기 자신을 불러오는 코드는 this 로 대체할 수 있습니다. this 를 사용하면 input 태그에 id 값을 주지 않아도 됩니다.

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

대부분의 기술은 중복의 제거와 관련이 있습니다. 코딩을 잘하는 방법 중 하나가 있다면 중복을 끝까지 쫓아가서 없애버리는 것입니다. 위 코드에서 반복 사용되는 document.querySelector('body') 도 변수를 사용해 중복을 제거할 수 있습니다.

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

변수를 사용해 전체 코드의 양을 줄이고, 해당 변수를 쓰는 코드를 일괄 수정할 수 있습니다.