함수의 특징 (4)

 # 함수 특징 (4)

출처: https://medium.com/ibare-story/e252506f8525

17. 클로저

- 함수와 함수가 접근할 수 있는 주변 환경으로 구성된 특별한 개념

// 예제 1

function multiple() {

var x = 10;

return function(y) {

return y * x;

};

}

var mul = multiple();

mul(10); // 100

mul(5); // 50

- 함수 multiple은 익명 함수를 반환

- 반환되는 익명 함수의 바깥 함수 multiple을 걷어내면 보통의 익명 함수를 할당하는 대입문과 같다

- 지역 변수 x는 multiple을 호출하고 반환해도 존재하며 그 값은 익명 함수가 반환되는 시점의 x값인 1이다

=> 이것이 클로저!!

 

// 예제 2 : 클로저 패턴을 사용하면 새로운 함수를 동적으로 생성 가능

function multiple(x) {

return function(y) {

return y * x;

};

}

var mul10 = multiple(10);

var mul5 = multiple(5); // 50

var mul10 = multiple(10); // 100

var mul100 = multiple(100); // 1000

mul5(10); // 50

mul10(10); // 100

 

// 예제 3 : 클로저의 특징을 이용하면 private 변수를 흉내 낼 수 있다

function Person (name, age) {

this.getName = function() {

return name;

};

this.getAge = function() {

return age;

};

this.addAge = function() {

age++;

};

}

var person = new Person('홍길동', 5);

person.getName(); // 홍길동

person.getAge(); // 5

person.name; // undefined

person.addAge();

person.getAge(); // 6

 

 

18. 콜백 함수

- 자바스크립트의 함수는 1급 함수로서 변수에 할당 가능

=> 함수를 함수의 인수로 전달할 수 있다는 의미

- 함수의 호출이 비동기 방식으로 작동되어야 할 때 이 콜백 함수를 이용

// 예제1 : 타이머에 의한 함수 호출

var cont = 1;

function sayHello () {

console.log("Hello?", count);

count++;

}

// 첫번째 인수로 함수를 전달

// setTimeout은 호출과 함께 즉시 제어권을 반환

// 1000ms 후에 sayHello를 호출

setTimeout(sayHello, 100);

sayHello(); // "Hello? 1" 출력. 10초 후 "Hello? 2" 출력

 

- 인수로 받은 함수를 콜백 함수라 함

=> 특정 시간 이후에 호출되어야 하거나,

=> 네트워크 자원을 호출하여 반환값을 받는것,

=> 특정 이벤트가 발생했을 때 호출되어야 하는 함수(이벤트 핸들러)와 같이 함수 호출의 시기를 호출하는 시점에 특정할 수 없을때

콜백 함수 패턴이 유용하게 쓰임 

// 예제 2

var saveButton = document.getElmentById("save");

// click 이벤트가 발생했을 때 saveDocument 함수가 호출

saveButton.addEventListener("click", saveDocument);

 

 

19. 콜백 지옥

- 간단한 비동기 작업은 콜백 패턴이 좋다

- 비동기 작업이 중첩되는 상황에서는 nono

// 예제 3개의 비동기 콜백이 중첩된 코드

ayncJob (function(err, step1Data) {

ayncJobInner(function(err, step2Data) {

ayncJobDeepInner(function(err, step3Data) {

// create step4Data

});

});

});

- 백앤드 자바스크립트인 node 어플리케이션에서 콜백과 콜백이 중첩되는 상황 자주 발생

=> 비동기가 중첩된 흐름 제어는 콛의 가독성을 떨어뜨리고

=> 테스트를 어렵게 만든다

 

20. 흐름 제어 라이브러리

- 비동기 콜백과 흐름 제어(병렬 실행, 순차 실행)를 구현하기 위해 중첩된 콜백을 사용하지 않아도 되는 여러 대안 라이브러리가 존재함

1) async https://github.com/caolan/async

2) step https://github.com/creationix/step

3) q https://github.com/kriskowal/q

4) when https://github.com/cujojs/when

5) RSVP https://github.com/tildeio/rsvp.js

 

 

21. Promise & Generator

- 비동기 흐름 제어 코드를 직관적이고 아름답게 작성할 수 있도록 지원하는 자바스크립트의 네이티브 구현

=> ES 6 스펙으로 구현

=> 최신 브라우저와 node에서 동작

=> 자세한 내용은 아래 링크 참조

* JavaScript Promises

http://www.html5rocks.com/en/tutorials/es6/promises/

http://www.html5rocks.com/ko/tutorials/es6/promises/