과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch05. 함수 2014년 1학기 Professor Seung-Hoon Choi
5. 1 익명함수 함수 코드의집합을나타내는자료형 형식 var 함수이름 = function( ) { }; function( ) { } 부분은이름이없는익명함수임 이익명함수를변수에할당해서사용함 코드 5-1 참조 alert( 함수이름 ); // 함수의내용을보여줌 함수호출 함수이름 ( ); // 함수호출시에는반드시괄호를추가한다. 코드 5-3 참조
5.2 선언적함수 선언적함수 이름을붙여서생성한함수 형식 function 함수이름 ( ) { } var 함수이름 = function( ) { } 과동일한효과를가짐
5.2 선언적함수 익명함수와선언적함수의차이 코드 5-6 함수를담는변수생성전에함수를호출하므로오류발생함 코드 5-7 웹브라우저가 <script> 내부를해석할때, 선언적함수부터해석하기때문에, 함수호출이정상적으로동작함 122 페이지 Note 주의 항상선언적함수가먼저생성된후, 익명함수가생성됨
5.3 매개변수와리턴값 매개변수 함수호출시함수에전달하는데이터를담는변수 리턴값 함수가내부코드실행후반환하는결과값
5.4 매개변수 매개변수 함수를호출하는쪽과함수를연결하는매개가되는변수라는의미 자바스크립트에서는함수호출시필요한매개변수보다많게또는적게줄수있다. 매개변수가많으면, 추가된매개변수는무시됨 매개변수가적으면, 모자라는매개변수의값은 undefined로간주함 코드 5-10 참조 코드 5-11 Array( ) 함수 : 배열을생성하는함수 표 5-1: 매개변수개수가다른 Array 함수 Array( ), Array(Number len), Array(arg1, arg2, [ ])
5.5 가변인자함수 가변인자함수 매개변수의개수가변할수있는함수 arguments 변수 자바스크립트의모든함수내부에존재하며, 매개변수를담는배열이다. 코드 5-12, 코드 5-13, 5-14 참조 매개변수개수가다른경우 130 페이지 Note 참조 arguments.length 를이용하여매개변수의개수의조사함
5.6 리턴값 return 문 return 문장을만나면함수를호출한곳으로돌아감 함수에서아무값도 return 하지않으면 undefined가리턴됨 코드 5-17 참조
5.7 내부함수 내부함수 함수내부에만들어지는함수 그함수내부에서만내부함수를사용할수있음 외부에서는내부함수를사용할수없음 이름충돌을해결하기위해사용함 코드 5-18, 5-19, 5-20, 5-21 참조 자기호출함수 코드 5-22 ( 페이지 136 Note) 함수를만들자마자자기자신을호출함
5.8 콜백함수 콜백함수 함수도하나의자료형이므로매개변수로전달가능함 매개변수로전달받은함수를다른함수내부에서호출함 코드 5-23 참조 익명콜백함수 코드 5-24 익명함수를매개변수로전달함
5.9 함수를리턴하는함수 함수를리턴하는함수 함수는하나의자료형이므로함수를리턴하는것도가능함 코드 5-25 returnfunction( ) 은함수를리턴하는함수 returnfunction( )( ) returnfunction( ) returnfunction 함수를호출함 => 리턴값 : 함수 그함수뒤에 ( ) 를붙임으로써, 리턴된함수를호출함
5.10 클로저 (Closure) 지역변수의유효범위 원칙적으로지역변수는함수외부에서사용할수없음 지역변수 : 함수내부에정의된변수 함수실행시생성되었다가, 함수실행종료시사라짐 지역변수는, 함수내부의어디에서정의되든, function scope 를가짐 함수내부에서만사용가능함 코드 5-26 참조 변수 output: 지역변수
5.10 클로저 Nested Function ( 중첩함수 ) 함수내부에또다른함수가정의됨 내부함수는외부함수의변수와인자에접근할수있음 코드 5-27의 output 변수 function outer(arg1) { var outervar; // 여기서 innervar 사용할수없음 } function inner(arg2) { var innervar; inner statements; // arg1 과 outervar 사용가능함 }
5.10 클로저 클로저 (closure) 코드 5-27 외부함수인 test( ) 함수가종료되어도내부함수를통해서 output 변수는계속접근가능하다. 이유 : test( ) 함수의지역변수 output은, 리턴되는함수 ( 내부함수 ) 안에서사용이되므로 test( ) 함수의실행이종료되어도사라지지않고내부함수의클로저영역에남아있음 test( ) 함수 ( 외부함수 ) output 변수 익명함수 ( 내부함수 ) 클로저
5.10 클로저 클로저 (closure) Closure a function( 내부함수 ) plus enclosing environment 클로저의여러가지의미 어떤함수를감싸는외부함수가종료되어도내부함수에서외부함수의변수에접근할수있는방법을제공함 외부함수가종료되어도사라지지않는지역변수또는그현상 또는외부함수의지역변수가사라지지않고존재하는공간 클로저에존재하는변수는, 내부함수만을통해서접근가능하다.
5.10 클로저 보충온라인레슨 http://nathansjslessons.appspot.com/lesson?id=1000 각자해볼것
5.10 클로저 클로저예제 ( 추가 ) function exclosure(arg1, arg2) { var localvar = 8; function exreturned(innerarg) { return ( (arg1 + arg2) / (innerarg + localvar) ); } } return exreturned; var globalvar1 = exclosure(2, 4); //(2+4)/(innerArg+8) var x1 = globalvar1(2); //(2+4)/(2+8) var globalvar2 = exclosure(12, 3); //(12+3)/(innerArg+8) var x2 = globalvar2(5); //(12+3)/(5+8)
5.10 클로저 외부함수가실행될때마다내부함수에대한클로저가새롭게만들어진다. 코드 5-28 참조 test( Web ) 과 test( JavaScript ) 에대한클로저가따로만들어짐
5.11 자바스크립트내장함수 자바스크립트내장함수 자바스크립트자체에서제공하는함수 예 : alert( ), prompt( ) 등
5.11.1 타이머함수 5.11.1 타이머함수 특정한시간에특정한함수를실행할수있게하는함수 표 5-2 타이머관련함수 settimeout(function, millisecond): 일정시간후실행 setinterval(function, millisecond): 일정시간마다반복실행 cleartimout(id): 타이머중지 clearinterval(id): 반복실행중지 코드 5-29, 5-30 참조
5.11.1 타이머함수 Note. 자바스크립트실행순서 (p.143) 코드 5-31 타이머함수는자바스크립트가웹브라우저에게요청하는함수임 다음일의단위가끝나기전에는실행되지않음 따라서, 0초후에실행하라고했지만, 다음문장이먼저실행된후에0초후에할일이실행됨 코드 5-32 while(true) { } 문장이종료되지않으므로, 0초후에할일을설정한 settimeout( ) 함수가실행되지못함
5.11.1 타이머함수 Note. 반복문과콜백함수 (p.144) 코드 5-33 settimeout( ) 함수실행시점이, 반복문이모두끝난이후이므로 3, 3, 3 이출력됨 코드 5-34 클로저를이용하여, 코드 5-33의문제를해결함 코드 5-35 foreach( ) 메소드를이용하여클로저를생성해서, 코드 5-33의문제를해결함
5.11.2 인코딩과디코딩함수 인코딩과디코딩 인코딩 웹에서통신할때한글이나특수문자들이오작동하지않도록문자를유니코드로부호화하는과정 예 빈칸 (' ') 은 %20, 세미콜론 (;) 은 %3B, 한글 은 %ud55c%uae00 으로인코딩됨 디코딩 인코딩된문자를원래대로되돌리는과정
5.11.2 인코딩과디코딩함수 표 5-3 인코딩과디코딩함수 escape( ) 영문알파벳과숫자, 일부특수문자 (@, *, -, _, +,., /) 를제외하고모두인코딩함 1바이트문자는 %XX의형태로, 2바이트문자는 %uxxxx 형태로변환됨 encodeuri( ) escape( ) 함수에서인터넷주소에사용되는일부특수문자 (:, ;, /, =,?, &) 는변환하지않음 encodeuricomponent( ) 알파벳과숫자를제외한모든문자를인코딩함 UTF-8 인코딩과같음
5.11.2 인코딩과디코딩함수 코드 5-36 escape( ) 함수는현재 deprecated 됨 앞으로사라질것이므로권장하지않음 encodeuricomponent( ) 가가장많이사용됨
5.11.3 코드실행함수 eval(string) 문자열을코드로해석하여실행하는함수 코드 5-38 eval( ) 함수로실행된코드내부에서정의한변수도활용가능함
5.11.4 숫자확인함수 특별한숫자 Infinity 어떤값또는변수를 0으로나누었을때의결과값 NaN 숫자가아님을나타내는하나의값 예 alert(parseint('a'));
5.11.4 숫자확인함수 표 5-5 숫자확인함수 isfinite(number number) number가유한한값인지검사하는함수 isnan(number number) number가 NaN인지검사하는함수 음수를 0 으로나누면, -Infinity 임 NaN 을직접비교하면안되고, isnan( ) 을사용해야함 코드 5-42, 코드 5-43
5.11.5 숫자변환함수 숫자변환함수 Number(String string) 숫자로바꿀수없으면 NaN 이결과값이됨 코드 5-44 parseint(string string) string을정수로바꾸어줌 숫자로변환할수있는부분까지는정수로바꿈 단, $1000 은변환하지못함 ( 맨앞문자가 $ 이므로 ) parsefloat(string string) string을실수로바꾸어줌 숫자로변환할수있는부분까지는실수로바꿈
5.11.5 숫자변환함수 parseint( ), parsefloat( ) 사용시주의할점 0으로시작되는문자열은 8진수로간주하여 10진수로변환함 0x로시작되는문자열은 16진수로간주하여 10진수로변환함 두번째매개변수를사용하면진법을나타내는숫자로간주함 예 parseint( FF, 16) FF 를 16진수로간주하여, 10진수로변환하면 255가됨 문자열에 e가포함되면과학적표기법으로간주함 예 parsefloat( 52.273e5 ) (52.273 * 10의 5승 ) 으로간주하여 5227300 으로변환함