JavaScript
연산자
연산자
이번시간은 연산자에 대해서 알아봅시다.
논리 연산자
논리 연산자는 참인지 거짓인지를 나태내어 줍니다.
종류
AND(&,&&)
OR(|,||)
XOR(^)
AND 연산자는 모든 값이 참 일때 참을 뱉어냅니다.
OR 연산자는 값중에 하나라도 참 일때 참을 뱉어 냅니다.
XOR 연산자는 서로 값이 다를때 참을 뱉고 서로 값이 같다면 거짓을 뱉습니다.
아래의 표를 보면 이해가 쉽습니다.
| A | B | AND (&, &&) | OR (|, ||) | XOR(^) |
| 0 (false) | 0 (false) | 0 (false) | 0 (false) | 0 (false) |
| 0 (false) | 1 (true) | 0 (false) | 1 (true) | 1 (true) |
| 1 (true) | 0 (false) | 0 (false) | 1 (true) | 1 (true) |
| 1 (true) | 1 (true) | 1 (true) | 1 (true) | 0 (false) |
위의 표를 보면 A가 거짓 B가 거짓 일때 AND연산자는 거짓을 알려주고 OR도 거짓 XOR도 거짓을 알려주는 구나 이렇게 이해 하시면 됩니다.
이유는 둘다 참일때 AND연산자는 참을 알려주고 OR는 하나라도 참이면 참을 알려주고 XOR는 서로 다를때 참을 알려주기 때문입니다.
증감 연산자
증감 연산자의 종류에는 2개가 있습니다.
증가를 나타내는 ++와 감소를 나타내는 --가 있습니다.
서로 각각 1을 증가시키거나 1을 감소 시키는 기능을 하는데요.
a라는 변수가 있다고 할때
앞에 위치하거나 뒤에 위치하거나 할 때의 차이점을 나타냅니다.
예를 들어
++a, a++, --a, a--
위와 같이 사용을 하는데요.
++a 는 먼저 자신을 1증가 시키고 다른 연산을 시작하며
a++ 는 먼저 다른 연산을 한후 자신을 1 증가 시킵니다.
소스를 통하여 비교를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
a = 10;
b = ++a;
document.write(b);
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
소스 설명
위의 소스를 설명하면 a 에 10을 대입 한 후 b에 ++a를 대입 했습니다.
++가 앞에 붙는 다면 먼저 자신을 1증가 시키고 다른 연산을 한다고 했죠? 즉 ++a일때
a의 값이 10이었는데 먼저 자기 자신을 1증가 시켜 11이 됩니다. 그 후 다른 연산인 b에 대입 하여 즉 이미 자기 자신이 1증가하여 11인 상태에서 b로 대입이 되어서 b의 값도 11이 됩니다.
그럼 이번엔 ++가 a의 뒤에 붙는 경우인 a++에 대해서 알아 봅시다.
<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
a = 10;
b = a++;
document.write(b);
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
소스 설명
위의 소스를 설명하면 a 에 10을 대입 한 후 b에 a++ 를 대입 했습니다.
++가 뒤에 붙는 다면 먼저 다른 연산을 하고 자신을 1증가 시킨다 했죠 즉 a++ 일때
a의 값인 10이 먼저 b에 대입 된 후 자기 자신을 1증가 시킵니다. 그러므로
그러므로 결과는 10이 나오게 됩니다.
논리 부정 !
논리 부정 ! 연산자는 true(참)을 false(거짓)으로 반대로 false(거짓)은 true(참)으로 바꾸어 줍니다.
그럼 다음 예제를 보면서 이해를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
a = true;
b = !a;
document.write(b);
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
소스 설명
위의 소스는 a에 true를 대입했습니다. 문자열이 아니므로 ""에 둘러 쌓여있지 않습니다.
그리고 변수 b에 !a를 대입 했습니다. !는 반대로 값을 변경하므로 true였던 a는 false가 된후 b에 대입됩니다. 그러므로 b의 값은 false가 됩니다.
관계연산자
관계 연산자는 초등학교시절 배운거라서 쉽습니다. 부등호 아시죠? ^^
관계 연산자의 종류는 다음과 같습니다.
<크다.
<= 크거나 같다.
> 작다
>= 작거나 같다
== 같다(===)
!= 같지 않다.(!==)
즉 3<4 라는 식이 있다면 거짓인 false를 출력 하게 됩니다.
그리고 4 < 3 이라는 식이 있다면 참인 true가 출력 됩니다.
같다에는 == 과 === 가 있죠. 서로 같으면 참을 보여줍니다.
같지 않다에는 !=과 !== 가 있죠 서로 같지 않으면 참을 보여줍니다.
== 과 === 의 차이 그리고 != 과 !== 의 차이는 무엇일까요?
== 은 값이 같다면 참이지만 ===은 값과 타입까지 같아야 참입니다.
!= 은 값이 다르면 참이지만 !==은 타입도 다르고 값도 달라야 참입니다.
여러 가지 식을 써서 한번 확인해보죠.
<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
document.write("10==1는"+(10==1));
document.write("<br />");
document.write("<br />");
document.write("10!=10는"+(10!=10));
document.write("<br />");
document.write("<br />");
document.write("20>40는"+(20>40));
document.write("<br />");
document.write("<br />");
document.write("20<40는"+(20<40));
document.write("<br />");
document.write("<br />");
document.write("50>=40는"+(50>=40));
document.write("<br />");
document.write("<br />");
document.write("20<=20는"+(20>=20));
document.write("<br />");
document.write("<br />");
document.write("40===40는"+(40===40));
document.write("<br />");
document.write("<br />");
document.write("'40'===40는"+('40'===40));
document.write("<br />");
document.write("<br />");
document.write("40==40는"+(40==40));
document.write("<br />");
document.write("<br />");
document.write("'40'==40는"+('40'==40));
document.write("<br />");
document.write("<br />");
document.write("30!==40는"+(30!==40));
document.write("<br />");
document.write("<br />");
document.write("'30'!==40는"+('30'!==40));
document.write("<br />");
document.write("<br />");
document.write("30!=40는"+(30!=40));
document.write("<br />");
document.write("<br />");
document.write("'30'!=40는"+('30'!=40));
document.write("<br />");
document.write("<br />");
document.write("30!==40는"+('40'!==40));
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
조건 연산자
변수 = 조건?true:false;
변수 = 조건?true:false; 조건이 true면 true를 대입하고 false면 false를 변수에 대입하는데요.
예를 들어,
number = 10>5?"number":"string";
위의 식을 보면 10>5가 크면 number라는 문자열을 number변수에 대입하고 아니라면 string라는 문자열을 대입하라는 것입니다. 10은 5보다 크므로 number이라는 문자열을 number 변수에 대입합니다.
다른 예
number = 10>5?10:5;
위의 식은 10이 5보다 크면 10을 number에 대입 아니면 5를 대입하는 식입니다. 이제 아시겠죠?
타이핑 해가며 연습해 보세요.
<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
number = 10>5?10:5;
document.write(number);
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
연산자에 강좌는 이것을 끝내겠습니다. ^^
