[JS] 삼항연산자

 

 

삼항연산자란??

 

if else문을 대체할 수 있는 간단한 조건연산자이다. 피연산자의 수가 3개여서 삼항연산자라고 불린다. 삼항연산자의 기본적인 원리는 아래와 같다.

 

삼항연산자의 조건

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

조건문이 참이면 선택문 1, 거짓이면 선택문 2를 실행

 

 

그렇다면 삼항의 조건을 실제 코드로 작성해보기 전에, 삼항연산자를 쓰지 않으면 어떻게 작성해야 하는지 알아보자.

 

let a = 3;

if (a >= 0) {
	console.log("양수")
} else {
	console.log("음수")
}

위 코드는 변수 a가 양수이면 "양수"를, 음수이면 "음수"를 반환하는 함수이다. 위와 같이 양수, 음수의 조건 1, 조건2가 성립되는 경우에 삼항연산자로 가독성있고 유용하게 코드를 작성할 수 있다. 그럼 삼항연산자로 위 코드를 다시 작성해보자!

 

let a = 3;

a >= 0 ? console.log("양수") : console.log("음수");

if else문을 작성하지 않고 삼항연산자로 작성했을때, 코드가 한줄로 아주 깔끔하게 작성할 수 있다.

 

삼항연산자를 위와 같이 자유롭게 쓸 수 있는 것은 아니다. 조건에 따른 선택문1과 선택문2에 값을 대입한다면 Error가 난다. 삼항연잔자에 값을 return하도록 작성하면, 해당 값을 저장하여 사용할 수 있다. 간단히 추가하여주면 된다.

let a = [];

const result = a.length === 0 ? "빈 배열" : "빈 배열이 아님";
console.log(result) /// 빈 배열

 

 

삼항연산자의 중첩도 가능할까?

 

 

만약 조건이 여러개인 삼항연산자를 작성할 수 있을까? 예를 들어 선택문 2에 또다른 선택문 2-1 : 선택문 2-2를 작성한다면 가능할까? 정답은 가능하다이다. 어떻게 가능한지 아래에서 살펴보자!

 

삼항연산자의 조건

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

조건문1이 참이면 선택문 1, 거짓이면 조건문2를 실행

조건문2이 참이면 선택문 2-1, 거짓이면 선택문 2-2를 실행

 

글로 작성하니 보기 어려워진 것 같다. 다음은 학점계산 프로그램을 예시로 들어 중첩된 삼항연산자의 코드를 작성해보자. 조건은 다음과 같다. 

 

조건	학점
90점 이상	A+
80점 이상	B+
그 외	F

 

let score = 100;

score >= 90 ? console.log("A+") : score >= 80 ? console.log("B+") : console.log("F");

 

조건문이 중첩되니 해석하는데에 시간이 꽤 걸리고 가독성이 떨어진다. 코드를 한 줄로 작성하는 것은 용이하지만, 한 눈에 봐도 잘 알아볼 수 있게 작성하는 것이 중요하니 삼항연산자를 중첩하여 사용하는 것은 지양하도록 하자. 오히려 조건이 많을 경우 삼항연산자로 작성하는 것 보다 if else문으로 작성하는 편이 가독성에 훨씬 좋다. 위 코드를 if else문으로 바꿔보자.

 

if (score >= 90) {
	console.log("A+");
    } else if (score >= 80) {
	    console.log("B+");
    } else {
	    console.log("F");
}