본문 바로가기
Javascript

if ~ else 구문 보다 고수처럼 느껴지게 만드는 <삼항 연산자 >

by 즐코딩 2022. 12. 13.
반응형

삼항 연산자(조건 연산자)

 

어라? 어디선가 들어봤던 것 같은 삼항 연산자라는 이름... 뭔가 이름은 되게 어려보이는 것 같습니다.

 

삼항 연산자는 특정한 조건을 이룰 때 if ~ else 구문을 대신하여 사용될 수 있습니다. 주로 True / False를 판별한 후 둘 중 하나를 실행하게 될 때 빈번하게 사용됩니다. 이 참에 삼항 연산자에 대해서 알아보고 정리한 후 향후 코드를 짤 때 잘 좀 써 먹어 보기로 합니다.

 

 

if ~ else 구문 케이스

 

다음과 같은 간단한 예제가 있다고 가정해봅니다. (사용자로부터 나이와 성별을 입력 받았다는 가정)

눈으로 따라가면서 바로 이해를 해봅시다.

const age = 17;
const sex = "male";

if (age < 20) {
      console.log("미성년자입니다.");
    } else {
      console.log("성인입니다.");
    }

if (sex === "male") {
      console.log("남성입니다.");
    } else {
      console.log("여성입니다.");
    }

if-else-구문-예시
일반적인 if ~ else 구문

 

if 구문은 논리적인 흐름이 눈에 쉽게 보이기 때문에, 처음 프로그래밍을 배우는 사람들도 모두 좋아하는 구문이라는 생각이 듭니다.  대부분의 사람들은 <조건문>과 <반복문>을 배울 무렵이면, '어라 내가 프로그래밍에 이미 재능이 있었던 것은 아니었을까?'하는 착각 속에, 코딩계의 힘숨찐이 아닐까 하는 생각을 진지하게 해보게 되는 것도 같습니다.^^

 

위 예시 코드는 삼항 연산자를 이용해 다음과 같이 변경할 수 있습니다.

 

 

 

삼항 연산자 케이스

 

  const age = 17;
  const sex = "male";

  age < 20 ? console.log("미성년자입니다.") : console.log("성인입니다.");
  sex === "male" ? console.log("남성입니다.") : console.log("여성입니다.");

삼항-연산자를-이용한-코딩
삼항 연산자를 이용한 코딩

 

5행이던 if ~ else 조건문을 각각 1행씩으로 바꿀 수가 있었습니다!

일단은 뭔가 고수의 기운이 물씬 느껴지는 듯합니다.

 

 

 

삼항 연산자 문법

 

삼항 연산자의 사용법은 다음과 같습니다.

조건식 ?  참인 경우 : 거짓인 경우

 

매우 간단하지 않은가요?

3개의 조건항을 갖고 있는 형태라 '삼항 연산자'라고 불립니다.

 

그래서 위의 예제에서 처럼, 

 

20살 넘었어? 응, 성인 : 아니야, 미성년

 

과 같은 식으로 쉽게 이해할 수가 있습니다. 게다가 코드도 훨씬 간결해지기 때문에, 조건문 사용에 점점 익숙해지다보면 삼항 연산자를 사용하지 않을 이유가 없는 것 같습니다.

 

그렇다면 if ~ else 구문 뿐만 아니라 중첩되는 조건문인 if ~ else if ~ else if~ 등에도 삼항연산자는 사용이 가능할까요?

 

 

중첩조건문에서의 삼항 연산자

 

MDN의 내용을 슬쩍해왔는데요, 삼항 연산자는 다음과 같이 연결해서 사용할 수 있습니다. 왠지, if ~ else if~ 의 형태와 무언가 닮아 있다고 느껴지지 않나요?

 

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

 

if ~ else 구문으로 바꿔보면,

 

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

 

위와 같이 작성할 수 있습니다.

 

 

 

마치며

 

<if 조건문>은 컴퓨터 조금만 다뤄봤다면 누구나 다 아는 내용이지만, <삼항 연산자>는 모르거나 익숙하지 않은 사람들이 많습니다. 프로그래머가 아니라면 당연한 거겠죠?

 

게다가 삼항 연산자는 코딩 초보자에게도 고수의 느낌을 물씬 전해주는 것 같아서 앞으로  자주 사용하게 될 것 같습니다.

아주 간단하지만 뭔가 하나 큰 걸 건진것 같은 기분이 듭니다.

 

 

즐거운 코딩하세요, 즐코딩!

KINcoding

 

 

반응형

댓글