메모장

28. 함수의 활용 본문

JavaScript/[생활 코딩 JS]

28. 함수의 활용

Itchild 2024. 4. 25. 13:30
728x90
반응형

 

동작하는 내용은 똑같지만 코드를 효율적으로 만드는 것을 리팩터링이라고 합니다. 함수는 리팩터링의 굉장히 중요한 수단 중 하나로서 리팩터링 에서 아주 중요한 역할을 합니다.

<head> 태그 안쪽에 <script> 태그를 만들어 붙여넣었습니다. 

<script> 
function nightDayHandler() {
	var target = document. querySelector('body');
	if(this.value === 'night'){
		target.style.backgroundColor = 'black';
		target.style.color = 'white';
		this.value = 'day';
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while(i < alist.length){
			alist[i].style.color = 'powderblue';
			i=i+1;
		}
	} else {
		target.style.backgroundColor = 'white';
		target.style.color = 'black';
		this.value = 'night';
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while(i < alist.length){
			alist[i].style.color = 'blue';
			i=i+1;
		}
	}
}
</script>
 

그리고 <input> 태그를 달아줍니다. 

<input type="button"  value="night" onclick="
	nightDayHandler();
">
<input type="button"  value="night" onclick="
	nightDayHandler();
">
 

함수 안에서 this 값이 input버튼을 가리키도록 nightDayHandler() 이 실행될때 this값을 줍니다.

그리고 function nightDayHandler(self) 로 코드를 바꿔서 this 라는 인자를 self라는 매개변수로 받겠습니다.

<script> 
function nightDayHandler() {
	var target = document. querySelector('body');
	if(self.value === 'night'){
		target.style.backgroundColor = 'black';
		target.style.color = 'white';
		self.value = 'day';
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while(i < alist.length){
			alist[i].style.color = 'powderblue';
			i=i+1;
		}
	} else {
		target.style.backgroundColor = 'white';
		target.style.color = 'black';
		self.value = 'night';
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while(i < alist.length){
			alist[i].style.color = 'blue';
			i=i+1;
		}
	}
}
</script>
 

이렇게 되면 < input > 버튼들이 1억개라 해도 각 버튼이 알아서 잘 동작하게 되며, 코드도 훨씬 더 줄고, 함수의 이름을 보고 주간 모드/야간모드를 다루는 코드라는 것을 알 수 있으며, nightDayHandler() 함수의 내용을 바꾸면 이를 실행하는 1억개의 사용처에도 변경사항이 모두 적용 되는 효과가 생깁니다.

 

728x90
반응형

'JavaScript > [생활 코딩 JS]' 카테고리의 다른 글

30. 객체쓰기와 읽기  (0) 2024.04.25
29. 객체 예고  (0) 2024.04.25
27. 함수 (return 문)  (0) 2024.04.25
26. 매개변수와 인자  (0) 2024.04.25
25. 함수  (0) 2024.04.25
'JavaScript/[생활 코딩 JS]' Related Articles more