문자열 계산기 javascript.ver

 

문자열 계산기를 자바로 짜는 과제를 레샨님께서주셨는데 흑흑 웬걸 너무 힘들었다... js적 사고를 하는 나에게 넘어려운것...

그래서 일단 javascript로 만들어보고 옮겨야겠다는 생각을 했다~

---

리팩토링 전 풀이 그냥 쿠쿠루삥뽕 구현함

const input = "2 + 3 * 4 / 2";
const output = 10;


const operatorDict = {
  "+" : (a,b)=>a+b,
  "-" : (a,b)=>a-b,
  "*" : (a,b)=>a*b,
  "/" : (a,b)=>a/b
}


const splitArr = input.split(" ")
//자르기
const initialValue = parseInt(splitArr.shift())
// console.log(splitArr)
//chunk

const chunkArr = Array.from({length:splitArr.length/2})
  .map((v,i)=> {
    return [
      splitArr[i*2], 
      parseInt(splitArr[i*2+1]),
    ]
  })
console.log(JSON.stringify(chunkArr))
// reduce로 연산해서 결과 출력 후 구조분해할당!?
//배열을 구조분해할당하려면?

const result = chunkArr.reduce((acc,[operator, number])=>{
  console.log(acc, operator, number)
  return operatorDict[operator](acc, number) 
}, initialValue)

initialValue
//두번째 v parseInt
// console.log(JSON.stringify(chunkArr.map((v,i)=>[v[0],parseInt(v[1])])))


// [i][i+1]

// [["+","3"],["*","4"],["/","2"]]

 

---

리팩토링한거~ 이건 혼자안했다 왜냐면 이름짓기 너무힘듦 ㅠㅠ 토끼님이 도와주심

const operatorDict = {
  "+" : (a,b)=>a+b,
  "-" : (a,b)=>a-b,
  "*" : (a,b)=>a*b,
  "/" : (a,b)=>a/b
}
  //어떤 역할이 있을까?

  // 이름 parse // 문자열을 split해준다
  // split한거를 chunk해준다

const parse = (input) => {
  const CHUNK_SIZE = 2;
  const tokens = input.split(" ")
  const initialValue = parseInt(tokens.shift())
  
  const operationList = Array.from({length:tokens.length/CHUNK_SIZE})
    .map((_,i)=> {
      return [
        tokens[i*CHUNK_SIZE], 
        parseInt(tokens[i*CHUNK_SIZE+1]),
      ]
    })
  return { initialValue, operationList }
}
//1. 변수명이 구리다.(O)
//2. split chunk 합쳐져잇는게 맘에안듦(X)
// -> split+chunk같은역할, reduce 이렇게 구분해서 함수로 쪼개고싶다~(O) : 함수추출하기 extract function
//3. 각각의 숫자로 써져있는 부분들(하드코딩)을 변수로 빼기~ (O) : 상수추출하기 extract constant

//input을 받는 함수를 만들기!
const evaluate= (input)=>{
  const {initialValue,operationList} = parse(input)

  //chunk한거를 reduce해준다~
  return operationList.reduce((acc,[operator, n])=>
    operatorDict[operator](acc, n), initialValue)
}
// console.log(evaluate("2 + 3 * 4 / 2"))

 

---

예쁘게 정리함~

const operatorDict = {
  "+" : (a,b)=>a+b,
  "-" : (a,b)=>a-b,
  "*" : (a,b)=>a*b,
  "/" : (a,b)=>a/b
}

const parse = (input) => {
  const CHUNK_SIZE = 2;
  const tokens = input.split(" ")
  const initialValue = parseInt(tokens.shift())
  
  const operationList = Array.from({length:tokens.length/CHUNK_SIZE})
    .map((_,i)=> {
      return [
        tokens[i*CHUNK_SIZE], 
        parseInt(tokens[i*CHUNK_SIZE+1]),
      ]
    })
  return { initialValue, operationList }
}
const evaluate= (input) => {
  const {initialValue,operationList} = parse(input)
  return operationList.reduce((acc,[operator, n])=>
    operatorDict[operator](acc, n), initialValue)
}

 

근데 코드를 짜고 나서 느낀점은 반복문으로 구현할 수 있는 부분은 반복문으로 구현해야 ㅠㅠ 더 좋을 것 같다는 것이다 ~왜냐면 Array.from부분(chunk해주는 부분 조금 약간 고통... 저부분을 반복문으로 바꾸는게 더 간단해보일듯~굳이 함수형으로 풀어야했을까? 하는 생각이 든다~)

 

그리고 리팩토링하면서 constant extract, function extract라는 개념을 배웠다~ 너무 재밌다 껄껄

리팩토링 유잼

 

그래도 잘한것은 reduce를 바로 떠올린것과 혼자서 스스로 코드의 문제점을 찾고 개선해보려고 노력했다는 점이다~ 

변수명이 구린것도, 함수로 추출하려는 것도, 상수추출하려는 것도 뭔가 불만족스러워서 일단 써놓은 것임.. 너무 내코드에 불만이 많아서

이래선 구현을 못할지도~?! 실무에서는 역시 중도를 맞추는 게 중요할 것 같다는 생각이 든다

 

그리고 테스트를 짜서 함수형하는 사람들처럼 거꾸로 구현해보고 싶다는 생각을 했다 ~ 왜냐하면 그것이 나의 행복 그것이 내가 이르고자하는 길...함수형 love....