*위 내용은 <Do it! HTML+CSS+자바스크립트 웹 표준의 정석> 책을 기반으로
공부하면서 작성되었습니다.

연산자란?

연산자(Operator)란 프로그램에서 특정한 동작을 하도록 지시하는 기호를 말한다.
프로그래밍에서 '연산'이란 사칙연산은 물론, 문자열과 문자열을 연결해서
새로운 문자열을 만들고 값의 크기를 비교하는 등 여러 가지 동작을 의미한다.

산술 연산자

산술 연산자는 우리가 흔히 수학 계산을 할 대 사용하는 연산자를 말한다.
연사낮의 왼쪽이나 오른쪽에 있는 연산 대상이 '피연산자'라고 하는데,
산술 연산자에서 피연산자는 숫자나 변수가 온다.
예를 들어보자.

currentYear - birthYear + 1

해당 식에서 currentYear, birthYear, 1 이 연산 대상이자 '피연산자'이다.
또한 피연산자를 제외한 더하기(+), 빼기(-)는 '연산자'라고 지칭한다.
자바스크립트의 산술 연산자는 다음과 같으며, 피연산자는 하나 또는 2개를 사용한다.

*자료 출처: <Do it! HTML+CSS+자바스크립트 웹 표준의 정석>

자주 헷갈리는 나누기(/), 나머지 연산자(%)를 위주로 짚어보자.
우선 나누기 연산자의 결괏값은 나눈 값 자체이며,
나머지 연산자의 결괏값은 나눈 후에 남은 나머지 값이 된다.

예를 들어, 다음 연산식에서 numberOne은 15를 2로 나눈 몫인 7이 되고,
numberTwo는 15를 2로 나눈 나머지인 1이 된다.

var numberOne = 15 / 2; //numberOne은 7입니다.
var numberTwo = 15 % 2; //numberTwo는 1입니다.

할당 연산자

할당 연산자(assignment operator)는 연산자의 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자로 대입 연산자라고도 불린다. 변수에 값을 할당하거나 연산식의 결과를 변수에 저장할 때, 할당 연산자를 사용한다.

자바스크립트에서는 할당 연산자와 산술 연산자를 합쳐 하나의 할당 연산자로 표시할 수 있으며 자바스크립트에서 사용하는 할당 연산자는 다음과 같다.

연결 연산자

연결 연산자는 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자이다.
연산자 기호로 사칙연산의 더하기 연산자와 똑같은 '+' 기호를 사용한다.
연결 연산자는 문자열끼리 연결한다고 하여 문자열 연산자라고도 불린다.

예를 들어, 나이 계산 프로그램에서 2개의 변수 birthYear와 age
그리고 문자열을 묶어서 화면에 출력하면 다음과 같이 document.wirte()의 괄호 안에 변수 2개와 문자열 2개를 연결 연산자 '+'로 합치면 하나의 문자열이 출력된다.

document.write(birthYear + "년에 태어난 사람의 나이는" + age + "세입니다.");

비교 연산자

비교 연산자(comparison operatiors)는 피연산자 2개의 값을 비교해서 참이나 거짓으로 결괏값을 반환하며, 주로 두 값을 비교하므로 어떠한 조건을 체크할 때 사용한다. 자바스크립트에서 사용하는 비교 연산자는 다음과 같다.

헷갈리는 비교 연산자를 예시를 통해 익숙하게 만들어보자.
위의 표에서 피연산자가 서로 같은지 다른지 비교하는 연산자는
두 그룹으로 나뉘게 된다. 바로 =, != 연산자와 ===, !== 연산자이다.

딱봐도 비슷해보이기에 그 차이점을 확실히 기억해보도록 하자.
우선, == 연산자와 != 연산자는 피연산자의 자료형을 자동으로 변환해서 비교한다.
아래 식에서 숫자 3과 문자열 "3"을 비교하면 왼쪽의 숫자 3을 문자열로 변환해서 비교한다. 따라서 첫 번째 식의 결과는 true, 두 번째 식의 결과는 false가 된다.

3 == "3" // true
3 != "3" // false

반면에, === 연산자와 !== 연산자의 자료형을 변환하지 않는다.
따라서 아래 식에서 숫자 3과 문자열 "3"의 값과 자료형을 모두 비교해서
결과를 보여준다.

3 === "3" // false
3 !== "3" // true

따라서 프로그램에서 값을 비교할 때, 자료형을 자동으로 변환하지 않기 위해
=== 연산자와 !== 연산자를 더 많이 사용하게 된다.

비교 연산자는 숫자 뿐만 아니라, 문자열도 서로 비교할 수 있다.
피연산자가 숫자라면 크기를 비교하기 쉽지만 피연산자가 문자열이라면
문자열에 있는 문자들의 아스키 값을 비교해서 결정한다는 사실! 꼭 기억해두자.

"javascript" > "Javascript" // true (소문자 아스키값 > 대문자 아스키값)

예를 들어, 다음과 같은 문자열을 서로 비교한다고 하면,
소문자 아스키값이 대문자 아스키값보다 크므로 "j"와 "J"를 비교하여 true를 출력하게 되는 것이다.

논리 연산자

논리 연산자는 불리언(boolean) 연산자라고도 하며, true, false를 처리하는 연산자이다.

즉, true, false 자체가 피연산자인 연산자이며, 논리 연산자는 주로 프로그램에서
조건을 체크할 때 사용하며, 자바스크립트에서 사용하는 논리 연산자로 다음과 같이 총 3가지이다.

*자료 출처: <Do it! HTML+CSS+자바스크립트 웹 표준의 정석>