TypeScript의 삼항 연산자

Migel Hewage Nimesha 2023년1월30일
  1. TypeScript 연산자
  2. TypeScript에서 삼항 연산자 사용
  3. TypeScript에서 삼항 연산자를 사용하여 중첩 조건 구현
TypeScript의 삼항 연산자

이 기사에서는 TypeScript의 다양한 연산자를 간략하게 소개하고 삼항 연산자와 사용 방법에 대해 설명합니다.

TypeScript 연산자

소프트웨어 응용 프로그램은 데이터 작업을 위한 것입니다. 따라서 그들은 이 데이터에 대해 다른 작업을 수행하는 방법을 설계했습니다.

각 작업은 하나 이상의 데이터 값으로 작동하고 최종 결과를 생성합니다. 이러한 작업은 다양한 그룹으로 나눌 수 있습니다.

TypeScript의 피연산자와 연산자

일반적으로 연산자는 피연산자라고 하는 하나 이상의 데이터 값에 대해 연산을 수행합니다. 예를 들어 500 + 200 표현식에서 500200 값은 두 개의 피연산자이고 +는 연산자입니다.

TypeScript에서 여러 연산자를 볼 수 있습니다. 이들은 산술, 논리, 비트, 관계 등과 같은 각 연산자의 연산 특성에 따라 그룹으로 나눌 수 있습니다.

또한 이러한 연산자는 각 연산자가 예상하는 피연산자의 수에 따라 그룹화될 수 있습니다. 이항 연산자에는 다음과 같이 두 개의 피연산자가 있습니다.

예시:

x * y
20 / 2

단항 연산자는 하나의 피연산자만 사용합니다.

예시:

x++
y--

TypeScript 언어는 세 개의 피연산자에서 작동하는 삼항 연산자를 지원합니다. if...else 구문의 단축 형식입니다. TypeScript 조건 연산자라고 합니다.

TypeScript에서 삼항 연산자 사용

TypeScript 조건부 연산자는 세 개의 피연산자를 사용합니다. 첫 번째는 평가할 조건입니다. 일반적인 if...else 구문에서 if() 부분으로 식별할 수 있습니다.

다음 두 피연산자는 평가된 조건 결과에 따라 실행할 두 표현식입니다. 따라서 두 번째 피연산자는 조건이 true로 평가될 때 실행되는 표현식입니다.

그렇지 않으면 세 번째 피연산자 식이 반환됩니다.

통사론:

<your_condition> ? <expression_A> : <expression_B>

어디에:

  1. <your_condition>은 평가할 조건입니다. true 또는 false를 반환하는 부울 표현식입니다.
  2. <expression_A>는 조건이 true일 때 반환되는 표현식입니다.
  3. <expression_B>는 조건이 false일 때 반환되는 표현식입니다.

조건부 연산자는 TypeScript 언어에서 사용할 수 있는 유일한 삼항 연산자입니다.

사용자의 나이를 확인하는 TypeScript 코드를 작성해 보겠습니다. 그러면 이를 기반으로 메시지가 반환됩니다. 먼저 일반적인 if...else를 사용하여 조건부 논리를 작성합니다.

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = '';

if( userAge >= MAX_ALLOWED_AGE ) {
    finalMessage = 'You are allowed to this site';
} else {
    finalMessage = 'Get Back!!'
}

console.log(finalMessage);

출력:

TypeScript 삼항 연산자 출력 1

삼항 연산자를 사용하여 동일한 논리를 더 간결하게 작성할 수 있습니다.

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = userAge >= MAX_ALLOWED_AGE ? 'You are allowed to this site' : 'Get Back!!';

console.log(finalMessage);

위의 if...else 논리와 동일한 출력을 얻게 됩니다. 이것은 if...else 구문보다 줄이 적고 더 깔끔합니다.

TypeScript에서 삼항 연산자를 사용하여 중첩 조건 구현

삼항 연산자는 단일 조건으로 제한되지 않습니다. 또한 여러 조건을 지원합니다.

다음과 같이 중첩된 if...else 조건부 논리를 살펴보겠습니다.

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = '';

if( studentMark >= GRADE_A_MARK ) {
    finalMessage = 'Great work!';
} else if(studentMark >= 61 && studentMark < 75) {
    finalMessage = 'Good work!';
} else {
    finalMessage = 'Study more!!!';
}

console.log(finalMessage);

출력:

TypeScript 삼항 연산자 출력 2

삼항 연산자를 사용하여 위의 중첩 조건을 작성해 보겠습니다.

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = studentMark >= GRADE_A_MARK ? 'Great work!' : studentMark >= 61 && studentMark < 75 ? 'Good work!' : 'Study more!!!';

console.log(finalMessage);

위의 TypeScript 코드를 변환하고 노드를 사용하여 실행하면 위의 if...else 시나리오와 동일한 출력을 얻게 됩니다.

코드에서 조건 연산자를 사용하는 것이 좋습니다. 코드를 더 깔끔하게 만드는 한 줄 표현식입니다.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

관련 문장 - TypeScript Operator