Your SlideShare is downloading. ×
  • Like
  • Save
자바스크립트 함수
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

자바스크립트 함수

  • 1,611 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,611
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
2
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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