React - JavaScript 응용하기 (삼항연산자)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 JavaScript 에서 조건문을 더 간결하게 작성할 수 있는 삼항연산자를 알아보도록 하겠습니다.

이를 사용하면 코드를 더욱 간결하게 작성할 수 있습니다.

 

작성예시를 빠르게 살펴보도록 하겠습니다.

 

1. 기존의 If 예시문 하나 만들기

let a = 3;

if (a >= 0) {
  console.log('a is +');
} else {
  console.log('a is -');
}

위와 같이 작성한 예시를 살펴보면 a 라는 변수의 값이 양수인지 음수인지만 판단하는 조건문이 완성되었습니다. 하지만 코드가 5줄에 걸쳐 작성되는 모습을 볼 수 있습니다.

이를 이제 삼항연산자로 작성하게 되면 더욱 간결하게 작성할 수 있습니다.

let a = 3;

a >= 0 ? console.log('a is +') : console.log('a is -');

이를 글로 작성하는 형태로 이해하면 더욱 쉽게 이해할 수 있습니다.

작성된 코드 구문을 그대로 표현하자면, a 가 0보다 같거나 클때 ? 라고 하여 "a >=0 ?" 이라고 하여, 조건을 부여합니다. 

? 표 뒤에는 "True", 즉 참일때 실행될 코드를 작성합니다. 여기서는 console.log('a is +') 가 작성되었습니다. 그리고  " : "을 표기하여, 거짓일 경우 실행될 코드를 작성하게 됩니다.

 

즉 If 문에서 조건으로 들어간 a >= 0 이라는 조건을 작성하고 ?의 의미가, 바로 삼항연산자의 시작이 되겠습니다.

 

즉, 조건을 부여하고 ?를 작성하면 이것을 조건문으로 사용하겠다는 의미를 가지게 되며, 이를 참 거짓으로 나누는 분류가  

" : " 이 되는 것입니다. 따라서, 조건문 / 참 / 거짓 3가지의 연산이 들어간다는 의미로 삼항 연산자라고 부르게 됩니다.

 

다만 삼항연산자의 경우, If 문 상황에 따라 중첩이 많이 되면 오히려 가독성이 떨어질 수 있습니다.

이를 주의해야 합니다.