JS를 작성할때 주의 할 점들 (블랙커피 스터디 피드백 내용 추가)

카멜케이스,파스칼케이스,스네이크케이스

1. 카멜케이스 : 첫번째 단어는 소문자 두번째단어부터는 대문자
   userList , onEventHandler
2. 파스칼케이스 : 단어마다 첫번째는 대문자로
   UserName , OverOut
3. 스네이크케이스 : 단어를 _로 나눔
   game_set

위의 내용 적용 ( 주로 쓰는 법)

1. 함수 => 카멜 케이스
2. 클래스 => 파스칼 케이스
3. 상수 => 스네이크 케이스
4. 변수 => $카멜 케이스

예약어들을 사용하지않는다.

let a;
let expo;

배열과 객체는 반드시 리터럴로 선언한다.

리터럴 표기법은 생성자 함수보다 짧고 명확하며 실수를 줄일 수 있다

// Bad
const emptyArr = new Array();
const arr = new Array(1, 2, 3, 4, 5);

// Bad - 객체 생성자 사용
const emptyObj = new Object();
const obj = new Object();

// Good
const emptyArr = [];
const arr = [1, 2, 3, 4, 5];

// Good
const emptyObj = {};
const obj = {
  pro1: 'val1', 
  pro2: 'val2'
};

모듈

항상 import와 export를 이용한다.
다른 모듈 로드 방법과 혼용하여 사용하면 코드의 일관성이 없어진다.

조건 확인하기

삼중 등호 연산자인 ===, !==만 사용한다.

1. 가능하면 const, 꼭 필요한 경우만 let

2. 재사용성을 위한 함수 분리

3. 빠른 실패

빠른 실패를 하게끔 코드를 구현하면 로직이 더욱 간결해집니다!

4. switch 대신 object literal

function translateStatus(status) {
  switch(status) {
    case 'all':
      console.log('모두')
      break
    case 'active':
      console.log('해야할 일')
      break
    case 'completed':
      console.log('완료한 일')
      break
  }
}

//아래와 같이 object로 관리하면, 수정 및 관리에 있어서 더욱 간편해집니다.

function translateStatus(status) {
  const statusList = {
    all: '모두',
    active: '해야할 일',
    completed: '완료한 일'
  };
  console.log(statusList[status])
}

5. 배열이나 객체는 forEach보다는 map을 이용해 불변 객체처럼 다루기

6. validator 분리

미션을 해결하면서 아래와 같은 코드를 많이 작성하신 경우가 많습니다.

if (e.key !== "Enter") {}
if (newTodoText.length === 0) {}

위와 같이 유효성을 검증하는 로직들의 경우, 여러 함수에서 비슷한 방식으로 검사하는 경우가 많습니다. 때문에 이런 부분들을 validator라는 함수를 따로 만들어서 재사용 한다면 코드도 더욱 의미가 명확해지고, 유효성 관련된 부분을 한 곳에서 모아서 볼 수 있기 때문에 협업의 관점에서도 더욱 명확해집니다.

// validator.js
export const isEnterKey = (v) => v === "Enter"
export const isEmptyString = (v) =>  v.length === 0