함수(function)

함수의 장점

• 코드의 유지보수가 쉬워진다.

• 코드의 길이가 짧아진다.

• 가독성이 좋아진다.

<script>
  function 함수이름(self) {
</script>

script 태그에 넣어서 사용
함수임을 알리기 위해 fucntion을 함수이름(변수)앞에 작성한다.

함수를 사용해 보자

document.write('1');
document.write('2');
document.write('3');
document.write('4');
document.write('2');
document.write('3');

2를 쓰는 코드와 3을 쓰는 코드가 두 번 반복되고 그 둘 사이에 4를 쓰는 코드가 존재하기 때문에 반복문을 쓰기가 어려워진다.
함수를 사용하여 해결해보자.

function two() {
  document.write('2');
  document.write('3');
}

문자 2, 3을 작성하는 코드를 two라는 함수로 만들었다.

document.write('1');
two();
document.write('4');
two();

two()를 만나게 되면 위에서 정의한 two()함수의 코드를 실행한다.

매개변수(parameter) 활용

sum()이라는 함수를 만들고 매개변수를 활용하여 간단한 덧셈을 하는 함수를 만들어 보자.

//함수 생성
function sum(left,right) {
  	return left+right
}

//호출
sum(1,5);

출력값 : 6

sum()안에 숫자(값) 1,5는 함수로 전달해주는 인자라고 한다.

함수(function) 활용

이전 글(리팩토링)에서 리팩토링한 코드를 보면 this가 있을 것이다.
(this는 전역객체를 가리킨다.)this가 정상적으로 버튼을 가리키지 못하기 때문에 매개변수와 인자를 활용하여 정상적으로 만들어 보자.

<script>
  function nightdayhandler() {
    if(this.value === 'night') {
    // 생략
    // 아주 긴 Javascript 코드를 여기 넣어줍니다.
  }
</script>

기존코드

<script>
  function nightdayhandler(self) { //self라는 매개변수를 넣어준다.
    if(self.value === 'night') { // this를 self로 변경
    // 생략
    // 아주 긴 Javascript 코드를 여기 넣어줍니다.
  }
</script>

//버튼
<input id='night_day' type='button' value='night' onclick='nightdayhandler(this);'>

함수에서 this를 self라는 매개변수로 받아와서 나머지 코드를 진행한다.