자바스크립트의 함수는 자바의 메서드와 비슷한 개념으로 자주 사용되는 기능을 정의하기 위해 정의하는 코드 블록이다. 그러나 함수는 단순히 코드 블록으로만 사용되는 것이 아니라 자바스크립트에서 사용자 정의 객체를 정의하거나 클로저를 표현할 때도 사용한다.
[함수를 정의하는 방법]
- 선언문 이용해서 함수 정의
- 표현식으로 함수 정의
- Function() Constructor를 이용하여 함수 정의
자바스크립트는 first class object이다. 즉, 함수가 다른 함수의 매개변수가 될 수 있다는 의미다. 그래서 함수를 변수나 배열, 객체, 리턴 값, 매개변수로 사용할 수 있다. 함수를 정의한 후 사용하기 위해서는 함수를 필요한 곳에서 호출해야 한다.
[함수 호출 방법]
- <script></script> 태그 안에서 호출
- 하이퍼링크를 클릭할 때 호출
- 이벤트가 발생할 때 호출
- 자동으로 실행되도록 설정
[함수의 선언]
함수는 선언하여 사용하는 것이 가장 쉬운 방법이다. 우선 가장 쉬운 함수의 선언부터 살펴보도록 한다. 함수를 선언하여 사용하는 방법은 function이라는 키워드를 이용하여 정의한다. 자바스크립트는 타입을 정의하지 않고 사용하는 언어이므로 함수를 정의하는 경우에도 리턴할 값의 타입을 정의하지 않는다.
함수명은 코드 블록과 관련된 의미를 담을 수 있도록 정의하며 함수를 실행하기 위해서 외부에서 입력받을 값이 있다면 () 안에 변수만 , 로 구분하여 정의한다.
function 함수명(매개변수..){
함수로 실행하고 싶은 명령문
[return 리턴값]
}
① 리턴 값이 없고 매개변수도 없는 함수
리턴 값이 없고 매개변수도 없는 함수는 다음과 같은 형식으로 정의한다.
function 함수명(){
함수에서 실행하고 싶은 기능
}
<head>태그 내에 <script></script>태그를 삽입한 후 다음과 같이 함수를 정의한다.
<head>태그에서는 주로 함수를 정의하고 <body>태그에서 호출하거나 정의된 다른 태그 내 에서 이벤트 핸들러를 정의하고 호출하여 사용할 것이다. 우선 <body>태그 내에 <script> </script>를 정의하고 호출한다.
실행하면 다음과 같은 결과가 나타난다.
② 리턴 값이 있고 매개변수가 없는 함수
리턴 값이 있다는 것은 함수를 실행한 후 호출한 곳으로 되돌아오는 값이 존재한다는 의미이 다. 리턴 값이 있는 경우 자바에서 처럼 리턴 하고 싶은 값을 함수의 제일 마지막 문장에 "return”문을 이용하여 리턴 시킨다. 형식은 다음과 같다.
function 함수명(){
실행할 명령문
return 리턴 시킬 값이 저장된 변수 or 값
}
다음과 같이 정의한다.
리턴 값이 있는 함수를 호출하는 경우 리턴 값이 있기 때문에 리턴 값을 저장할 변수를 선언하여 저장할 수 있도록 처리해야 한다. 다음과 같이 호출한다.
변수 = 함수명()
실행하면 다음과 같은 결과가 나타난다.
③ 매개변수가 있는 함수
위의 두 가지 유형의 함수는 실행하면 늘 동일한 결과가 실행된다. 어떤 상황에서 함수를 호출하느냐에 따라 다른 결과가 보여질 수 있어야 할 것이다. 즉, 보통 서버에서 작업이 완료된 후 응답 뷰가 forward되어 실행된다. 이때 서버에서 어떤 값이 공유 되었는지에 따라 값의 결과가 반영되어 각각 다른 결과가 보여져야 할 것이다. 이렇게 작업을 하기 위해서 함수를 처리할 때 외부에서 입력을 받을 수 있도록 해야 한다.
이렇게 함수를 정의할 때 외부에서 입력 받는 값을 저장할 수 있도록 변수를 정의하는 것을 매개변수라 한다. 형식은 다음과 같다.
function 함수명(매개변수1, 매개변수2…){
실행할 명령문
}
<script>태그 내에 다음과 같이 함수를 추가합니다.
호출할 때도 역시 매개변수가 있기 때문에 함수를 호출하는 ()안에 매개변수로 넘길 값을 지정해야 한다.
함수(값1,값2……)
다음과 같이 <body>태그의 <script>안에 매개변수가 있는 함수를 호출하는 코드를 추가한다.
실행하면 다음과 같이 500과 500이 매개변수로 지정되었으므로 그에 따른 결과가 나타난다.
매개변수의 값을 500대신 1000과 1000으로 지정하면 “1000+1000”이 계산된 결과가 출력된다.
'웹 > javascript' 카테고리의 다른 글
| 함수의 표현식 (0) | 2019.07.15 |
|---|---|
| 함수의 호이스팅 (0) | 2019.07.15 |
| 브라우저 동작 원리 (0) | 2019.07.09 |
| 자바스크립트 문법 - 연산자 (0) | 2019.07.08 |
| 자바스크립트 문법 - 변수 (0) | 2019.07.08 |