Javascript CleanCode 예제

Posted on Edited on In , Word count in article: 701 Reading time ≈ 3 mins.

읽기 쉽게 코드를 작성하자

부정적인 변수명칭을 피하자

example

1
2
3
const isInvalidApiKey = apiKey === null

if (isInvalidApiKey) {}

CleanCode

1
2
3
const isValidApiKey = apiKey != null

if (!isValidApiKey) {}

함수에 flag 변수 사용을 피하자

example

1
2
3
4
5
6
7
8
9
10
//밑에 function 을 확인하지 않으면 뭐가 true/false 인지 알 수 없다
renderResult(true)

function renderResult(isAuthenticated) {
  if (isAuthenticated) {
      return <p>App</p>
  } else {
      return <p>Please login</p>
  }
}

CleanCode

1
2
3
4
5
6
7
8
9
renderResult({isAuthenticated: true})

function renderResult({isAuthenticated}) {
  if (isAuthenticated) {
      return <p>App</p>
  } else {
      return <p>Please login</p>
  }
}

CleanCode

1
2
3
4
5
6
7
function renderAuthenticatedApp() {
    return <p>App</p>
}

function renderUnAuthenticatedApp() {
    return <p>Please login</p>
}

if-else 를 단순하게 하자

example

1
2
3
4
5
6
7
8
9
10
11
if (statusCode === 200) {
    // success
} else {
    if (statusCode === 500) {
        // Internal Server Error
    } else if (statusCode === 400) {
        // Not Found
    } else {
        // Other error
    }
}

CleanCode
Error 의 경우를 조건문으로 표현하고 성공 Case 만 흘러가게 만들어서
if-else 를 단순하게 만들어 줍니다

1
2
3
4
5
6
7
8
9
10
if (statusCode === 500) {
    // Internal Server Error
}
if (statusCode === 400) {
    // Not Found
}
if (statusCode !== 200) {
    // Other error
}
// success

comment 보다는 긴 이름을 만들자

example

1
2
// verify that user has added a credit card
function verify(user) {}

CleanCode
함수명을 충분히 명확하게 하고 주석을 없애는 게 더 낫다

1
function verifyThatUserHasAddedCreditCard(user) {}

조건을 인지 할 수 있게 만들자

example

1
2
3
4
5
6
7
8
 if (country !== 'finland' &&
    country !== 'germany' &&
    country !== 'vietnam' &&
    country !== 'russia' &&
    type !== '💣'
) {
    return Promise.reject('Not available')
}

CleanCode
조건의 경우를 const 로 만들어서 무슨 조건인지를 쉽게 알 수 있게 한다

1
2
3
4
5
6
7
8
9
10
11
12
const isInAvailableCountries = (
    country === 'finland' ||
    country === 'germany' ||
    country === 'vietnam' ||
    country === 'russia'
)

const hasBoom = type === '💣'

if (!isInAvailableCountries || hasBoom) {
    return Promise.reject('Not available')
}

CleanCode
배열을 사용해서 더 깔끔하게 만들 수 있다.

1
2
3
4
5
6
7
8
const availableCountries = ['finland', 'germany', 'vietnam', 'russia']
const isInAvailableCountries = availableCountries.includes(country)

const hasBoom = type === '💣'

if (!isInAvailableCountries || hasBoom) {
    return Promise.reject('Not available')
}

상태를 명확하게 사용하자

example

1
2
3
4
5
6
7
8
9
10
11
12
isLoading: true
isError: false

isLoading: false
isError: true

// imposible states
isLoading: true
isError: true

isLoading: false
isError: false

CleanCode

1
2
3
4
const LOADING_STATE = 'LOADING_STATE'
const ERROR_STATE = 'ERROR_STATE'

const state = LOADING_STATE

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const [isLoading, setIsLoading] = React.useState(false)
const [error, setError] = React.useState(null)
const [coffee, setCoffee] = React.useState(null)

function handleButtonClick() {
    setIsLoading(true)
    setError(null)
    setCoffee(null)

    getCoffee('cappuccino', 'small', 'finland', true).then(coffee => {
        setIsLoading(false)
        setError(null)
        setCoffee(coffee)
    }).catch(error => {
        setIsLoading(false)
        setError(error)
    })
}

CleanCode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const state = {
    idle: 'idle',
    loading: 'loading',
    error: 'error',
    success: 'success',
}

const [error, setError] = React.useState(null)
const [coffee, setCoffee] = React.useState(null)
const [status, setStatus] = React.useState(state.idle) 

function handleButtonClick() {
    setStatus(state.loading)

    getCoffee('cappuccino', 'small', 'finland', true).then(coffee => {
        setStatus(state.success)
        setCoffee(coffee)
    }).catch(error => {
        setStatus(state.error)
        setError(error)
    })
}

다수의 argument 는 objects 로 대체하자

example

1
2
3
function getBox(type, size, price, color) {}

getBox('carry', undefined, 10, 'red')

CleanCode

1
2
3
4
5
6
7
8
9
10
function getBox(options) {
    const {type, size, price, color} = options
}

getBox({
    type: 'carry',
    size: 'large',
    price: 10,
    color: 'red'
})

example

1
2
3
4
export function getCoffee(type, size, country, hasIce) {

getCoffee('cappuccino', 'small', 'finland', true)
}

CleanCode
소스코드는 길어지더라도 가독성은 올라간다

1
2
3
4
5
6
7
8
9
10
function getCoffee(options) {
    const {type, size, country, hasIce} = options
}

getCoffee({
    type: 'cappuccino',
    size: 'small',
    country: 'finland',
    hasIce: true
})

default 값을 활용하자

example

1
2
3
4
5
6
7
8
function getBox(options) {
    options.type = options.type || 'carry'
    options.size = options.size || 'small'
    options.price = options.price || 10
    options.color = options.color || 'red'
    
    const {type, size, price, color} = options
}

CleanCode

1
2
3
4
5
6
7
8
9
10
11
12
function getBox(customOptions) {
    const defaults = {
        type: 'carry',
        size: 'small',
        price: 10,
        color: 'red',
    }
    
    const options = Object.assign(defaults, customOptions)

    const {type, size, price, color} = options
}

example

1
2
3
4
5
6
export function getCoffee(type, size, country, hasIce) {
    type = type || 'cappuccino'
    size = size || 'small'
    country = country || 'finland'
    hasIce = hasIce || false
}

CleanCode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function getCoffee(customOptions) {
    const defaultOptions = {
        type: 'cappuccino',
        size: 'small',
        country: 'finland',
        hasIce: false
    }

    const options = Object.assign(defaultOptions, customOptions)
}

function getCoffee(options = {}) {
    const {
        type = 'cappuccino',
        size = 'small',
        country = 'finland',
        hasIce = false
    } = options
}

function getCoffee({
    type = 'cappuccino', 
    size = 'small',
    country = 'finland',
    hasIce = false
} = {}) {
}

switch 를 Object literals 로 바꾸자

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const handleSaveCalculation = ({key}) => {
    switch (key) {
        case 'save-copy': {
            saveCopy()
            break
        }
        case 'override': {
            override()
            break
        }
        default:
            throw Error('Unknown action')
    }
}

handleSaveCalculation({key: 'save-copy'})

CleanCode

1
2
3
4
5
6
7
8
9
10
11
12
const handleSaveCalculation = ({key}) => {
    const actions = {
        'save-copy': saveCopy,
        'override': override,
        'default': () => throw Error('Unknown action')
    }
    
    const action = key in actions ? actions[key] : actions['default']
    return action();
}

handleSaveCalculation({key: 'save-copy'})

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let drink
switch(type) {
    case 'cappuccino':
        drink = 'Cappuccino';
        break;
    case 'flatWhite':
        drink = 'Flat White';
        break;
    case 'espresso':
        drink = 'Espresso';
        break;
    default:
        drink = 'Unknown drink';
}

CleanCode

1
2
3
4
5
6
7
8
const menu = {
    'cappuccino': 'Cappuccino',
    'flatWhite': 'Flat White',
    'espresso': 'Espresso',
    'default': 'Unknown drink'
}

const drink = menu[type] || menu['default']