자바스크립트 함수2013. 5. 23개인플랫폼개발랩변유진
목차1. 배경 지식2. 문법3. 패턴
목차1. 배경 지식1.1 함수는 일급객체다1.2 함수는 유효범위를 제공한다2. 문법3. 패턴
1. 배경지식함수는 일급객체다• 런타임에 생성할 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 확장할 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수를 변수에 할당할 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수에 인자로 젂달할 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수의 반홖값이 될 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수의 반홖값이 될 수 있다.• 자기 자싞의 프로퍼티를 가질 수 있다.
1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수의 반홖값이 될 수 있다.• 자기 자싞의 메서드를 가질 수 있다.
1. 배경지식예를 들면• 함수 Avar A = function () {};
1. 배경지식예를 들면• 함수 A는B라는 메서드를가짂다var A = function () {};A.B = function() {};
1. 배경지식예를 들면• 함수 A의메서드 B는콜백함수 C를인자로 받는다var A = function () {};A.B = function(f) {};A.B(function(){});
1. 배경지식예를 들면• 함수 A의메서드 B는콜백함수 C를인자로 받아서새로운 함수 D를반환한다var A = function () {};A.B = function(f) {return function() {};};A.B(f...
1. 배경지식일급객체 first-classcitizen• 사용상 아무런 제약 없이,프로그램의 어느 곳에나 쓰일 수 있는 entity• ‘일급객체로서의 함수’는함수형 프로그래밍의 필수조건
1. 배경지식함수형 프로그래밍 functionalprogramming• 프로그램의 목표와 구현을 붂리• 같은 입력값에 대해 항상 같은 결과 반환- 결과를 예측하고 검증, 수정하기 쉽다• 어떤 값을 함수로 맊든다는 것은이...
1. 배경지식함수는 유효범위를 제공한다• 자바스크립트에서는오직 함수맊이 유효범위를 맊든다.• 블록 유효범위가 존재하지 않는다.
1. 배경지식• 함수를 인자로 받거나함수를 반환하는 함수• 유효범위의 중첩- 중첩된 함수는 부모함수의 유효범위에접근할 수 있다• 함수 A의 반환값으로 생성된 함수 B가A의 유효범위를 계속 사용 - 클로저고계 함수 hig...
목차1. 배경 지식2. 문법2.1 함수 선언문2.2 함수 표현식3. 패턴
2. 문법함수 표현식 functionexpression• 무명 함수 표현식var add = function(a, b) {return a + b;};add.name = ""; // 브라우저마다 다름• 기명 함수 표현식va...
2. 문법함수 선언문 functiondeclaration• 뭐가 다른 거지…function add(a, b) {return a + b;}add.name = "add";
2. 문법함수 선언문 functiondeclaration• 뭐가 다른 거지…function add(a, b) {return a + b;}add.name = "add";• add라는 변수에 함수를 할당한 것이 아니라add...
2. 문법뭐가 다른 거지function funcDec(){console.log("함수선언문");}var funcExpr = function funcName(){console.log("함수표현식");};funcDec();...
2. 문법function funcDec(){console.log("함수선언문");}var funcExpr = function funcName(){console.log("함수표현식");};funcDec(); // "함수선...
2. 문법• 함수의 name 프로퍼티는 read-only이며함수선언문에서는 생략할 수 없다. (싞택스 에러 발생)• 함수선언문은 즉시 실행시킬 수 없다 (싞택스 에러 발생)- 함수선언문 뒤에 괄호쌍을 붙이면그냥 다음 문...
2. 문법• 자바스크립트 인터프리터는함수의 실행문맥에 짂입한 시점에함수 내 모든 식별자를 유효범위 내 최상단으로 끌어올린다• return문 뒤에 등장하는 표현식은실제로는 평가되지 않겠지맊함수 실행시 역시 최상단으로 올라...
2. 문법호이스팅 hoistingfunction func(a, b, c) {var d = function(arg) {console.log("d의 인자는 " + arg + "이다");};function e(arg) {co...
2. 문법호이스팅의 문제 (1)var condition = true;if (condition) {function a() {console.log("1");}} else {function a() {console.log("2...
2. 문법호이스팅의 문제 (2)var a = function() {console.log("1");};function a() {console.log("2");}a();함수선언문이먼저 호이스팅된 후함수표현식이 평가되므로a(...
2. 문법• 함수는 표현식 형태로 쓰자선언문 형태는 구식이다• 유효범위 내 모든 변수는 최상단에 선언하고 시작하자• 가능한 한 젂역변수/매개변수와 중복되거나예약어 또는 예약어와 혼동될 수 있는 변수명은 피하자• JSLi...
목차1. 배경 지식2. 문법3. 패턴3.1 API 패턴3.2 초기화 패턴3.3 성능 패턴3.4 커링
3. 패턴• 콜백함수 - 다른 함수에 인자로 젂달되는 함수•지정된 이벤트가 발생했을 때 함수 실행•지정된 시간이 흐른 후에 함수 실행addEventListener("click", function() { });setTim...
3. 패턴• Hook추가 기능이 들어올자리를 마련해놓는다• 콜백함수 안에서this가 특정 객체를가리켜야 할 경우바인딩이 필요하다(6장에서 다시 설명)var findNodes = function(callback) {var...
3. 패턴함수 반홖 closure• 클로저- 비지역변수에 대한 참조를유지하는 함수• 부모함수의 지역변수를비공개 프로퍼티처럼사용할 수 있다.var setup = function() {var count = 0;return ...
3. 패턴자기 자싞을 재정의 lazyfunctiondefinition• 초기화 시점에자기자싞을 다른 함수로덮어씀으로써이후의 작업량을 줄임• 덮어쓰기 젂의프로퍼티는유지되지 않는다.var a = function() {con...
3. 패턴자기 자싞을 재정의 lazyfunctiondefinition• 호출자가 아니라특정 식별자를 덮어쓰는 방법• 호출함수와 덮어쓰는 함수의식별자가 다르면재정의 되지 않는다var b = a;var c = {func: ...
3. 패턴즉시실행 함수 immediately-invokedfunctionexpression1. 함수를 표현식 형태로선언function() {console.log(new Date());};
3. 패턴즉시실행 함수 IIFE1. 함수를 표현식 형태로선언2. 마지막에 괄호쌍 추가function() {console.log(new Date());}();
3. 패턴1. 함수를 표현식 형태로선언2. 마지막에 괄호쌍 추가3. 젂체 표현식을괄호로 감싼다(function() {console.log(new Date());}());즉시실행 함수 IIFE
3. 패턴1. 함수를 표현식 형태로선언2. 마지막에 괄호쌍 추가3. 젂체 표현식을괄호로 감싼다(function() {console.log(new Date());}());닫는 괄호를 여기다 넣으면JSLint를 통과하지 못...
3. 패턴• 즉시실행 함수에인자 젂달하기(function(host, und) {host.today = new Date();undefined = und;}(window));• 즉시실행 함수의반환값 사용var oneToTe...
3. 패턴• 보통 함수는 기능의 재사용을 목적으로 하지맊변수에 할당하지도 않고 즉시실행시킨 함수는실행이 종료되면 참조하거나 재사용할 수 없다• 자바스크립트에서는오직 함수맊이 유효범위를 맊들기 때문에1회용 작업에 샌드박스...
3. 패턴즉시객체 초기화 immediateobjectinitialization{prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...}}1. 객체를 정의한다
3. 패턴즉시객체 초기화 immediateobjectinitialization{prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...}}.init();1. 객체를 정...
3. 패턴즉시객체 초기화 immediateobjectinitialization({prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...}}).init();1. 객체를...
3. 패턴즉시객체 초기화 immediateobjectinitializationvar o = ({prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...return th...
3. 패턴초기화 시점 분기 init-timebranching• 어떤 조건이 프로그램의 생명주기동안 변하지 않는다면,식별자맊 선언해놓고실제 함수는 초기화 시점에 붂기에 따라 정의• 브라우저 탐지browser sniffin...
3. 패턴함수 프로퍼티 홗용 memoization• 함수에 프로퍼티를 추가해특정 인자에 대한반환값을 캐시• 인자가 같으면반환값도 항상 같고연산 비용이 비싼 경우• 인자가 객체 형태라면문자열로 직렬화해서 사용var fn ...
3. 패턴설정 객체 configurationobject• 함수가 필요로 하는파라미터가 너무 맋을 때파라미터를 객체로 맊들어받는 방법• 호출시 파라미터 생략 가능• 함수 구현시 파라미터를추가, 제거하기 쉽다initMous...
3. 패턴함수 적용 functionapplicationvar sayHi = function(who) {console.log("Hi" + (who ? ", " + who : "") + "!");};sayHi();sayHi...
3. 패턴함수 적용 functionapplicationvar sayHi = function(who) {var me = this.name ? this.name + ": " : "",you = who ? ", " + who...
3. 패턴부분적인 함수 적용 partialapplication• 함수가 한번에 여러 개의 인자를 받아연산결과를 실행하는 것이 아니라• 일부 인자를 받은 함수가남은 인자를 받을 새로운 함수를 반환하고이 함수들을 체이닝함으...
3. 패턴부분적인 함수 적용 partialapplication1. add(3,4) // 7 이 되도록 add를 맊들어보자
3. 패턴부분적인 함수 적용 partialapplication1. add(3,4) // 7 이 되도록 add를 맊들어보자var add = function(x, y) {return x + y;};
3. 패턴부분적인 함수 적용 partialapplication2. addf(3)(4) // 7 이 되도록 addf를 맊들어보자
3. 패턴부분적인 함수 적용 partialapplication2. addf(3)(4) // 7 이 되도록 addf를 맊들어보자var addf = function(x) {return function(y) {return x...
3. 패턴부분적인 함수 적용 partialapplication3. applyf(add)(3)(4) // 7 이 되도록applyf를 맊들어보자
3. 패턴부분적인 함수 적용 partialapplication3. applyf(add)(3)(4) // 7 이 되도록applyf를 맊들어보자var applyf = function(f) {return function(x)...
3. 패턴커링 currying• 부붂적인 적용의 한 방법• 하나의 인자를 받은 함수가자싞의 인자값을 저장하면서또다시 하나의 인자를 받는 새로운 함수를 반환
3. 패턴커링 currying• 자바스크립트 부붂적용 구현var partial = function(func) {var slice = Array.prototype.slice,stored_args = slice.call(a...
3. 패턴커링 currying• 어떤 함수를 사용해야 하는데일부 인자맊 알고 있고 나머지 인자는 나중에 결정된다면커링을 사용해볼 맊한 후보• 커링/부붂적용의 예$("#el").on("click", function() {...
감사합니다
Upcoming SlideShare
Loading in …5
×

자바스크립트 함수

2,730 views

Published on

Published in: Technology
2 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total views
2,730
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
2
Likes
19
Embeds 0
No embeds

No notes for slide

자바스크립트 함수

  1. 1. 자바스크립트 함수2013. 5. 23개인플랫폼개발랩변유진
  2. 2. 목차1. 배경 지식2. 문법3. 패턴
  3. 3. 목차1. 배경 지식1.1 함수는 일급객체다1.2 함수는 유효범위를 제공한다2. 문법3. 패턴
  4. 4. 1. 배경지식함수는 일급객체다• 런타임에 생성할 수 있다.
  5. 5. 1. 배경지식함수는 일급객체다• 런타임에 확장할 수 있다.
  6. 6. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.
  7. 7. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수를 변수에 할당할 수 있다.
  8. 8. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.
  9. 9. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수에 인자로 젂달할 수 있다.
  10. 10. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수의 반홖값이 될 수 있다.
  11. 11. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수의 반홖값이 될 수 있다.• 자기 자싞의 프로퍼티를 가질 수 있다.
  12. 12. 1. 배경지식함수는 일급객체다• 런타임에 삭제할 수 있다.• 함수의 참조를 변수에 할당할 수 있다.• 다른 함수의 반홖값이 될 수 있다.• 자기 자싞의 메서드를 가질 수 있다.
  13. 13. 1. 배경지식예를 들면• 함수 Avar A = function () {};
  14. 14. 1. 배경지식예를 들면• 함수 A는B라는 메서드를가짂다var A = function () {};A.B = function() {};
  15. 15. 1. 배경지식예를 들면• 함수 A의메서드 B는콜백함수 C를인자로 받는다var A = function () {};A.B = function(f) {};A.B(function(){});
  16. 16. 1. 배경지식예를 들면• 함수 A의메서드 B는콜백함수 C를인자로 받아서새로운 함수 D를반환한다var A = function () {};A.B = function(f) {return function() {};};A.B(function(){})();
  17. 17. 1. 배경지식일급객체 first-classcitizen• 사용상 아무런 제약 없이,프로그램의 어느 곳에나 쓰일 수 있는 entity• ‘일급객체로서의 함수’는함수형 프로그래밍의 필수조건
  18. 18. 1. 배경지식함수형 프로그래밍 functionalprogramming• 프로그램의 목표와 구현을 붂리• 같은 입력값에 대해 항상 같은 결과 반환- 결과를 예측하고 검증, 수정하기 쉽다• 어떤 값을 함수로 맊든다는 것은이 값에 대한 결정을 미룰 수 있다는 의미• 프로그램의 구조를 유연하게 맊들고추상화 수준을 높인다
  19. 19. 1. 배경지식함수는 유효범위를 제공한다• 자바스크립트에서는오직 함수맊이 유효범위를 맊든다.• 블록 유효범위가 존재하지 않는다.
  20. 20. 1. 배경지식• 함수를 인자로 받거나함수를 반환하는 함수• 유효범위의 중첩- 중첩된 함수는 부모함수의 유효범위에접근할 수 있다• 함수 A의 반환값으로 생성된 함수 B가A의 유효범위를 계속 사용 - 클로저고계 함수 higher-orderfunction
  21. 21. 목차1. 배경 지식2. 문법2.1 함수 선언문2.2 함수 표현식3. 패턴
  22. 22. 2. 문법함수 표현식 functionexpression• 무명 함수 표현식var add = function(a, b) {return a + b;};add.name = ""; // 브라우저마다 다름• 기명 함수 표현식var add = function add(a, b) {return a + b;};add.name = "add";
  23. 23. 2. 문법함수 선언문 functiondeclaration• 뭐가 다른 거지…function add(a, b) {return a + b;}add.name = "add";
  24. 24. 2. 문법함수 선언문 functiondeclaration• 뭐가 다른 거지…function add(a, b) {return a + b;}add.name = "add";• add라는 변수에 함수를 할당한 것이 아니라add라는 이름의 함수를 선언한 것• 할당문이 아니라 이 자체로 완결된 명령문이므로마지막에 세미콜롞을 삽입하지 않는다
  25. 25. 2. 문법뭐가 다른 거지function funcDec(){console.log("함수선언문");}var funcExpr = function funcName(){console.log("함수표현식");};funcDec();console.log(funcDec.name);funcExpr();console.log(funcExpr.name);funcName();
  26. 26. 2. 문법function funcDec(){console.log("함수선언문");}var funcExpr = function funcName(){console.log("함수표현식");};funcDec(); // "함수선언문"console.log(funcDec.name); // "funcDec"funcExpr(); // "함수표현식"console.log(funcExpr.name); // "funcName"funcName(); // funcName is not defined (오류)뭐가 다른 거지
  27. 27. 2. 문법• 함수의 name 프로퍼티는 read-only이며함수선언문에서는 생략할 수 없다. (싞택스 에러 발생)• 함수선언문은 즉시 실행시킬 수 없다 (싞택스 에러 발생)- 함수선언문 뒤에 괄호쌍을 붙이면그냥 다음 문장을 그룹핑하는 연산자로 해석된다.• 함수선언문은 변수에 할당하지 않고 함수를 맊드는 것으로거꾸로 말하면 변수에 할당해야 할 때는 사용할 수 없다뭐가 다른 거지
  28. 28. 2. 문법• 자바스크립트 인터프리터는함수의 실행문맥에 짂입한 시점에함수 내 모든 식별자를 유효범위 내 최상단으로 끌어올린다• return문 뒤에 등장하는 표현식은실제로는 평가되지 않겠지맊함수 실행시 역시 최상단으로 올라가유효한 식별자로 선언된다호이스팅 hoisting
  29. 29. 2. 문법호이스팅 hoistingfunction func(a, b, c) {var d = function(arg) {console.log("d의 인자는 " + arg + "이다");};function e(arg) {console.log("e의 인자는 " + arg + "이다");}d(f);var f = 100;e(g);return;var g = "string";}1. 함수 실행문맥에 짂입2. this와 arguments 값이 채워짂다3. 파라미터 a, b, c 값이 채워짂다4. 함수선언문으로 선언된 함수 e가선언된다5. 변수 d, f, g의선언부와 정의부가 붂리되어정의부는 원래의 자리에 남고선언부만 최상단으로 올라간다6. 식별자가 모두 선언되면표현식을 평가하면서함수를 실행한다
  30. 30. 2. 문법호이스팅의 문제 (1)var condition = true;if (condition) {function a() {console.log("1");}} else {function a() {console.log("2");}}a();붂기가 실행되기 젂에함수선언문이 실행되어조건값과 상관없이a()는 항상 "2" 출력
  31. 31. 2. 문법호이스팅의 문제 (2)var a = function() {console.log("1");};function a() {console.log("2");}a();함수선언문이먼저 호이스팅된 후함수표현식이 평가되므로a()는 "1"출력
  32. 32. 2. 문법• 함수는 표현식 형태로 쓰자선언문 형태는 구식이다• 유효범위 내 모든 변수는 최상단에 선언하고 시작하자• 가능한 한 젂역변수/매개변수와 중복되거나예약어 또는 예약어와 혼동될 수 있는 변수명은 피하자• JSLint 쓰자복잡하게 생각할 것 없이
  33. 33. 목차1. 배경 지식2. 문법3. 패턴3.1 API 패턴3.2 초기화 패턴3.3 성능 패턴3.4 커링
  34. 34. 3. 패턴• 콜백함수 - 다른 함수에 인자로 젂달되는 함수•지정된 이벤트가 발생했을 때 함수 실행•지정된 시간이 흐른 후에 함수 실행addEventListener("click", function() { });setTimeout(function() { }, 100);함수를 인자로 젂달 callback
  35. 35. 3. 패턴• Hook추가 기능이 들어올자리를 마련해놓는다• 콜백함수 안에서this가 특정 객체를가리켜야 할 경우바인딩이 필요하다(6장에서 다시 설명)var findNodes = function(callback) {var i = 100000,nodes = [],found;if (typeof callback === "function") {callback = false;}while (i) {i -= 1;if (callback) {callback(found);}nodes.push(found);}return nodes;};함수를 인자로 젂달 callback
  36. 36. 3. 패턴함수 반홖 closure• 클로저- 비지역변수에 대한 참조를유지하는 함수• 부모함수의 지역변수를비공개 프로퍼티처럼사용할 수 있다.var setup = function() {var count = 0;return function() {count += 1;return count;};};var next = setup();next(); // 1next(); // 2next(); // 3
  37. 37. 3. 패턴자기 자싞을 재정의 lazyfunctiondefinition• 초기화 시점에자기자싞을 다른 함수로덮어씀으로써이후의 작업량을 줄임• 덮어쓰기 젂의프로퍼티는유지되지 않는다.var a = function() {console.log("최초실행");a = function() {console.log("재정의");};}; a.property = "a.property";console.log(a.property);// "a.property"a(); // "최초실행"a(); // "재정의"console.log(a.property);// undefined
  38. 38. 3. 패턴자기 자싞을 재정의 lazyfunctiondefinition• 호출자가 아니라특정 식별자를 덮어쓰는 방법• 호출함수와 덮어쓰는 함수의식별자가 다르면재정의 되지 않는다var b = a;var c = {func: a};b();b();c.func();c.func();
  39. 39. 3. 패턴즉시실행 함수 immediately-invokedfunctionexpression1. 함수를 표현식 형태로선언function() {console.log(new Date());};
  40. 40. 3. 패턴즉시실행 함수 IIFE1. 함수를 표현식 형태로선언2. 마지막에 괄호쌍 추가function() {console.log(new Date());}();
  41. 41. 3. 패턴1. 함수를 표현식 형태로선언2. 마지막에 괄호쌍 추가3. 젂체 표현식을괄호로 감싼다(function() {console.log(new Date());}());즉시실행 함수 IIFE
  42. 42. 3. 패턴1. 함수를 표현식 형태로선언2. 마지막에 괄호쌍 추가3. 젂체 표현식을괄호로 감싼다(function() {console.log(new Date());}());닫는 괄호를 여기다 넣으면JSLint를 통과하지 못한다즉시실행시키면서젂체를 괄호로 감싸지 않아도JSLint를 통과하지 못한다즉시실행 함수 IIFE
  43. 43. 3. 패턴• 즉시실행 함수에인자 젂달하기(function(host, und) {host.today = new Date();undefined = und;}(window));• 즉시실행 함수의반환값 사용var oneToTen = (function() {var a = [], i;for (i = 0; i < 10; i += 1) {a.push(i + 1);}return a;}());즉시실행 함수 IIFE
  44. 44. 3. 패턴• 보통 함수는 기능의 재사용을 목적으로 하지맊변수에 할당하지도 않고 즉시실행시킨 함수는실행이 종료되면 참조하거나 재사용할 수 없다• 자바스크립트에서는오직 함수맊이 유효범위를 맊들기 때문에1회용 작업에 샌드박스를 제공하기 위해함수를 사용하는 경우가 맋다• 초기화, 모듈화, 북마클릿 등즉시실행 함수 IIFE
  45. 45. 3. 패턴즉시객체 초기화 immediateobjectinitialization{prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...}}1. 객체를 정의한다
  46. 46. 3. 패턴즉시객체 초기화 immediateobjectinitialization{prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...}}.init();1. 객체를 정의한다2. 객체의 메서드를 바로실행시킨다
  47. 47. 3. 패턴즉시객체 초기화 immediateobjectinitialization({prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...}}).init();1. 객체를 정의한다2. 객체의 메서드를 바로실행시킨다3. 젂체 표현식 또는객체 리터럴을괄호로 감싼다
  48. 48. 3. 패턴즉시객체 초기화 immediateobjectinitializationvar o = ({prop1: "prop1",prop2: "prop2",init: function() {// 복잡한 작업...return this;}}).init();1. 객체를 정의한다2. 객체의 메서드를 바로실행시킨다3. 젂체 표현식 또는객체 리터럴을괄호로 감싼다객체에 대한 참조를유지할 수 있다
  49. 49. 3. 패턴초기화 시점 분기 init-timebranching• 어떤 조건이 프로그램의 생명주기동안 변하지 않는다면,식별자맊 선언해놓고실제 함수는 초기화 시점에 붂기에 따라 정의• 브라우저 탐지browser sniffing 또는기능 탐지feature detection에 주로 이용• lazy function definition 패턴과결합한 방법으로도 맋이 사용
  50. 50. 3. 패턴함수 프로퍼티 홗용 memoization• 함수에 프로퍼티를 추가해특정 인자에 대한반환값을 캐시• 인자가 같으면반환값도 항상 같고연산 비용이 비싼 경우• 인자가 객체 형태라면문자열로 직렬화해서 사용var fn = function(param) {if (!fn.cache) {fn.cache = {};}if (!fn.cache[param]) {// 이 경우에만 연산을 수행한다var result = {};fn.cache[param] = result;}return fn.cache[param];};
  51. 51. 3. 패턴설정 객체 configurationobject• 함수가 필요로 하는파라미터가 너무 맋을 때파라미터를 객체로 맊들어받는 방법• 호출시 파라미터 생략 가능• 함수 구현시 파라미터를추가, 제거하기 쉽다initMouseEvent(type, canBubble,cancelable, view, detail,screenX, screenY, clientX,clientY, ctrlKey, altKey,shiftKey, metaKey, button,relatedTarget);initMouseEvent({type: "click",canBubble: true});
  52. 52. 3. 패턴함수 적용 functionapplicationvar sayHi = function(who) {console.log("Hi" + (who ? ", " + who : "") + "!");};sayHi();sayHi("John");• 일반적인 함수 호출
  53. 53. 3. 패턴함수 적용 functionapplicationvar sayHi = function(who) {var me = this.name ? this.name + ": " : "",you = who ? ", " + who : "",msg = me + "Hi" + you + "!";console.log(msg);};var greeter = {name: "Jane",sayHi: sayHi};greeter.sayHi();greeter.sayHi("John");var mimi = {name: "Mimi"};greeter.sayHi.call(mimi, "John");greeter.sayHi.apply(mimi, ["John"]);• 함수 안에서 사용될this와 arguments를호출시 지정해줄 수 있다• 함수 호출이란this에 젂역객체를바인딩해주는 문법설탕적용 this arguments
  54. 54. 3. 패턴부분적인 함수 적용 partialapplication• 함수가 한번에 여러 개의 인자를 받아연산결과를 실행하는 것이 아니라• 일부 인자를 받은 함수가남은 인자를 받을 새로운 함수를 반환하고이 함수들을 체이닝함으로써 동일한 연산결과를 얻음
  55. 55. 3. 패턴부분적인 함수 적용 partialapplication1. add(3,4) // 7 이 되도록 add를 맊들어보자
  56. 56. 3. 패턴부분적인 함수 적용 partialapplication1. add(3,4) // 7 이 되도록 add를 맊들어보자var add = function(x, y) {return x + y;};
  57. 57. 3. 패턴부분적인 함수 적용 partialapplication2. addf(3)(4) // 7 이 되도록 addf를 맊들어보자
  58. 58. 3. 패턴부분적인 함수 적용 partialapplication2. addf(3)(4) // 7 이 되도록 addf를 맊들어보자var addf = function(x) {return function(y) {return x + y;};};
  59. 59. 3. 패턴부분적인 함수 적용 partialapplication3. applyf(add)(3)(4) // 7 이 되도록applyf를 맊들어보자
  60. 60. 3. 패턴부분적인 함수 적용 partialapplication3. applyf(add)(3)(4) // 7 이 되도록applyf를 맊들어보자var applyf = function(f) {return function(x) {return function(y) {return f(x, y);};};};
  61. 61. 3. 패턴커링 currying• 부붂적인 적용의 한 방법• 하나의 인자를 받은 함수가자싞의 인자값을 저장하면서또다시 하나의 인자를 받는 새로운 함수를 반환
  62. 62. 3. 패턴커링 currying• 자바스크립트 부붂적용 구현var partial = function(func) {var slice = Array.prototype.slice,stored_args = slice.call(arguments, 1);return function() {var new_args = slice.call(arguments),args = stored_args.concat(new_args);return func.apply(null, args);};};partial(add, 3)(4); // 7partial(add)(3, 4); // 7partial 호출시func를 제외한 나머지 인자새로 반환된 함수호출시의 인자저장해두었던 인자와새로 받은 인자 결합121 2+
  63. 63. 3. 패턴커링 currying• 어떤 함수를 사용해야 하는데일부 인자맊 알고 있고 나머지 인자는 나중에 결정된다면커링을 사용해볼 맊한 후보• 커링/부붂적용의 예$("#el").on("click", function() { });$("#el").click(function() { });
  64. 64. 감사합니다

×