연산자란?
연산자는 계산 작업을 하는 기호입니다. 자바스크립트에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연선자가 있습니다.
연산자의 종류
산술 연산자
산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다. 산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 합니다. 다음은 산술 연산자의 종류와 기본형을 정리한 표입니다.
산술 연산자의 종류와 기본형
| 종류 | 기본형 | 설명 |
|---|---|---|
| + | A+B | 더하기 |
| - | A-B | 빼기 |
| * | A*B | 곱하기 |
| / | A/B | 나누기 |
| % | A%B | 나머지 |
문자 결합 연산자
문자 결합 연산자는 피연산자가 문자형 데이터입니다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.
다음과 같이 더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형 변환되고 문자 결합이 이루어져 하나의 문자형 데이터를 반환합니다.
문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
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); // "학교종이 땡땡떙 8282 어서 모이자"
</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 |
| A %= B | A = A % B |
다음 예제를 보여 대입 연산자에 대해 알아보겠습니다.
<script>
var num1 = 10;
var num2 = 3;
num1 += num2; //num1 = num1(10) + num2(3)
document.write(num, "<br>"); //13
num1 -= num2; //num1 = num1(13) - num2(3)
document.write(num, "<br>"); //10
num1 *= num2; //num1 = num1(10) * num2(3)
document.write(num, "<br>"); //30
num1 %= num2; //num1 = num1(30) % num2(3)
document.write(num, "<br>"); //0
</script>
실행결과:
13
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>
실행결과:
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++;
다음은 증감 연산자를 사용해 변수에 저장된 숫자를 증가하거나 감소하여 문서에 출력하는 예제입니다.
<script>
var num1 = 10;
var num2 = 20;
var sesult;
num1--; //9
document.write(num1, "<br>");
num1++; //10
document.write(num1, "<br>");
result = num2++; // result:20 num2:21
document.write(result, "<br>");
result = ++num2; // result:22 num2:22
document.write(result, "<br>");
</script>
실행결과:
9
10
20
22
비교 연산자
두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자입니다. 연산된 결괏값은 true(참) 또는 false(거짓)로 논리형 데이터를 반환합니다. 다음은 비교 연산자의 종류입니다.
비교 연산자의 종류
| 종류 | 설명 | 비고 |
|---|---|---|
| A > B | A가 B보다 크다. | |
| A < B | A가 B보다 작다. | |
| A >= B | A가 B보다 크거나 같다 | |
| A <= B | A가 B보다 작거나 같다 | |
| A == B | A와 B는 같다 | 숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 같다면 true를 리턴합니다. |
| A != B | A와 B는 다르다 | 숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 다르다면 true를 리턴합니다. |
| A === B | A와 B는 같다. | 숫자를 비교할 경우 자료형과 숫자까지 같아야 true를 리턴합니다. |
| A !== B | A와 B는 다르다. | 숫자를 비교할 경우 자료형 또는 숫자 중에 한 개 이상 다르다면 true를 리턴합니다. |
비교 연산자 ==와 !=는 피연산자의 자료형(type)이 비교 연산자의 실행 결과에 영향을 미치지 않습니다..
예제
var k = 10, m = '10';
k == 10 //true
m == 10 //true
k === 10 //true
m === 10 //false
위 결과에서 볼 수 있듯이 ==과 != 연산자는 데이터의 type이 실행 결과에 영향을 미치지 않지만, ===과 !== 연산자는 비교 데이터의 type이 실행 결과에 영향을 미칩니다.
다음 예제로 비교 연산자에 대해 더 살펴보겠습니다.
<script>
var a = 10;
var b = 20;
var c = 10;
var f = "20";
var result;
result = a > b; //false
document.write(result, "<br>");
result = a < b; //true
document.write(result, "<br>");
result = a <= b; //true
document.write(result, "<br>");
result = b == f; //true
document.write(result, "<br>");
result = a != b; //true
document.write(result, "<br>");
result = b === f; //false
document.write(result, "<br>");
</script>
실행결과:
false
true
true
true
true
false
논리 연산자
논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결괏값을 반환합니다. ||(or)연산자는 피연산자중 하나만 true이면 true라는 결괏값을 반환합니다. 하지만 &&(and) 연산자는 피연산자 중 하나만 false이면 false라는 결괏값을 반환합니다. !(not)은 논리 부정 연산자로, 피연산자가 true이면 false라는 반대의 결괏값을 반환합니다.
논리 연산자의 종류
| 종류 | 설명 |
|---|---|
| || | or 연산자라 부르며, 피연산자중 값이 하나라도 true가 존재하면 true로 결괏값을 리턴합니다. |
| && | and 연산자라 부르며, 피연산자중 값이 하나라도 false가 존재하면 false로 결괏값을 리턴합니다. |
| ! | not 연산자라 부르며, 피연산자의 값이 true라면 false로 false라면 true를 리턴합니다. |