연산자
연산자란?
자바스크립트 프로그래밍에서 사용하느 연산자에는 산술, 문자 결합, 대입(복합대입),
증감, 비교, 논리, 삼항 조건 연산자가 있습니다. 예를 들어 자신의 평균 체중을 구할 때 빼고 곱하는
작업 등은 산술 연산자를 이용합니다. 그리고 이렇게 빼기, 더하기, 곱하기, 나누기, 비교 등을 하는 일련의 작업을
연산 작업이라 합니다. 그러면 다양한 연산자의 종류에 대해 자세히 알아보겠습니다.
산술연산자
기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)이 있습니다. 이밖에도 나머지(%), 거듭제곱(**)
연산 정도가 있는데, 일반적인 산술연산자는 피연산자 2개 사이에서 이항 연산자로도 활용되고, 특별히 ++(증가), --(감소)
연산자는 피연산자 앞이나 뒤에 붙으면서 단항 연산자로도 활용됩니다.
| 종류 | 기본형 | 설명 |
|---|---|---|
| + | A+B | 더하기 |
| - | A-B | 빼기 |
| * | A*B | 곱하기 |
| / | A/B | 나누기 |
| % | A%B | 나머지 |
다음 예제를 통해 더하기, 빼기, 곱하기, 나누기, 나머지 연산자를 어떻게 사용하는지 확인해보세요.
06: <script>
07: var num1 = 15;
08: var num2 = 2;
09: var result;
10: result = num1 + num2;
11: document.write(result, "<br>"); // 17
12: result = num1 - num2;
13: document.write(result, "<br>"); // 13
14: result = num * num2;
15: document.write(result, "<br>"); // 30
16: result = num / num2;
17: document.write(result, "<br>"); // 7.5
18: result = num % num2;
19: document.write(result, "<br>"); // 1
20: </script>
문자 결합 연산자
문자자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터입니다. 여러 개의 문자를 하나의
문자형 데이터로 결합할 때 사용합니다. 더하기 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면
다른 피연산자의 데이터는 자동으로 문자형 데이터로 변환되고 문자 결합이 이루어져 하나의 문자형 데이터를
반환합니다.
기본형 : 문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
ex) "do it" + "javscript" = "do it javascript";
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
er) "100" + 200 = "100200";
t1, t2, t3, t4 라는 변수에 문자와 숫자 데이터를 각각 넣고 하나의 문자 데이터로 결합하는 예제입니다.
06: <script>
07: var t1 = "학교종이";
08: var t2 = "땡땡땡";
09: var t3 = 8282;
10: var t4 = "어서 모이자";
11: var result;
12:
13: result = t1 + t2 + t3 + t4;
14: document.write(result); // "학교종이 땡땡땡 8282 어서 모이자"
15: //결과값: document.write(t1 += "땡땡땡"); // "학교종이 땡땡땡"
16: </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 |
예제를 보며 대입 연산자에 대해 알아보겠습니다.
06: <script>
07: var num1 = 10;
08: var num2 = 3;
09:
10: num1 += num2; //num1 = num1(10) + num2(3);
11: document.write(num1, "<br>"); // 13
12:
13: num1 -= num2; //num1 = num1(13) + num2(3);
13: document.write(num1, "<br>"); // 10
14:
15: num *= num2; //num1 = num1(10) + num2(3);
16: document.write(num1, "<br>"); // 30
17:
19: num %= num2; //num1 = num1(30) + num2(3);
20: document.write(num1, "<br>"); // 0
21: </script>
증감 연산자
증갑 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소
연산자(--)가 있습니다. 증감 연산자는 앞에서 배운 여산자와는 달리 피연산자가 한 개만 필요한단
항 연산자 입니다. 증감 연산자는 변수의 어느 위치에 오는가에 따라 결괏값이 달라집니다.
기본형 : 1. 변수의 값을 1만큼 감소시킵니다.
변수--; 또는 --변수;
2. 변수의 값을 1만큼 증가시킵니다.
변수++; 또는 ++변수;
다음은 증갑 연산자를 사용해 변수에 저장된 숫자를 증가하거나 감소하여 문서에 출력하는 예제입니다.
06: <script>
07: var num1 = 10;
08: var num2 = 20;
09: var result;
10:
11: num1--; // 9
12: document.write(num1, "<br>");
13:
14: num1++; // 10
15: document.write(num1, "<br>");
16:
17: result = num2++; // result:20, num2:21
18: document.write(result, "<br>");
19:
20: result = ++num2; // result:22, num2:22
21: document.write(num1, "<br>"); // 0
22: </script>
비교 연산자
두 데이터를 '크다' 작다, 같다'와 같이 비교할 때 사용하는 연산자 입니다. 연산된 결괏값은 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를 리턴합니다. |
다음 예제는 a,b,c,d라는 변수에 값을 각각 지정하고 위에서 배운 비교 연산자를 이용해 결괏값을 반환합니다.
06: <script>
07: var a = 10;
08: var b = 20
09: var c = 10;
10: var f = "20";
11: var result;
12:
13: result = a > b; // false
14: document.write(result, "<br>");
15: result = a < b; // true
16: document.write(result, "<br>");
17: result = a <= b; // true
18: document.write(result, "<br>");
19: result = b == f; // true
20: document.write(result, "<br>");
21: result = a != b; // true
22: document.write(result, "<br>");
23: result = b === f; // false
24: document.write(result, "<br>");
25: </script>
논리 연산자
논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결괏값을 반환합니다. ||(or) 연산자는 피연산자 중 하나만 true이면 true라는 결괏값을 반환합니다. 하지만 &&(and) 연산자는 피연산자 중 하나만 false이면 false라는 결괏값을 반환합니다. !(not)은 논리 부정 연산자로, 피연산자가 true이면 false라는 반대의 결괏값을 반환합니다.
논리 연산자의 종류는 표로 정리하면 다음과 같습니다.\
| 종류 | 설명 |
|---|---|
| ㅣㅣ | or 연산자라 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결괏갑을 변환합니다. |
| && | and 연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결괏갑을 반환합니다. |
| ! | not 연산자라 부르며, 단황 여산다입니다. 피연산자의 값이 true이면 반대로 false로 결괏값을 반환합니다. |