함수라는 것은 우리가 수많은 명령문들을 하나의 함수라고 지칭하여 묶어둔 것입니다.
쉽게 비유를 해보자면,
예를 들어서 어머니께서 저녁에 두루치기를 만들어주신다고 장보기 심부름을 시킨다고 생각해보세요.
두루치기를 만들기 위한 재료가 무엇인지 안다고 가정할 때,
매번 두루치기를 만들때마다
ex 1) 삼겹살, 김치, 양파, 당근, 참기름, 깨, 등등 사와!
ex 2) 두루치기 재료 사와!
ex1번보다는 ex2번이 더 간단하게 말할 수 있을겁니다. 함수도 이와 마찬가지로 미리 두루치기의 재료가 무엇인지 입력을 해주고, 필요할때마다 '두루치기 재료 사와!' 이렇게 시키는 것과 아주 유사하다고 보면 됩니다.
우리는 함수를 사용하기 전에 함수의 이름과, 어떤 명령어를 실행해야 할지 미리 선언을 해두어야 합니다.
function daynightHandler(){
//명령어
};기본적인 문법은 이렇게 쓸 수 있는데, function이라는 단어를 쓰고, daynightHandler라는 함수의 이름을 선언한 다음 (){}을 사용하면 됩니다. 이때 () 안에는 사용할 변수를 넣어주면 되는데 자세한 것은 예시를 들어보면서 설명해보겠습니다.
<body>
<script>
function daynightHandler(self){
var target = document.querySelector('body');
var alist = document.querySelectorAll('a');
var i = 0;
if(self.value === 'night'){
target.style.background = 'black';
target.style.color = 'white';
self.value = 'day';
while(i< alist.length){
alist[i].style.color = '#ff0'
i++;
}
}else{
target.style.background = 'white';
target.style.color = 'black';
self.value = 'night';
while(i< alist.length){
alist[i].style.color = 'blue'
i++;
}
}
};
</script>
<h3><a href="#">WEB</a></h3>
<input id="n_d" type="button" value="night" onclick="
daynightHandler(this);
">
<input id="n_d" type="button" value="night" onclick="
daynightHandler(this);
">
<input id="n_d" type="button" value="night" onclick="
daynightHandler(this);
">
<ul>
<li><a href="#">1. html</a></li>
<li><a href="#">2. css</a></li>
<li><a href="#">3. javascript</a></li>
</ul>
<p>안녕하세요. 정민입니다. 안녕하세요. 정민입니다. 안녕하세요. 정민입니다. 안녕하세요. 정민입니다.</p>
</body>
아까 두루치기 심부름에 비유해보자면, input에 onclick이라는 명령어가 붙을때마다 두루치기를 사러 가야 하는데, 그때마다 두루치기 재료 사와!라고만 말하면 되는 상황입니다. 그래서 몇 번을 심부름시키더라도 두루치기 재료 사와!라고 말하기만 하면 되므로 아주 쉽게 명령을 할 수 있게 됩니다.
이때 우리가 night인 상황에서 노란색이 아니라 빨간색으로 바꾸고 싶다면, 함수 하나만 고쳐주면 되는것이죠. 만약 고치지 않았다면, 일일이 세 개의 input의 명령어 속 yellow를 찾아 red로 바꿔야 했지만, 함수로 묶어줌으로써 함수의 명령어, 한 번만 고쳐주면 되게 되는 것이죠. 두루치기 재료에서 양파가 아니라 감자가 필요해!라고 미리 말해주면 매번 사러 갈 때마다 바뀐 모든 재료를 말할 필요 없이 바뀐 레시피 재료대로 사와!라고 말하면 되는 겁니다. 즉, 유지보수가 훨씬 편해지게 될 것입니다. 이것이 바로 함수를 써야 하는 목적 중 하나겠죠.
한 줄 요약: 유지보수를 쉽게, 또 코드를 간결하게 리팩터링 하기 위해서 우리는 함수를 적재적소에 사용해야 한다.
'코딩' 카테고리의 다른 글
| ep.08 배열과 반복문의 활용 (0) | 2019.09.10 |
|---|---|
| ep.07 배열과 반복문 (0) | 2019.09.10 |
| ep.06 배열과 while반복문 (0) | 2019.09.10 |
| ep.05 조건문 (0) | 2019.09.09 |
| ep.04 제어할 태그 선택하기 (0) | 2019.09.07 |
