[JavaScript] 자바스크립트 예제 삼항연산자 이해하기

자바스크립트 삼항연산자는 조건문의 결과값이 참이냐 거짓이냐에 따라 선택문을 실행하는 연산자입니다.

삼항연산자 문법

조건문 ? 선택문1:선택문2

삼항연산자는 위와 같이 조건문이 하나 주어지고 ‘?’ 뒤에 두개의 선택문이 ‘:’를 통해 나누어져 정의됩니다. (조건문 하나와 선택문 두개가 합쳐서 3개의 항이 되기 때문에 삼항연산자라고 불립니다.)

여기서, 조건문의 결과값이 참이라면 선택문1이 실행되고, 거짓이라면 선택문2가 실행됩니다.

삼항연산자 구조 자바스크립트

물론, If 문과 else문의 조합을 통해서도 가능하지만, 삼항연산자의 매력은 조건문에 달린 선택이 2가지일때 코드 한줄로 구현할 수 있다는 것입니다.

If else 문

let apple = 129;
let banana = 123;

let fruit;

if (apple > banana) {
  fruit = "사과가 더 많습니다.";
} else {
  fruit = "바나나가 더 많습니다.";
}

console.log(fruit);

삼항연산자

let apple = 129;
let banana = 123;

let fruit = apple > banana ? "사과가 더 많습니다." : "바나나가 더 많습니다.";

console.log(fruit);

위에 두 코드는 동일하게 작동합니다.

조건문

자바스크립트 삼항연산자에서 각 항은 특정 자료형에 국한되지 않습니다. 하지만, 삼항연산자에서의 조건문은 자동으로 boolean 형태가 됩니다. true냐 false냐에 따라 하나의 선택문을 실행해야 하기 때문이죠.

위에서 사과와 바나나 예시처럼 비교 연산자나 논리 연산자로 구성된 조건문은 true 또는 false를 반환하기 때문에 삼항연산자의 조건문으로서 적합합니다.

선택문

선택문은 조건문과 달리 매우 자유로운 형태를 가집니다. 위에서의 예시처럼 그냥 문자열을 반환해서 변수에 넣어줄 수 도 있고, 심지어 비교 연산자를 넣어주거나 boolean 값이 될 수 도 있습니다.

아래 예시에서 볼 수 있듯이 조건문만이 아니라 선택문1, 2도 모두 비교 연산자로 구성할 수 있습니다.

let x = 1;
let y = 2;
let z = x < y ? x <= y : x == y;

console.log(z); // true

예제

// age 의 값에 따라 status 변수에 "성인" 또는 "미성년자" 문자열을 넣어줍니다. 
// 18살 이상인 경우 status는 "성인", 이하인 경우 "미성년자"
let status = (age >= 18) ? "성인" : "미성년자";

// 짝수인지 홀수인지 판단하는 삼항연산자
// a의 값이 나머지셈이 0인 경우 isEven은 "짝수" 0이 아닌 경우 isEven은 "홀수"
let isEven = (a%2==0) ? "짝수" : "홀수";

답글 남기기