j28. 자바스크립트 비교 및 논리 연산자

자바스크립트 비교 및 논리 연산자

자바스크립트 비교 (Comparison) 및 논리 연산자 (Logical Operators) 는 true 와 false 를 판별하기 위해 사용됩니다.

---

var x = 3; 이라고 할 때

값이 같은지; x == "3";

값뿐아니라 자료형도 같은지; x === "3";

값이 다른지; x != 3;

값이 같지 않거나 또는 자료형이 같지 않거나 한지; x !== 3;

값이 같지 않거나 또는 자료형이 같지 않거나 한지; x !== "3";

비교 연산자 (comparison operators) 는 변수나 값 들이 동일한지 다른지 알아보는 논리 문 (logical statements) 에 사용됩니다.

<p>var x = 3; 이라고 할 때</p>
<p>값이 같은지; x == "3"; <span id="equal_to"></span></p>
<p>값뿐아니라 자료형도 같은지; x === "3"; <span id="equal_value_and_equal_type"></span></p>
<p>값이 다른지; x != 3; <span id="not_equal"></span></p>
<p>값이 같지 않거나 또는 자료형이 같지 않거나 한지; x !== 3; <span id="not_equal_value_or_not_equal_type_1"></span></p>
<p>값이 같지 않거나 또는 자료형이 같지 않거나 한지; x !== "3"; <span id="not_equal_value_or_not_equal_type_2"></span></p>

<script>
var x = 3;
document.getElementById("equal_to").innerHTML = (x == "3");
document.getElementById("equal_value_and_equal_type").innerHTML = (x === "3");
document.getElementById("not_equal").innerHTML = (x != 3);
document.getElementById("not_equal_value_or_not_equal_type_1").innerHTML = (x !== 3);
document.getElementById("not_equal_value_or_not_equal_type_2").innerHTML = (x !== "3");
</script>

---

비교 연산자 (comparison operators) 는 조건 문 (conditional statements) 에서 값을 비교하여 그 결과에 따라 실행 여부를 결정할 때 사용됩니다.

<p><span id="messageText"></span></p>

<script>
var order = 3;

if (order > 2) {
messageText = "3개 이상 주문시 택배비 무료입니다.";
}
document.getElementById("messageText").innerHTML = messageText;
</script>

---

var a = 1; var b = 2; 라고 할 때

and 연산자; (a < 2 && b < 2);

or 연산자; (a === 2 || b === 2);

not 연산자; !(a > b);

논리 연산자 (Logical operators) 는 변수 또는 값 사이의 논리를 판단하는데 사용됩니다.

<p>var a = 1; var b = 2; 라고 할 때</p>

<p>and 연산자; (a < 2 && b < 2); <span id="andOperator"></span></p>
<p>or 연산자; (a === 2 || b === 2); <span id="orOperator"></span></p>
<p>not 연산자; !(a > b); <span id="notOperator"></span></p>

<script>
var a = 1; var b = 2;

document.getElementById("andOperator").innerHTML = (a < 2 && b < 2);
document.getElementById("orOperator").innerHTML = (a === 2 || b === 2);
document.getElementById("notOperator").innerHTML = !(a > b);
</script>

---

지하철 무료여부입니다. 당신의 나이를 입력하고 실행 버튼을 눌러 주세요.

자바스크립트 에도 조건 연산자 (conditional operator) 가 있는데, 어떤 조건에 따라 변수에 값을 배정해 줍니다.

변수이름 = (조건 식) ? 값1:값2 

<p>지하철 무료여부입니다. 당신의 나이를 입력하고 실행 버튼을 눌러 주세요.</p>

<input id="ageInput" value="66" />

<button onclick="myFunction()">실행 하기</button>

<p id="resultSubway"></p>

<script>
function myFunction() {
var age, freeOrNot;
age = document.getElementById("ageInput").value;
freeOrNot = (age < 66) ? "좀더 기다리셔야 합니다.":"지하철 무료입니다. 어르신. 참고로 1984년부터 현재와 같이 65세 이상의 고령자에게 100% 무임승차를 제공하고 있다고 합니다.";
document.getElementById("resultSubway").innerHTML = freeOrNot;
}
</script>

---

두개의 문자 타입의 숫자 비교; "99" > "100";

문자 타입과 숫자 타입의 비교; 99 > "100";

만일 자료의 형이 다른 데이터를 서로 비교한다면, 어떨 때는 잘못된 결과가 나올 수 있습니다.

숫자와 문자를 서로 비교할 때, 자바스크립트는 문자를 숫자로 변환한 다음 비교를 합니다.

다만, 빈 문자 "" 는 0 으로 변환하고, 또 숫자가 될 수 없는 문자 (non-numeric string) 는 항상 false 값을 갖는 NaN 으로 변환됩니다.

<p>두개의 문자 타입의 숫자 비교; "99" > "100"; <span id="twoStrings"></span></p>
<p>문자 타입과 숫자 타입의 비교; 99 > "100"; <span id="numberAndString"></span></p>
<script>
document.getElementById("twoStrings").innerHTML = "99" > "100";
document.getElementById("numberAndString").innerHTML = 99 > "100";
</script>

위에서 두개의 문자 타입의 숫자 비교할 때, "99" 가 "100" 보다 크게 되는 이유는, 알파벳 순서를 기준으로 9 가 1 보다 크기 때문입니다.

올바른 연산 결과를 얻기 위해서는, 변수는 비교하기 전에 적당한 자료 형으로 변환되어야 합니다.

---

지하철 무료여부입니다. 당신의 나이를 입력하고 실행 버튼을 눌러 주세요.

<p>지하철 무료여부입니다. 당신의 나이를 입력하고 실행 버튼을 눌러 주세요.</p>

<input id="ageInput2" value="66" />

<button onclick="mySubwayFunction()">실행 하기</button>

<p id="resultSubway2"></p>

<script>
function mySubwayFunction() {
var age, freeOrNot;
age = document.getElementById("ageInput2").value;
if (isNaN(age)) {
freeOrNot = "입력값 에러입니다. 숫자를 입력해 주세요.";
} else {
freeOrNot = (age < 66) ? "좀더 기다리셔야 합니다.":"지하철 무료입니다. 어르신. 참고로 1984년부터 현재와 같이 65세 이상의 고령자에게 100% 무임승차를 제공하고 있다고 합니다.";
}
document.getElementById("resultSubway2").innerHTML = freeOrNot;
}
</script>

---

[광고] Udemy 동영상 강의로 보기