안녕하세요.

Javascript 에서 ? 기호의 의미와 사용방법에 대해 알아보겠습니다.

? 기호는 콜론기호(:) 와 함께 삼항 연산자으로 사용합니다.

삼항연산자
조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 if 명령문의 단축 형태로 쓰입니다.

( 결과 = 조건 A ? 참일때의 결과 B : 거짓일때의 결과 C ) 의 형식이죠.

즉 A 라는 조건이 참이라면 B를 리턴하고 거짓이라면 C를 리턴합니다.

보편적으로 많이 사용하는 조건문인 if 문과 삼항연산자를 비교해보겠습니다.

// 삼항연산자
var res = (A === true) ? B : C;

// if 문
var res = null;
if (A === true) {
    res =  B;
} else {
    res =  C;
}

삼항연산자와 if 문으로 동일한 결과를 얻었지만 삼항연사자를 사용하면 코드가 아주 단순해짐을 아실 수 있습니다.

다만 단순히 조건을 비교 후 결과값만을 취하는 로직이라면 삼항연사자가 코드의 가독성이나 효율은 더 좋을 수 있지만

조건에 따라 2개 이상의 결과값이나 추가적인 로직이 필요한 경우에는 사용하기 어렵고 억지로 꾸역꾸역 사용하더라도 굉장히 비효율적이고 가독성에도 좋지 않습니다.

따라서 단순히 코드를 간결하게 줄이기만을 목적으로 삼항연산자를 남발하다보면

나중에 유지보수를 위해 코드를 건드리기가 참 어려워짐을 생각해서 꼭 필요한 곳에만 사용하는것이 좋겠습니다.

삼항연산자를 중첩해서 사용하는경우

그리고 추가적으로 아래의 코드는 어떻게 동작할까요?
( 물론 아래 코드는 때에따라 if 문으로 대체하는게 좋을 수도 있습니다.)

// 주의: 조건 연산은 우측부터 그룹핑 됩니다.
var cond1 = true,
    cond2 = false,
    result = (cond1) ? (cond2 ? "true true" : "true false") : (cond2 ? "false true" : "false false") ;

console.log(result); // logs "true false"

참고
괄호는 필수는 아니며 기능에 영향을주지 않습니다. 결과가 어떻게 처리되는지 시각화하는 데 도움이됩니다.

삼항연산자안에서 삼항연사자를 한번 더 써서 이중으로 사용했습니다.

이렇게 삼항연사자를 중첩해서 사용ㅎ는경우 우측 조건 부터 처리가되어 최종 결과는 ‘true false’ 값이 리턴됩니다.

삼항연산자를 적재적소에 잘 사용할 경우 코드의 가독성이 개선될 수 있으므로 유용한 문법입니다.

감사합니다. 😄