Default Case 고려하기

자바스크립트에서 안전하고 견고한 코드를 작성하는 방법 중 엣지 케이스 처리에 대해 알아보자
🤔 왜 엣지 케이스 처리가 중요할까?
자바스크립트는 사용자와 상호작용하는 동적인 언어다. 사용자의 입력을 받고, 그에 따라 프로그램이 동작한다. 이런 특성 때문에 예상치 못한 상황에 대한 대비가 필수적이다.

1. 기본값 설정의 중요성 📝

1.1 간단한 덧셈 함수 예제

function sum(x, y){
	return x + y;
}

이렇게 간단한 sum 함수도 문제가 있을 수 있다. 누군가는 아무 값도 넣지 않고 함수를 실행할 수도 있다.

function sum(x, y) {
    x = x || 1
    y = y || 1
    
    return x + y;
}

이렇게 처리해주면 아무 값도 넘기지 않더라도 1이 연산되는걸 예측할 수 있다.

1.2 DOM 요소 생성 함수

function createElement(type, height, width) {
    const element = document.createElement(type || 'div');
    
    element.style.height = height || 100;
    element.style.width = width || 100;
    
    return element;
}

createElement()

기본값 처리를 해줬다. 팀의 코어 유틸리티나 라이브러리를 개발할 때는 이런 걸 생각하면서 만들어야 한다. 그래야 더 안전하고 확장성 있는 코드가 나온다.

1.3 Switch-Case의 엣지 케이스 🚨

function registerDay(userInputDay){
	switch (userInputDay){
		case '월요일': //some code
		case '화요일': //some code
		case '수요일': //some code
		case '목요일': //some code
		case '금요일': //some code
		case '토요일': //some code
		case '일요일': //some code
	}
}

모든 요일이 처리된 것 같지만, 사용자가 "월ㄹ요일" 같은 오타를 낼 수도 있다. 이런 엣지 케이스는 언제든 생길 수 있으니 처리해줘야 한다.

function registerDay(userInputDay){
	switch (userInputDay){
		case '월요일': //some code
		case '화요일': //some code
		case '수요일': //some code
		case '목요일': //some code
		case '금요일': //some code
		case '토요일': //some code
		case '일요일': //some code
		default:
			throw Error('입력값이 유효하지 않습니다.')
	}
}

try-catch문도 있지만, 에러를 명시적으로 선언하는 게 중요한 포인트다. 프론트엔드는 사용자의 입력을 받는 상황이 많으니 이런 처리가 꼭 필요하다.

1.4 parseInt 안전하게 쓰기 🔢

parseInt를 쓸 때 제일 많이 하는 실수가 두 번째 인자를 빼먹는 것이다. 무조건 10진수로 바뀐다고 생각하지만 공식 문서에도 "기본값이 10이 아니에요!"라고 적혀있다.

function safeParseInt(number, radix){
	return parseInt(number, radix || 10)
}

마무리 🎯

엣지 케이스 처리는 그냥 "있으면 좋은 것" 정도가 아니라 안정적인 프로그램을 위해 꼭 필요하다.