4. 함수(Function)
함수(function)는 단일한 일이나 일련의 일들을 처리하기 위한 코드 블록이라고 말할 수 있습니다.
여러분은 기존의 JavaScript에 내장된 함수를 이용하여 브라우저에 문자열을 나타내거나
수치 데이터를 처리할 수 있고 여러분 스스로 작성한 함수를 이용하여 특정 작업을 처리하도록 할 수 도 있습니다.
다른 언어에서와 마찬가지로 함수는 프로그래밍의 가장 기본적으로 알아야 할 코드 블록이며 특히
JavaScript에서 함수(Function)는 객체 지향 프로그래밍에서 클래스(class)와 같이 중요한 역할을 하는데 그 이유는 JavaScript에서
함수(Function)은 일종의 객체(object)로 각
함수(Function)은 함수(Function) 형식의 인스턴스로
클래스(class)와 같은 참조 데이터 타입처럼 속성(property)과
메서드(method)를 가질 수 있습니다. 이에 대해서는
객체(Object) 부분에서 다루기로 하고 가장 기본적인 함수 사용방법에 대해서 알아봅니다.
4.1 함수의 정의(선언)
함수의 정의(선언)은 function 키워드를 이용하여 입력 파라미터의 유무, 반환할 값의 존재 유무에 따라 다음과 같이 4가지 형식으로 정의(선언)할 수 있습니다.
4.1.1 입력 파라미터가 없고 반환할 값도 없는 경우
function 함수이름( ) {
처리해줘야 할 코드(들);
}
위와 같은 형식은
함수이름으로 선언된 함수가 호출될 때 특별한 사전 데이터, 즉 입력 파라미터가 필요가 없고 또한 처리해줘야
할 코드(들)를 단순히 실행만 해주면 되는 가장 단순한 형태의
함수 정의 형태입니다.
예를 들어 단순히 화면에 알림창을 띄워 인사말을 나타내는 함수를 만든다면 함수가 호출될 때 특별한 사전 데이터, 즉 입력 파라미터가 필요가 없고 반환해주는 데이터도 없기 때문에 다음과 같이 간단하게 함수를 만들 수 있습니다.
<script type="text/javascript">
function greeting() {
alert("안녕하세요. 좋은 아침입니다.");
}
</script>
위와 같이 greeting이라는 이름으로 입력 파라미터가 필요가 없고 반환해주는 데이터도
없는 함수를 정의(선언)할 수 있습니다.
4.1.2 입력 파라미터가
있고 반환할 값은 없는 경우
입력 파라미터가 있고 반환할 값이 존재하지 않는 경우는 다음과 같이 함수이름 옆에 “parameter1, parameter2, …”과 같이 함수를 선언하면서 필요한 데이터들과 관련된 입력 파라미터들와
함께 선언할 수 있습니다.
function 함수이름( parameter1, parameter2, … ) {
처리해줘야 할 코드(들);
}
JavaScript는 입력 파라미터를 사용할 때 int, object, var 키워드
같은 데이터 타입과 관련된 키워드를 명시할 필요가 없습니다. 내부적으로 var 키워드로 자동 적용됩니다.
그리고 선언(정의)된 함수 내에서 입력 파라미터를
사용하는 방법은 직접 입력 파라미터로 입력된 데이터를 직접 이용하거나 하나의 변수를 선언하여 입력 파라미터값을 이용하는 형태로 다음과 같이 사용할
수 있습니다.
function greeting(inyourName) {
alert(inyourName+"님 "+"안녕하세요. 좋은 아침입니다.");
}
function greeting(inyourName) {
var inValue=inyourName;
alert(inValue +"님 "+"안녕하세요. 좋은 아침입니다.");
}4.1.3 입력 파라미터가
없고 반환할 값은 있는 경우
입력 파라미터가 없고 반환할 값이 있는 경우의 함수는 선언(정의)된 함수 내부에서 return 키워드를 이용하여 반환할 값을 명시하는
형태로 다음과 같은 형식으로 선언할 수 있습니다.
function 함수이름( ) {
처리해줘야 할 코드(들);
return 반환값;
}
위에서는 함수 내부에서 해당 함수를 실행한 후 JavaScript의 다른 함수나 변수에 사용할 수 있도록 “return 변수이름; “ 이나 “return 반환값;”의 형태로 명시해줘야 하며 반드시 선언된 함수를 닫는 중괄호( } ) 전에 가장 마지막으로 작성해줘야 합니다.
4.1.4 입력 파라미터가
있고 반환할 값도 있는 경우
입력 파라미터가 있고 반환할 값이 있는 경우의 함수는 함수이름 옆에 “parameter1, parameter2, …”과 같이 함수를 선언하면서 필요한 데이터들과 관련된 입력 파라미터들을
명시하고 선언(정의)된 함수 내부에서 return 키워드를 이용하여 반환할 값을 명시하는 형태로 다음과 같은 형식으로 선언할 수 있습니다.
function 함수이름( parameter1, parameter2, … ) {
처리해줘야 할 코드(들);
return 반환값;
}
4.2 선언된 함수의
호출(call)
지금까지 사용자 정의 함수를 어떻게 정의(선언)할 수 있는 입력 파라미터와 리턴 값의 유무에 의해서 4 가지 형태로
나눠서 알아보았습니다. 이제 선언된 함수를 사용하기 위해서는 함수를 호출(call)해줘야합니다.
JavaScript에서 함수는 어느 곳에서 호출이 가능합니다만 해당 함수 코드는 브라우저에 의해서 함수가 호출되기 전에 로드되어야 하므로 함수가 호출되기 전에 먼저 함수가 선언되어야 하는 것은 당연합니다.
4.2.1 입력 파라미터가
없고 반환할 값도 없는 경우의 함수 호출
입력 파라미터가 없고 반환할 값도 없는 경우에 해당하는 함수의 호출은 단순히 다음과 같은 형식을
이용하여 호출하면 됩니다.
선언된 함수이름() ;
생각보다 간단합니다. 이제 예제를 통해 알아볼까요? 이번 예제에서는 입력 파라미터가 없고
반환할 값도 없는 경우에서 선언된 greeting 함수를 이용합니다.
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>입력 파라미터가 없고 리턴값이 없는 함수 예제</title>
<script
type="text/javascript">
function greeting() {
alert("안녕하세요. 좋은 아침입니다.");
}
greeting();
</script>
</head>
<body>
</body>
</html>
“noparanoreturn.html”로 저장하고 IE9로 열어보면 다음과 같이 정의된 greeting 함수가 실행되어 알림창을 띄워 “안녕하세요. …” 메시지를 나타냅니다.
4.2.2 입력 파라미터가
있고 반환할 값은 없는 경우의 함수 호출
입력 파라미터가 있고 반환할 값도 없는 경우에 해당하는 함수의 호출은 단순히 다음과 같은 형식을
이용하여 호출하면 됩니다.
선언된 함수이름(입력파라미터1, 입력파라미터2, …) ;
이제 예제를
통해 알아볼까요?
방금 전 “입력 파라미터가 없고 반환할 값이 존재하지 않는 경우”에서 본 예를 가지고 생각해보면 단순히 “안녕하세요. 좋은 아침입니다.”라는 문자열을 표시하는 것보다는 고객의 이름을
함께 표시해준다면 더 좋을 것입니다. 메모장으로 “noparanoreturn.html”을
열고 <script> … </script> 블록을 다음과 같이 수정합니다.
<script
type="text/javascript">
function greeting(inyourName) {
var inValue=inyourName;
alert(inValue+"님 "+"안녕하세요. 좋은 아침입니다.");
}
var yourName="체르니";
greeting(yourName);
</script>
위에서는 하나의 변수를 선언하여 입력 파라미터값을 이용하는 형태로 greeting() 함수를
선언하여 사용하는 방법을 나타낸 것입니다. 다른 이름으로 저장을 선택하고 “paranoreturn.html”로 저장한 후 IE9를 통해 보면
다음과 같이 나타납니다.
4.2.3 입력 파라미터가
없고 반환할 값은 있는 경우의 함수 호출
입력 파라미터가 없고 반환할 값이 있는 경우에 해당하는 함수의 호출은 반환하는 값이 있으므로
반환되는 값을 받을 변수가 필요하므로 다음과 같은 형식을 이용하여 호출하면 됩니다.
var returnValue = 선언된 함수이름() ;
메모장으로 “noparanoreturn.html”을 열고 <script> … </script> 블록을 다음과 같이 수정합니다.
<script type="text/javascript">
function whattimeNow(){
var now = new Date();
var current_Date = now.toLocaleString();
return current_Date;
}
var returnTime=whattimeNow();
document.write("현재 날짜는 " + returnTime + "입니다.");
</script>위에서 whattimeNow() 함수는 내부적으로 JavaScript의 Date 객체를 이용하여 now 라는 Date 객체 타입 변수를 선언합니다. 다음으로 현재 날짜를 저장하기 위해서 Date 객체의 toLocaleString() 메서드를 이용하여 문자열 형태로 현재 날짜를 current_Date 변수에 저장하도록 한 후 return 키워드를 이용하여 현재 날짜를 반환하게 됩니다.
마지막으로 whattimeNow() 함수 블록 밖에서 반환값이 존재하므로 var 키워드를 이용하여 whattimeNow() 함수를 호출하여 반환되는 값을 returnTime 변수에 저장하여 출력하는 형태입니다. 위와 같이 수정한 후 다른 이름으로 저장을 선택하고 “noparareturn.html”로 저장한 후 IE9를 통해 보면 다음과 같이 나타납니다.
4.2.4 입력 파라미터가
있고 반환할 값도 있는 경우의 함수 호출
입력 파라미터가 있고 반환할 값이 있는 경우에 해당하는 함수의 호출은 반환하는 값이 있으므로
반환되는 값을 받을 변수가 필요하므로 다음과 같은 형식을 이용하여 호출하면 됩니다.
var returnValue =선언된 함수이름(입력파라미터1, 입력파라미터2, …) ;
메모장으로
“noparanoreturn.html”을 열고
<script> … </script> 블록을 다음과 같이 수정합니다.
<script
type="text/javascript">
function whattimeNow(inyourName){
var inValue=inyourName;
alert(inValue+"님 "+"안녕하세요. 좋은 아침입니다.");
var now = new Date();
var current_Date = now.toLocaleString();
return current_Date;
}
var yourName="체르니";
var returnTime=whattimeNow(yourName);
document.write("현재 날짜는 " + returnTime + "입니다.");
</script>위와 같이 수정한 후 다른 이름으로 저장을 선택하고 “parareturn.html”로 저장한 후 IE9를 통해 보면 다음과 같이 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5. 객체(Object) (0) | 2013.08.06 |
|---|---|
| 4.3 다른 함수로부터 함수 호출 (0) | 2013.08.06 |
| 3.4 switch … case 문 (0) | 2013.08.06 |
| 3. 흐름 제어(Flow Control) (0) | 2013.08.06 |
| 2.8 변환(Conversion) (0) | 2013.08.06 |