본문 바로가기

JavaScript

자바스크립트 코딩기법과 핵심패턴 제 4장 함수

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

요즘 개인적으로 자바스크립트를 공부하고 있다. 하지만 내 경우 어정쩡하게 알고 있는 자바스크립트라 기초책은 보나마나인데, 이 책은 정말 실무에서도 바로 쓸 수 있는 패턴을 뽑아서 먹여주는 책 같다. 이 책과 더불어 자바스크립트 성능 최적화도 보면 정말 좋겠다. 아무튼 이 책을 요약하면서 정리하고자 한다. 이 책은 정말 강력 추천하며 자바스크립트를 제대로 학습하기 위한 필수 소장서이다.

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245


자바스크립트 코딩기법과 핵심패턴 제 4장 함수

자바스크립트에서 함수의 중요한 특징

  1. 함수는 일급객체 : 값이 전달될 수 있고 프로퍼티와 메서드를 확장할 수 있다.
  2. 함수는 지역 유효범위 제공 : 함수외에 다른 중괄호({}) 묶음은 지역 유효범위를 제공하지 않는다. 로컬 변수의 선언은 로컬 유효범위의 맨 윗부분으로 호이스팅이 된다.

함수를 생성하는 문법

  1. 기명 함수 표현식(named function expression)
     
    1.var add = function add(a, b) {
    2.   return a + b;
    3.};
  2. 무명 함수 표현식(unnamed function expression) = 함수 표현식 , 익명함수(anonymous function)
     
    1.var add = function (a, b) {
    2.   return a + b;
    3.};
  3. 함수 선언문(function declaration) 함수 선언문에는 세미콜론이 필요하지 않다.
     
    1.function foo() {
    2.     // 함수 본문
    3.}


 

함수 호이스팅


함수 선언문은 함수 내에서 호이스팅되지만 함수표현식에서 선언만 호이스팅된다. 즉, 정의는 호이스팅되지 않는다!

함수패턴 : API 패턴


함수에 더 좋고 깔끔한 인터페이스를 제공할 수 있도록 도와줌

  1. 콜백 패턴 : 함수를 인자로 전달
    - 콜백을 사용할 때는 항상 유효범위를 고려해야한다.
    - 콜백은 라이브러리에 들어가는 코드와 같이 범용적이고 재사용할 수 있도록 일반화 시키는데 도움을 준다.
    - 이벤트와 같이 비동기적 동작을 위해 콜백은 유용하게 사용된다.
  2. 설정 객체 : 함수에 많은 수의 매개변수를 전달할 때 통제를 벗어나지 않도록 해줌
    - 좀 더 깨끗한 API를 제공하는 방법으로 라이브러리나 다른 프로그램에서 사용할 코드를 만들 때 유용하다.
    - 장점 : 매개변수와 순서를 기억할 필요 없다. 선택적인 매개변수를 안전하게 생략가능. 읽기 쉽고 유지보수 편함. 매개변수를 추가하거나 제거하기 편함
    - 단점 : 매개변수 이름을 기억해야함. 프로퍼티 이름들이 압축되지 않음.
  3. 함수 반환 : 함수의 반환값이 또 다시 함수가 될 수 있다.
    - 클로저가 생성되기 때문에 비공개 데이터 저장을 위해 사용할 수 있다. 가령, 매번 호출할 때마다 값을 증가시키는 카운터 기능을 만들 수 있다.
    커링 : 원본 함수와 매개변수 일부를 물려받는 새로운 함수를 생성한다.
    - 함수 적용 : 함수의 호출은 실제로 인자의 묶음을 함수에 적용하는 것이다. Function.prototype.apply(), Function.prototype.call() 을 기억하자.
    - 부분 적용 : 자바스크립트의 동적인 특성을 사용해 add(5,4)를 add(5)(4) 처럼 동작하도록 한 것을 부분 적용이라고 한다.
    - 커링(Curring) : 부분 적용을 이해하고 처리할 수 있도록 만들어나가는 과정을 말한다.
     
    01.//커링된 add() 예
    02.function add(x, y) {
    03.  if (typeof y === "undefined") {
    04.     return function (y) {
    05.         return x + y;
    06.     };
    07.  }
    08.  return x + y;
    09.}
    10.typeof add(5); //function
    11.add(3)(4); //7
    12.var add2000 = add(2000);
    13.add2000(10); //2010
     
    01.//커링의 범용성 적용
    02.function schonfinkelize(fn) {
    03.   var slice = Array.prototype.slice,
    04.       stored_args = slice.call(arguments, 1);
    05.   return function() {
    06.       var new_args = slice.call(arguments),
    07.           args = stored_args.concat(new_args);
    08.       return fn.apply(null, args);  
    09.   };
    10.}
    11.//일반함수
    12.function add(x, y) {
    13.   return x + y;
    14.}
    15.var newadd = schonfinkelize(add, 5);
    16.newadd(4); //9
    17. 
    18.schonfinkelize(add, 6)(7); //13
    19. 
    20.//다른 일반함수
    21.function add(a, b, c, d, e) {
    22.  return a + b + c + d + e;
    23.}
    24.schonfinkelize(add, 1, 2, 3)(5, 5); //16
    25. 
    26.//2단계 커링
    27.var addOne = schonfinkelize(add, 1);
    28.addOne(10, 10, 10, 10); //41
    29.var addSix = schonfinkelize(addOne, 2, 3);
    30.addSix(5, 5); //16

    함수패턴 : 초기화 패턴


    웹페이지와 애플리케이션에서 매우 흔히 사용되는 초기화와 설정작업을 전역 네임스페이스를 어지럽히지 않고 임시 변수를 사용해 좀더 깨끗하고 구조화된 방법으로 수행할 수 있도록 도와줌
    1. 즉시 실행 함수 : 정의되자마자 실행된다.
      - 장점 : 초기화 코드에 유효범위 샌드박스(sandbox)를 제공한다. 즉, 전역 네임스페이스를 깨끗하게 유지한다.
      - 인자를 전달할 수 있다. 즉시 실행 함수내에서 window를 사용하지 않고도 전역객체에 접근할 때 유용하다.
      - 즉시 실행함수에서 미리 계산하여 클로저에 저장해둔 값을 반환할 수 있다.
      - 객체 프로퍼티를 정의할 때도 사용할 수 있다.
    2. 즉시 객체 초기화 : 익명 객체 내부에서 초기화 작업을 구조화한 다음 즉시 호출할 수 있는 메서드를 제공한다.
      - 즉시 객체 초기화 패턴을 활용하면 즉시 실행 함수와 초기화 작업을 할 수 있다는 장점이 있다. 구조적으로 초기화를 구분할 경우 장점이 있다.
      - 하지만 압축도구는 구글의 클러저 컴파일러의 고급 모드에서만 압축이 가능하다.
    3. 초기화 시점의 분기 : 최초 코드 실행 시점에 코드를 분기하여, 애플리케이션 생명 주기 동안 계속해서 분기가 발생하지 않도록 막아준다.
      - 어떤 조건이 프로그램의 생명주기 동안 변경이 되지 않는게 확실한 경우, 조건을 단 한 번만 확인하는 것이 바람직하다.

    함수패턴 : 성능 패턴


    코드의 실행속도를 높이는데 도움을 준다.
    1. 메모이제이션 패턴 : 함수 프로퍼티를 사용해 계산된 값을 다시 계산되지 않도록 한다.
      - 객체의 인자를 캐시하여 키값으로 삼아 같은 인자가 들어올 때 다시 계산하지 않도록 해서 성능을 높혀준다.
    2. 자기선언 함수 : 자기 자신을 덮어씀으로써 두 번째 호출 이후부터는 작업량을 줄게 해줌
      - 함수가 어떤 초기화 준비 작업을 단 한 번만 수행할 경우 유용하다.
      - 단점1은 자기 자신을 재정의한 후에는 이전에 원본 함수에 추가했던 프로퍼티들을 모두 찾을 수 없게된다.
      - 단점2는 함수가 다른 이름으로 사용된다면, 재정의된 부분이 아니라 원본 함수의 본문이 실행되어 의도치 않은 동작을 만들 수 있다.