Clean의 Tips 7개에 JavaScript 코드 쓰기

1. 파괴적인 방법을 최대한 사용하지 않는다

파괴적인 방법은 원시 수조 원소를 바꾸는 방법이다.다음 예에서push 방법으로const성명의 변수numbers를 업데이트했습니다.
bad

const numbers = [1, 2, 3]
numbers.push(4)
console.log(numbers) // [1, 2, 3, 4]

이 경우 원시 그룹 요소를 업데이트하지 않고 새 변수를 전자 표로 대체한다.변수는 가능한 한 정음판으로 설정하면 예상치 못한 고장과 프로그램의 가독성과 유지보수성을 높일 수 있다.push 방법 이외에sort와fill 등 다른 파괴적인 방법도 사용할 수 있다.
good

const numbers = [1, 2, 3]
const newNumbers = [...numbers, 4]
console.log(newNumbers) // [1, 2, 3, 4]

2. 비교 연산자를 사용하지 않고 그룹 요소의 존재를 검사합니다

비교 연산자를 사용하여 수조 요소의 존재를 검사하는 코드를 자주 볼 수 있다.
bad

const numbers1 = [1, 2, 3]
if (numbers1.length >= 1) {
    console.log('OK1') // 実行される
}

const numbers2 = []
if (numbers2.length == 0) {
    console.log('OK2') // 実行される
}

이것들은 다음과 같은 내용으로 개작할 수 있다.원소가 없다면, 논리를 부정한다그냥 쓰는 거예요.이렇게 쓰면 조건의 불일치가 간단해지고 가독성이 높아진다.
good

const numbers1 = [1, 2, 3]
if (numbers1.length) {
    console.log('OK1') // 実行される
}

const numbers2 = []
if (!numbers2.length) {
    console.log('OK2') // 実行される
}

3. 대상의 특정 속성을 대입할 때 분할 대입을 사용한다.

대상 속성을 얻으려면 두 번째 줄에 적힌 상황을 자세히 살펴보세요.
bad

const fruit = { id: 1, type: 'apple', price: 300 }
const type = fruit.type
const price = fruit.price
console.log(type, price) // apple 300

{}에서 얻으려는 대상의 속성 이름을 지정하면 같을 수 있습니다.
good

const fruit = { id: 1, type: 'apple', price: 300 }
const { type, price } = fruit
console.log(type, price) // apple 300

4. 호출 함수를 사용하여 동일한 처리를 하나로 묶기

다음 처리는members와fruits의 배열에서 id의 존재 검사를 하고 id 일람의 배열을 생성합니다.
bad

const members = [{id: 11, name: 'yamada'}, {id: 12, name: 'tanaka'}, {name: 'sasaki'}]
const fruits = [{name: 'orange'}, {id: 33, name: 'apple'}, {id: 34, name: 'banana'}]

const memberIds = members.filter(member => member.id).map(member => member.id)
const fruitIds = fruits.filter(fruit => fruit.id).map(fruit => fruit.id)

console.log(memberIds) // [ 11, 12 ]
console.log(fruitIds) // [ 33, 34 ]

자세히 보면members와fruits의 id를 얻을 수 있으며 방법 검사에서 Filter는 맵으로 요소를 되돌려줍니다.같은 처리는 하나로 귀납할 수 있다.
good

const members = [{id: 11, name: 'yamada'}, {id: 12, name: 'tanaka'}, {name: 'sasaki'}]
const groups = [{name: 'orange'}, {id: 33, name: 'apple'}, {id: 34, name: 'banana'}]

const getIds = (args) => args.filter(arg => arg.id).map(arg => arg.id)

const memberIds = getIds(members)
const fruitIds = getIds(groups)

console.log(memberIds) // [ 11, 12 ]
console.log(fruitIds) // [ 33, 34 ]

5. 수치가 많을 때는 짧게 쓰는 방법을 연구한다

bad

const num = 10000
console.log(num) // 10000

JavaScript는 숫자 사이에 문자열 "e"를 추가하여 0의 수를 지정하여 숫자를 줄일 수 있습니다.

const num = 1e4
console.log(num) // 10000

6.if,switch 등의 조건부 지점을 최대한 사용하지 마라

bad

const toColorCode = (value) => {
    let code = ''
    switch (value) {
        case 'blue':
            code = '#0000ff'
            break;
        case 'yellow':
            code = '#ffff00'
            break;
        case 'red':
            code = '#ff0000'
            break;
    }
    return code
}

console.log(toColorCode('yellow')) // #ffff00

이렇게 쓰면 코드량이 줄어들고 읽기 쉽다.
good

const toColorCode = (value) => {
    const color = {
        blue: '#0000ff',
        yellow: '#ffff00',
        red: '#ff0000'
    }
    return color[value]
}

console.log(toColorCode('yellow')) // #ffff00

7. 함수 매개변수가 많은 경우 Patterns Object 사용

4개의 createTask 함수가 있는 매개변수입니다.함수의 호출원만 보면 함수의 정의를 보지 않으면'없다'와'가짜'등이 무엇을 의미하는지 모른다.(초기화 처리의 예는 좋지 않지만, 샘플이기 때문에 용서해 주십시오)

const createTask = (title, description, dueDate, isDone) => {
  // 何かしらの処理
}

createTask('勉強する', '特になし',  '2022-08-01', false)

대상을 이용하여 함수를 정의하는 매개 변수를 통해 호출원에 속성 이름을 붙인다.이렇게 하면 호출원을 볼 때 매개 변수에 필요한 값을 쉽게 알 수 있고 속성의 순서를 틀리지 않는다.

const createTask = ({title, description, dueDate, isDone}) => {
  // 何かしらの処理
}

createTask({
    title: '勉強する',
    description: '特になし',
    dueDate: '2022-08-01',
    isDone: false
})