연산자
자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자가 있습니다.
예를 들어 자신의 평균 체중을 구할 때 빼고 곱하는 작업 등은 산술 연산자를 이용합니다. 그리고 이렇게 빼기, 더하기, 곱하기, 나누기, 비교 등을 하는 일련의 작업을 연산 작업이라
합니다.
다양한 연산자의 종류에 대해 자세히 알아보겠습니다.
산술연산자
산술 연산자에는 산수 시간에 배운 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다. 산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 합니다.
종류 | 기본형 | 설명 |
---|---|---|
+ | A+B | 더하기 |
- | A-B | 빼기 |
* | A*B | 곱하기 |
/ | A/B | 나누기 |
% | A%B | 나머지 |
<script>
var num1 = 15;
var num2 = 2;
var result;
result = num1 + num2;
document.write(result,"<br>");
result = num1 - num2;
document.write(result,"<br>");
result = num1 * num2;
document.write(result,"<br>");
result = num1 / num2;
document.write(result,"<br>");
result = num1 % num2;
document.write(result,"<br>");
</script>
결과 화면
13
30
7.5
1
문자 결합 연산자
문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터입니다.
여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.
다음과 같이 더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형 변환되고 문자
결합이 이루어져 하나의 문자형 데이터를
반환합니다.
문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
ex) "do it" + "javascript" = "do it javascript";
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
ex) "100" + 200 = "100200";
다음은 t1, t2, t3, t4라는 변수에 문자와 데이터를 각각 넣고 하나의 문자 데이터로 결합하는 예제입니다.
<script>
var t1 = "학교 종이";
var t2 = "땡땡땡";
var t3 = "8282";
var t4 = "어서 모이자";
var result;
result = t1 + t2 + t3 + t4;
document.write(result);
</script>
결과 화면
대입 연산자
대입 연산자는 연산된 데이터를 변수에 저장할 때 사용합니다. 복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다.
종류 | 풀이 |
---|---|
A = B | A = B |
A += B | A = A + B |
A *= B | A = A * B |
A /= B | A = A / B |
A %= B | A = A % B |
다음 예제를 보며 대입 연산제에 대해 알아보겠습니다.
<script>
var num1 = 10;
var num2 = 3;
num1 += num2;
document.write(num1,"<br>");
num1 -= num2;
document.write(num1,"<br>");
num1 *= num2;
document.write(num1,"<br>");
num1 %= num2;
document.write(num1,"<br>");
</script>
브라우저에서 위의 소스를 실행하면 다음과 같은 결과 화면이 나옵니다.
결과 화면
10
30
0
다음은 여러 개의 문자형 다이터로 저장된 HTML 태그를 복합 대입 연산자를 이용하여 하나의 문자로 결합한 다음 document.write(str);을 이용하여 화면에 출력하는 예제입니다.
<script>
var str = "<table border='1'>";
str += "<tr>";
str += "<td>1</td> <td>2 </td> <td>3 </td>";
str += "</tr>";
str += "</table>";
document.write(str);
</script>
여러 개의 문자형 데이터가 하나의 문자로 결합되어 변수 str에 저장됩니다. 즉, 한 개의 문자형 데이터로 결합됩니다.
var str = "문자1";
str += "문자2";
str += "문자3";
//문자1문자2문자3
str을 출력하면 문자가 아닌 태그로 이식되어 표가 출력됩니다.
결과 화면
1 | 2 | 3 |
증감 연산자
증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있습니다. 증감 연산자는 앞에서 배운 연산자와는 달리 피연산자가 한 개만 필요한 단항 연산자입니다. 증감 연산자는 변수의 어느 위치에 오는가에 따라 결과값이 달라집니다.
1. 변수의 값을 1만큼 감소시킵니다.
변수--; 또는 --변수;
2. 변수의 값을 1만큼 증가시킵니다.
변수++; 또는 ++변수;
1. 먼저 B의 값이 1만큼 증가되고 그 다음. 증가된 B의 값을 A에 대입합니다.
var A = ++B
2. 먼저 B의 값을 A에 대입하고, B의 값을 1만큼 증가시킵니다.
var A = B ++
비교 연산자
두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자입니다. 연산된 결과 값은 true(참) 또는 false(거짓)로 논리형 데이터를 반한홥니다. 다음은 비교 연산자의 종류입니다.
종류 | 설명 |
---|---|
A > B | A가 B보다 크다. |
A < B | A가 B보다 작다. |
A >= B | A가 B보다 크거나 같다. |
A <= B | A가 B보다 작거나 같다. |
A == B | A와 B는 같다. |
A != B | A와 B는 다르다. |
A === B | A와 B는 내용과 형태가 같다. |
A !== B | A 와 B는 내용과 형태가 다르다. |
논리 연산자
논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 논리 연산자가 논리형 데이터인 true 또는 false로 결과값을 반환합니다. ||(or) 연산자는 피연산자 중 하나만 true이면 true라는 결과 값을 반환합니다. 하지만 &&(and) 연산자는 피연산자 중 하나만 false이면 false라는 결과 값을 반환합니다. !(not)은 논리 부정 연산자로, 피연산자가 true이면 false라는 반대의 결과 값을 반환합니다.
종류 | 설명 |
---|---|
|| | or 연산자라 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결과 값을 반환합니다. |
&& | and 연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결과 값을 반환합니다. |
! | not 연산자라 부르며, 다항 연산자입니다. 피연산자의 값이 true이면 반대로 false로 결과 값을 반환합니다. |
연산자 우선순위
일반적인 산수를 연산할 때처럼 연산자에도 우선순위가 있습니다.
1. ()
2. 단항 연산자(--, ++, !)
3. 산술 연산자(*,/,%,+,-)
4. 비교 연산자(>, >=, <, <=, ==, ===, !==, !=)
5. 논리 연산자(&&, ||)
6. 대입(복합 대입) 연산자(=, +=, -=, *=, /=, %=)
가령, 이러한 우선순위를 고려하여 ++A*B<=C라는 코드를 실행한다면 먼저 변수 A에 데이터 1을 증가시키고 B를 곱한 다음 마지막으로 곱한 값을 C와 비교한 후 최종 결과 값을 반환합니다.