Startup JavaScript6.Function, Scope, Closure

THINKER TO MAKER

x

사용자 정의 처리 방식

THINKER TO MAKER

Function

Function 객체주어진 입력 (Parameter) 를 처리하여 그 결과를 돌려주는 구조가 함수 . 기본 함수가 있지만 , 개발자가 자기 스스로 함수를 정의할 수 있음

etc...

etc...

인수

함수가 동작하기 위한 인자 값

함수

미리 정의한 처리 방식

반환 값

함수에 의한 처리의 결과

function 명령으로 정의 하기 ( 선언적 방식 )

Function 생성자를 이용하여 정의 하기

함수 리터럴 표현으로 정의하기 ( 익명 함수 )

함수 선언3 가지 방식

Function 선언

var triangle1 = new Function('h','w','return h * w / 2');console.log('Triangle 1 : ' + trian-gle1(5,2));

var param = 'h, w';var formula = 'return h * w / 2';var diamond = new Function(param, for-mula);console.log('Diamond : ' + diamond(5,2));

// function literalvar triangle2 = function(w, h){ return w * h / 2;}

console.log('Triangle2 : ' + trian-gle2(5,2));

함수는 데이터 형의 일종 , 수치 / 문자로 전환 가능하며 , 변수처럼 호출 가능 함 .function 선언과 변수 로서의 function 선언은 호출 시점이 다르므로 유의 .

여러 개의 인수를 콤마로 구분

함수 내부에서만 참조 가능

Function 의 생성자를 이용하여 정의

거의 활용되지 않음

Function 명령으로 정의

Function 생성자 경유로 정의

JavaScript 에서는 함수도 데이터 형의 일종 임

함수를 변수에 대입하거나 , 함수의 인수로

건네거나 ,반환 값으로 함수를 주는 것이 가능

함수 리터럴 표현으로 정의

Function 활용

var triangle1 = function(w, h){ return w * h /2;}

console.log('Triangle1 : ' + trian-gle1(5,2));

var triangle2 = function(w, h){ return w * h /2;}

console.log('Triangle2_1 : ' + trian-gle2(5,2));console.log(triangle2);

JavaScript 의 함수 정의는 간단하나 , 코딩 시 생각 치 못한 문제 발생 가능함수 정의라 하더라도 기법에 따라 해석이 다르므로 주의

triangle2 = 10;console.log('Triangle2_2 : ' + trian-gle2);

// static functionconsole.log('Triangle3 : ' + trian-gle3(5,2)); // workingfunction triangle3(w, h){ return w * h / 2;}

console.log('Triangle 4 : ' + trian-gle4(5,2)); // not workingvar triangle4 = function(w, h){ return w * h /2;}

Function 고급

// named argumentfunction 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 functionfunction 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 functionarrayWalk(arr, function(key, value){ console.log(key + ' : ' + value);});

함수도 데이터 형이므로 함수를 인수 / 반환 값으로 사용 가능 ( 고계 함수 )일회용 함수는 이름을 부여하기 보다는 익명 함수를 이용하여 코드를 작성

변수와 함수의 범위

THINKER TO MAKER

Scope

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 Var1console.log(scope1); // Global Var1

var scope2 = 'Global Var2';

function getValue2(){ scope2 = 'Local Var2'; return scope2;}

console.log(getValue2()); // Local Var2console.log(scope2); // Local Var2

스크립트 전체에서 참조할 있는 Scope

정의된 함수 안에서만 참조할 수 있는 Scope

Global Scope

Local Scope

var 를 사용하지 않으면 모두 글로벌 변수로 취급됨 .

로컬 변수를 정의하려면 반드시 var 사용

로컬 변수는 함수 전체 영역에서 유효함 . 직관 유효범위 , 실제 범위가 어긋날 수 있으므로 선두에

선언

변수 선언에 var 필수

로컬 변수는 함수 선두에

Scope

가인수는 기본적으로 로컬 변수로 처리 . Value 형 인수 값은 함수 내 변경이 일어나도 글로벌 변수 값에 영향이 없으나 , 참조 형인 경우 , 영향을 주게 됨 .

var value1 = 100;

function decrementValue(value){ value--; return value;}

console.log(decrementValue(value1)); // 99console.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]

Scope

Java, C 와는 달리 , 블록 레벨의 Scope 는 지원하지 않음 . 리터럴 선언은 Local 이지만 , Function 생성자 선언 시 Global 변수로 취급 .

// not support block level scopeif(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 functionvar 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();

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

임

JS 의 특징

THINKER TO MAKER

Parameter & Closure

Parameter

인수가 함수 측에서 요구하는 수와 다른 경우에도 파라미터 수 체크하지 않음 . 인수 개수를 자유롭게 변경할 수 있으며 , callee 를 이용하여 재귀호출 가능function showMessage(args){ console.log(arguments); console.log(arguments.length + ' / ' + args);}

showMessage();showMessage('Tomato','Banana');

function paramTest(){ for(var i =0 ; i < argu-ments.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));

Closure

Closure 는 로컬 변수를 참조하고 있는 함수 내의 함수 .일종의 기억 영역을 제공해주는 구조를 가지고 있음

var myClosure = closure(1);

function closure(init){ var counter = init; return function(){ return ++counter; }}

변수 counter 는 1

function(){ return ++counter;}

myClosure(); 2myClosure(); 3myClosure(); 4

반환 값 함수 Literal

가인수 init 에 1세트

로컬 변수 counter변환값인 함수 Literal 을 경유하여 로컬 변수를 참조 , 조작할 수 있다 .

내부적으로 참조하고 있는 로컬변수 counter 도 함께 남아있다 . -> 데이터의 보존장소 ( 기억 영역 ) 를 지닌 함수가 만들 어 짐

var myClosure1

= closure(1);

function closure(init){ var counter = init; return function(){ return ++counter; }}

글로벌 객체

myClosure1myClosure2

var myClosure2

= closure(100);

Call 1-1

Call 1-2

Call 1-1

Call 1-2

counter=1 counter=100

함수 리터럴(Closure)

함수 리터럴(Closure)

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) 객체 (Ob-ject)

클로저를 감싸고 있는 부모 함수 생성자클로저로 부터 참조되는 로컬 변수 프로퍼티클로저 자신 메소드클로저 리턴 함수 호출 인스턴스화클로저를 대입하는 변수 인스턴스

익명 함수를 나타내는 Call 객체

Closure 호출 시 생성

Closure 함수의 Call 객체

글로벌 객체

W www.circul.us G group.circul.us S social.circul.us C cafe.circul.usCONTACT.US circulus@circul.us

THINKER TO MAKER

ANYQUES-TION?

x