클린코드 직접 실습하기

본인이 잘 이해했는지 확인하는 가장 정확한 방법은 가르쳐 보는 것!
클린코드 읽으며 뼈맞았던 내용 중 3가지 원칙 를 고르고, 원칙 따르는 예시 총 3가지를 만들어보세요.

 

// 원칙 1. 정확한 이름 쓰기


// Before 😣
const A = ["apple", "banana"]

const pushA = function(a) {
  return A.push(a)
}

console.log(pushA("orange"))

// 무엇을 고치려고 하는지, 고치려는 문제가 무엇인지 알려주세요.
// 함수 이름을 통해 동작 내용을 유추할 수 없다.


// After 😎
const DB = ["apple", "banana"]

const addFruit = function(newFruit) {
  return DB.push(newFruit)
}

console.log(addFruit("orange"))


// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
// 명확한 이름을 사용하도록 한다.

 

// 원칙 2. 오류보다는 예외 사용하기


// Before 😣
const convertToNumber = function(str) {
  return Number(str)
}

console.log(convertToNumber("///"))

// 무엇을 고치려고 하는지, 고치려는 문제가 무엇인지 알려주세요.
// 함수를 실행했을 때 예외가 발생한다. 숫자로 변환할 수 없는 문자열이기 때문에, NaN이 출력될 것이다.


// After 😎
const convertToNumber = function(str) {
  try {
    let changeNumber = Number(str);
    if (isNaN(changeNumber)){
      throw new Error("숫자가 아닌 문자열입니다.")
    }
    console.log(`Number: ${changeNumber}`)
  } catch (error) {
      console.log(error.message)
  } finally {
    console.log(`String: ${str} --> Number: ${Number(str)}``)
  }
}


// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.

 

// 원칙 3. 코드를 깨끗하게 유지하고, 팀의 규칙을 따른다


// Before 😣
var a = [1,2,3]; function b(c) { return a.push(c); }

// 무엇을 고치려고 하는지, 고치려는 문제가 무엇인지 알려주세요.
// 함수를 한 줄에 다 기재하여 가독성이 떨어집니다.
// 변수의 의미가 모호합니다.
  

// After 😎
let DB = [1,2,3];

function makeNumberArr(number) {
  return DB.push(number)
}


  
// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
// 변수의 가독성을 위해 여러줄로 나눠서 작성 및 적절한 들여쓰기
// 변수명을 통해 동작 내용을 유추할 수 있다.