211206 Javascript if 의 대체코드 작성방법

Javascript if 의 대체코드 작성방법

if 조건

// 나쁜 예
const welcomeMessage = ({ admin }) => {
  let message
  if (admin) message = 'Welcome, administrator!'

  return message
}

간단한 if 조건은 아래와 같이 삼항 연산자로 대체할 수 있습니다.

boolean ? valueForTrue : valueForFalse

// 좋은 예
const welcomeMessage = ({ admin }) =>
  admin ? 'Welcome, administrator!' : 'Welcome, user'

const welcomeMessage = ({ admin }) =>
    `Welcome, ${admin ? 'administrator' : 'user'}!`

---

// 나쁜 예
const welcomeMessage = ({ canMod, role }) =>
  `Welcome, ${
      canMod ? (role === ADMIN ? 'administrator' : 'moderator') : 'user'
  }!`

// 좋은 예
const roleText = role => (role === ADMIN ? 'administrator' : 'moderator')

const welcomeMessage = ({ canMod, role }) =>
    `Welcome, ${canMod ? roleText(role) : 'user'}!`

---

switch 조건

// 나쁜 예
const welcomeMessage = ({ role }) => {
  switch (role) {
    case ADMIN:
      return 'Welcome, administrator!'
    case MOD:
      return 'Welcome, moderator!'
    default: // user
      return 'Welcome, user!'
  }
}

switch 조건문은 NullishValue(0, 0n, null, undefined, false, NaN, '') 인 경우 defaultValue 를 사용하고, 값이 있는 경우엔 possiblyNullishValue 를 사용합니다.

possiblyNullishValue ?? defaultValue

const roleToText = role => ({
    [ADMIN]: 'administrator',
    [MOD]: 'moderator'
  }[role] ?? 'user')

const welcomeMessage = ({ role }) => `Welcome, ${roleToText(role)}!`

---

try/catch 조건

일반적으로 error 를 던지는 구문을 실행할 경우, try/catch 로 감싸줍니다.

const safeJSONParse = value => {
    let parsed
    try {
        parsed = JSON.parse(value)
    } catch {
        // Leave `parsed` `undefined` if parsing fails
    }
    return parsed
}

const works = safeJSONParse('{}') // {}
const fails = safeJSONParse('..') // undefined

그러나 다른방법으로 Promise 를 사용할수도 있습니다. primise 객체안에 error 를 던질경우 catch 핸들러가 자동으로 핸들링을 해주며, 위 구문을 대체해줍니다. (솔직히 잘 쓸일은 없을듯)

const safeJSONParse = value =>
  new Promise(resolve => resolve(JSON.parse(value)))
    .catch(() => undefined)   // If it fails, just return undefined

safeJSONParse('{}').then(works => ({  /* {} */  }))
safeJSONParse('..').then(fails => ({  /* undefined */  }))

// 또는 async/await 로도 사용 가능합니다.
const works = await safeJSONParse('{}')  // {}
const fails = await safeJSONParse('..')  // undefined

---

for/while 루프

// 🧐 Before
const users = [
  { name: 'Luke', age: 32 },
  { name: 'Gandalf', age: 24_000 }
]

// 콘솔로그
for (const { name, age } of users) {
  console.log(`The age of ${name} is ${age}`)
}

// 평균 계산
let ageTotal = 0
for (const { age } of users) {
  ageTotal += age
}
console.log(`The average age is ${ageTotal / users.length}`)

// 이전 array 에서 새로운 array 생성
const usersNextYear = []
for (const { name, age } of users) {
  usersNextYear.push({ name, age: age + 1 })
}

// 🤓 After
// 콘솔로그
users.forEach(({ name, age }) => console.log(`The age of ${name} is ${age}`))

// 평균 계산
console.log(
  `The average age is ${users.reduce(
    (total, { age }, index, items) =>
      (total + age) / (index === items.length - 1 ? items.length : 1),
    0
  )}`
)

// 이전 array 에서 새로운 array 생성
const usersNextYear = users.map(({ name, age }) => ({ name, age: age + 1 }))

---

// 🧐 Before
const ages = {
  Luke: 32,
  Gandalf: 24_000
}

// 콘솔로그
for (const name in ages) {
  console.log(`The age of ${name} is ${ages[name]}`)
}

// 평균 계산
let ageTotal = 0
let ageCount = 0
for (const name in ages) {
  ageTotal += ages[name]
  ageCount += 1
}
console.log(`The average age is ${ageTotal / ageCount}`)

// 이전 object 에서 새로운 object 생성
const agesNextYear = {}
for (const name in ages) {
    agesNextYear[name] = ages[name] + 1
}

// 🤓 After
// 콘솔로그
Object.entries(ages).forEach(([name, age]) =>
  console.log(`The age of ${name} is ${age}`)
)

// 평균 계산
console.log(
  `The average age is ${Object.entries(ages).reduce(
    (total, [, age], index, entries) =>
      (total + age) / (index === entries.length - 1 ? entries.length : 1),
    0
  )}`
)

// 이전 object 에서 새로운 object 생성
const agesNextYear = Object.fromEntries(
  Object.entries(ages).map(([name, age]) => [name, age + 1])
)

---

출처 : dev.to