Javascript - Generator

|


1. Generator 기본 개념


여기서 increase라는 이름으로 만든 것이 제너레이터고 제너레이터라는 의미로 function를 사용했다.

여기서 제너레이터를 할당한 index에 index.toString()를 실행해 보면 "[object Generator]"로 나와서 제너레이터임을 알 수 가 있다.

이 예제에서 제너레이터는 for문을 순회하면서 yield로 인덱스 값을 반환하게 되는데 제너레이터는 여기서 멈추고 next()를 호출될 때마다 다음 yield를 만날 때까지만 다시 실행을 하게 된다.

next()를 실행할 때마다 yield의 값이 value에 담기고 done은 완료 여부를 나타낸다.




2. 기본 예제


function* increase(){

    for (var i = 0 ; i < 5 ; i++ ){

        yield i;

    }

}

var index = increase();

// console.log(index.toString());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

do {

    var res = index.next();

    if (res.done) {

        break;

    }

    console.log(res.value);

} while(true);



3. 무한급수 예제


function* Seq() {

    var idx = 0;

    do {

        yield idx++;

    } while(true)

}


var seq = Seq();


for (var i = 0 ; i < 10 ; i++ ) {

    console.log(seq.next());

}





'Language > Javascript' 카테고리의 다른 글

Javascript - Function, Module  (0) 2015.10.16
javascript 문서 맨 위에 'use strict'; 를 쓰자.  (0) 2015.10.16
Javascript - etc  (0) 2015.10.15
Javascript 정리 - Advanced  (0) 2015.10.15
Javascript 정리 - Basic  (0) 2015.10.15
And


Javascript - Function, Module

|


출처 : http://www.nextree.co.kr/p4150/



자바스크립트에서 함수는 first-class object다.


  first-class object는 변수에 저장할 수 있어야 합니다.

  first-class object는 함수의 파라미터로 전달할 수 있어야 합니다.

  first-class object는 함수의 반환값으로 사용할 수 있어야 합니다.

  first-class object는 자료 구조에 저장할 수 있어야 합니다.



// 기명 함수표현식(named function expression)

var company = function company() {

    // 실행코드

};


// 익명 함수표현식(anonymous function expression)

var company = function() {

    // 실행코드

};


// 기명 즉시실행함수(named immediately-invoked function expression)

(function company() {

    // 실행코드

}());


// 익명 즉시실행함수(immediately-invoked function expression)

// Javascript 대가이신 더글라스 클락포트의 권장 표기법

(function() {

    // 실행코드

}());


// 익명 즉시실행함수(immediately-invoked function expression)

(function() {

    // 실행코드

})();




즉시 실행 함수


var buyCar = function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

};

buyCar('sonata');


(function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

}('sonata'));

/**

ex) at JQuery

(function($) {

    // 함수 스코프 내에서 $는 jQuery Object임.

    console.log($);

}(jQuery));

*/




모듈 패턴 (Module Pattern)

즉시실행함수를 위와 같이 사용하여 언어레벨에서 제공하지 못하는 모듈화 지원도구를 극복할 수 있으며,

이렇게 작성된 코드를 분리된 파일로 구성하면 재사용성을 높일 수 있습니다.


var clerk = (function() {

    var name = 'Teo';

    var sex = '남자';

    var position = '수석 엔지니어';

    // salary private

    var salary = 2000;

    var taxSalary = 200;

    var totalBonus = 100;

    var taxBonus = 10;


    var payBonus = function() {

        totalBonus = totalBonus - taxBonus;

        return totalBonus;

    };

    var paySalary = function() {

        return salary - taxSalary;

    };


    // Public 속성, 메소드

    return {

        name : name,

        sex : sex,

        position : position,

        paySalary : paySalary,

        payBonus : payBonus

    };

}());


// name 속성은 public

console.log(clerk.name); // 'Teo' 출력


// salary 변수는 즉시실행함수 내부 변수이므로 private

console.log(clerk.salary); // undefined 출력


// paySalary 메소드는 public

console.log(clerk.paySalary()); // 1800 출력


// payBonus 메소드는 public

console.log(clerk.payBonus()); // 90 출력

console.log(clerk.payBonus()); // 80 출력




자바스크립트 모듈 작성시 코드 순서

  Javascript로 SPA를 구현할  때, 다음과 같은 순서의 코드로 모듈을 작성하게 되면 협업하는 개발자들에게 집약되고 일관된 코드를 제공하여 많은 도움이 될 것입니다. 이렇게 코드의 순서를 정하는 이유는 집약되고 일관된 코드를 제공하는데 있으므로 코드의 순서는 개발상황과 모듈용도에 맞춰가며 조정하고 추가 및 삭제될 수도 있습니다. 아래 순서는 단지 코드작성 순서의 예일뿐입니다.

    - 모듈 스코프 내에서 사용할 변수 작성

    - 유틸리티 메소드 작성

    - DOM 조작 메소드 작성

    - 이벤트 핸들러 작성

    - Public 메소드 작성


// SPA 모듈 작성 순서 예시

var app = (function() {


    // 1. 모듈 스코프 내에서 사용할 변수 작성

    var scopeVar = {};

    var utilMethod;

    var manipulateDom;

    var eventHandle;

    var initModule;


    // 2. 유틸리티 메소드 작성

    utilMethod = function() {

        // 실행코드

    };


    // 3. DOM 조작 메소드 작성

    manipulateDom = function() {

        // 실행코드

    };


    // 4. 이벤트 핸들러 작성

    eventHandle = function() {

        // 실행코드

    };


    // Public 메소드 작성

    initModule = function() {

        // 실행코드

    };


    return {

        init : initModule

    };

}());




모듈화 하는 코딩 기법 정리


/**

 * Library 모듈화를 위한 코딩기법 1

 * call 함수 이용

 */

(function() {

    'use strict';

    var root = this;

    var version = '1.0';

    var Module1;

    if(typeof exports !== 'undefined') {

        Module1 = exports;

    } else {

        Module1 = root.Module1 = {};

    }

    Module1.getVersion = function() {

        return version;

    }

}).call(this);

// console.log(Module1.getVersion());


/**

 * Library 모듈화를 위한 코딩기법 2

 * 글로벌 객체를 파라미터로 전달

 */

(function(global) {

    var root = global;

    var version = '1.0';

    var Module2;

    if(typeof exports !== 'undefined') {

        Module2 = exports;

    } else {

        Module2 = root.Module2 = {};

    }

    Module2.getVersion = function() {

        return version;

    }

}(this));

// console.log(Module2.getVersion());


/**

 * Library 모듈화를 위한 코딩기법 3

 * 즉시실행함수 내부에서 글로벌 객체를 내부 변수에 할당

 */

(function() {

    var root = this;

    var version = '1.0';

    var Module3;

    if(typeof exports !== 'undefined') {

        Module3 = exports;

    } else {

        Module3 = root.Module3 = {};

    }

    Module3.getVersion = function() {

        return version;

    }

}());

// console.log(Module3.getVersion());


/**

 * Library 모듈화를 위한 코딩기법 4

 * apply 함수 이용

 */

(function() {

    var root = this;

    var version = '1.0';

    var Module4;

    if(typeof exports !== 'undefined') {

        Module4 = exports;

    } else {

        Module4 = root.Module4 = {};

    }

    Module4.getVersion = function() {

        return version;

    }

}).apply(this) ;

// console.log(Module4.getVersion());


/**

 * Library 모듈화를 위한 코딩기법 5

 * 기명 즉시실행함수 이용

 */

var Module5 = (function() {

    var root = this;

    var version = '1.0';

    var Module;

    if(typeof exports !== 'undefined') {

        Module = exports;

    } else {

        Module = root.Module = {};

    }

    Module.getVersion = function() {

        return version;

    }

    return Module;

}());

console.log(Module5.getVersion());




'Language > Javascript' 카테고리의 다른 글

Javascript - Generator  (0) 2015.10.16
javascript 문서 맨 위에 'use strict'; 를 쓰자.  (0) 2015.10.16
Javascript - etc  (0) 2015.10.15
Javascript 정리 - Advanced  (0) 2015.10.15
Javascript 정리 - Basic  (0) 2015.10.15
And


javascript 문서 맨 위에 'use strict'; 를 쓰자.

|


출처

http://blog.aliencube.org/ko/2014/01/02/reasons-behind-using-strict-mode-while-coding-javascript/



Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써,

당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다.

이 엄격한 콘텍스트는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다.


Strict Mode는 몇가지 면에서 도움이 되는데:

  흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킵니다.

  상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 그럴 때 예외를 발생시킵니다.

  예를 들자면 전역객체들에 접근하려 한다거나 하는 것들이겠지요.

  혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킵니다.


이 strict mode는 파일 전체에 적용시킬 수도 있고,

아니면 특정한 함수 안에서만 적용시킬 수도 있습니다.


따라서, 기존의 자바스크립트 코드에 대해 좀 더 엄격한 검사를 실행시키고 싶다면 문서의 첫 줄에 "use strict";를 추가한다.

기존의 것은 그대로 놔두고, 새로운 코드에 대해서만 추가하고 싶다면 각각의 함수 블록 처음에 추가하는 것이 좋겠다.




'Language > Javascript' 카테고리의 다른 글

Javascript - Generator  (0) 2015.10.16
Javascript - Function, Module  (0) 2015.10.16
Javascript - etc  (0) 2015.10.15
Javascript 정리 - Advanced  (0) 2015.10.15
Javascript 정리 - Basic  (0) 2015.10.15
And


prev | 1 | 2 | 3 | 4 | 5 | 6 | 7 | ··· | 62 | next