[셀프 크리틱] 웹 계산기 기능 구현

계산기 기능 구현과 코플릿(알고리즘 문제) 풀이시 레퍼런스 코드랑 (누더기 같은) 내 코드를 비교해 보며 몇 가지 공통적으로 보이는 부분이 있어서 마치 오답 노트처럼 적어보는 셀프 크리틱.

 

 

1. 쉬운 길 놔두고 괜히 빙 둘러 돌아가지 말자. 

 

input으로 string이 들어오면 해당 string을 바로 순회하면서 갈 수 있는 길을 놔두고 string.split("")으로 배열을 만들어서 그 배열로 순회를 하는 그런 거, 이제 하지 말자. 물론 꼭 배열 메소드를 써야 하는 경우라면 그럴 수도 있겠지만. 

 

 

2. 조건식은 true 값이 나오는 표현식이 들어가는 자리다. 

너무 기본적이고 당연한 얘기지만 한 번 더 명심할 필요가 있겠다. 특히 변수가 falsy한 값(false, undefined, null, 0, NaN, '')일 경우, !변수와 같은 논리연산자를 잘 활용할 것. 

 

// 아래 각 두 줄은 같은 boolean 값을 반환한다. 

obj[key] === undefined 
!obj[key]

arr.length === 0
!arr.length

display.textContent.includes(‘.’) === false
!display.textContent.includes(‘.’)

str === ''
!str

 

 

3. 이중으로 체를 만들어야 하거나, if - else if 등으로 분기를 나눠줘야 할 때 그게 꼭 필요한지, 하나로 합칠 수 있는 방법은 없을지 고민해 보자. 

 

// 가령 변수의 자료형이 number이고, 해당 변수가 홀수일 때만 동작하게 하는 코드를 만들고 싶다면 
if (typeof foo === 'number') {
	if (foo % 2 !== 0) {
    	// 실행할 코드
    }
}

// 위와 같이 체를 두 번 빠져나가게 하는 것보다 논리연산자를 활용해 한 번의 체로 걸러낼 수 있다.
if (typeof foo === 'number' && foo % 2 !== 0) {
	// 실행할 코드
}

 

비슷하게는 실행되어야 하지 않는 조건이 붙어야 할 때, if나 else if 로 또 하나의 분기를 만드는 것보다 기존 조건을 논리연산자로 더 촘촘하게 짜주는 방식을 생각해 볼 수 있다. 아래는 계산기 구현 과제를 만들 때 내가 썼던 코드와 레퍼런스 코드를 비교한 것이다.

 

// 내가 생각한 분기 처리 방식
if (previousKey === "operator" || previousKey === "calculate") {
        // 3 *** 3 처럼 연산자 연속으로 눌러도 아무 변화 없게
        display.textContent = display.textContent;
} else if (firstNum) {
        // 100 + 12 + 상황에서 두번째 + 눌렀을 때 계산되게 하려는 조건
        display.textContent = calculate();      
}

// 레퍼런스 코드
if (firstNum && operatorForAdvanced && previousKey !== 'operator' && previousKey !== 'calculate') {
        display.textContent = calculate();
 }

 

display.textContent = display.textContent; 와 같은 무의미한 코드 블럭을 하나 더 만들면서 분기를 두 번으로 나눌 필요 없이 한 번의 조건식으로 똑같이 체를 빠져나오게 만들 수 있다. 

 

 

💡 오늘의 체크 포인트
결국 2번과 3번은 내가 아직 논리연산자를 능수능란하게 다루지 못하기 때문에 발생하는 두 가지 현상이라고 볼 수도 있겠다. 
처리해주고 싶은 것만큼이나 처리해주고 싶지 않은 것들을 어떤 식으로 풀어나가면 좋을 지에 대해서 항상 한 번 더 생각해 보는 자세가 필요할 것 같다.