3. 연산자

# 산술 연산자

1. 산술 연산자(arithmetic operator)
: 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자
→ 두 개의 피연산자를 가지는 이항 연산자

→ 피연산자들의 결합 방향은 왼쪽에서 오른쪽
참고)
항 : 해당 연산의 실행이 가능하기 위해 필요한 값이나 변수
→ 이항 연산자 : 해당 연산의 실행을 위해서 두 개의 값이나 변수가 필요한 연산자

산술 연산자	설명
+	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함
-	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌
*	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함
/	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔
%	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환

var x = 10, y = 4;
document.write(x + y + "<br>"); // 14
document.write(x - y + "<br>"); // 6
document.write(x * y + "<br>"); // 40
document.write(x / y + "<br>"); // 2.5
document.write(x % y);          // 2

 

 

2. 연산자의 우선순위(operator precedence)와 결합 방향(associativity)
연산자의 우선순위 = 수식 내에 여러 연산자가 함께 등장할 때, 어느 연산자가 먼저 처리될 것인가를 결정

가장 높은 우선순위를 가지고 있는 괄호 연산자를 사용하여 연산자의 처리 순서를 변경  (출처 : https://www.tcpschool.com/javascript/js_operator_arithmetic)

연산자의 결합 방향 : 수식 내에 우선순위가 같은 연산자가 둘 이상 있을 때, 먼저 어느 연산을 수행할 것인가를 결정

연산자의 결합 방향에 따른 우선순위 결정 (출처 : 위의 그림과 동일)

 

3. 자바스크립트 연산자의 우선순위표
자바스크립트에서 연산자의 우선순위와 결합 방향 : 아래 링크의 표 참고
https://www.tcpschool.com/javascript/js_operator_arithmetic
→ 위의 표에서 나온 순서대로 우선순위가 빠른 연산자가 가장 먼저 실행됨
→ 같은 우선순위를 가지는 연산자가 둘 이상 있을 때에는 결합 순서에 따라 실행 순서가 결정

코딩교육 티씨피스쿨

 

# 대입 연산자

1. 대입 연산자(assignment operator)
→ 변수에 값을 대입할 때 사용하는 이항 연산자

→ 피연산자들의 결합 방향은 오른쪽에서 왼쪽
→ 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재

대입 연산자	설명
=	왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함.
+=	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입
-=	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입
*=	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입
/=	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입
%=	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입

var x = 10, y = 10, z = 10;
x = x - 5;
y -= 5; // y = y - 5 와 같은 표현임.
z =- 5; // z = -5 와 같은 표현임.

 

# 증감 연산자

1. 증감 연산자(increment and decrement operator)
→ 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자
→ 피연산자가 단 하나뿐인 단항 연산자
→ 증감 연산자는 해당 연산자가 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서 및 결과가 달라짐

증감 연산자	설명
++x	먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행
x++	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가
--x	먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행
x--	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소

var x = 10, y = 10;
document.write((++x - 3) + "<br>"); // x의 값을 우선 1 증가시킨 후에 3을 뺌.
document.write(x + "<br>");         // 11
document.write((y++ - 3) + "<br>"); // 먼저 y에서 3을 뺀 후에 y의 값을 1 증가시킴.
document.write(y);                  // 11

 

2. 증감 연산자의 연산 순서
: 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서가 달라짐

var x = 10;
var y = x-- + 5 + --x;
// x = 8, y = 23

위의 예제에서 수행되는 연산의 순서 (출처 :https://www.tcpschool.com/javascript/js_operator_incAndDec )

① : 첫 번째 감소 연산자(decrement operator)는 피연산자의 뒤쪽에 위치하므로, 덧셈 연산이 먼저 수행
② : 덧셈 연산이 수행된 후에 감소 연산이 수행 (x의 값 : 9)
③ : 두 번째 감소 연산자는 피연산자의 앞쪽에 위치하므로, 덧셈 연산보다 먼저 수행 (x의 값 : 8)
④ : 감소 연산이 수행된 후에 덧셈 연산이 수행
⑤ : 마지막으로 변수 y에 결괏값의 대입 연산이 수행 (y의 값 : 23)

 

# 비교 연산자

1. 비교 연산자(comparison operator)
→ 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환
→ 두 개의 피연산자를 가지는 이항 연산자

→ 피연산자들의 결합 방향은 왼쪽에서 오른쪽

비교 연산자	설명
==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환
===	왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환
!=	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환
!==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환
>	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환
>=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환
<	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환
<=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환

자바스크립트에서 비교 연산자는 피연산자의 타입에 따라 두 가지 기준으로 비교를 진행함

(1) 피연산자가 둘 다 숫자 : 해당 숫자를 서로 비교
(2) 피연산자가 둘 다 문자열 : 문자열의 첫 번째 문자부터 알파벳 순서대로 비교

var x = 3, y = 5;
var a = "abc", b = "bcd";
document.write((x > y) + "<br>");  // y의 값이 x의 값보다 크므로 false
document.write((a <= b) + "<br>"); // 알파벳 순서상 'a'가 'b'보다 먼저 나오므로 'a'가 'b'보다 작음.
document.write(x < a);             // x의 값은 숫자이고 a의 값은 문자열이므로 비교할 수 없음.

 

비교 연산자 < : x의 값이 a의 값보다 작을 때만 참을 반환 & 나머지 경우에는 전부 거짓을 반환하는 연산자
→ 타입이 서로 달라 비교할 수 없는 경우에는 참의 조건을 만족하게 하지 못하므로, 언제나 거짓(false)만을 반환

2. 동등 연산자와 일치 연산자
동등 연산자(==, equal)와 일치 연산자(===, strict equal) : 두 개의 피연산자가 서로 같은지를 비교
→ 두 연산자 모두 피연산자의 타입을 가리지는 않지만, 그 같음을 정의하는 기준이 조금 다름
 
동등 연산자(==) : 두 피연산자의 값이 서로 같으면 참(true)을 반환

    → 이때 두 피연산자의 타입이 서로 다르면, 비교를 위해 강제로 타입을 같게 변환
일치 연산자(===) : 타입의 변환 없이 두 피연산자의 값이 같고, 타입도 같아야만 참(true)을 반환

var x = 3, y = '3', z = 3;
document.write((x == y) + "<br>");  // x와 y의 타입이 서로 다르므로 타입을 서로 같게 한 후 비교를 하므로 true
document.write((x === y) + "<br>"); // x와 y의 타입이 서로 다르므로 false
document.write(x === z);            // x와 z은 값과 타입이 모두 같으므로 true

참고 ) 부등 연산자(!=)와 불일치 연산자(!==)는 각각 동등 연산자와 일치 연산자의 비교와 정확히 반대로 동작

 

# 논리 연산자

1. 논리 연산자(logical operator)
→ 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환
→ && 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연산자 & 피연산자들의 결합 방향은 왼쪽에서 오른쪽
→ ! 연산자는 피연산자가 단 하나뿐인 단항 연산자 & 피연산자의 결합 방향은 오른쪽에서 왼쪽

논리 연산자	설명
&&	논리식이 모두 참이면 참을 반환 (논리 AND 연산)
||	논리식 중에서 하나라도 참이면 참을 반환 (논리 OR 연산)
!	논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환 (논리 NOT 연산)

var x = true, y = false;
document.write((x && y) + "<br>"); // false (논리 AND 연산)
document.write((x || y) + "<br>"); // true  (논리 OR  연산)
document.write(!x);                // false (논리 NOT 연산)

 

# 비트 연산자

1. 비트 연산자(bitwise operator)
→ 논리 연산자와 비슷 but 비트(bit) 단위로 논리 연산을 수행
→ 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용

비트 연산자	설명
&	대응되는 비트가 모두 1이면 1을 반환 (비트 AND 연산)
|	대응되는 비트 중에서 하나라도 1이면 1을 반환 (비트 OR 연산)
^	대응되는 비트가 서로 다르면 1을 반환 (비트 XOR 연산)
~	비트를 1이면 0으로, 0이면 1로 반전시킴 (비트 NOT 연산)
<<	지정한 수만큼 비트를 전부 왼쪽으로 이동시킴 (left shift 연산)
>>	부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴 (right shift 연산)
>>>	지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨

var x = 15, y = 8, z = 15;
document.write((x << 1) + "<br>"); // 곱하기 2와 같으므로 15 * 2 = 30
document.write((y >> 1) + "<br>"); // 나누기 2와 같으므로 8 / 2 = 4
document.write(~z);                // 1의 보수와 같으므로 -(15+1) = -16

 

 

# 기타 연산자

1. 문자열 결합 연산자
자바스크립트에서 덧셈(+) 연산자는 피연산자의 타입에 따라 두 가지 다른 연산을 수행  
(1) 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행
(2) 피연산자가 하나라도 문자열이면, 문자열 결합을 수행

var x = 3 + 4;                   // 피연산자가 둘 다 숫자이면 덧셈 연산을 수행함.
var y = "좋은 " + "하루 되세요!" // 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.
var z = 12 + "월"                // 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.

 

참고) 피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때

: 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행

2. 삼항 연산자(ternary operator)
→ 삼항 연산자는 유일하게 피연산자를 세 개나 가지는 조건 연산자

문법
표현식 ? 반환값1 : 반환값2

 

→ 물음표(?) 앞의 표현식에 따라 결괏값이 참이면 반환값1을 반환하고, 결괏값이 거짓이면 반환값2를 반환

var x = 3, y = 5;
var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");

 

→ 삼항 연산자는 짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 만들어 줌

3. 쉼표 연산자
쉼표 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신 가능

// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.
for (var i = 0, j = 9; i <= j; i++, j--) {
    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");
}

 

 

4. delete 연산자
: 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제
→ 피연산자가 성공적으로 삭제되었을 경우에는 참(true)을 반환하고, 삭제하지 못했을 경우에는 거짓(false)을 반환
→ 피연산자가 단 하나뿐인 단항 연산자 & 피연산자의 결합 방향은 오른쪽에서 왼쪽

var arr = [1, 2, 3];          // 배열 생성
delete arr[2];                // 배열의 원소 중 인덱스가 2인 요소를 삭제함.
document.write(arr + "<br>"); // [1, 2, ]
// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
document.write(arr[2] + "<br>");
// 배열의 요소를 삭제하는 것이지 배열의 길이까지 줄이는 것은 아님.
document.write(arr.length);

 

 

5. typeof 연산자
: 피연산자의 타입을 반환
→ 피연산자가 단 하나뿐인 단항 연산자 & 피연산자의 결합 방향은 오른쪽에서 왼쪽

값	typeof 연산자의 결괏값
숫자, NaN	"number"
문자열	"string"
true, false	"boolean"
null	"object"
undefined	"undefined"
함수	"function"
함수가 아닌 객체	"object"

typeof "문자열"   // string
typeof 10         // number
typeof NaN        // number
typeof false      // boolean
typeof undefined  // undefined
typeof new Date() // object
typeof null       // object

 

 

6. instanceof 연산자
: 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인
→ 피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환
→ 두 개의 피연산자를 가지는 이항 연산자 & 피연산자들의 결합 방향은 왼쪽에서 오른쪽

var str = new String("이것은 문자열입니다.");
 
str instanceof Object;  // true
str instanceof String;  // true
str instanceof Array;   // false
str instanceof Number;  // false
str instanceof Boolean; // false

 

 

7. void 연산자
: 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환
→ 피연산자가 단 하나뿐인 단항 연산자 & 피연산자의 결합 방향은 오른쪽에서 왼쪽

<a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a>
 
<a href="javascript:void(document.body.style.backgroundColor='yellow')">
    이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
</a>

→ 위의 예제처럼 void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용됨