JavaScript 의 마지막 과정으로, 주 기능을 이루는 함수, 변수의 스코프 범위, 그리고 자바스크립트 문법의 핵심인 클로저에 대하여 살펴봅니다.

1. Startup JavaScript
6.Function, Scope, Closure
THINKER TO MAKER
x

2. 사용자 정의 처리 방식
THINKER TO MAKER
Function

3. Function 객체
주어진 입력(Parameter)를 처리하여 그 결과를 돌려주는 구조가 함수.
기본 함수가 있지만, 개발자가 자기 스스로 함수를 정의할 수 있음
etc...
etc...
인수
함수가 동작하기 위한 인자 값
함수
미리 정의한 처리 방식
반환 값
함수에 의한 처리의 결과
function 명령으로 정의 하기 (선언적 방식)
Function 생성자를 이용하여 정의 하기
함수 리터럴 표현으로 정의하기 (익명 함수)
함수 선언
3 가지 방식

4. Function 선언
var triangle1 = new
Function('h','w','return h * w / 2');
console.log('Triangle 1 : ' +
triangle1(5,2));
var param = 'h, w';
var formula = 'return h * w / 2';
var diamond = new Function(param,
formula);
console.log('Diamond : ' +
diamond(5,2));
// function literal
var triangle2 = function(w, h){
return w * h / 2;
}
console.log('Triangle2 : ' +
triangle2(5,2));
함수는 데이터 형의 일종, 수치/문자로 전환 가능하며, 변수처럼 호출 가능 함.
function 선언과 변수 로서의 function 선언은 호출 시점이 다르므로 유의.
여러 개의 인수를 콤마로 구분
함수 내부에서만 참조 가능
Function 의 생성자를 이용하여 정의
거의 활용되지 않음
Function 명령으로 정의
Function 생성자 경유로 정의
JavaScript 에서는 함수도 데이터 형의 일종 임
함수를 변수에 대입하거나, 함수의 인수로 건네거나,
반환 값으로 함수를 주는 것이 가능
함수 리터럴 표현으로 정의

5. Function 활용
var triangle1 = function(w, h){
return
w * h /2;
}
console.log('Triangle1 : ' +
triangle1(5,2));
var triangle2 = function(w, h){
return w * h /2;
}
console.log('Triangle2_1 : ' +
triangle2(5,2));
console.log(triangle2);
JavaScript 의 함수 정의는 간단하나, 코딩 시 생각 치 못한 문제 발생 가능
함수 정의라 하더라도 기법에 따라 해석이 다르므로 주의
triangle2 = 10;
console.log('Triangle2_2 : ' +
triangle2);
// static function
console.log('Triangle3 : ' +
triangle3(5,2)); // working
function triangle3(w, h){
return w * h / 2;
}
console.log('Triangle 4 : ' +
triangle4(5,2)); // not working
var triangle4 = function(w, h){
return w * h /2;
}

6. Function 고급
// named argument
function triangle(args){
if(args.base == undefined){
args.base = 1;
}
if(args.height == undefined){
args.height = 1;
}
return args.base * args.height / 2;
}
console.log('Triangle1 :' +
triangle({ base : 10, height : 5}));
// Higher order function
function arrayWalk(data, func){
for(var key in data){
func(key, data[key]);
}
}
function showElement(key, value){
console.log(key + ' : ' + value);
}
var arr = [1, 2, 4, 8, 16];
arrayWalk(arr, showElement);
// anonymous function
arrayWalk(arr, function(key, value){
console.log(key + ' : ' + value);
});
함수도 데이터 형이므로 함수를 인수/반환 값으로 사용 가능 (고계 함수)
일회용 함수는 이름을 부여하기 보다는 익명 함수를 이용하여 코드를 작성

7. 변수와 함수의 범위
THINKER TO MAKER
Scope

8. Scope
Scope는 변수가 어느 장소에서 참조할 수 있는가를 결정하는 개념.
전체 참조 가능한 Global Scope, 함수 안만 가능한 Local Scope 로 나뉨.
var scope1 = 'Global Var1';
function getValue1(){ // undefined
console.log(scope1);
var scope1 = 'Local Var1';
return scope1;
}
console.log(getValue1()); // Local Var1
console.log(scope1); // Global Var1
var scope2 = 'Global Var2';
function getValue2(){
scope2 = 'Local Var2';
return scope2;
}
console.log(getValue2()); // Local Var2
console.log(scope2); // Local Var2
스크립트 전체에서 참조할 있는 Scope
정의된 함수 안에서만 참조할 수 있는 Scope
Global Scope
Local Scope
var 를 사용하지 않으면 모두 글로벌 변수로 취급됨.
로컬 변수를 정의하려면 반드시 var 사용
로컬 변수는 함수 전체 영역에서 유효함. 직관 유효
범위, 실제 범위가 어긋날 수 있으므로 선두에 선언
변수 선언에 var 필수
로컬 변수는 함수 선두에

9. Scope
가인수는 기본적으로 로컬 변수로 처리. Value 형 인수 값은 함수 내 변경이
일어나도 글로벌 변수 값에 영향이 없으나, 참조 형인 경우, 영향을 주게 됨.
var value1 = 100;
function decrementValue(value){
value--;
return value;
}
console.log(decrementValue(value1)); //
99
console.log(value1); //
100
var value2 = [1, 2, 4, 8, 10];
function deleteElement(value){
value.pop();
}
console.log(deleteElement(value2));
console.log(value2); //
[1,2,4,8]
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]

10. Scope
Java, C 와는 달리, 블록 레벨의 Scope 는 지원하지 않음.
리터럴 선언은 Local 이지만, Function 생성자 선언 시 Global 변수로 취급.
// not support block level scope
if(true){
console.log('True 1');
var i = 5;
}
console.log(i); // 5
// support function level scope
(function(){
if(true){
console.log('True 2');
var j = 0;
}
})();
console.log(j);
// difference between function
var scope = 'Global Var';
function checkScope(){
var scope = 'Local Var';
var func1 = function(){
return scope;
}
console.log(func1()); // Local
Scope
var func2 = new Function('return
scope;');
console.log(func2()); // Global
Scope
}
checkScope();

11. Scope Chain
Scope Chain 의 선두에 위치하고 있는 객체로 부터 순서대로 Property 검색.
매치하는 Property가 처음 발견된 곳에서 그 값을 채택 함
var x = 'Global';
function outerFunc(){
var y = 'Local Outer';
function innerFunc(){
var z = 'Local Inner';
console.log(z);
console.log(y);
console.log(x);
}
innerFunc();
}
outerFunc();
functon ???(){
}
Call 객체
functon ???(){
}
Call 객체
Global 객체
스크립트 전체
함수 내부
중첩된 함수 내부
Scope 단위로 Global 객체, Call 객체 생성.
이것들을 생성 순서대로 연결한 것이 Scope Chain 임

12. JS 의 특징
THINKER TO MAKER
Parameter & Closure

13. Parameter
인수가 함수 측에서 요구하는 수와 다른 경우에도 파라미터 수 체크하지 않음.
인수 개수를 자유롭게 변경할 수 있으며, callee 를 이용하여 재귀호출 가능
function showMessage(args){
console.log(arguments);
console.log(arguments.length
+ ' / ' + args);
}
showMessage();
showMessage('Tomato','Banana');
function paramTest(){
for(var i =0 ; i
< arguments.length ; i++){
console.log(arguments[i]);
}
}
paramTest('a',1, [10,20,30]);
function factorial(n){
if(n != 0){
return n *
arguments.callee(n - 1);
}
return 1;
}
console.log(factorial(3));

14. Closure
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)

15. Closure 실습
호출마다 생성된 Call 객체는 별개의 것으로, 각각의 Call 객체에 속한 로컬
변수 Counter 도 별개의 것이 됨. 각각의 Scope 체인은 독립된 공간 임.
function closure(val){
var count = val;
return function(){
return ++count;
}
}
var cls1 = closure(1);
console.log(cls1());
console.log(cls1());
var cls2 = closure(100);
console.log(cls2());
console.log(cls2());
클로저 (Closure) 객체 (Object)
클로저를 감싸고 있는 부모 함수 생성자
클로저로 부터 참조되는 로컬 변수 프로퍼티
클로저 자신 메소드
클로저 리턴 함수 호출 인스턴스화
클로저를 대입하는 변수 인스턴스
익명 함수를 나타내는 Call 객체
Closure 호출 시 생성
Closure 함수의 Call 객체
글로벌 객체

16. W www.circul.us G group.circul.us
S social.circul.us C cafe.circul.us
CONTACT.US circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x