자바스크립트의 몇가지 좋은 습관

@참조 : https://www.devbridge.com/articles/javascript-best-practices/

해당글은 의역 되었고, 오역이 있을 수 있습니다.

다음은 깨끗한 JavaScript 코드 작성을 위한 권장 사항 및 일반적인 지침이 담긴 글이다.

이러한 권고 사항은 앞으로 더 정교한 개발 도구 라던지, 새로운 언어 기능 으로 인해, 변경 될 수 있지만, 결코 변하지 않는 것들이 있다.

그것은 당신이 이해하기 쉬운 코드를 작성 해야 한다는 것이다.

다음은 Start 예제로 좋은글 이다.
- http://javascript.crockford.com/code.html

전역 변수 사용의 최소화

코드에 네임 스페이스를 사용하여 모듈로 구성 하고 코드 충돌을 피하라.
소개되는 글로벌 변수의 최적 개수는 0 이며, 불가피 하게 옵션이 되어야 한다면 1 에 고정 하라.
아래 코드는 익명 함수 내에서 코드를 캡슐화 하고 함수를 즉시 실행 하는 방법 이다.

(function(){
    // Do stuff here
}());

익명 함수를 작성하고, 바로 실행 하는 코드를 괄호로 랩핑 해서 전역변수를 최소화 하자.
이 코드는 즉각적 호출이 발생 한다.

Scope 마다 단일한 "var" 선언 사용

var는 여러 선언을 허용 하기 때문에 많이 사용할 이유가 없다.
모든 스코프 변수는 뭐가 됬든 무조건 상단 으로 이동 한다. (이를 호이스팅이라고 함).
중복된 이름이 중첩 되거나, 다른 논리적 실수가 있을 경우 발생할 수 있는 오류 동작을 줄일 수 있다.

(function(){

    var firstName = 'John',
        lastName = 'Doe',
        fullName = firstName + ' ' + lastName;

    // The rest of the function body

}());

JSLint 를 당신의 친구처럼 생각 하라.

이 게시물 에서 자바스크립트의 좋은 습관에 대해서, 반복해서 나열 할 수 있지만, JSLint를 사용하면 알아서 당신에게 얘기해 줄 것이다.

경고! JSLint는 당신의 감정을 상하게 할 것이다.

www.jslint.com 은 엉성한 코드 작성 이후에 벌어지는 많은 수정 들이 벌어지기 이전에, 경고 함으로써, 개발자 에게 도움을 준다.

당신이 자주 jslint 를 사용하면 적절한 코딩 스타일과 규율에 익숙한 개발을 하게 될 것이고, 그것은 우리 모두가 만드는 사소한 실수를 발견하는데 도움을 주는 좋은 친구가 될 것이다.

각 소스 파일의 맨 위에 있는 JSLint 설정을 사용 하면, 일일히 JSLint 할 때마다 옵션을 지정할 필요가 없다.

/*jslint browser: true, sloppy: false, eqeq: false, vars: false, maxerr: 50,
 indent: 4 */

페이지 하단의 위에 옵션중 변경할 것은 변경 하고, 소스 코드를 복사하여 다른 페이지 에도 붙이자. 오류 수를 줄이기 위해 불량 코드 (예 : == 및! = 허용)를 활성화 하지 말고, 소스 에서 불량 코드를 업데이트 하여 제거 하자.

아래의 코드는 모든 전역 변수 선언에 대해 알려 주는 부분이다.

/*global jQuery, otherGlobalVariable */

Use Strict 를 사용하자

ECMAScript5 를 사용하기 전에는 var 로 선언 되지 않은 변수는 전역 변수에 할당 되었다.

(function(){
    name = 'John';
}());

하지만 use strict를 사용하면 에러가 발생한다.

(function(){
    'use strict';
    name = 'John';
}());

실수로 전역 변수를 사용 하지 않도록 하고, 오류를 일찍 찾아내는 데 도움이 되기 때문에, 사용하기를 권장 한다.

모듈 패턴

응용 프로그램에 대한 단일 네임 스페이스 지정 :

var App = (function () {
    'use strict';

    var settings;

    return {

        init: function(initialSettings){
            settings = initialSettings;
        },

        getVersion: function (){
            return settings.version;
        }

    };
}());

코드를 모듈로 정리 하고, 모듈에 모듈을 첨부해서, 응용 프로그램을 강화 하자.

// Search module:
(function (app) {

    var module = {};

    module.find = function (query) {
        // Perform search
    };

    module.verifyQuery = function (query) {
        // Ver
    };

    // More module methods go here

    app.search = module;

}(App));

어떤것을 비공개로 유지할 필요가 있거나, 선호하는 경우, 모듈 내부에 공개와 비공개를 선택하는 모듈 패턴을 사용하자.

// Search module:
(function (app) {

    // Private methods:

    function find(query) {
        // Perform search
    }

    function verifyQuery(query) {
        // Verify query
    }

    // Public methods:

    app.search = {
        find: find,
        verifyQuery: verifyQuery
    };

}(App));

모든 것을 수행 하는 함수를 작성 하지 말자. 모든 것을 catch 하여 스마트 하게 처리하는 함수 보다는, 특정 작업을 수행하는 작은 기능의 함수를 여러개 작성 하는 편이 확장성에 좋고, 유지보수에 이롭고, 성능 면에서도 우월할 확률이 높다.

개발자를 위한 개발 코드를 작성하자

• 당신만을 위한 코드를 작성 하지 말고, 다른 개발자가 이 코드를 사용 할 것이라고 가정하라.
  간결함 보다 선명도를 선호 하라.

즉, 함수 및 변수 이름 지정이 짧지 않고 의미가 있어야 한다.
JavaScript Compressor (Closure Compiler, YUI Compressor)는 긴 이름을 축소해 주기 때문에, 변수나 함수명이 길다고 해서 부담을 가지지 않아도 되고, 이 규칙은 많은 다른 언어 에도 적용 된다.
다른 언어 에서도 잘 작동하는 Rule 을 적용하면, JavaScript 에서도 잘 작동한다.

• 가능한 한 많이 기록하라.

최소한 콘솔을 볼 때 콘솔에 로그가 표시 될 수 있도록 하라.
이것은 시스템이 복잡하면 할수록, 어떤 일이 벌어지고 있는지 더 잘 이해할 수 있도록 도와준다. 나중에 이러한 주석 들은 코드를 유지 관리하는 다른 개발자 에게 유용 하다.
필요한 스크립트 줄을 찾으려고 할 때 또는 어떤 코드가 실행 되고 있는지 알기 위해 콘솔을 사용하면 시간을 크게 절약 할 수 있다.

콘솔이 없으면 코드가 손상 될 수 있다.
오류가 발생하지 않도록 콘솔이 없는 경우 Fake 콘솔 객체 및 메소드로 대체 하자.

var console = window.console || {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

위 코드는 실제 사용될 코드 에서는 필요 하지 않다.
이 코드가 빌드 프로세스에 내장 될 수 있기 때문에, 압축 및 완성된 제품 으로 배포 하기 전에 로깅 코드는 제거 되야 한다
정규식 으로 콘솔에 대한 모든 문자를 색출할 수 있다.

^\s*console\.(log|warn|error|info)\(.+\);\s*$

Visual Event 는 DOM 요소에 첨부된 이벤트에 대한 디버깅 정보를 제공 하는 bookmarklet 같은 건데, 이벤트를 호출 하는 시점의 코드를 찾으려고 할 때 시간을 크게 절약 할 수 있다.
(크롬 확장프로그램)

개발 코드는 개발자용 이며 생산 코드는 기계용 이다. 그러므로 생산을 위한 코드를 최소화 하고 최적화 해라. 이후 빌드 프로세스를 사용하여 코드 파일을 최소화, 최적화 및 결합 하는 방식으로 하라.

어떻게 작동 하는지, 어떻게 보여지지 않는지

JavaScript를 사용하여 스타일 정보를 추가 하지 말고 CSS 클래스를 조작 하여 스타일 정보를 추가 하자.

일관된 구조에 의존하면 안된다. 즉 동일한 응용 프로그램 에서 다른 개발자가 사용할 수 있도록 하기 위해서, UI 제한을 최대한 적게 두어야 한다.
DOM 트리를 탐색 할 때 DOM 요소가 당신이 생각 하는 페이지의 유일한 ID 같은 것으로 구성하면 안된다. 요소의 css 클래스를 사용 할 수 있도록 하고, 기능에 영향을 주지 않고 UI를 유지하고 변경할 수 있는 유연성을 제공 하도록 하자.

풍부한 옵션

여기에는 Labels, CSS 클래스, CSS 네임 스페이스, ID 등이 포함 된다. 객체를 옵션으로 설정할 수 있도록 프로그래밍 하는 것은 유지 관리 작업을 간편하게 수행 할 수 있도록 도와준다.
또한 맞춤 설정을 통해서 많은 기회를 제공해 줄 수 있게 된다.

최적화

• 코드를 최적화 하자.

작성된 기능을 변경하기 위해서, 가장 단순한 솔루션을 찾기가 매우 어렵기 때문에, 코드를 수정 하면 제거 되거나 영향 받을 수 있는 대상을 찾을 수 있도록, 아주 단순하고 간결하게 작성하는 습관을 들여야만 한다.

• 순회문을 통해서 DOM 요소를 만들 수 있지만 DOM 요소를 DOM 에 직접 삽입하면 안된다

DOM 변경 사항을 최소화 하자. 제작된 제품은 디버깅이 매우 어렵 기 때문에, JavaScript 에서 HTML 생성을 최소화 해야 한다.
미리 작성된 템플릿을 사용하고 유지 관리가 쉬운 장소에 따로 템플릿을 보관하고, 꺼내 쓰는 방식으로 해야 한다. (예를 들어 Mustach 같은 라이브러리를 사용하는 것도 방법이다.)

• 해킹을 피하고 문제를 분석하고 신뢰할 수있는 솔루션을 찾아 보자.
• 사용자 데이터를 신뢰하지 말고, 최대한 예외처리 하자.
• 중요하거나 중요한 데이터를 보호하기 위해 JavaScript를 사용하지 말아야 한다. 쉽게 사용할 수 있다는 것은 쉽게 깨지기도 쉽다는 의미 이다.