どのようにあなたの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の中の関数をしっかり覚えるのは一等公民です。
しかし、省略が可読性に影響を与えたら失敗です。
可読性と簡潔性において、これまでに一つを選ばなければならないならば、いつまでも先に可読性を選択します。

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
}

事前に相手に対して価値を取る（reactを書く人は必ず分かります）

// 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