내가 좋아하는 자바스크립트 코드 스타일

홑따옴표를 쓰자

문자열 표기시 쌍따옴표 말고 홑따옴표를 쓰자.
칠때 양손으로 쳐야하는 불편함을 굳이 감수하며 쌍따옴표를 써야할 이유가 없다.

pretier 에서 쌍따옴표를 쓰기때문에 쌍따옴표를 쓰는 사람들이 많지만, 구글 이나 에어비앤비 등 자바스크립트 생태계에서 기여도가 큰 기업들은 홑따옴표를 표준 스타일로 쓰고있다.

왠만하면 const를 쓰자

왠만하면 const로 함수를 만들자

우선, 클래스에서 메서드선언하기 같은 필수적인 상황이 아니라면 함수 선언식을 쓰지 말자.
let으로는 더더욱 만들지 말자
네임스페이스 재할당이나 호이스팅의 여지가 있기 때문이다.

아래와 같은 코드가 변수명 재할당이다.

// 개발자 1이 함수를 만든다.
function someAction() {
  return 'foo'
}

// 개발자 2가 같은 이름으로 일반 값을 할당한다.
someAction = 0
// 변수명 foo가 덮어써진다.
// 애초에 개발자 1이 const로 함수를 선언했다면 개발과정에서 에러가 나서 수정되었을 것이다.

// 첫줄을 본 개발자3은, foo가 당연히 함수겠거니 하고, 배포 이후에 실행될 함수에서 호출한다.
// 그리고 서비스 배포 이후에 에러를 낸다.
const runAfterStart = () => {
  someAction() // Error: foo is not a function
}

다음과 같은 코드가 함수 호이스팅이다. 코드적으로 일종의 순환의존을 만드는것처럼 보이게 한다.
쉽게말해서, 헷갈리게 만든다.

var value = getValue() + 1

function getValue() {
  return value + 2
}

함수로 쓰던 변수명을 재할당하거나 호이스팅 하는것은 언어적으로 금지된 방법은 아니긴 하다.
하지만 평생 혼자서 1000줄 이하의 코딩만 할게 아니라면 하지 말아야 할 사항이다.

const 문은 재할당과 호이스팅 호출이 근본적으로 막혀있다.
그렇기에, const문에 함수 표현식으로 함수 작성시 함수의 변수명 재할당과 함수 호이스팅을 원천적으로 차단한다.

왠만하면 그냥 값도 const로 선언하자

함수 파라미터는 3개 이하만 쓰자

먼저, 내가 함수를 만들었는데 파라미터가 4개 이상이라면 애초에 함수 디자인을 잘못했을 가능성이 크다.
이게 왜 문제인지 상황으로 설명해보겠다.

가령, 회원을 생성하는 함수를 만들고, 각각의 인자로 필요한 값을 받게 된다면

const createUser = (name, id, password, phone, email, address, age) => {
  /* ... */
}

이렇게 된다.

그런데 어떤 상황에서 아이디와 패스워드, 이메일, 나이만 넣고 회원가입을 하게 된다면

createUser(null, 'testID', 'pw1234', null, 'test@test.com', null, 5)

이렇게 호출해야 한다.
즉, 필요없는 값은 null을 넣어줘야한다.
게다가 그러기 위해선 각 순서별로 어떤 의미의 인자가 들어가는지 일일이 순서를 세면서 함수를 사용해야 한다.

문제는 여기서 멈추지 않는다.

기능을 다 만들고 보니 기획자가 인스타그램 아이디도 회원정보로 받자고 한다.
이메일 주소 그 다음 인자로 인스타 아이디를 받도록 수정한다.

const createUser = (name, id, password, phone, email, instagram, address, age) => {
  /* ... */
}

하지만 여기서 수정이 끝나면 문제가 생긴다.
어떤 파라미터를 추가하거나 빼면, 그 뒷쪽 파라미터들의 순서가 변한다.
앞서 썼던 함수 사용처에서 나이로 넣었던 값이 주소 파라미터로 들어가게 되기때문에 같이 수정해줘야 한다.
이런 식으로 이 함수를 사용하는 모든 코드들을 다 수정해줘야 한다.

createUser(null, 'testID', 'pw1234', null, 'test@test.com', null, null, 5)

그러면 내가 받아야 하는 정보가 여러가지일땐 어떻게 해야할까?

객체로 받으면 된다.

이렇게 실행시 쓰지 않는 파라미터를 피해 null을 넣을 필요도 없어지며

const createUser = (data = {}) => {
  const {name, id, password, phone, email, address, age} = data
  /* ... */
}

createUser({
  id: 'testID',
  password: 'pw1234',
  email: 'test@test.com',
  age: 5
})

도중에 받아야 하는 정보가 추가되거나 제거되어도 파라미터 객체의 속성이 달라질 뿐, 기존 함수 호출코드를 수정할 필요가 없다.

const createUser = (data = {}) => {
  const {name, id, password, phone, email, instagram, address, age} = data
  /* ... */
}

if 문 중첩 또는 if-else 쓰지 말자

이미 좋은 글이 있으므로 이걸 읽어도 좋다.

자바스크립트는 특히 early-return 식 조건문처리를 따르는게 좋다.
자바스크립트 비동기 로직에서 if문의 중첩도를 줄일수 있는 거의 유일한 방법이기 때문이다.