W' page

기본 환경 설정은 아래의 다른 sublime 설정을 따르고 추가적인 설정을 진행

출처 : http://www.sitepoint.com/essential-sublime-text-javascript-plugins/

Control + Shift + P 로 팔렛트를 띄워 Package Controll Install 에서 아래의 것들을 설치한다.

1. Babel : JS Syntax

2. JSHint (& JSHint Gutter) : Alt + J 를 누르면 신택스 오류 띄워줌

아래와 같이 Set Linting Preferences 설정

{

  "node": true,

  "camelcase": true,

  "eqeqeq": true,

  "esnext": true,

  "globals": {},

  "globalstrict": true,

  "quotmark": true,

  "undef": true,

  "unused": true,

  "esnext": true,

  "quotmark": "single"

}

3. DocBlockr : /** 엔터 누르면 jsdoc 쓸 수 있게 해줌

4. JSFormat : 아직은 뭐가 좋은지 잘 모르겠다.

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());

}

출처 : 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());

출처

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";를 추가한다.

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

// 출처 : http://programmingsummaries.tistory.com/

// 추천 링크

// https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

// 재귀함수와 arguments.callee

// arguments.callee는 스스로의 함수를 호출

function factorial(x) {

    if(x<=1) {

        return 1;

    }

    else {

        return x*arguments.callee(x-1);

    }

}

console.log(factorial(5))

// 멤버 관리 구조와 prototype

function Person(name) {

    var firstName = "홍";

    this.name = name;

    this.speak = function(){ console.log(firstName + this.name); }

}

console.log(Person.firstName); //undefined 접근할 수 없다.

var p = new Person("길동"); //객체 생성

console.log(p.firstName); //undefined 역시 접근할 수 없다.

console.log(p.name); //"길동" 접근 가능하다.

Person.prototype.tellme = function(){ console.log('zzz'); }; //메서드 추가!!

console.log(p.tellme()); //zzz라는 팝업이 뜬다!! 즉 객체 프로토타입 변경 가능!!

console.log(p["firstName"]); //undefined 마찬가지로 접근할 수 없다.

console.log(p["name"]); //"길동" 접근 가능하다.

// 멤버 확장

Object.prototype.extend = function(parent) {

    for(var property in parent) {

        this[property] = parent[property];

    }

};

// Max & min

var test = [0, 77, 33, 11, 99, 88, 55];

console.log(Math.max.apply(null, test)); //결과값은 99

console.log(Math.min.apply(null, test)); //결과값은 0

var max = test.reduce( function (previous, current) {

    return previous > current ? previous:current;

});

//최소값

var min = test.reduce( function (previous, current) {

    return previous > current ? current:previous;

});

console.log("max :", max, "| min :", min)

// 배열 복사, 객체를 가진 경우엔 조심해야 함

var aaa = [0, 1, 2, 3, 4, 5];

var bbb = JSON.parse(JSON.stringify( aaa )); //참조없는 복사

var aaaa = [0, 1, 2, 3, 4, 5];

var bbbb = aaaa.slice(); //indexOf 혹은 contains로 검색 가능

// 배열 함수 : http://programmingsummaries.tistory.com/357

// Array.forEach

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 EDIT라는 문자열을 더하기

//메서드 수행 후 리턴값은 undefined

testArray.forEach(function (item, index, array) {

    array[index] = item + "EDIT";

});

console.log(testArray);

// Array.some

var testArraySome = ["aaa", "bbb", "ccc", "ddd"];

//배열의 중에서 "bbb"가 있으면 true를 리턴

//메서드 수행 중 true가 리턴되면 메서드 수행을 중단하고 true를 리턴

console.log(testArraySome.some(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("bbb");

}));

//true를 리턴하는 콜백이 있었으므로 리턴값은 true

// Array.every

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 "aaa"가 있으면 true를 리턴

//메서드 수행 중 false가 리턴되면 메서드 수행을 중단하고 false를 리턴

console.log(testArray.every(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("aaa");

    // return !!~item.search(/[a-z]+/);  -> true

}));

//false를 리턴하는 콜백이 있었으므로 리턴값은 false

// Array.filter

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 요소가 a 또는 b로 이루어져 있으면 추출

//메서드가 종료되면 추출된 요소로만 이루어진 새로운 배열을 리턴

var newArray = testArray.filter(function (item, index, array) {

    return !!~item.search(/[ab]+/);

});

console.log(testArray);

console.log(newArray);

// Array.reduce

var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//각 콜백마다의 리턴값을 previousItem 으로 넘겨받아 어떤 작업을 수행

//메서드가 종료되면 마지막 콜백의 리턴값을 리턴

var result = testArray.reduce(function (previousItem, currentItem, index, array) {

    //반환된 결과는 다음번 콜백의 첫번째 파라메터로 다시 전달된다.

    return previousItem + currentItem;

}, 0);

console.log(testArray);

console.log(result);

// setTimeout function

setTimeout(console.log("setTimeoutTest - Start"), 1000);

console.log("setTImeoutTest - End")

/**

1초 후에 "setTImeoutTest - End" 이 뜰 것 같지만 그렇지 않다.

*/

// 모듈, module

var circle = require('./node.circle.js');

console.log( 'The area of a circle of radius 4 is ' + circle.area(4));

// 정규표현식, regular expression

// 시각화 해주는 사이트 : http://regexper.com/

// 정규표현식 실습 : http://www.regexr.com/

var pattern = /a/

// var pattern = new RegExp('a');

console.log(pattern.exec('abcdef')); // ["a"]

console.log(pattern.exec('bcdefg')); // null

console.log(pattern.test('abcdef')); // true

console.log(pattern.test('bcdefg')); // false

console.log('abcdef'.match(pattern)); // ["a"]

console.log('bcdefg'.match(pattern)); // null

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

var xi = /a/;

console.log("Abcde".match(xi)); // null

var oi = /a/i;

console.log("Abcde".match(oi)); // ["A"];

var xg = /a/;

console.log("abcdea".match(xg));

var og = /a/g;

console.log("abcdea".match(og));

var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

console.log(result);

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});

console.log(result);

// 함수, function, 유효 범위

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

    var name = 'coding everybody';

}

console.log(name);

var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    console.log(i);

}

a();

// function, value, 값으로서의 함수, 콜백, callback

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

console.log(cal(increase, 1));

console.log(cal(decrease, 1));

function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

console.log(cal('plus')(2,1));

console.log(cal('minus')(2,1));

var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

console.log(input);

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

console.log(numbers.sort(function (a, b){

    return b-a;

})); // array, [20,10,9,8,7,6,5,4,3,2,1]

// 클로저, closure

function outter(){

    var title = 'coding everybody';

    return function(){

        console.log(title);

    }

}

inner = outter();

inner();

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

console.log(ghost.get_title());     // Ghost in the shell

console.log(matrix.get_title());    // Matrix

ghost.set_title('공각기동대');

console.log(ghost.get_title());     // 공각기동대

console.log(matrix.get_title());    // Matrix

var movies = {

    'title' : null,

    'get_title' : function (){

        return this.title;

    },

    'set_title' : function(title){

        this.title = title;

    }

}

m1 = movies;

m1.set_title("m1")

console.log(m1.get_title())

console.log(movies.get_title())

var arr = []

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

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    console.log(arr[index]());

}

// arguments, 아규먼트

function sum(){

    var _sum = 0;

    for(var i = 0; i < arguments.length; i++){

        // console.log(i+' : '+arguments[i]);

        _sum += arguments[i];

    }

    return _sum;

}

console.log('result : ' + sum(1,2,3,4));

// 매개변수

function zero(){

    console.log(

        'zero.length', zero.length,

        'arguments', arguments.length

    );

}

function one(arg1){

    console.log(

        'one.length', one.length,

        'arguments', arguments.length

    );

}

function two(arg1, arg2){

    console.log(

        'two.length', two.length,

        'arguments', arguments.length

    );

    return arg1 + arg2

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2');  // one.length 1 arguments 2

two('val1');  // two.length 2 arguments 1

// 함수의 호출, call function

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum2(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

console.log(sum2.apply(o1)) // 6

console.log(sum2.apply(o2)) // 185

o1.sum2 = sum2;

console.log(o1.sum2()); // sum 중간에 객체의 타입을 검사하는 과정이 필요

// 변수, variable

var aaa = 2; //숫자

var bbb = "2"; //문자

var bbb = '2'; //얘도 문자

var ccc = true; //얘는 불린

var ddd = [1, 2, 3, 4]; //얘는 배열

var eee = { p1 : 2, p2 : '2' }; //얘는 객체

var fff = null; //null

var ggg = undefined; //undefined

var hhh = function(){ console.log('ㅋㅋㅋ'); } //얘는 함수!!

hhh()

// 수학, 정수, math

console.log(

    Math.pow(3,2),       // 9,   3의 2승

    Math.round(10.6),    // 11,  10.6을 반올림

    Math.ceil(10.2),     // 11,  10.2를 올림

    Math.floor(10.6),    // 10,  10.6을 내림

    Math.sqrt(9),        // 3,   3의 제곱근

    Math.random()       // 0부터 1.0 사이의 랜덤한 숫자

);

// 속성, type, typedef

console.log(

    typeof 1,

    typeof "1"

);

// 문자열, string

console.log(

    'kanziw\'s javascript\n',

    "javascript\nworld\n",

    "have a " + "nice day\n",

    'hihello'.length

);

// 비교, equal

console.log(

    1 == 1,             // true

    1 == "1",           // true

    1 === "1",          // false

    null == undefined,  // true

    null === undefined, // false

    true == 1,          // true

    true === 1,         // false

    true == '1',        // true

    true === '1',       // false

    0 === -0,           // true

    NaN === NaN        // false

);

// if, while, for

var a;

if(!'' && !undefined && !a && !null && !NaN){

    console.log('조건문의 경우가 모두 false임');

}

var i = 0;

var sum = 0;

while(i < 10){

    sum += ++i;

}

console.log(sum);

sum = 0;

for(i = 1; i <= 10; i++){

    if(i == 2) continue;

    sum += i;

    if(i == 5) break;

}

console.log(sum);

// function numbering(){

var numbering = function (){

    i = 0;

    while(i < 10){

        console.log(i);

        i += 1;

    }

}

numbering();

// list, 배열

var li = ['a', 'c', 'z'];

li.push('d');

li.concat('e', 'f');

li.unshift('-a');

console.log(li);

li.splice(2, 1, 'B');   // 2번째부터 1개를 삭제 후 'B'를 삽입

console.log(li);

console.log(

    li.shift(),

    li.pop(),

    li.sort()

);

console.log(li.reverse());

// 객체, object

var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

// var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}

for(key in grades) {

    console.log("key : "+key+" | value : "+grades[key]);

}

grades = {

    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

    'show' : function(){

        for(var name in this.list){

            console.log(name+':'+this.list[name]);

        }

    }

};

grades.show();