[JS] [번역] 자바스크립트 — 조건부 삼항 연산자(Conditional Operator)설명하다

이 글은 ‘JavaScript — The Conditional (Ternary) Operator Explained by Brandon Morelli’ 를 번역한 글입니다.

기본부터 시작하다 — if 문

if 문처럼 조건부(conditional)를 사용한다면, 특정 조건이 충족되면 특정 블록의 코드가 실행되어야 되는 것을 허락합니다.

다음 예시를 봅시다:

우리는 driver, name, age 라는 프로퍼티(property)를 가진 person 객체(object)를 예시로 봅시다.

let person = {
name: 'tony',
age: 20,
driver: null
};

우리는 person 나이가 16보다 크거나 같은지 실험을 해보고 싶습니다. 만약 해당 실험이 참이라면, 사람은 운전 가능한 나이고 driver 은 ‘yes’ 라고 할 것입니다. 만약 해당 정보가 거짓이면 driver 은 ‘No’를 반환할 것입니다.

해당 실험은 if 문으로 작성할 수 있습니다:

if (person.age >= 16) {
person.driver = 'Yes';
} else {
person.driver = 'No';
}

그러나 우리가 위에 완성된 if 문을 한 줄의 코드로 작성할 수 있습니다. 자, 여기있습니다:

person.driver = person.age >=16 ? 'Yes' : 'No';

이 짧은 코드는 우리에게 동일한 person.driver = ‘Yes’; 의 결과를 산출합니다.

The Conditional (Ternary) Operator (조건부 삼항 연산자)

우선, 우리는 정형적인 if 문법을 보겠습니다:

if ( condition ) {
value if true;
} else {
value if false;
}

자, 이제 ternary operator(조건부 삼항 연산자) 로 바꿔볼까요?:

condition ? value if true : value if false

당신이 알아야할 것은 다음과 같습니다:

1. condition(조건) 이 당신이 실험하고 있는 것이다. 당신의 condition(조건)의 결과는 진실 또는 거짓입니다. 아니면 적어도 boolean 값은 일치해야한다.
2. A ? 는 우리의 conditional(조건부)과 true value 값을 구분합니다. ? 와 : 사이에 있는 모든 condition(조건)은 true(참)이면 실행된다.
3. 마지막으로 : 은 조건의 상태가 거짓으로 평가되면 : 이후에 나오는 코드는 실행된다.

예시 — Driver(운전자)의 나이

다시 처음 예시를 살펴보자:

let person = {
name: 'tony',
age: 20,
driver: null
};person.driver = person.age >=16 ? 'Yes' : 'No';

가장 중요한 것은 operations(연산자) 순서이다. 코드를 실행하는 순서를 시각화하는데 도움이 되는 parenthesis(괄호)를 추가해보자.

person.driver = ((person.age >=16) ? 'Yes' : 'No';)

시각화하면, 우리의 conditional(조건부) 가 person.age > = 16 값이 참인지 거짓인지 처음으로 확인한다.

20은 16보다 크기 때문에 true(참)으로 평가한다. 지금 우리는 여기까지 왔다:

person.driver = (true ? 'Yes' : 'No';)

우리의 conditional(조건부)의 condition(조건) 이 true 이므로, ? 와 : 사이에 있는 값이 리턴된다. 해당 예시같은 경우에는 ‘Yes’ 결과 값이 나온다.

리턴 값이 있기에 마지막으로 해야할 일은 변수와 동일하게 설정하는 것이다.

person.driver = 'Yes';

축하합니다! 이제 좀더 복잡한 예시를 살펴봅시다.

예시 — 학생할인

해당 예시에서 우리가 영화관을 위해 코딩을 한다고 합시다. 영화관은 두 가지의 표 가격을 제시합니다: 일반인은 $12 그리고 학생은 $8 으로 가격을 제시합니다.

구매하는 사람이 학생인지 아닌지의 여부를 추적할 변수를 생성합시다:

let isStudent = true;

해당 변수를 통해 우리는 ternary operator( 삼항 연산자) 를 사용하여 가격을 변동할 수 있습니다.

let price = isStudent ? 8 : 12
console.log(price);
// 8

isStudent boolean 이 true(참) 이므로, 8 값이 다중 삼항(ternary)으로부터 price 변수로 리턴됩니다.

예시 — Nested Ternary

하지만, 만약 영화관에서 학생과 노인에게 할인을 한다면 어떻게 할까요?

우리는 다양한 조건을 실험하기 위해서 nest(네스트) 된 ternary operator( 삼항 연산자) 사용할 수 있습니다.

해당 시나리오를 확인하면 티켓은 : 일반인은 $12, 학생은 $8 그리고 노인은 $6 입니다.

노인인구를 추정하는 코드는 다음과 같습니다:

let isStudent = false;
let isSenior = true;let price = isStudent ? 8 : isSenior ? 6 : 10console.log(price);
// 6

해당 예시는 복잡합니다. 그러니 이를 짧게 나누어봅시다.

1. 우선, 우리는 티켓 구매자가 학생인지 알아봐야합니다. isStudent 가 false(거짓) 이므로, 첫 번째 : 이후의 코드만 실행합니다. : 이후에는 새로운 조건부가 있습니다.
2. 두번째 조건부는 isSenior 를 확인해봅니다. — 이가 true(참) 이기 때문에 ? 이후 : 이전의 코드만 실행합니다.
3. price 는 6의 값이 할당된다.

예시- Multiple operations (다수의 조건)

Multiple operations(다수의 조건) 를 ternary 안에 실행할 수 있습니다. 이를 위해, 우리는 쉼표로 조건을 나누어야 합니다. 또한, 추가적으로 괄호를 사용하여 코드를 그룹화 할 수 있습니다.

let isStudent = true;
let price = 12;isStudent ? (
price = 8,
alert('Please check for student ID')
) : (
alert('Enjoy the movie')
);

위의 예시에서 우리의 영화 price (가격) 는 이미 $12 로 지정되어 있습니다. 만약 isStudent 가 true(참) 이면 , 우리는 price 를 $8로 조정하고 판매자에게 학생증 확인하는 alert (경고)를 보냅니다. 만약 isStudent 가 false(거짓) 이면, 위의 코드는 생략하고, 영화를 즐기라는 경고가 나옵니다.

 

medium.com/@saerombang11/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%82%BC%ED%95%AD-%EC%97%B0%EC%82%B0%EC%9E%90-conditional-operator-%EC%84%A4%EB%AA%85%ED%95%98%EB%8B%A4-ac8afdb294ab