자바스크립트 삼항 연산자는 참/거짓에 따라 선택적으로 실행되는 조건문입니다. 삼항연산자는 조건문 ? 선택문1 : 선택문2 으로 구성됩니다. 조건문이 참이면 선택문1을 실행하고, 조건문이 거짓이면 선택문 2를 실행합니다.
자바스크립트 삼항연산자
3항 연산자의 구성
자바스크립트 삼항연산자 기능은 세 개의 항으로 연산을 처리합니다. 세 개의 항은 각각 조건문 하나와 선택문 두 개로 구성됩니다.
3항 연산자는 조건문이 true일 때 선택문1을 실행합니다. 조건문이 false일 때 선택문2를 실행합니다.
조건문과 선택문을 구분하는 기호는 물음표 ? 를 사용합니다. 선택문1과 선택문2를 구분하는 기호는 콜론 : 을 사용합니다.
조건문 ? 선택문1 : 선택문2세 개의 항 중 하나에 조건문이 들어가기 때문에 정확한 명칭은 조건부 삼항 연산자(Conditional Ternary Operator) 정도가 되겠습니다.
삼항연산자는 if 구문과 기능이 비슷합니다. if 조건문의 경우 몇 줄로 코드를 작성해야 하지만, 삼항연산자는 한 줄로 끝낼 수 있습니다.
조건문
자바스크립트에서 삼항연산자에서 각 섹터의 자료형은 자유입니다. 하지만 조건문 섹터는 자동으로 Boolean 형태가 됩니다. 그래서 논리형 자료가 아니여도 모든 답은 true 또는 false로 추출됩니다.
Boolean( ) ? 선택문1 : 선택문2예를 들어 비교 연산자나 논리 연산자로 구성된 문장은 답이 true/false로 반환될 것이므로 삼항연산자의 조건문에 적합한 형태입니다.
var x = 333, y = 3;
var z = x > y ? "x가 y보다 더 큽니다." : "x가 y보다 더 작습니다.";
document.write(z);선택문
자바스크립트 삼항연산자의 선택문은 형태가 자유롭습니다. 심지어 불리언 값이 와도 됩니다.
아래 예시에서는 조건문이 x > y로 true/false 형태를 반환합니다. 하지만 선택문1도 x <= y로 비교 연산자로 true/false로 답을 반환합니다. 선택문2도 x == y 비교 연산자로 true/false 답을 반환합니다.
var x = 3, y = 33;
var z = x > y ? x <= y : x == y;
document.write(z);자바스크립트 삼항 연산자 온도 영상/영하 출력
변수를 미리 지정
자바스크립트 변수 x는 1, 변수 y는 -1로 지정합니다. 그리고 변수 z에 삼항 연산자를 적용해봅니다.
x>y?"기온이 영상입니다.":"기온이 영하입니다.";물음표 ? 앞의 x > y는 조건문입니다.
물음표 ? 뒤의 "기온이 영상입니다." 파트는 선택문1입니다. 조건문이 true일 경우 실행됩니다. x는 y보다 크므로 선택문1이 출력됩니다.
var x = 1;
var y = -1;
var z = x > y ? "기온이 영상입니다." : "기온이 영하입니다.";
var k = x < y ? "기온이 영상입니다." : "기온이 영하입니다.";
document.write(z, "<br>");
document.write(k, "<br>");콜론 : 뒤의 "기온이 영하입니다."는 선택문2입니다. 조건문이 false가 아니므로 실행되지 않습니다.
변수 k의 경우 조건문이 x < y입니다. 이 답은 false이므로 선택문2의 "기온이 영하입니다." 문장이 출력됩니다.
변수를 사용자가 입력
자바스크립트 삼항연산자 기능에 prompt() 함수를 변수값에 사용하면, 변수를 미지수로 입력할 수 있습니다. prompt("현재 온도를 입력해주세요.", "")에서 괄호 안에 적힌 말로 새 창이 나오면서 사용자가 입력하게 유도할수 있습니다.
var x = prompt("현재 온도를 입력해주세요.", "");
var y = Number(x);
var z = x > 0 ? "현재 온도는 영상입니다." : "현재 온도는 영하입니다."
document.write(z);Number() 함수는 변수값의 자료형을 문자열에서 숫자열로 바꾸는 기능입니다. prompt()함수에서 사용자에게 입력을 받을 때 "" 따옴표를 이용해서 문자열로 데이터를 받았습니다. 그래서 숫자열로 바꿔주기 위해서 Number() 함수로 변경을 해줍니다.
Number() 함수에서 알파벳 N은 대문자임을 유의합니다.
점수 합격/불합격 출력
변수를 미리 입력
변수 x는 250을 입력합니다. 변수 y에 삼항 연산자를 적용합니다.
x>350?"합격입니다.":"불합격입니다.";x > 350 부분은 조건문입니다. 해당 조건문이 true이면 선택문1을 실행시키고 false이면 선택문2를 실행시킵니다.
x는 250이므로 false입니다. 따라서 선택문2인 "불합격입니다."가 출력됩니다.
var x = 250;
var y = x > 350 ? "합격입니다." : "불합격입니다.";
document.write(y);변수를 사용자가 입력
prompt() 함수를 변수값에 사용하면, 변수를 미지수로 입력할 수 있습니다.
var x = prompt("점수를 입력해주세요.", "");
var y = Number(x);
var z = x >= 72 ? "합격입니다." : "불합격입니다.";
document.write(z);prompt("문자열")로 문자로 숫자열을 받았으므로 Number()함수를 사용해서 숫자열로 다시 변경해주는 과정이 필요합니다.
숫자 양수/음수 맞추기
변수를 미리 입력
양수란 0보다 큰 정수, 소수, 무리수 등의 실수를 말합니다. 변수 x를 양의 소수인 9.5로 지정합니다.
변수 y에는 삼항 연산자를 적용해봅니다.
x>0?"양수입니다.":"0 또는 음수입니다.";x > 0은 조건식입니다. x가 0보다 크면 true이므로 선택문1인 "양수입니다."를 출력합니다. x가 0보다 작아서 false가 나오면 선택문2인 "0 또는 음수입니다."를 출력합니다.
변수 x의 값은 9.5이므로 0보다 큽니다. 따라서 조건문이 true이므로 선택문1인 "양수입니다."가 출력됩니다.
var x = 9.5;
var y = x > 0 ? "양수입니다." : "0 또는 음수입니다.";
document.write(y);변수를 사용자가 입력
prompt() 함수를 변수값에 사용하면, 변수를 미지수로 입력할 수 있습니다.
var x = prompt("숫자를 입력해주세요.","")
var y = Number(x);
document.write(x > 0 ? "양수입니다." : "0 또는 음수입니다.");prompt("문자열")로 문자로 숫자열을 받았으므로 Number()함수를 사용해서 숫자열로 다시 변경해주는 과정이 필요합니다.