Upload
circulus
View
121
Download
1
Embed Size (px)
Citation preview
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 [email protected]
THINKER TO MAKER
ANYQUES-TION?
x