[JavaScript] function
-자바의 메서드와 같은 뜻의 문법요소임
-반복되거나 단위로 구성될 명령을 하나의 이름으로 묶어놓고, 명령이 필요할 때 이름을 불러 실행하는 구조
-보통 head 태그 안의 스크립트 영역에서 함수를 정의해놓고, body의 이벤트에 연결하여 실행시킴: 벼튼이 클릭되면 실행되는 자바 스크립트 함수의 정의
-함수는 선언적 함수와 익명 함수가 있음
-선언적 함수는 생성당시 부를 이름을 부여해서 만드는 함수를 의미하고,
-익명 함수는 이름을 지정하지 않은 상태로 만들어서, 함수자체를 변수에 저장하여 변수이름으로 사용하곤 함
선언적 함수
-함수는 익명 함수이든 선언적 함수이든 head 영역의 script 태그 안에서 또는 body 영역의 script 태그 안에서 어디서든 호출 가능
-move(); → head의 스크립트 영역에서 직접 호출
익명함수
-하나의 변수에 익명함수를 대입하고 필요할 때마다 변수이름으로 실행할 수 있다는 장점이 있음
-이미 함수가 대입되어 있는 변수에 다른 함수를 대입하여 다른 함수가 실행되게 할 수도 있음
-익명함수를 저장한 변수는 저장된 함수의 몸체를 대신하지만 변수에 괄호를 붙이면 함수가 실행되는 모드로 변경됨
-함수의 정의영역 및 몸체를 변수에 저장하여 변수의 이름으로 호출하는 형태
-변수는 일시적으로 하나의 함수만 저장할 수 있으며 변수의 이름으로 함수를 호출할 시 현재 저장되어 있는 함수가실행됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function01.html</title>
<script type="text/javascript">
// 선언적 함수
function move(){
var output=Number(prompt('숫자 입력','숫자'));
document.write(output);
}
// 익명함수
var func1=function(){
var output=Number(prompt('number: ','숫자'));
document.write("<h2>"+output+"</h2>");
}
// func1();
func1=function(){
document.write("<h2>hi</h2>");
}
// func1();
func2=function(){
alert("hi");
}
</script>
</head>
<body onload="func2();">
<!-- <script>
func2();
</script> -->
<input type="button" value="func2 실행" onclick="func2();">
<input type="button" value="move 실행" onclick="move();">
<!-- head에 정의된 함수가 버튼 또는 윈도우 이벤트에 연결되어져서
실행될 수 있음. -->
</body>
</html>
1. 함수의 전달인수-매개변수
-자바스크립트 함수의 전달인수와 매개변수는 자바와 비슷하지만 매개변수의 자료형을 표시하지 않고 변수의 이름만 명시하고 사용함.
-리턴값의 사용은 자바와 같음.
function add(a,b){
c=a+b;
return c;
}
var result=add(10,20);
document.write("<h2>10+20="+c+"</h2>");
// -> 10+20=30 출력2. 매개변수의 사용
-생성되어 있는 매개 변수보다 전달인수의 갯수가 많으면 해당 전달인수는 무시됨
function f(x){
return x*x;
}
result=f(5,3); // 두번째 전달인수는 무시함
document.write("<h2>5*5="+result+"</h2>");
// -> 5*5=25 출력3. 함수의 오버로딩 사용예
-배열을 만들어주는 Array() 함수의 다양한 사용(오버로딩)
-array() 함수는 기본적으로 매개변수에 아무것도 입력하지 않게 정의됨
var array1=Array(); // 빈 배열을 만듦
var array2=Array(10); // 매개변수만큼의 크기를 가지는 배열을 만듦
var array3=Array(25,35,45,55); // 매개변수를 배열로 만듦.
document.write("<h2>"+array1+"<br>"+array2+"<br>"+array3+"<br>"+"</h2>");
4. arguments 변수 사용
function sumAll(){
document.write("<h1>"+typeof(arguments)+':'+arguments.length+"</h1>");
var s="";
var sum=0;
for(var i in arguments){
s=s+arguments[i]+" ";
sum=sum+arguments[i];
}
document.write("<h1>arguments: "+s+"</h1>");
document.write("<h1>sum: "+sum+"</h1>");
}
document.write("<br/>");
sumAll(1,2,3,4,5);
document.write("<br/>");
sumAll(1,2,3,4,5,6,7,8,9);
document.write("<br/>");
// 입력 매개변수를 모두 더해 리턴하는 함수
function addAll(){
var sum=0;
for(var i in arguments){
sum=sum+arguments[i];
}
return sum;
}
result=addAll(1,2,3,4,5,6,7,8,9,10);
document.write("<h1>배열의 합계: "+result+"</h1>");
document.write("<br/>");
addAll('minus',2,5,6,8,7,4);
// -> '배열의 합계: 55' 출력 5. 리턴값이 익명함수인 경우
function returnFunc(){
// var f=function(){document.write("<h1>리턴된 함수의 출력</h1>");};
// retunr f;
return function(){document.write("<h1>리턴된 함수의 출력</h1>");};
}
var value=returnFunc(); // 함수의 리턴값(익명함수)을 변수에 저장함
value(); // 변수이름옆에 괄호를 붙여서 리턴된 익명함수를 호출함.
// 화면에 "리턴된 함수의 출력"라고 출력함
returnFunc()();
// 함수 호출에 의해 리턴된 익명함수를 변수에 저장하지 않고
// () 안 붙여도 호출실행됨
// -> '리턴된 함수의 출력'
'리턴된 함수의 출력' 출력6. 익명함수를 함수의 전달인수로 전달하는 경우
function varFunction(varFunc){
for(var i=0; i<5; i++)
varFunc();
}
// 매개변수에 괄호를 붙여서 호출하는 것을 보니,
// 전달인수로 익명함수가 전달되나 봄
var func=function(){document.write('<h1>hello</h1>');}
varFunction(func);
// varFunction(function(){document.write('<h1>hello</h1>');});
// -> 'hello' 5번 출력7. 선언적 함수를 매개변수로 전달
function justFunction(){
document.write('<h1>hello</h1>');
}
varfunction(justFunction);8. 지역변수와 유효범위
function test(name){
var output='hello'+name+' !';
return output;
}
// 위 함수 내의 output 변수는 지역 변수이므로,
// 함수를 벗어나면 없는 변수가 됨
// document.write('<h1>'+output+'</h1>');
// 실험결과 에러 메세지: output is not defined
// 지역변수는 자신을 감싸고 있는 중괄호를 벗어나는 순간 소멸됨
// 지역변수가 소멸되기 전에 그 값 리턴으로 전달받아 사용하면
// 지역변수값을 살려서 활용 가능함
var s=test(' javascript');
document.write('<h1>'+s+'</h1>');
// -> hello javascript !9. 클로저(closure)
-지역변수의 값을 살리고 활용하기 위해 리턴되는 함수의 리턴값으로 지정
// 함수내의 지역변수를 외부에서 활용하는 방법
function test2(name){
var output='hello'+name+'..!';
return function(){return output;};
// 지역변수를 담은 익명함수가 리턴됨
}
var func1=test2(' javascript');
var s=func1();
// 리턴받은 함수를 호출해서 리턴 받은 값(test2의 output변수값)을
// s에 저장
document.write('<h1>'+s+'</h1>');
document.write('<h1>'+func1()+'</h1>');
document.write('<h1>'+test2(' javascript')+'</h1>');
함수의 재정의
-함수 호출 전 마지막에 지정된 함수가 실행됨
1. 익명함수의 재정의
-익명함수는 변수의 익명함수가 저장되는 시점에 변수의 이름으로 함수가 정의되듯 실행 결과를 갖을 수 있게 만들어짐
var func=function(){document.write('<h1>익명함수1</h1>');}
func(); // 익명함수1
var func=function(){document.write('<h1>익명함수2</h1>');}
func(); // 익명함수2
2. 선언적 함수의 재정의
-최초 실행시 내부의 실행명령들의 내용을 읽기 전에 선언적 함수들을 먼저 읽어서 사용준비를 함
-그 과정에 같은 이름의 함수가 있다면 나중에 정의된 함수가 그 이름의 함수로 결정됨
-따라서 아래 코드의 세번의 move() 함수 호출 명령은 모두 'move() 함수3 호출' 내용을 출력함
function move(){document.write('<h1>move() 함수1 호출.</h1>');}
move();
function move(){document.write('<h1>move() 함수2 호출.</h1>');}
move();
function move(){document.write('<h1>move() 함수3 호출.</h1>');}
move();