🦎 JavaScript

[JS] 조건(삼항) 연산자

하나둘세현 2023. 2. 2. 17:13
728x90

조건(삼항) 연산자

if/else문과 switch문 말고 다른 것 하나가 더 있다. 바로 조건 연산자(conditional operator)이다. 

 

조건 연산자는 if/else문과 유사한 것을 작성하려고 하지만 모두 한 줄에 있어야한다. 

 

const age = 23;
age >= 19 ? console.log("I like to drink water"): 
console.log("I like to drink milk");

age >= 19 ← 나이가 맞는지 확인하는 테스트, 이 조건이 끝나면 뒤에 ?(물음표)를 붙여준다. 그리고 if 블록을 작성해준다. if블록은 내가 실행하고자 하는 코드이다. age >= 19 이  ? console.log("I like to drink water") ← 블록이 끝나면 :을 붙여준다. 그리고 이 블록이 true이면 큰솔에 I like to drink water이라고 출력된다. if블록은 본질적으로 한 줄의 코드만 가질 수 있다. 따라서 이 조건이 참이면 한가지만 수행할 수 있다. 그런 다음 기본적으로 else 블록도 필요하다. 그것은 : 다음에 온다. 이제 위의 코드를 실행시키면

나이가 23살이어서 19살 이상이었을 때의 조건이 true으므로 I like to drink water의 결과가 나온다.

본질적으로 if/else문을 모두 한줄에 작성하는 것이다. 그러나 진술(statement)를 사용하는 대신 const age = 23; 이 조건 연산자를 사용한다. 조건 연산자는 삼항 연산자라고 불린다. 다른 연산자랑 달리 세 부분으로 구성되있기 때문이다. 어떻게 세 부분이냐면?

  1. age >= 19 ← 조건
  2. console.log("I like to drink water") ← if 문
  3. console.log("I like to drink milk") else 문

이렇게 세 부분으로 나뉘어져 있다.  조건 연산자는 이름 그대로 연산자이다. 연산자는 항상 값을 생성한다는 점이 중요하다. 연산자는 표현식이다. 내가 값을 갖고 있는 다음에 해당 값을 변수에 할당할 수 있다. 이를 통해 삼항 연산자를 유용하게 사용할 수 있다. 조건으로 변수를 선언한다. 

 

age >= 19 ? "water " : "milk";

위의 코드처럼 작성하는게 더 많이 쓰인다. 위의 코드에 보이는 것처럼  age >= 19 ? "water " : "milk"; ← 이 전체 연산자는 표현식이다. 그리고 표현식은 값을 생성한다.

const drink = age >= 19 ? "water " : "milk";

그래서 계속해서 변수에 해당 값을 저장할 수 있다. 

const drink = age >= 19 ? "water " : "milk";
console.log(drink);

drink는 실제로 조건으로 정의된다. age >= 19 ← 이 조건으로 기반된다. 

만일 조건 연산자가 없으면 if/else 문을 사용하면 된다. 

 

변수를 선언하고 싶을 때 if/else 블록 내부에 먼저 해당 변수를 외부에서 선언해야 한다. 

let drink2;
if (age >= 18) {
  drink2 = "water";
} else {
  drink2 = "milk";
}
console.log(drink2);

if/else 블록 외부에서 drink2 변수를 정의해아한다. 블록 내부에서 정의하는 모든 변수는 외부에서 사용할 수 없다. 그래서 let drink2에서 drink2로 변수를 선언했다. 그런 다음 drink2="water";, drink2="milk"에서 drink2로 변수를 재할당했다. 

 

삼항 연산자에 비해 직접 if/else문을 작성하는 것은 복잡하다. 삼항 연산자는 표현식이기때문에 템플릿 리터럴에서 사용할 수 있다.

console.log(`I like to drink ${age >= 19 ? "water " : "milk"}`);

이렇게 템플릿 리터럴 내부에 작성하여 원하는 결과를 얻을 수 있다. 

 

더 큰 블록을 갖고 있는 경우에는 삼항 연산자 보다 if/else문이 더 유용하다. 그러나 빠른 결정을 내려야 할때는 삼항 연산자가 더욱 유용하다. 

728x90

'🦎 JavaScript' 카테고리의 다른 글

[JS] 특수모드(엄격모드)  (0) 2023.02.05
[JS] JS가 작동하는 방식  (0) 2023.02.02
[JS] switch 문  (0) 2023.02.01
[JS] Boolean logic | Logical Operators  (0) 2023.01.31
[JS] 비교 연산자(Equality Operators)  (0) 2023.01.31