�ݺ�ߣ

Welcome to
Javascript
Function

1. Function
2. Function 고급
2. Scope
3. Scope Chain
4. Parameter
5. Closure
Javascript 기초 6
선수 추천 과정
HTML5
CSS3

Function (1/3)
주어진 입력(파라미터)에 근거해 어떠한 처리를 실시하여 그 결과를 돌려주는 구조가
함수. Javascript는 디폴트로 많은 함수를 제공하고 있지만, 애플리케이션 개발자가
자기 스스로 함수를 정의할 수도 있음.
Javascript 기초6
인수
함수가 동작하기 위한 인자
값
함수
미리 정의한 처리 방식
반환 값
함수에 의한 처리의 결과
function 명령으로 정의 하기 (선언적 방식)
Function 생성자를 이용하여 정의 하기
함수 리터럴 표현으로 정의하기 (익명 함수)
함수 선언
3 가지 방식

Function (2/3)
함수 명을 선언할때 다음 두가지를 유의할 것
1 . 단순한 문자열이나 식이 아닌 식별자를 지정해야 함
2. 그 함수가 무엇을 처리하는지 이해할 수 있는 이름으로 (동사+명사 showMessage)
function 명령으로 정의하기
인수는 동작을 결정하기 위한 파라미
터로 여러개를 입력받을 때는 콤마로
단락을 구분 함. 함수 내부에서만 참조
할 수 있음
Function 생성자 경유로 정의
내장 객체인 Function 객체의 생성자
를 이용해 정의 가능하지만, 굳이 이용
할 장점이 많지 않음
함수 리터럴 표현으로 정의하기
Javascript 에서는 함수도 데이터형
의 일종임. 즉, 함수를 변수에 대입하
거나 어떤 함수의 인수로 건네거나 반
환값으로 함수를 주는 것 또한 가능
Javascript 기초6

Function (3/3)
Javascript의 함수 정의는 간단하나, 실제 코딩을 진행하는 경우 생각하지 못하 문제점
으로 문제를 겪을 수 있음. 함수 정의라 하더라도 기법에 따라 해석이 다르므로 주의해
야 함.
return 도중에 줄 바꾸지 말것
Javascript 문장 끝에 세미콜론을 붙
이는 것이 필수가 아니지만, 불필요한
혼란을 야기하기도 함
함수는 데이터형의 일종
함수는 데이터형의 일종으로, 함수를
수치형이나 문자로 전환이 가능하며,
변수처럼 호출 또한 가능 함
function 은 정적인 구조 선언
코드를 해석/컴파일 하는 타이밍에 함
수를 등록. 실행 시에는 코드내의 구조
의 일부분으로 어디라도 호출 가능
리터럴/Function은 실행시 판단
함수 리터럴이나 Function 생성자는
실행시 판단 되므로, 호출하는 곳보다
먼저 선언이 되어야 함
Javascript 기초6

Function 고급
Javascript 에서의 Function 의 중요성은 다른 언어보다 높음. 다양한 Function 의
기능과 개념을 알게되면 Javascript 를 이용하여 다양한 작업들이 가능함
Object 를 이용한 이름 부여 인수
이름 부여 인수를 통해 코드의 의미를
이해하기 쉽고 차례를 바꾸어도 되며,
인수의 수가 많아져도 관리가 용이
일회용 함수는 익명 함수로
일회용 함수는 이름을 부여하기 보다
는 익명 함수(함수 리터럴)을 이용하
여 코드를 간결 함. Ajax 에서 많이 사
용되는 기법임
함수의 인자로 함수를 이용 가능
Javascript 에서는 함수도 데이터 형
의 일정이므로 함수를 인수, 반환값으
로 취급할 수 있음. 이를 고계 함수
(Higher-order function) 이라 함
Javascript 기초6

Scope (1/3)
Scope 는 변수가 스크립트 안의 어느 장소에서 참조할 수 있는가를 결정하는 개념으로,
스크립트 전체에서 참조할 수 있는 Global Scope 와 정의된 함수 안에서만 참조할 수
있는 Local Scope 로 나뉨
변수 선언에 var 명령은 필수
함var 명령을 사용하지 않고 선언된
변수는 모두 글로벌 변수로 취급됨. 로
컬 변수를 정의하려면 반드시 var 명
령을 사용해야 함
스크립트 전체에서 참조할 있는 Scope
정의된 함수 안에서만 참조할 수 있는 Scope
Global Scope
Local Scope
로컬 변수는 함수 선두에 선언
함로컬 변수는 선언된 함수 전체에서
유효한 변수 임. 직관적 유효범위와 실
제 유효 범위가 어긋날 수 있으므로 주
의가 필요함
Javascript 기초6

Scope (2/3)
가인수는 기본적으로 로컬 변수로 처리 됨. 인수 값이 Value 형인 경우, 함수내에서 변
경이 일어나도 글로벌 변수 값에 영향이 없으나, 참조형인 경우, 메모리 주소 참조로 인
하여 결과적으로는 글로벌 변수의 값도 바뀌게 됨
Value 형
10
Global 변수 Local 변수
Global 실제 값 Local
Reference 형
10
100
100
200
200
200
200
200
[1, 2, 4, 8, 16]
200
[1, 2, 4, 8]
Javascript 기초6

Scope (3/3)
Javascript 는 Java, C 와는 달리, 블록 레벨의 Scope 는 지원하지 않으며, 함수 리터
럴과 Function 생성자로 함수를 정의할 때 리터럴은 Local 이지만, Function 생성자
로 생성한 경우 Global 변수로 취급이 된다
블록 레벨 스코프 미 지원
Javascript 의 경우 블록 레벨의 스코
프가 지원이 되지 않아, 블록(if)에서
빠져나온 이후에도 변수가 유효하게
사용될 수 있다.
Function 생성자는 글로벌
함수 리터럴은 Local 변수이지만,
Function 생성자를 통하여 함수를 생
성하게 되는 경우 글로벌 변수로 참조
하게 된다.
Javascript 기초6

functon ???(){
}
Scope chain
Javascript 에서는 Scope Chain 의 선두에 위치하고 있는 객체로 부터 순서대로
Property를 검색해, 매치하는 Property가 처음 발견된 곳에서 그 값을 채택 함
Call 객체
functon ???(){
}
Call 객체
Global 객
체 스크립트 전체
함수 내
부
중첩된 함수 내부
Scope 단위로 Global 객체, Call 객체 생성. 이것
들을 생성 순서대로 연결한 것이 Scope Chain
임
Javascript에서는 스크립트 실행시 내부 Global
객체를 생성. Global 변수와 Global 함수는
Global 객체의 Property나 Method임. Local
변수도 실은 Local Object 객체의 Property 이
다. Activation 객체 혹은 Call 객체라고 불림.
Javascript 기초6

Parameter
Javascript 는 파라메터의 수를 체크하지 않아서, 부여되는 인수의 수가 함수 측에서
요구하는 수와 다른 경우에도 이를 체크하지 않음. 생성하는 함수가 요구하는 이수의
개수를 자유롭게 변경할 수 있으며, callee 를 이용하여 자기 자신을 호출 가능
Parameter 수를 체크하지 않음
Javascript 는 부여되는 인수의 수가
함수측에서 요구하는 수와 다른 경우
에도 이를 체크하지 않음
callee 를 이용하여 재귀 호출
arguments 객체에서는 실행중인 함
수 자신을 참조할 수 있는 callee 프로
퍼티를 제공 함
가변길이 인수의 함수 정의
호출원의 사정상 인수의 개수가 변동
될 수 있는데,인수의 함수를 이용함으
로 써 유연하게 처리할 수 있음
Javascript 기초6

Closure (1/2)
Closure 는 로컬 변수를 참조하고 있는 함수 내의 함수이며, 일종의 기억영역을 제공해
주는 구조를 가지고 있음
var myClosure
=
closure(1);
function closure(init){
var counter = init;
return function(){
return ++counter;
}
}
변수 counter는
1
function(){
return ++counter;
}
myClosure(); 2
myClosure(); 3
myClosure(); 4
반환 값 함수
Literal
가인수 init 에 1세
트
로컬 변수 counter
변환값인 함수 Literal을
경유하여 로컬 변수를 참
조, 조작할 수 있다.
내부적으로 참조하고 있
는 로컬변수 counter도 함
께 남아있다. -> 데이터
의 보존장소(기억 영역)를
지닌 함수가 만들 어 짐
var myClosure1
=
closure(1);
function closure(init){
var counter = init;
return function(){
return ++counter;
}
}
글로벌 객
체
myClosure1
myClosure2
var myClosure2
=
closure(100);
Call 1-1
Call 1-2
Call 1-1
Call 1-2
counter=1 counter=100
함수 리터럴
(Closure)
함수 리터럴
(Closure)
Javascript 기초6

Closure (2/2)
각각의 호출마다 생성된 Call 객체는 별개의 것으로, 각각의 Call 객체에 속한 로컬 변
수 Counter 도 별개의 것이 됨. Call객체는 함수가 호출 될 때마다 생성되어 각각의
Scope 체인은 독립된 것, 그 안에 관리되는 로컬 변수 counter 도 별개의 것이 됨
closure 호출 시 생성
- 익명 함수를 나타내는 Call 객체
- closure 함수의 Call 객체
- 글로벌 객체
클로저 (Closure) 객체 (Object)
클로저를 감싸고 있는 부모 함수 생성자
클로저로 부터 참조되는 로컬 변수 프로퍼티
클로저 자신 메소드
클로저 리턴 함수 호출 인스턴스화
클로저를 대입하는 변수 인스턴스
closure 사용
변수에 들어가는 처리가 하나만 필요
한 경우는 클로저를 사용하고, 복수의
처리가 필요한 경우는 객체를 이용
Javascript 기초6

Expand your dimension!
Let’s Start!

�ݺ�ߣ

Start IoT with JavaScript - 6.함수

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Start IoT with JavaScript - 6.함수 (20)

More from Park Jonggun (14)

Start IoT with JavaScript - 6.함수