# 우아한 자바스크립트 코드

### 클린코드가 뭐냐?
변경을 위한 코딩(UI는 좀 더 심하다)
읽기 좋은 코드
- 성능은? 가독성 먼져 챙기고 필요할 때

### 클린코드 전에 클린 설계
- 사용하는 쪽 코드를 먼저 구현하기

const modal = new Modal();
const slider = new Slider();

//이 부분을 먼저 구현
const service = new Service();
service.addPlugin(modal, slider);
service.on({});
//그다음 service 구현

### 함수 수준 설계
- 이름을 잘 짓기
- 파라미터와 반환에 집중
- 이름이랑 함수 일하는게 다르다면 회고... (더 나누던가, 이름을 바꾸던가)

### 변수에 구체적인 의미를 부여

time => currentTime
splitted => itemList

### 함수는 '무엇'을 '하다'

calculate => calulateNextValue

### getter
길어야 2~3줄로 구성하여 딱 이름을 보고 예상하는 동작만 하게 끔

### 매개변수가 많으면 object literal 전달

function execSomething({width, height}){
    console.log(width, height);
}

execSomething({
    width: 20,
    height: 400,
    maxNumber: 300,
    minNumber: 100
});

### 긍정 우선 코드

function bad(){
    if(!value) return;
    doSomething();
}

function good(){
    if(value) doSomething();    
}

부정 우선 코드는 말로 설명하다 보면 이상하게 되는 경우가 많음

### 상수값, 인덱스 값등 의미를 주기

doSomething(obj.methodA()[2], obj.methodB[3]);

의미를 딱 봐서 알수가 없음 이런것 지양

### 얼마나 분리해야 할까?
> 적절한 분리 > 지나친 분리 > 분리 안하기

### 함수는 같은 입력엔 같은 출력이 나오게
테스트가 쉬워지고(의존성이 없기때문) 신뢰하여 많은 곳에서 재사용할 수 있음

### 인간 사고흐름과 비슷하면 좋다.

pipe(splited, map(trim), map(removeBracket))(str);

### ES6+
- default parameter로 || 대체
- 고차함수는 arrow function으로 간단하게 표현

### 리팩토링은 중복을 없애는 것 부터
크기만 줄여도 꽤 좋다.
짧은 주기의 리팩토링

### 전역변수 제거
매개변수를 잘 이용해서 없애기
네임스페이스 객체 사용하기