Startup JavaScript 6 - 함수, 스코프, 클로저

Startup JavaScript 6 - 함수, 스코프, 클로저

• 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 고급 // namedargument 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.
  변수와 함수의 범위 THINKERTO 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 의 특징 THINKERTO 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 Ggroup.circul.us S social.circul.us C cafe.circul.us CONTACT.US circulus@circul.us THINKER TO MAKER ANY QUESTION? x