JSP - JavaScript의 연사자 사용 (2022-09-16)
1. 서론
자바스크립트 또한 쓸 수 있다! 연산자를...
다들 알고 있겠지만 그래도 한번 복습하는 그런 느낌적인 느낌으로 자바스크립트 연산자에 대해
알아보도록 하자.
2. 본론
2-1. 증감연산자 및 산술연산자
증감연산자는 변수 앞이나 뒤에 ++나 --를 붙여 사용한다.
++변수 이면 변수를 1증가 시킨 후, 변수를 사용.
변수++ 이면 변수를 사용한 후 1증가
--변수 이면 변수를 1감소 시킨 후, 변수를 사용
변수-- 이면 변수를 사용한 후 1감소
산술연산자는 누구나 알고 있다 싶이 +,-,*,/(%)를 해주는 사칙연산을 말한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex02</title>
</head>
<body>
<script>
var data = 1;
data++;
document.write("data++ = " + data + "<br>");
data--;
document.write("data-- = " + data + "<br>");
var tmp;
tmp = 16 % 3;
document.write("16 % 3 = " + tmp + "<br>");
tmp = data * 5;
document.write("data * 5 = " + tmp + "<br>");
</script>
</body>
</html>
2-2. 논리 연산자
논리 연산자는 두 값의 비교를 위한 연산자 이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex03</title>
</head>
<body>
<script>
var x = 5, y = "5";
document.write(typeof (x + y) + "<br>"); //자료형과 문자형을 더하게 되면 대개 type은 문자열(String)이 나온다.
// 비교 연산
document.write("x > y : " + (x > y) + "<br>");
// 두 값이 같은지 비교
document.write(" x == y : " + (x == y) + "<br>");
// 두 값과 타입이 같은지 비교
document.write("x === y : " + (x === y) + "<br>");
// 두 값이 다른지 비교
document.write("x != y : " + (x != y) + "<br>");
// 두 값이 다르거나 또는 타입이 다른지 비교
document.write("x !== y : " + (x !== y) + "<br>");
</script>
</body>
</html>
2-3. 관계 연산자 및 조건 연산자
관계 연산자는 or, and를 나타내는 연산자로
or(||)이면 변수1이나 변수2 중 하나라도 참이면 참을 도출하고,
and(&&)이면 변수1과 변수2가 동시에 참이여야 참을 도출해낸다.
조건연산자는 (변수1 > 변수2)? 변수1 : 변수2; 라는 형태로 ?앞에 조건식이 참이면 변수1의 값을 도출하고,
조건식이 거짓이라면 변수2의 값을 도출해내는 형태이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex04</title>
</head>
<body>
<script>
var x = 5, y = 7;
document.write("(x < 10 && y > 10) : " + (x < 10 && y > 10) + "<br>");
document.write("(x < 10 || y > 10) : " + (x < 10 || y > 10) + "<br>");
document.write("!(x < 10 && y > 10) : " + !(x < 10 && y > 10) + "<br>");
result = (x > y) ? x : y; // 조건 연산
document.write("큰 값 : " + result + "<br>");
result = (x > y) ? x - y : y - x; // 조건 연산
document.write("큰 값 - 작은 값 : " + result + "<br>");
</script>
</body>
</html>
2-4. 대입연산자
예를 들어, "변수1+=어떤 숫자" 라는 수식이 있다면 '왼쪽항에 오른쪽항을 더해 결과를 도출한다.' 라는 뜻이다.
좀 더 쉽게 풀어 말하자면 '변수1 = 변수1+어떤 숫자' 라고 말할 수 있겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05</title>
</head>
<body>
<script>
var x1 = x2 = x3 = x4 = x5 = 10;
var st = "Hello ";
x1 += 1;
document.write("x1 : " + x1 + "<br>");
x2 -= 2;
document.write("x2 : " + x2 + "<br>");
x3 *= 3;
document.write("x3 : " + x3 + "<br>");
x4 /= 4;
document.write("x4 : " + x4 + "<br>");
x5 %= 5;
document.write("x5 : " + x5 + "<br>");
st += "Javascript";
document.write("st : " + st + "<br>");
</script>
</body>
</html>
코드와 결과를 보면서 조금 의아한 결과가 하나 있을텐데 x4부분의 나누기 결과값이 이상하다.
자바스크립트는 자바와 달리 몫이 나누어 떨어질 때까지 나눗셈을 진행한다.
3. 결론
대입 연사자를 하면서 몫의 값을 도출하는 나누기를 확인해 봤는데 자바스크립트는 몫이 나누어 떨어질 때 까지 나눗셈을 진행하는 것을 알았다.
그래서 3으로 나눠봤는데 필자가 아는 거처럼 3.333333333333333....이 아니라 3.3333333333333335의 값이 도출되었다.
이런 값이 나오는 이유는 아마 메모리에서 이런 값을 도출하는게 아닐까 생각은 들지만 이번 시간에는 너무 깊에 파고들지 말고 어른의 사정이다. 라는 식으로 눈 가리고 귀 막고(?)가는게 좋겠다.