자바스크립트 컨벤션(javascripts convention)

js convention

자바스크립트 컨벤션, 한국어 번역 본을 참고했습니다.
idiomatic.js/translations/ko_KR at master · rwaldron/idiomatic.js · GitHub

누가 봐도, 쉽게 이해할 수 있는 코드를 작성하기 위하여 컨벤션을 참고하는 것과 무시하는 것은 특정 언어를 다루면 다룰 수록 더 큰 차이를 불러일으킨다.
특히나 협업시에는 이 컨벤션들은 기본적으로 지켜줘야 하는 매너라고 봐도 과연이 아니다.
그래서 깃에 작성된 자바스크립트 컨벤션을 참고하여, 정말 이것만은 포기할 수 없는 내용들을 정리해보았다.

1. 문자열 따옴표(‘’ or “”) 통일

2. 조건문 확인 코드

// 4.1.1
// 배열에 뭔가가 들어있는지 여부를 확인하려는 거라면,
// 다음과 같이 코드를 작성하는 대신에:
if ( array.length > 0 ) ...

// 다음과 같이 작성하세요:
if ( array.length ) ...

3. New 없이 생성자 호출

var ctor = function( foo ) {  
return new cCtor(foo);  
};

4. 이름 짓기

    // 6.A.3.1  
    // strings의 이름 짓기



`dog` 은 문자열입니다.

// 6.A.3.2  
// 배열의 이름 짓기

`dogs` 는 `dog` 문자열이 들어있는 배열입니다.

// 6.A.3.3  
// 함수나 오브젝트(object), 객체(instance) 등의 이름 짓기

camelCase; 함수와 변수를 선언할 때는 이렇게 이름지어 주세요.

// 6.A.3.4  
// 생성자, prototypes, 기타 등등의 이름 짓는 법

PascalCase; 생성자 함수의 이름은 이렇게 짓습니다.

// 6.A.3.5  
// 정규표현식의 이름 짓는 법

rDesc = //;

// 6.A.3.6  
// 구글 Closure 라이브러리 스타일 가이드에서 발췌한 것

functionNamesLikeThis; // 함수는 이렇게 이름을 지으시고
variableNamesLikeThis; // 변수는 이렇게 이름을 지으세요.  
ConstructorNamesLikeThis; // 생성자는 이렇게 이름을 지으시고
EnumNamesLikeThis; // Enum의 이름은 이렇게 지으세요.  
methodNamesLikeThis; // 메서드의 이름은 이렇게 지으시고,  
SYMBOLIC\_CONSTANTS\_LIKE\_THIS; // symbolic 상수의 이름은 이렇게 지어주세요.

5. thisArg 사용하기

: thisArg가능한한 사용하기
: Array.prototype.every ,Array.prototype.forEach, Array.prototype.some,Array.prototype.map, Array.prototype.filter 같은 것과 같이 쓸 수 있습니다.

// 6.C.1

var obj;

obj = { f: "foo", b: "bar", q: "qux" };

Object.keys( obj ).forEach(function( key ) {

// |this| 는 이제 `obj`에 대한 참조

console.log( this\[ key \] );

}, obj ); // <-- 이 최후의 인수가 `thisArg`

// Prints...

// "foo"  
// "bar"  
// "qux"

6. switch 문 피하기

: 객체리터럴(objet literal)이나 module을 사용하여 접근하기

// 7.A.1.1  
// switch 구문을 사용한 코드 작성 예

switch( foo ) {  
case "alpha":  
alpha();  
break;  
case "beta":  
beta();  
break;  
default:  
// 기본적으로 수행할 것  
break;  
}

// 7.A.1.2  
// 객체 리터럴(object lieteral)이나 모듈을 사용하여 접근하는 방식이 더 좋습니다:

var switchObj = {  
alpha: function() {  
// 구문들  
// 반환문  
},  
beta: function() {  
// 구문들  
// 반환문  
},  
\_default: function() {  
// 구문들  
// 반환문  
} };

var switchModule = (function () {  
return {  
alpha: function() {  
// 구문들  
// 반환문  
},  
beta: function() {  
// 구문들  
// 반환문  
},  
\_default: function() {  
// 구문들  
// 반환문  
} };  
})();

// 7.A.1.3  
// `foo`가 `switchObj` 또는 `switchModule`의 속성이라고 할 때, 아래 메서드처럼 실행합니다...

( Object.hasOwnProperty.call( switchObj, foo ) && switchObj\[ foo \] || switchObj.\_default )( args );

( Object.hasOwnProperty.call( switchObj, foo ) && switchModule\[ foo \] || switchModule.\_default )( args );

// `foo` 의 값을 알고 있고 확신한다면  
// 실행만 남겨 둔 채 OR 체크를 생략할 수도 있습니다:

switchObj [foo](args) ;

switchModule [foo](args) ;

// 이 패턴은 코드의 재사용성도 높여줘요.

7. 주석달기

• JSDoc 스타일이 좋다(closure compiler type hints++)
• 주제를 가진 코드 위에는 한 줄로 주석 달기
• 여러줄로 주석을 다는것이 좋음
• 코드의 맨 마지막줄에 주석다는것 금지!!

8. 네이티브&호스트 객체

: https://pongsoyun.tistory.com/94 참고

불러오는 중입니다...

 

 

 

 

---

 

 

 

팁

• 여백을 자동으로 제거해주는 pre-commit hook use

자료형 확인

• 배열:

  Array.isArray(arrayObject)

  (가능한 곳이면 어디든지)

• 미할당(undefined):

  전역변수들:

  typeof variable === “undefined”

  지역변수들:

  variable === undefined

• 프로퍼티:

  object.prop === undefined

  object.hasOwnProperty( prop )

  “prop” in object