var name = '';
function sayName() {
    alert(name);
}

// 전역변수 global 하나만 추가
var global = {
    // 전역 변수 하위에 객체와 함수가 존재
    name: '',
    sayName: function() {
        alert(this.name);
    }
};

// NHN Ent.의 네임스페이스로 ne를 사용
var ne = window.ne || {};

// 그 하위에 서비스명을 2차 네임스페이스로 사용
ne.serviceName = ne.serviceName || {};

// 페이지별 또는 기능별 모듈명을 3차 네임스페이스로 사용
ne.serviceName.util = {...};
ne.serviceName.component = {...};
ne.serviceName.model = {...};

// 필요에 따라 4차, 5차 네임스페이스로 확장하여 사용
ne.serviceName.view.layer = {...};
ne.serviceName.view.painter = {...};

foo = value;

var foo = value;

var emptyArr = new Array();
var emptyObj = new Object();

var arr = new Array(1, 2, 3, 4, 5);
var obj = new Object();

var emptyArr = [];
var emptyObj = {};

var arr = [1, 2, 3, 4, 5];
var obj = {
    pro1: 'val1',
    pro2: 'val2'
};

doSomething();

function doSomething() {
    foo1 = foo2;
    ...
    var foo1 = 'value1';
    foo3 = foo4;
    ...
    var foo4 = 'value4';
    var foo2;
}

// 함수를 사용하기 전에 선언
function avoidHoisting() {
    // 함수내에서 사용하는 모든 변수를 함수 상단에서 한번에 선언
    var foo1 = 'value1';
    var foo4 = 'value4';
    var foo3 = foo4;
    var foo2;
    ...
}

avoidHoisting();

function parserTest(options) {
    console.log('test start!!!')
    (options || []).forEach(function(i) {
    ...
    })
}

/**
 * parser는 아래와 같이 해석하고, 세미콜론을 삽입
 * function parserTest(options) {
 *     console.log('test start!!!')(options || []).forEach(function(i) {...});
 * }
 */

function parserTest(options) {
    console.log('test start!!!');
    (options || []).forEach(function(i) {
    ...
    });
}

var today = new Date();
if (form.month.value == (today.getMonth() + 1) && form.day.value == today.getDate()) {
    // 생일인 경우
    ...
} else {
    // 생일이 아닌 경우
    ...
}

var month = parseInt(form.month.value, 10);
var date = parseInt(form.month.value, 10);

if (month === (today.getMonth() + 1) && date === today.getDate()) {
    // 생일인 경우
    ...
} else {
    // 생일이 아닌 경우
    ...
}

// 스트링으로 변환하기
String(10) === '10';         // true
10 + '' === '10';            // true

// 숫자로 변환하기
parseInt('10', 10) === 10;   // true
Number('10') === 10;         // true
+'10' === 10;                // true

// 불린으로 변환하기
!!'foo';                     // true
!!'';                        // false
!!'0';                       // true
!!'1';                       // true
!!'-1'                       // true
!!{};                        // true
!!true;                      // true

if (true)
    doSomething();
else
    doNotAnything();

if (true) {
    doSomething();
} else {
    doNotAnything();
}

var month = parseInt('08');          // 8
var day = parseInt('09');            // 9

var month = parseInt('08', 10);      // 8
var day = parseInt('09', 10);        // 9

// 10진수 변환하는 경우라면 Number()를 사용하거나 +연산자를 붙이는 것이 더 빠르다.
var month = Number('08');           // 8
var day = +'09';                    // 9

function getGroup(part) {
    var group;
    switch (part) {
        case 'A':
        case 'B':
        case 'C':
            group = 'RED';
            break;
        case 'D':
        case 'E' :
            group = 'BLUE';
            break;
        case 'F':
            group = 'GREEN';
            break;
    }
    return group;
}

function getGroup(part) {
    var group;
    switch (part) {
        case 'A':
            group = 'RED';
            break;
        case 'B':
            group = 'RED';
            break;
        case 'C':
            group = 'RED';
            break;
        case 'D':
            group = 'BLUE';
            break;
        case 'E' :
            group = 'BLUE';
            break;
        case 'F':
            group = 'GREEN';
            break;
        // no default
    }
    return group;
}

function getGroup(part) {
    var group;
    switch (part) {
        case 'A':
            // A, B, C는 같은 그룹으로 처리하기 위해 break 생략
        case 'B':
            // A, B, C는 같은 그룹으로 처리하기 위해 break 생략
        case 'C':
            group = 'RED';
            break;
        case 'D':
            // D, E는 같은 그룹으로 처리하기 위해 break 생략
        case 'E' :
            group = 'BLUE';
            break;
        case 'F':
            group = 'GREEN';
            break;
        // no default
    }
    return group;
}

switch(foo) {
    case 'alpha':
        alpha();
        break;
    case 'beta':
        beta();
        break;
    default:
        ...
        break;
}

// 객체 리터럴 방식
var switchObj = {
    alpha: function() {
        ...
    },
    beta: function() {
        ...
    },
    _default: function() {
        ...
    }
};
switchObj[foo](args);

// 모듈 방식
var switchModule = (function() {
    return {
        alpha: function() {
            ...
        },
        beta: function() {
            ...
        },
        _default: function() {
            ...
        }
    };
})();
switchModule[foo](args);

var scores = [70, 75, 80, 61, 89, 56, 77, 83, 90, 93, 66];
var total = 0;
var score;

for (score in scores) {
    total += scores[score];
}

var scores = [70, 75, 80, 61, 89, 56, 77, 83, 90, 93, 66];
var total = 0;
var i = 0;
var len = scores.length;

for (; i < len; i += 1) {
    total += scores[i];
}

var scores = [70, 75, 80, 61, 89, 56, 77, 83, 90, 93, 66];
var total = 0;
var i = 0;

for (; i < scores.length; i += 1) {
    total += scores[i];
}

var scores = [70, 75, 80, 61, 89, 56, 77, 83, 90, 93, 66];
var total = 0;
var i = 0;
var len = scores.length;
for (; i < len; i += 1) {
    total += scores[i];
}

for (var i = 0; i < days.length; i += 1) {
    var today = new Date().getDate();
    var element = getElement(i);
    if (today === days[i]) {
        element.className = 'today';
    }
}

var today = new Date().getDate();
var i = 0;
var len = days.length;
var element;

for (; i < len; i += 1) {
    if (today === days[i]) {
        element = getElement(i);
        element.className = 'today';
        break;
    }
}

var loopCount = 0;
var i = 1;
for (; i < 10; i += 1) {
    if (i >= 5) {
        continue;
    }
    loopCount += 1;
}

var loopCount = 0;
var i = 1;
for (; i < 10; i += 1) {
    if (i < 5) {
        loopCount += 1;
    }
}

var i = 0;
var len = array.length;

for (; i < len; i += 1) {
    try {
        // ...
    } catch (error) {
        // ...
    }
}

var i = 0;
var len = array.length;

function doSomething() {
    try {
        ...
    } catch (error) {
        ...
    }
}

for (; i < len; i += 1) {
    doSomething();
}

var numbers = ['zero', 'one', 'two', 'three', 'four', 'five'];
delete numbers[2];                   // ['zero', 'one', undefined, 'three', 'four', 'five'];

var numbers = ['zero', 'one', 'two', 'three', 'four', 'five'];
numbers.splice(2, 1);                // ['zero', 'one', 'three', 'four', 'five'];

// 배열의 사이즈를 줄이고 싶다면 length를 사용
var numbers = ['zero', 'one', 'two', 'three', 'four', 'five'];
numbers.length = 4;                 // ['zero', 'one', 'two', 'three'];

var padding = document.getElementById('result').style.padding;
var margin = document.getElementById('result').style.margin;
var position = document.getElementById('result').style.position;

var style = document.getElementById('result').style;
var padding = style.padding;
var margin = style.margin;
var position = style.position;

function changeDivStyle() {
    var sampleEl = document.getElementById('sample');
    sampleEl.style.left = '200px';               // reflow 1회, repaint 1회 발생
    sampleEl.style.width = '200px';              // reflow 1회, repaint 1회 발생
    sampleEl.style.backgroundColor = 'blue';     // repaint 1회 발생
    }

// 총 reflow 2회, repaint 3회 발생
changeDivStyle();

// cloneNode를 사용하는 방법
function changeDivStyle() {
    var sampleEl = document.getElementById('sample');
    var clone = sampleEl.cloneNode(true);
    clone.style.left = '200px';
    clone.style.width = '200px';
    clone.style.backgroundColor = 'blue';
    document.getElementById('container').replaceChild(clone, sampleEl);    // reflow 1회, repaint 1회 발생
}
changeDivStyle();

// cssText를 사용하는 방법
function changeDivStyle() {
    var sampleEl = document.getElementById('sample');
    sampleEl.style.cssText = 'position:absolute;background:blue; width:200px;height:50p;left:200px;';    // reflow 1회, repaint 1회 발생
}
changeDivStyle();

// cloneNode를 사용하는 방법
function changeDivStyle() {
    var sampleEl = document.getElementById('sample');
    var clone = sampleEl.cloneNode(true);
    var style = clone.style;
    style.left = '200px';
    style.width = '200px';
    style.backgroundColor = 'blue';
    document.getElementById('container').replaceChild(clone, sampleEl);    // reflow 1회, repaint 1회 발생
}
changeDivStyle();

// jQuery를 사용하는 경우
var btn;
function doSomething() {
    ...
}

btn = $('#action-btn').on('click', $.proxy(doSomething, this));

// jQuery를 사용하지 않는 경우
var btn;

function doSomething() {
    ...
}

function attachEvent(target, event, handler) {
    if (target.addEventListener) {
        target.addEventlistener(event, handler, false);
    } else if (target.attachEvent) {
        target.attachEvent('on' + event, handler);
    } else {
        target['on' + event] = handler;
    }
}

btn = document.getElementById('action-btn');
attachEvent(btn, 'click', doSomething);

function callback() {
    ...
}
setTimeout('callback()', 1000);

function callback() {
    ...
}
setTimeout(callback, 1000);

setTimeout(function() {
    ...
}, 1000);

var doSomething = new Function('param1', 'param2', 'return param1 + param2;');

// 함수 선언식
function doSomething(param1, param2) {
    return param1 + param2;
}

// 함수 표현식
var doSomething = function(param1, param2) {
    return param1 + param2;
};

function doSomething(value, obj) {
    ...
    with(obj) {
        value = "which scope is this?";
    }
}

value = "which scope is this?";
obj.value = "which scope is this?";

with(document.getElementById('myDiv').style) {
    background = "yellow";
    color = "red";
    border = "1px solid black";
}

var style = document.getElementById('myDiv').style;
style.background = 'yellow';
style.color = 'red';
style.border = '1px solid black';

Object.prototype.getKeys = function() {
    var keys = [];
    var key;
    for (key in this) {
        keys.push(key);
    }
    return keys;
};

function getKeys(obj) {
    var keys = [];
    var key;
    for (key in obj) {
        keys.push(key);
    }
    return keys;
}

if (typeof Array.prototype.map !== 'function') {
    Array.prototype.map = function(f, thisArg) {
        var result = [];
        var i = 0;
        var n = this.length;
        for (; i < n; i += 1) {
            result[i] = f.call(thisArg, this[i], i);
        }
        return result;
    };
}

var i = 0;
var num;

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

}

num = ( ++i ) * 10;

var i = 0;
var num;

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

i += 1;
num = i * 10;

function() {
    var self = this;
    return function () {
        console.log(self);
    };
}

function() {
    var that = this;
    return function () {
        console.log(that);
    };
}

function () {
    var _this = this;
    return function () {
        console.log(_this);
    };
}

function printContext() {
    return function() {
        console.log(this);
    }.bind(this);
}

function printContext() {
    return () => console.log(this);
}

var foo = 'foo';
var bar = 'bar';
...
bar = 'var';

const foo = 'foo';
let bar = 'bar';
...
bar = 'var';

/* Top of file */
const StyleGuide = require('./StyleGuide');
module.exports = StyleGuide.es6;

/* Top of file */
import StyleGuide from './StyleGuide';
export default StyleGuide.es6;

/* Top of file */
import { es6 } from './StyleGuide';
export default es6;

import foo from 'foo';
foo.init();

import bar from 'bar';

/* Top of file */
import foo from 'foo';
import bar from 'bar';

foo.init();

function * foo() {
    ...
}

const bar = function * () {
    ...
};

const baz = function *() {
    ...
};

const quux = function*() {
    ...
};

function*foo() {
    ...
}

function *foo() {
    ...
}

// very bad
function
*
foo() {
    ...
}

// very bad
const wat = function
*
() {
    ...
};

function* foo() {
    ...
}

const foo = function* () {
    ...
};