336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
요즘 개인적으로 자바스크립트를 공부하고 있다. 하지만 내 경우 어정쩡하게 알고 있는 자바스크립트라 기초책은 보나마나인데, 이 책은 정말 실무에서도 바로 쓸 수 있는 패턴을 뽑아서 먹여주는 책 같다. 이 책과 더불어 자바스크립트 성능 최적화도 보면 정말 좋겠다. 아무튼 이 책을 요약하면서 정리하고자 한다. 이 책은 정말 강력 추천하며 자바스크립트를 제대로 학습하기 위한 필수 소장서이다.
책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245
자바스크립트 코딩기법과 핵심패턴 제 4장 함수
자바스크립트에서 함수의 중요한 특징
- 함수는 일급객체 : 값이 전달될 수 있고 프로퍼티와 메서드를 확장할 수 있다.
- 함수는 지역 유효범위 제공 : 함수외에 다른 중괄호({}) 묶음은 지역 유효범위를 제공하지 않는다. 로컬 변수의 선언은 로컬 유효범위의 맨 윗부분으로 호이스팅이 된다.
함수를 생성하는 문법
- 기명 함수 표현식(named function expression)
1.
var
add =
function
add(a, b) {
2.
return
a + b;
3.
};
- 무명 함수 표현식(unnamed function expression) = 함수 표현식 , 익명함수(anonymous function)
1.
var
add =
function
(a, b) {
2.
return
a + b;
3.
};
- 함수 선언문(function declaration) 함수 선언문에는 세미콜론이 필요하지 않다.
1.
function
foo() {
2.
// 함수 본문
3.
}
함수 호이스팅
함수 선언문은 함수 내에서 호이스팅되지만 함수표현식에서 선언만 호이스팅된다. 즉, 정의는 호이스팅되지 않는다!
함수패턴 : API 패턴
함수에 더 좋고 깔끔한 인터페이스를 제공할 수 있도록 도와줌
- 콜백 패턴 : 함수를 인자로 전달
- 콜백을 사용할 때는 항상 유효범위를 고려해야한다.
- 콜백은 라이브러리에 들어가는 코드와 같이 범용적이고 재사용할 수 있도록 일반화 시키는데 도움을 준다.
- 이벤트와 같이 비동기적 동작을 위해 콜백은 유용하게 사용된다. - 설정 객체 : 함수에 많은 수의 매개변수를 전달할 때 통제를 벗어나지 않도록 해줌
- 좀 더 깨끗한 API를 제공하는 방법으로 라이브러리나 다른 프로그램에서 사용할 코드를 만들 때 유용하다.
- 장점 : 매개변수와 순서를 기억할 필요 없다. 선택적인 매개변수를 안전하게 생략가능. 읽기 쉽고 유지보수 편함. 매개변수를 추가하거나 제거하기 편함
- 단점 : 매개변수 이름을 기억해야함. 프로퍼티 이름들이 압축되지 않음. - 함수 반환 : 함수의 반환값이 또 다시 함수가 될 수 있다.
- 클로저가 생성되기 때문에 비공개 데이터 저장을 위해 사용할 수 있다. 가령, 매번 호출할 때마다 값을 증가시키는 카운터 기능을 만들 수 있다.
커링 : 원본 함수와 매개변수 일부를 물려받는 새로운 함수를 생성한다.
- 함수 적용 : 함수의 호출은 실제로 인자의 묶음을 함수에 적용하는 것이다. 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
함수패턴 : 초기화 패턴
웹페이지와 애플리케이션에서 매우 흔히 사용되는 초기화와 설정작업을 전역 네임스페이스를 어지럽히지 않고 임시 변수를 사용해 좀더 깨끗하고 구조화된 방법으로 수행할 수 있도록 도와줌- 즉시 실행 함수 : 정의되자마자 실행된다.
- 장점 : 초기화 코드에 유효범위 샌드박스(sandbox)를 제공한다. 즉, 전역 네임스페이스를 깨끗하게 유지한다.
- 인자를 전달할 수 있다. 즉시 실행 함수내에서 window를 사용하지 않고도 전역객체에 접근할 때 유용하다.
- 즉시 실행함수에서 미리 계산하여 클로저에 저장해둔 값을 반환할 수 있다.
- 객체 프로퍼티를 정의할 때도 사용할 수 있다. - 즉시 객체 초기화 : 익명 객체 내부에서 초기화 작업을 구조화한 다음 즉시 호출할 수 있는 메서드를 제공한다.
- 즉시 객체 초기화 패턴을 활용하면 즉시 실행 함수와 초기화 작업을 할 수 있다는 장점이 있다. 구조적으로 초기화를 구분할 경우 장점이 있다.
- 하지만 압축도구는 구글의 클러저 컴파일러의 고급 모드에서만 압축이 가능하다. - 초기화 시점의 분기 : 최초 코드 실행 시점에 코드를 분기하여, 애플리케이션 생명 주기 동안 계속해서 분기가 발생하지 않도록 막아준다.
- 어떤 조건이 프로그램의 생명주기 동안 변경이 되지 않는게 확실한 경우, 조건을 단 한 번만 확인하는 것이 바람직하다.
함수패턴 : 성능 패턴
코드의 실행속도를 높이는데 도움을 준다.- 메모이제이션 패턴 : 함수 프로퍼티를 사용해 계산된 값을 다시 계산되지 않도록 한다.
- 객체의 인자를 캐시하여 키값으로 삼아 같은 인자가 들어올 때 다시 계산하지 않도록 해서 성능을 높혀준다. - 자기선언 함수 : 자기 자신을 덮어씀으로써 두 번째 호출 이후부터는 작업량을 줄게 해줌
- 함수가 어떤 초기화 준비 작업을 단 한 번만 수행할 경우 유용하다.
- 단점1은 자기 자신을 재정의한 후에는 이전에 원본 함수에 추가했던 프로퍼티들을 모두 찾을 수 없게된다.
- 단점2는 함수가 다른 이름으로 사용된다면, 재정의된 부분이 아니라 원본 함수의 본문이 실행되어 의도치 않은 동작을 만들 수 있다.
- 즉시 실행 함수 : 정의되자마자 실행된다.
'JavaScript' 카테고리의 다른 글
자바스크립트 코딩기법과 핵심패턴 제 6장 코드 재사용 패턴 #1 (0) | 2013.05.09 |
---|---|
자바스크립트 코딩기법과 핵심패턴 제 5장 객체 생성 패턴 (0) | 2013.05.09 |
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0) | 2013.05.07 |
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (0) | 2013.05.07 |
자바스크립트 코딩 기법과 핵심패턴 : 1장 개요 (0) | 2013.05.07 |