조건(삼항) 연산자
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; 이 조건 연산자를 사용한다. 조건 연산자는 삼항 연산자라고 불린다. 다른 연산자랑 달리 세 부분으로 구성되있기 때문이다. 어떻게 세 부분이냐면?
- age >= 19 ← 조건
- console.log("I like to drink water") ← if 문
- 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문이 더 유용하다. 그러나 빠른 결정을 내려야 할때는 삼항 연산자가 더욱 유용하다.
'🦎 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 |