스타일가이드 복습하기 01 (Types, References, Objects)

자바스크립트 코드는 C/C++ 언어와 다른 코드 스타일을 가졌다.

읽기 좋은 문서, 가독성 있는 문서를 만드는 것이 최우선이므로 아래와 같은 스타일가이드도 존재한다.

잘 정리되어 있어서 노트에 쓰면서 하나하나 확인해보고 있는데,

타이핑하며 복습하기 위해 포스팅 하고자 한다.

자세한 내용은 모두 아래의 출처에 있다.

 

출처 : 에어비엔비 스타일가이드 https://github.com/tipjs/javascript-style-guide

GitHub - tipjs/javascript-style-guide: Airbnb JavaScript 스타일 가이드 한국어

---

01. Types 형

- Primitives (원시형, 값 직접 조작)

string, number, boolean, null, undefined

- Complex (참조형, 참조로 값 조작)

object, function, array

 

02. References 참조

참조값의 경우, const 를 최우선 사용한다.

why? 변수에 값 재할당을 방지하여 오류를 사전에 차단하기 위함이다.

let 은 재할당이 필요할 때 사용한다.

✎ const, let (block scope) ↔ var (function scope) : var 사용 지양할 것

 

03. Objects 오브젝트(객체)

1. object 만들때는 리터럴 구문을 사용할 것

const obj = {};

2. 예약어를 키(key)로 사용하지 말고 알기 쉬운 동의어로 변경하여 사용할 것 

 

예시) 예약어 → 변경(동의어)
default → defaults , private → hidden, class → type

 

3. 계산된 프로퍼티명 computed property names (ES6)

계산된 프로퍼티명이란, 객체의 key값에 변수를 넣을 수 있는 문법이다.

기존 템플릿 리터럴인 백틱(`(backtick))을 이용하면 변수의 값을 쉽게 string으로 나타낼 수 있었다.

대다수의 오브젝트의 값(value)에 이 백틱을 사용하여 값을 할당하기도 한다.

따라서 오브젝트의 키(key)에도 유사한 방식을 적용할 수 있으리라 생각해 볼 수 있다.

하지만, 이는 에러를 발생시킨다.

const keyName = 'name';
const obj = {
  `${keyName}` : 'zin'
};//SyntaxError: Unexpected template string

따라서 아래와 같은 방식을 취하는데 이는 비추천하는 방법이다. 
오브젝트를 정의할 때 한번에 정의하지 않으므로, 여러줄의 코드를 취합하여 오브젝트를 정의해야 되기 때문이다. 가독성이 떨어진다.

const keyName = 'name';
const obj = {};
obj[keyName] = 'zin';

따라서 ES6 에 등장한 최신 문법 중에 하나가 바로 계산된 프로퍼티명(computed property names)이다.

동적 프로퍼티 명을 갖는 오브젝트 작성 시 반드시 계산된 프로퍼티명을 사용하자.

이는 오브젝트 프로퍼티를 정의할 때, 변수명을 [] 안에 넣어 프로퍼티로 사용하는 방법이다.

const keyName = 'name';
const obj = {
  [keyName] : 'zin'
};

또 계산된 프로퍼티 명(computed propery names)을 이용하면 함수를 key로 사용하는 것도 가능하다.

function getKey(k){
  return `key named ${k}`;
}

const obj = {
  [getKey('enabled')]: true
};

//해당 프로퍼티에 접근하는 방법은 아래와 같다.
//obj[getKey('enabled')] 로 접근
//return true 

//만약 getKey('enabled')의 return값으로 직접 프로퍼티로 접근하려고 하면..
//getKey('enabled') return 'key named enabled' 이므로 공백과 함께 구성된 문자열
//obj['key named enabled'] 
//return true

함수 반환값을 알고 string으로 접근하는 것도 가능

ex) obj[ 'property string(returned value)' ]

 

4. 오브젝트에 동작(함수)을 정의할 때 메서드 단축구문을 사용할 것!

//bad
const badperson = {
	name: 'zin',
	introduceMe: function(age){
    	return `Hi~ My name is ${this.name} and ${age} years old`;
    }
};   

//Good
const goodperson = {
	name: 'zin',
	introduceMe(age){
    	return `Hi~ My name is ${this.name} and ${age} years old`;
    }
}

5. 프로퍼티값 단축구문 shorthand value properties 

✎ 프로퍼티값 단축구문이란? 

프로퍼티명과 값이 변수의 이름과 동일한 경우

프로퍼티명이 곧 값을 가리키도록 하여 구문을 줄이는 편리한 구문을 가리킴.

const name = 'zin';
const age = 30; 

const person = {
    name,
    age, 
    //프로퍼티단축구문은 그룹화하여 앞쪽에 표기
    
    getName(){ return this.name; },
    getAge(){ return this.age; },
};

아래의 예시에서 프로퍼티 명과 변수의 값이 동일하므로 이는 프로퍼티단축구문을 사용할 수 있다 (shorthand properties).

//적용 전
const person = {
	name: 'name',
	age : 'age',
};

//적용 후
const person = {
	name,
	age,
};