클린코드 자바스크립트 강의 (2)

■ 삼항 연산자 다루기

function alertMessage(isAdult) {
	isAdult ? alert('입장이 가능합니다') : alert('입장이 불가능합니다');
}

위 함수의 경우, alert 함수는 사실 아무런 return값도 가지지 않는다.

alert 창을 띄운다는 행동을 하긴 하지만, 결국 저 삼항 연산자가 어떤식으로 변환되는가를 생각해보면

isAdult ? undefined : undefined 와 같다.

따라서 이런 경우에는 삼항 연산자를 용도에 맞게 사용했다기 보다는,

그냥 숏코딩을 통해 코드의 길이만 줄이려고 했다는 느낌에 가깝다.

결국, 삼항 연산자를 어떤 경우에 사용해야 적절한지를 생각해보면서 코딩을 하라는 뜻.

function alertMessage(isAdult) {
	return isAdult ? '입장이 가능합니다' : '입장이 불가능합니다';
}

더불어, 중첩되는 삼항 연산자는 가독성을 매우 해치므로

짧은 경우에는 if-else문, 복잡한 경우에는 swtich-case문으로 교체해주는 것이 바람직할 것이다.

 

 

■ else 피하기

function getHelloCustomer(user) {
	return 'hello';
}

위 함수는 사용자에게 보낼 환영 메시지를 받는 함수이다.

여기서, '사용자가 성인이 아니면 보고해주세요' 라는 요구사항이 추가되었다고 하자.

보고는 'report'라는 특수 함수를 실행함으로써 수행이 가능한 상황.

function getHelloCustomer(user) {
	if (user.age < 20) {
		report(user);
	} else {
		return 'hello';
	}
}

그럼 함수를 위와 같이 고칠 수 있는데, 이렇게 되면 성인이 아닐 때는 보고만 하고 환영 메시지는 부재하게 된다.

원래 함수 동작은 그대로 하되, 성인이 아니면 특수함수만 실행시키는 게 목적이었으나

if문에 걸려서 원래 함수의 동작을 못하게 되었다.

 

함수 자체가 하나의 역할만 해야하는데, 두 개의 역할을 통합하고 분리를 못했기 때문에 발생한 일이다.

이럴 때는 그냥 else문을 애초에 사용하지 않으면, 함수를 따로 분리하지 않고도 요구사항을 충족할 수 있다.

function getHelloCustomer(user) {
	if (user.age < 20) {
		report(user);
	} 

	return 'hello';
}

즉, else문을 사용하는 것에 너무 익숙해져서 습관적으로 사용하지 말라는 뜻.

 

■ early return

function loginService(isLogin, user) {
    if (!isLogin) {
        if (checkToken()) {
            if (!user.nickname) {
                return registerUser(user);
            } else {
                refreshToken();
                
                return '로그인 성공';
            }
        } else {
            throw new Error('No Token');
        }
    }
}

이 함수에 early return을 적용하면 다음과 같이 함수를 변경할 수 있다.

function loginService(isLogin, user) {
    if (isLogin) return;
    
    if (!checkToken()) throw new Error('No Token');
    
    if (!user.nickname) {
        return registerUser(user);
    } 
    
    refreshToken();
    return '로그인 성공';
}

early return을 사용하여 함수를 미리 종료하면, 로직이 분리되어 사람이 사고하기가 편해진다.

 

당장 코드 구조만 보더라도

'로그인에 성공하기 전에 세 번의 검증 과정을 거치는구나' 라는 생각을 자연스럽게 할 수 있게 된다.

 

물론 수많은 early return을 만드는 게 마냥 좋은 코드는 아니지만,

위의 예시처럼 많은 로직이 'isLogin'이라는 조건에 의존하고 있는 경우

(로그인 여부에 따라 동작을 수행할지 말지가 정해지는 로직이 많은 경우)

early return을 사용하면 훨씬 사람이 보기 편한 코드를 작성할 수 있다.

 

※ 많은 경우 지양하는 부정 조건문이 대놓고 사용되는 케이스가 바로 early return이다.

early return 말고도 form validation, 유효성 검증이나 보안, 검사 로직 등에서 부정 조건문이 자주 사용된다.

그 외에는 부정 조건문은 '한 번 더 생각해야하는 코드' 여서 많은 사람들이 지양하는 편.

 

 

■ Default Case 고려하기

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

default case와 관련한 구현은 팀원들끼리 말을 맞추고 나서 구현해주는 게 좋다.

예를 들어, 위의 createElement 함수를 사용할 때, 아무 값도 넣지 않았을 때도 호출이 가능하게 하고 싶다면

아래와 같이 default 값을 지정해서 호출할 수 있게 해주는 것도 함수의 안전하고 편한 사용에 도움이 될 수 있다.

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

React Router를 사용할 때도 유저를 위해 다음과 같이 default 페이지(Not Found)를 제공할 수 있다.

const Root = () => {
    <Router history={browserHistory}>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/welcome" component={Welcome} />
            <Route component={NotFound} />
        </Switch>
    </Router>
};

 

※ Nullish Coalescing Operator

위의 createElement 함수에서, 만약 width와 height 입력값으로 '0'이라는 숫자를 받으면 어떻게 될까?

0은 falsy 값이기 때문에 width와 height에 기본값인 100이 들어가게 된다.

이러한 경우, 만약 의도적으로 0과 같은 falsy 값을 살리고 싶다면 '||' 대신 '??'를 사용해주면 된다.

'??'(Nullish Coalescing Operator)는 falsy 값 전부가 아니라, null과 undefined에 대해서만 

false로 판단을 하기 때문에 null/undefined와 다른 falsy값들의 구분이 필요한 경우에 유용하게 사용할 수 있다.

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