JavaScript를 공부하면서 여러가지 문법에 대해서 공부를 했지만 if문 에서의 구문과 표현식의 차이에 대해서는 진지하게 고민해 본 적이 거의 없었다. 이번 프로젝트를 하면서 이에 대해서 크게 느낄 수 있었는데, 이에 대해 정리해보자.

if문과 삼항연산자

본격적으로 프로젝트를 하면서 받았던 많은 피드백 중에 하나가 if, else 문을 사용했던 내용을 삼항연산자로 바꿔보라는 것이었다. 얼핏 보기에도 삼항연산자를 사용했을 경우에 식이 간결해지기 때문에 가독성에 좋아보이기는 했지만 구체적인 이유에 대해서는 고민이 없이 사용을 했었다.

if(a > 0){
  console.log("wow");
} else {
  console.log("no!!");
}

위의 식은 삼항 연산자를 사용하면 아래처럼 간단해 진다.

a > 0 ? console.log("wow") : console.log("no!!");

무엇인가 간단해지고 좋은건 알겠는데 정확히 좋은 이유는 뭘까?

구문과 표현식의 차이

간단하게 설명하자면 구문의 경우에는 변수에 할당할 수가 없다. JavaScript 를 사용하는 사람이라면 아래처럼 사용하는 경우를 보지 못했을 것이다.

const print = if(a>0){
  			  return "wow";
			  } else{
                return "no!!";
              };

당연히 위와 같은 방식으로 사용하는 경우는 없다. 다만 아래는 가능하다.

const print = a>0 ? "wow" : "no!!";

이런 차이로 인해서 표현식의 경우에는 리액트의 JSX 안에서도 사용이 가능하며 변수에 할당하여 필요한 경우에도 자유롭게 사용할 수 있다.

사용 예시

1차 프로젝트를 진행하면서 상세페이지 에서 수량을 더하고 빼는 기능을 만들어야하는 경우가 있었다. 이를 더하는 함수와 빼는 함수 두개로 만들고 싶지 않아서 하나의 함수로 만들고 싶었는데 처음에는 아래와 같이 작성했다.

updateCount = (e, action) => {
    switch (action) {
      case 'add':
        this.setState({ count: this.state.count + 1 });
        break;
      case 'substract':
        const count = this.state.count - 1;
        this.setState({ count: count > 1 ? count : 1 });
        break;
      default:
        break;
    }
  };

코드를 살펴보면 "add" 와 "substract" 라는 action 을 받아서 더하거나 빼는 함수임을 알 수 있다. 두 개의 함수를 만들 것을 하나로 만들었기 때문에 작은 목표는 달성했지만 표현식의 특성을 이용하면 이렇게 바꿀 수 있었다.

updateCount = (e, action) => {
  const count =
    action === 'add' ? this.state.count + 1 : this.state.count - 1;
  this.setState({ count: count > 1 ? count : 1 });
  };

count 라는 변수에 삼항연산자의 결과를 바로 할당하고 이를 setState() 할 수 있도록 했다.

비록 복잡한 기능을 하는 함수도 아니고 간단한 이야기이지만 이런 작은 것들이 모여서 큰 것들을 만들 수 있다고 생각한다. 앞으로도 불필요한 코드를 줄여나가는 일에는 집중해 볼 예정이다.