삼항연산자와 가까워졌다가 멀어지기

조유나·2025년 1월 23일

js 김민태교육 김민태부트캠프 김민태의데브캠프 삼항연산자 패스트캠퍼스김민태 패스트캠퍼스프론트엔드 프론트엔드부트캠프

JavaScript란 멀까..

목록 보기

2/5

본 글에서는 조건문 if..else을 삼항연산자로 리팩터링한 경험을 풀고 삼항 연산자를 사용하면 안되는 경우를 알아봅니다.

삼항연산자와 가까워지기

토이프로젝트1에서 인트라넷 서비스를 만들면서 조건문을 굉장히 많이 사용하고 있습니다.
그 중에서도 localStorage에 할당한 값을 불러와 비교해야 하는 경우가 많습니다.
값은 보통 두 개로 설정하는 편입니다.

if(window.localStorage.getItem('isTrue') === 'yes'){
	console.log('yes')
} else {
	console.log('no')
}

if...else 조건문이 라인을 굉장히 많이 차지하더군요.,,

const isTrue = window.localStorage.getItem('isTrue') === 'yes';
isTrue ? console.log('yes') : console.log('no');

삼항연산자를 활용하면 이렇게 두 줄로 간단히 줄일 수 있습니다.
if와 else가 1대1로 매치되는 경우 유용하게 쓰입니다.

before

 changeState = () => {
    const currentTime = this.timeUtil.getCurrentTime();
    const workTimeButton = document.querySelector(".work-time-button");
    const workState = document.querySelector(".state-text");
    if (workTimeButton.textContent === '근무 시작' ){
      window.localStorage.setItem('workState','working');
      window.localStorage.setItem('startTime',currentTime);
      window.localStorage.setItem('endTime','00 : 00');
      document.getElementById("startWork").textContent = window.localStorage.getItem('startTime');
      document.getElementById("finishWork").textContent = window.localStorage.getItem('endTime');;
      workTimeButton.textContent = '근무 종료'
      workState.textContent = '근무 중'
    } else {
      window.localStorage.setItem('workState','beforeWork')
      window.localStorage.setItem('endTime',currentTime);
      document.getElementById("finishWork").textContent = window.localStorage.getItem('endTime');
      workTimeButton.textContent = '근무 시작'
      workState.textContent = '근무 전'
    }
  }

after

updateUI = () => {
    const startTime = window.localStorage.getItem('startTime') || '00 : 00';
    const endTime = window.localStorage.getItem('endTime') || '00 : 00';
    document.getElementById("startWork").textContent = startTime;
    document.getElementById("finishWork").textContent = endTime;
    document.querySelector(".work-time-button").textContent = this.isWorking ? '근무 종료' : '근무 시작';
    document.querySelector(".state-icon").style.backgroundColor = this.isWorking ? "#3a8c8c" : "#d2e7e7";
    document.querySelector(".state-text").textContent = this.isWorking ? '근무 중' : '근무 전';
  };
 updateState = (newState, currentTime) => {
    this.isWorking = newState === 'working'; // 상태를 업데이트
    window.localStorage.setItem('workState', newState);
    window.localStorage.setItem('startTime', this.isWorking ? currentTime : window.localStorage.getItem('startTime') || '00 : 00');
    window.localStorage.setItem('endTime', this.isWorking ? '00 : 00' : currentTime);
    this.updateUI();
  };

changeState 함수의 역할을 분리하고 삼항연산자를 활용하여 조건문을 처리하였습니다.
여전히 길지만, 직관적으로 구분이 잘 되는 것 같습니다.

삼항연산자와 멀어지기

예전에 삼항연산자를 지양하라는 말을 들은 적이 있습니다. 이유도 모른체 코테를 연습하면서 삼항연산자를 경계했었죠. 그 이유를 알아보기 위해 삼항연산자를 지양해야 하는 경우를 찾아보았습니다.

위 사진은 Airbnb 자바스크립트 스타일 가이드의 일부입니다.
삼항연산자를 중첩하거나(15.6) 불필요한 경우(15.7)에는 사용하지 말 것을 권장합니다.

중첩하여 사용한 경우에는 삼항연산자를 나누어 변수로 정의한 뒤 활용하고,
간단한 식인 경우 논리 연산자로 대체하라고 대안책을 제시하고 있습니다.

이 외에도 chat GPT가 알려준 경우는 아래와 같습니다.

Side Effect, 부수 효과가 있는 경우

isLoggedIn ? logActivity() : showLoginPrompt();
삼항 연산자는 값을 반환하는 데 최적화되어 있으며, 함수 호출, 상태 변경 등 부수 효과가 발생하면 가독성 및 유지보수성이 저하된다고 합니다.

💡 대안
if(isLoggedIn) {
	logActivity();
} else {
	showLoginPrompt();
}
명령문 실행에는 if문이 더 적합하다고 합니다.

조건식이 복잡하거나 결과의 길이가 긴 경우

const message = (user.isActive && user.role === 'admin') 
  ? `Welcome back, ${user.name}! You have admin privileges.` 
  : `Hello, ${user.name}.`;
조건식이 복잡하거나 결과가 긴 경우 삼항연산자는 가독성을 해친다고 합니다.

💡 대안

let message;
if (user.isActive && user.role === 'admin') {
  message = `Welcome back, ${user.name}! You have admin privileges.`;
} else {
  message = `Hello, ${user.name}.`;
}
`