과목명: 웹프로그래밍응용교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어

2014년 1학기

Professor Seung-Hoon Choi

Part1. JavaScript / Ch05. 함수

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 으로 변환함