덧셈, 뺄셈, 곱셈, 나눗셈과 같은 연산처럼 프로그래밍을 할 때에도 다양한 연산자를 통한 계산 작업을 한다.
자바스크립트에서 사용하는 연산자에는 산술, 문자결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자가 있다.



산술 연산자


산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있다.
연산을 하려면 연산 대상 데이터가 반드시 2개 필요하다. 


var num1 = 20;
var num2 = 3;
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);





문자 결합 연산자


문자 결합 연산자는 연산 대상 데이터가 문자형이다. 여러개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다. 


var text1 = "안녕";
var text2 = "하세";
var text3 = "요";
var result;

result = text1 + text2 + text3;
document.write(result);





대입 연산자


대입 연산자(=)는 연산된 데이터를 최종적으로 변수에 저장할 사용한다.
복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말한다.


A=B -> A=B
A+=B -> A=A+B
A=B -> A=AB
A/=B -> A=A%B



var num1 = 10;
var num2 = 3;

num1 += num2;   //num1 = num1 + num2;
document.write(num1, "<br>");

num1 -= num2;   //num1 = num1 - num2;
document.write(num1, "<br>");

num1 *= num2;  //num1 = num1 * num2;
document.write(num1, "<br>");

num1 %= num2;  //num1 = num1 % num2;
document.write(num1, "<br>");




HTML 태그들을 복합 대입 연산자를 이용하여 하나의 문자로 결합하려면 아래처럼 할 수 있다.


var t = "<table border='1'>";

t += "<tr>";
t += "<td>1</td><td>2</td><td>3</td>";
t += "<tr>";
t += "</table>";

document.write(t);





증감 연산자


증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)가 있고, 1씩 감소시키는 감소 연산자(–)가 있다.
증감 연산자는 앞에서 배운 연산자와는 다르게, 피연산자가 한개만 필요한 단항 연산자이다.
증감 연산자는 변수의 어느 위치에 오는지에 따라 결과값이 달라진다. 


var A = ++B;   //변수 B의 데이터를 1 증가시킨 뒤에 변수 A에 저장함
var A = B++;   //변수 A에 변수 B의 데이터를 저장하고난 뒤에 변수 B의 데이터를 1 증가시킴


var num1 = 10;
var num2 = 20;
var result;

num1--;
document.write(num1, "<br>");  //10에서 1 감소된 값인 9가 출력됨

num1++;
document.write(num1, "<br>");   //9에서 1 증가된 값인 10이 출력됨

result = num2++; 
document.write(result, "<br>");  //대입 연산자가 먼저 실행되고, 증가 연산자가 실행되기 때문에 20이 출력됨

result = ++num2;
document.write(result, "<br>");  //증가 연산자가 먼저 실행되고, 대입 연산자가 실행되기 때문에 22가 출력됨




비교 연산자


두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자이다. 연산된 결과의 값은 참 또는 거짓으로 논리형 데이터를 반환한다.


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는 다르다


==,!=와 ===,!==의 차이점으로 ==와 !=는 피연산자의 데이터 종류가 비교 연산자 실행결과에 영향을 미치지 않는다.
하지만 ===와 !==는 피연산자의 데이터 종류에 따라 결과가 달라진다.



var k = 10, m = "10";

k == 10(true)
m == 10(true)

k === 10(true)
m === 10(false)


변수 k에는 숫자형 데이터를, 변수 m에는 문자형 데이터를 저장한 뒤 두 변수를 모두 숫자 10과 같은지 비교했을 때, ==는 둘다 true를 반환하고 ===는 숫자형 데이터인 변수 k만 true를 반환한다.



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);




논리 연산자


논리 연산자에는 ||(or), &&(and), !(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와 비교한 후에 최종 결과값을 반환하게 된다.



삼항 조건 연산자


삼항 조건 연산자는 조건식의 데이터 결과에 따라 실행 결과가 달라진다.
삼항 조건 연산자는 연산한 결과 조건식의 만족 여부에 따라 실행하는 스크립트의 코드를 다르게 실행하고자 할 때 사용한다.


조건식 ? 실행문1 : 실행문2;


위의 조건식의 값이 true이면 실행문1을 실행하고, false이면 실행문2를 실행하게 된다.



var a= 10;
var b = 3;

var result = a>b ? "javascript" : "hello";
document.write(result);