일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 취업반
- javascript
- for문
- 이벤트
- egov
- continue문
- Step2
- math
- 삼항연산자
- Youtube 올리버쌤
- 전자정부프레임워크
- 자바스크립트
- break문
- 유뷰브 올리버쌤
- 유튜브 올리버쌤
- 자바
- java
- JDK
- 올리버쌤
- spread operator
- position
- 한큐에자바
- Event
- 이벤트핸들러
- web
- 이클립스
- es6
- 한큐
- array
- hanq
- Today
- Total
호다닥
JavaScript: 삼항연산자란? 본문
JavaScript: What is the ternary operator
출처 : codeburst.io, Brandon Morelli
해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.
삼항연사자와 함께 쓰인 if문을 간결하게 하는 방법과 4가지 예시를 함께 배울 것이다.
전형적인 IF 문
우리가 사람들의 나이를 가지고 있고, 만약 그들이 운전을 할 수 있는 나이라면 true 값을 할당하고 그렇지 않으면 false를 할당하고자 한다. 그리고 운전을 하기 위해서는 16세 이상이어야 한다고 가정해보자. 이 시나리오에서 IF문은 아래와 같을 것이다.
let age = 20;
let driver;
if (age >= 16) {
driver = true;
} else {
driver = false;
}
그러나 위 코드와 완벽한 코드를 단 두줄로 작성할 수 있다면? IF문을 단 한줄로 작성할 수 있다면 어떨까?
let age = 20;
let driver = age >= 16 ? true : false;
driver = true; 의 같은 결과로 코드를 간결하게 만들었다. 이것이 정상적으로 작동할까?
삼항연산자
삼항연산자의 문법은 꽤나 간단한다.
// ternary operator
condition ? value if true : value if false
// typical if statement
if ( condition ) {
value if true;
} else {
value if false;
}
- 우리의 조건은 우리가 테스트하고자 하는 것을 의미한다. 여기에 ===, <=, >= 와 같은 조건문들이 들어간다.
- ?는 조건문과 true value를 나눈다. ?와 : 사이의 값은 조건문의 evaluate된 값이 true일 때 실행될 값을 의미한다.
- 마지막으로 : 은 콜론으로 조건문의 evaluate된 값이 false일 때 실행될 값을 의미한다.
let isStudent = true;
let price = isStudent ? '$8.00' : '$10.00'
console.log(price);
// '$8.00'
만약 영화관이 학생과 노인에게 할인을 제공한다면 어떻게 될까? 두가지 조건을 테스트하기 위해 삼항연산자를 중복하여 사용할 수 있다.
이 시나리오에서 기본적인 티켓의 가격은 $10이다. 학생가격은 $8이고, 노인 가격은 $6이 된다.
let isStudent = false;
let isSenior = true;
let price = isStudent ? '$8.00' : isSenior ? '$6.00' : '$10.00'
console.log(price);
// '$6.00'
위 예제코드에서는 물음표와 콜론이 많이 포함되어 있다. 이것들을 분석해보자.
- 먼저 우리는 isStudent를 테스트했다. ― 이 값이 false이기 때문에, : 다음의 코드가 실행된다 . : 다음에 우리는 새로운 조건문을 가지고 있다.
- 우리의 두번째 조건문 isSenior을 테스트한다. ― 이것인 true이기 때문에 ? 뒤, : 앞의 코드가 실행된다.
- price에는 '$6.00'이 할당되고 화면에 출력되게 된다.
let isStudent = false;
let price = '$10.00';
isStudent ? (
price = '$8.00',
alert('Please check for student ID')
) : (
alert('Enjoy the movie')
);
위 예시에서 영화의 price는 이미 $10로 할당되었다. 만약 isStudent가 true라면 우리는 가격을 $8로 낮출 것이다. 그리고나서 student ID를 체크하기 위한 alert 창을 띄울 것이다. 만약 isStudent가 false라면 우리는 'Enjoy the movie'를 alert할 것이다.
'Javascript' 카테고리의 다른 글
Math / String - Codeit (0) | 2018.09.30 |
---|---|
자바스크립트 DOM / Event - Udemy(부트스트랩4와 함께하는~) (0) | 2018.09.22 |
JavaScript: 숏서킷 평가가 뭐야? (0) | 2018.08.20 |
Javascript & spread 연산자 (0) | 2018.08.14 |
Javascript: 초보자를 위한 템플릿 리터럴 & 태그 기능 (0) | 2018.08.09 |