과목명: 웹프로그래밍응용
교재: 모던웹을 위한 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 으로 변환함
