오늘의 정리
- 함수 예고
- 함수
- 함수 - 매개변수와 인자
- 함수 - 리턴
- 함수 활용
함수
같은 기능을 하는 코드가 여러 번 반복하게 된다면 코드가 아주 길어지게 되고 유지보수하기 어려워질 것입니다. 그리고 가독성도 떨어지겠죠. 이때 사용하는 것이 바로 함수입니다. 함수는 자판기와 같습니다. 자판기처럼 값을 입력하면 그에 맞는 기능을 수행하고 값을 출력해줍니다. 자바스크립트에서 함수를 정의와 실행은 다음과 같이 합니다.
//함수를 정의하는 코드입니다.
function onePlusOne() {
document.write(1+1); // 이와 같은 기능 코드를 작성하는 곳입니다.
}
//함수를 사용하는 코드입니다.
onePlusOne();
영어로 함수를 의미하는 function을 적고 그 뒤에 함수의 이름을 작성합니다. 함수를 실행할 때는 '함수의 이름()' 이렇게 실행합니다.
매개변수와 인자, 리턴
앞서 함수는 자판기와 같다고 했습니다. 함수가 입력과 출력으로 이루어져 있는 것입니다. 입력에 해당하는 것이 매개변수(Parameter)와 인자(Argument)이고, 출력에 해당하는 것이 리턴(Return)입니다. 위에 정의한 함수는 입출력이 없는 함수입니다. 이처럼 함수는 입출력이 있어도 되고, 없어도 됩니다. 사용할 목적에 따라 정의해주면 됩니다. 입출력이 있는 함수는 다음과 같이 정의합니다.
function sum(left, right) { //left, right 매개변수
return left + right;
}
sum(2,3); // 2,3 인자
sum 함수에서 괄호 안에 들어오는 두 숫자를 각각 left, right라는 변수에 넣는데, 이때 left와 right를 매개변수라고 합니다. 그리고 sum함수를 사용할 때 괄호 안에 넣어서 함수로 전달해주는 숫자 2, 3을 보고 인자라고 합니다. 마지막으로 sum함수 안에 있는 return은 함수를 실행했을 때, 적절한 값을 돌려주는 리턴입니다.
강의 내용을 적용한 페이지
input태그 안에 onclick 속성 안에 있는 코드들을 nightdayhandler()함수로 만들어주고, 함수를 실행할 때는 nightdayhandler(this);이 코드만으로 작동하게 했습니다. 그래서 기능은 동일하나 코드의 길이를 줄이는 효과가 있었습니다.
위 함수에서는 this를 인자로 보내서, self라는 매개변수가 받고, 함수가 실행하게 됩니다.
.png)
