Skip to content

3. 연산자(Operator)

1. 키워드

  • 연산자(Operator)
  • 산술 연산자(Arithmetic Operator)
  • 대입 연산자(Assignment Operator)
  • 증감 연산자(Increment and Decrement Operator)
  • 비교 연산자(Comparison Operator)
  • 논리 연산자(Logical Operator)
  • 비트 연산자(bitwise Operator)
  • 문자열 결합 연산자
  • 삼항 연산자(Ternary Operator)
  • ,(쉼표) 연산자
  • delete 연산자
  • typeof 연산자
  • instanceof 연산자
  • void 연산자


2. 연산자

1) 산술 연산자

  • 산술 연산자는 사칙 연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자이다.
  • 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.


Note

  • 항이란 해당 연산의 실행이 가능하기 위해 필요한 값이나 변수를 의미한다.
  • 따라서 이항 연산자란 해당 연산의 실행을 위해서 두 개의 값이나 변수가 필요한 연산자를 의미한다.


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


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) 대입 연산자

  • 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.
  • 또한, 앞서 살펴본 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재한다.


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


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


3) 증감 연산자

  • 증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자이다.
  • 이 연산자는 피연산자가 단 하나뿐인 단항 연산자이다.


  • 증감 연산자는 해당 연산자가 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서 및 결과가 달라진다.


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


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


4) 비교 연산자

  • 비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다.
  • 비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.


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


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


1] 피연산자가 둘 다 숫자면, 해당 숫자를 서로 비교한다.

2] 피연산자가 둘 다 문자열이면, 문자열의 첫 번째 문자부터 알파벳 순서대로 비교한다.


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


  • 위의 세 번째 연산에서 변수 x의 값은 숫자이고, 변수 a의 값은 문자열이다.
  • 비교 연산자 <는 x의 값이 a의 값보다 작을 때만 참을 반환하고, 나머지 경우에는 전부 거짓을 반환하는 연산자이다.
  • 따라서 타입이 서로 달라 비교할 수 없는 경우에는 참의 조건을 만족하게 하지 못하므로, 언제나 거짓(false)만을 반환하게 된다.


5) 논리 연산자

  • 논리 연산자는 주어진 논리식을 판단하여, 참(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 연산)


6) 비트 연산자

  • 비트 연산자는 논리 연산자와 비슷하지만, 비트(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비트씩 이동시키는 연산이다.
  • 따라서 그 결괏값은 처음 값에 2를 곱한 것과 같게 된다.
  • 반대로 두 번째 연산은 비트를 전부 오른쪽으로 1비트씩 이동시키는 연산이다.
  • 따라서 그 결괏값은 처음 값에 2를 나눈 것과 같게 된다.


7) 문자열 결합 연산자

  • 자바스크립트에서 +(덧셈) 연산자는 피연산자의 타입에 따라 두 가지 다른 연산을 수행한다.


1] 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행한다.

2] 피연산자가 하나라도 문자열이면, 문자열 결합을 수행한다.


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


Note

  • 피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 자바스크립트는 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행한다.


8) 삼항 연산자

  • 삼항 연산자는 유일하게 피연산자를 세 개나 가지는 조건 연산자이다.


  • 삼항 연산자의 문법은 다음과 같다.


표현식 ? 반환값1 : 반환값2;


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


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


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


9) ,(쉼표) 연산자

  • , 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신할 수 있다.


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


10) delete 연산자

  • delete 연산자는 피연산자인 객체, 객체의 프로퍼티 또는 배열의 요소 등을 삭제해 준다.


  • 피연산자가 성공적으로 삭제되었을 경우에는 참(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);


11) typeof 연산자

  • typeof 연산자는 피연산자의 타입을 반환한다.
  • 이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.


  • 자바스크립트에서 많이 사용하는 값과 그 값에 대한 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


12) instanceof 연산자

  • 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


13) void 연산자

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


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


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

References