[javascript] 자바스크립트 삼항연산자 (ternary operator)

참고: https://dev.to/refine/how-to-use-javascript-ternary-operator-58ki

이 포스트는 JavaScript의 삼항연산자에 관련된 글입니다. 여기서 삼항연산자가 무엇인지, 어떻게 사용하는지, 언제 쓰는지 및 if/else, if/else if/else, switch 와는 어떻게 다른지를 설명할 것 입니다.

자바스크립트의 삼항연산자(ternary operator)는 무엇인가

JavaScript의 삼항연산자는 물음표(?)로 표시하는 연산자로, 이 연산자는 이전에 전달된 조건식을 판별하여 조건식의 결과에 따라 뒤에오는 코드 블록을 실행합니다. 이는 물음표 연산자 다음에 오는 두개의 실행가능한 코드 블록을 받는데 이들의 구분을 콜론(:)으로 합니다. 문법은 다음과 같습니다.

[조건식] ? [조건이 참일 때 값] : [거짓일 때 값];

위의 문법을 보면 조건식이 참일 경우에는 물음표 뒤의 값이 실행되고 조건식이 거짓이라면 콜론 뒤의 값이 실행됩니다.

삼항연산자(ternary operator) 사용방법

삼항연산자는 조건의 결과를 기반으로 두 개 이상의 옵션을 결정해야 하는 경우에 사용할 수 있습니다. 다음의 예제 코드에서 사용방법을 설명합니다.

const student = 'Abd';
const welcomeStudent = student ? `Welcome, ${student}!` : "Welcome, Guest!";

console.log(welcomeStudent);

위의 코드에서 'student ?'는 물음표 앞의 조건을 boolean으로 평가하여 student 값이 참인지 확인하고 물음표 뒤의 값을 선택하게 됩니다. 이러한 이유로 삼항연산자는 조건연산자라고도 불립니다.

이 조건식의 결과는 welcomeStudent에 저장할 값을 결정하는데 사용합니다. 첫 번째 피연산자인 조건부가 참으로 판단되면 두 번째 피연산자를, 거짓으로 판단되면 세 번째 피연산자를 반환하게 되고 이 값은 welcomeStudent에 저장됩니다.

JavaScript에서 거짓인 값은 false, 0, -0, 0n, "", null, undefined, NaN 이고 이외의 모든 값을 참 입니다.

삼항연산자(ternary operator)는 언제 쓰는가

삼항연산자의 가장 일반적인 사용 사례는 조건에 따른 결과가 두가지로 분기되어야 하는 경우입니다. 즉 if/else 축약 버전이라고 보면 됩니다. 삼항연산자를 사용하면 코드를 더 읽기 쉽게 작성할 수 있고 일반적으로 코드의 라인수가 줄어듭니다.

위의 예제와 같이 조건에 따른 변수의 값을 바로 반영할 수 있습니다.

또한 삼항연산자는 함수에서 값을 반환할 때에도 사용할 수 있습니다.

// if/else
const welcomeStudent = student => {
  if (student) {
    return `Welcome, ${student.name}!`;
  } else {
    return "Welcome, Guest!";
  };
};

console.log(welcomeStudent({ name: 'Abd' }));
console.log(welcomeStudent());


// ternary operator
const welcomeStudent2 = student => student ? `Welcome, ${student.name}!` : "Welcome, Guest!";

console.log(welcomeStudent2({ name: 'Abd' }));
console.log(welcomeStudent2());

위의 예제 결과에서 보다시피 삼항연산자는 코드를 한줄짜리로 단순화 할 수 있습니다. 이는 코드를 더 읽기 쉽게하고 로직 파악을 쉽게 해줍니다.

Chained Ternary Operator

또 다른 사용 방법으로 삼항연산자를 연결하여 if/else if/else나 switch와 동일한 결과를 낼 수 있습니다.

// if/else if/else
const grade = mark => {
  if (mark > 100) {
    return;
  } else if (mark > 80) {
    return 'A';
  } else if (mark > 70) {
    return 'B';
  } else if (mark > 60) {
    return 'C';
  } else if (mark > 50) {
    return 'D';
  } else {
    return 'F';
  };
};

console.log(grade(100));
console.log(grade(1000));
console.log(grade(10));

// chained ternary operators
const grade = mark => mark > 100 ? undefined
                      : mark > 80 ? 'A'
                      : mark > 70 ? 'B'
                      : mark > 60 ? 'C'
                      : mark > 50 ? 'D'
                      : 'F';

console.log(grade(100));
console.log(grade(1000));
console.log(grade(10));

위의 예제에서는 삼항연산자의 세 번째 피연산자로 또다른 삼항연산자를 연결했습니다.

대부분의 개발자들은 중첩된 삼항연산자를 선호하지 않습니다. 이는 여러개의 조건들이 가독성을 해치기 때문입니다. 삼항연산자를 연결하는 것과는 반대로 제어 흐름의 결과가 여러가지일 경우 if/else if/else나 switch문을 사용하는 것을 권장합니다.

정리

이 글에서 우리는 자바스크립트의 삼항연산자에 대해 살펴봤습니다. 앞 부분에서 코드의 가독성을 향상시키는 일반적인 사례를 확인했고 이는 변수에 값을 저장할 때의 삼항연산자의 사용과 함수의 리턴값에 사용하는 것 입니다.

삼항연산자는 체인으로 연결해 if/else if/else 및 switch 구조를 대체할 수 있지만 여러 개의 삼항연산자를 연결하는 것은 가독성 측면에서 비생산적이기 때문에 기존의 구조를 사용하는 것을 권장합니다.