어떻게 하면 당신 의 JS 코드 를 더욱 예 쁘 고 쉽게 읽 을 수 있 습 니까?

JS 프로그래머 로 서 자신 이 쓴 코드 가 보기 좋 고 읽 기 쉬 우 면 자신 만 예 뻐 보 이 는 것 이 아니 라 다른 프로그래머 가 인수 인계 한 후에 도 인수 인계 가 매우 순 조 롭 습 니 다.
코드 에 주석 이 떨 어 진 코드 를 크게 남기 지 마 세 요.
git 에 게 관리 하도록 남 겨 두 세 요.그렇지 않 으 면 git 는 무엇 을 하려 고 합 니까?

// bad

// function add() {
// const a = b + c
// return a
// }

function add() {
 return a + 1000
}

// good
function add() {
 return a + 1000
}

적당히 줄 을 바꾸다

// bad
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state
 this.setState({state_a: state_a * 2})
 return 'done'
}

// good
function a() {
 const {
 state_a,
 state_b,
 state_c
 } = this.state

 this.setState({state_a: state_a * 2})

 return 'done'
}

주석 을 적 절 히 추가 하지만 미 친 듯 이 주석 을 추가 하지 마 세 요.
코드 나 한 줄 에 특별히 주의해 야 할 코드 설명
미 친 듯 이 주석 을 달 지 마 세 요.너무 시 끄 럽 고 예 쁜 코드 는 스스로 말 을 할 수 있 습 니 다.

// bad
const a = 'a' //   a
const b = 'b' //   b
const c = 'c' //   c

// good
/**
 *     
 */
 const a = 'a'
 const b = 'b'
 const c = 'c'

유사 한 행동,이름 을 가 진 코드 를 분류 합 니 다.

// bad
function handleClick(arr) {
 const a = 1

 arr.map(e => e + a)

 const b = 2

 return arr.length + b
}

// good
function handleClick(arr) {
 const a = 1
 const b = 2

 arr.map(e => e + a)

 return arr.length + b
}

의미 성 을 파괴 하지 않 는 상황 에서'절약 할 수 있 으 면 절약 할 수 있다'.
js 에서 함수 가 1 등 시민 이라는 것 을 명심 하 세 요.
그러나 가 독성 에 영향 을 미 치 는 것 을 생략 하면 실패 하 는 것 이다.
가 독성 과 간결 성에 서 지금까지 하 나 를 선택해 야 한다 면 영원히 가 독성 을 선택해 야 한다.

function add(a) {
 return a + 1
}

function doSomething() {

}

// bad
arr.map(a => {
 return add(a)
})

setTimeout(() => {
 doSomething()
}, 1000)

// good
arr.map(add)

setTimeout(doSomething, 1000)

화살표 함수

// bad
const a = (v) => {
 return v + 1
}

// good
const a = v => v + 1


// bad
const b = (v, i) => {
 return {
 v,
 i
 }
}

// good
const b = (v, i) => ({v, i})


// bad
const c = () => {
 return (dispatch) => {
 // doSomething
 }
}

// good
const c = () => dispatch => {
 // doSomething
}

대상 의 값 을 미리 추출 하 다.

// bad
const a = this.props.prop_a + this.props.prop_b

this.props.fun()

// good
const {
 prop_a,
 prop_b,
 fun
} = this.props

const a = prop_a + prop_b

fun()

각종 표현 식 을 합 리 적 으로 사용 하 다.

// bad
if (cb) {
 cb()
}

// good
cb && cb()


// bad
if (a) {
 return b
} else {
 return c
}

// good
return a ? b : c


// bad
if (a) {
 c = a
} else {
 c = 'default'
}

// good
c = a || 'default'

체인 호출 표기 법

// bad
fetch(url).then(res => {
 return res.json()
}).then(() => {
 // doSomething
}).catch(e => {

})

// good
fetch(url)
 .then(res => {
 return res.json()
 })
 .then(() => {
 // doSomething
 })
 .catch(e => {

 })

유지 코드 는 수직 으로 발전 한다.
전체 파일 에 특별히'돌출'된 코드 를 발 견 했 을 때,그들 에 게 줄 을 바 꾸 어 처리 하 는 것 을 고려 해 야 한다.

// bad
return handleClick(type, key, ref, self, source, props)

// good
return handleClick(
 type,
 key,
 ref,
 self,
 source,
 props
)

// bad
const a = this.props.prop_a === 'hello' ? <di>world</div> : null

// good
const a = this.props.prop_a === 'hello'
 ? <di>world</div>
 : null