[JavaScript] 자바스크립트 삼항 연산자

조건문을 파격적으로 줄여서 작성할 수 있는 삼항 연산자에 대해 알아보자

주어진 숫자가 양수인지 음수인지 확인하는 간단한 조건식을 if문을 이용해서 작성해보자

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

굉장히 간단한 조건인데 코드가 길어지는 느낌이 있음

삼항연산자는 간단한 조건식을 한줄로 아주 짧게 표현할 수 있음

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

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

<삼항 연산자 작성법>
조건식 ? 참일 때 수행할 식 : 거짓일 때 수행할 식 ;

? 키워드는 앞이 조건식이라는 것을 명시하기 위해 적어주는 것

이번에는 주어진 배열이 비어있는지 확인하고 만약 비어있다면 콘솔에 빈 배열입니다를 출력하고 그렇지 않다면 비어있지 않은 배열입니다를 출력하는 프로그램👇

let a = []; //빈 배열

if(a.length === 0){ //배열의 길이가 0이라면
  console.log("빈 배열");
}else{
  console.log("안 빈 배열");
}
//빈 배열

이번엔 삼항연산자를 이용해서 위의 5줄의 조건문을 1줄로 줄여보자

let a = [];

a.length === 0 ? console.log("빈 배열") : console.log("안 빈 배열");
//빈 배열

let a = [1,23]; //비어있지 않은 배열

a.length === 0 ? console.log("빈 배열") : console.log("안 빈 배열");
//안 빈 배열

값을 참일 때와 거짓일 때 구분해서 반환하는 프로그램👇

let a = [1,23];

const arrayStatus = a.length === 0 ? "빈 배열" : "안 빈 배열";
console.log(arrayStatus);
//안 빈 배열

arrayStatus라는 상수를 만든 다음, 삼항 연산자의 결과값을 할당해서 콘솔에 출력후 사용

삼항연산자의 참일 때의 식과 거짓일 때의 식은 콘솔과 같은 함수를 호출하는 것을 사용하면 함수를 호출하고, 값을 명시하게 되면 왼쪽의 대입연산자를 이용해서 결과를 값으로 받아볼 수 있다.

삼항연산자를 조금 더 smart하게 쓰는 법⭐

삼항연산자도 조건식을 사용하기 때문에 이전 글의 주제였던 truthy와 falsy 사용 가능

주어진 값이 null이거나 undefined이 아닌지 판단하는 프로그램👇

let a; //a는 undefined

const result = a ? true : false;
console.log(result); //false

a는 undefined이기 때문에 falsy -> result 상수에는 false 할당

let a = []; //a는 빈배열

const result = a ? true : false;
console.log(result); //true

a는 빈배열이기 때문에 truthy -> result 상수에는 true 할당

이번에는 삼항연산자를 중첩해서 활용

// TODO : 학점 계산 프로그램
// 90점 이상 A+
// 50점 이상 B+
// 둘 다 아니면 F

let score = 100;

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

삼항연산자를 중첩해서 사용하게 되면 가독성이 떨어지게 됨

따라서 삼항연산자를 중첩으로 사용해야 할 경우에는 가급적 if 조건문으로 변경하는게 좋음

// TODO : 학점 계산 프로그램
// 90점 이상 A+
// 50점 이상 B+
// 둘 다 아니면 F

let score = 40;

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

가독성이 if문이 훨씬 좋음😊