산술 연산자 (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
▶ 항 : 연산이 실행 가능하기 위해 필요한 값이나 변수
연산자의 우선순위(operator precedence)와 결합 방향(associativity)
- 연산자의 우선순위 : 수식 내 여러 연산자가 함께 등장하는 경우, 어느 연산자가 먼저 처리될 것인지 결정
- 연산자의 결합 방향 : 수식 내 같은 우선순위의 연산자가 여러 개일 때, 어느 연산을 먼저 수행할 것인지 결정
- 자바스크립트 연산자의 우선순위표
우선순위 | 연산자 | 설명 | 결합 방향 |
1 | () | 묶음(괄호) | - |
2 | . | 멤버 접근 | 왼쪽->오른쪽 |
new | 인수 있는 객체 생성 | - | |
3 | () | 함수 호출 | 왼->오른 |
new | 인수 없는 객체 생성 | 오른->왼 | |
4 | ++ | 후위 증가 연산자 | - |
-- | 후위 감소 연산자 | - | |
5 | ! | 논리 NOT 연산자 | 오른->왼 |
~ | 비트 NOT 연산자 | 오른->왼 | |
+ | 양의 부호(단항 연산자) | 오른->왼 | |
- | 음의 부호(단항 연산자) | 오른->왼 | |
++ | 전위 증가 연산자 | 오른->왼 | |
-- | 전위 감소 연산자 | 오른->왼 | |
typeof | 타입 변환 | 오른->왼 | |
void | undefined 반환 | 오른->왼 | |
delete | 프로퍼티의 제거 | 오른->왼 | |
6 | ** | 거듭제곱 연산자 | 오른->왼 |
* | 곱셈 연산자 | 왼->오른 | |
/ | 나눗셈 연산자 | 왼->오른 | |
% | 나머지 연산자 | 왼->오른 | |
7 | + | 덧셈 연산자(이항 연산자) | 왼->오른 |
- | 뺄셈 연산자(이항 연산자 | 왼->오른 | |
8 | << | 비트 왼쪽 시프트 연산자 | 왼->오른 |
>> | 부호 비트를 확장하면서 비트 오르쪽 시프트 | 왼->오른 | |
>>> | 브호 비트를 확장하지 않고 비트 오른쪽 시프트 | 왼->오른 | |
9 | < | 관계 연산자(보다 작은) | 왼->오른 |
<= | 관계 연산자(보다 작거나 같은) | 왼->오른 | |
> | 관계 연산자(보다 큰) | 왼->오른 | |
>= | 관계 연산자(보다 크거나 같은) | 왼->오른 | |
instanceof | 인스턴스 여부 판단 | 왼->오른 | |
10 | == | 동등 연산자 | 왼->오른 |
=== | 일치 연산자 | 왼->오른 | |
!= | 부등 연산자 | 왼->오른 | |
!== | 불일치 연산자 | 왼->오른 | |
11 | & | 비트 AND 연산자 | 왼->오른 |
12 | ^ | 비트 XOR 연산자 | 왼->오른 |
13 | | | 비트 OR 연산자 | 왼->오른 |
14 | && | 논리 AND 연산자 | 왼->오른 |
15 | || | 논리 OR 연산자 | 왼->오른 |
16 | ?: | 삼항 연산자 | 오른->왼 |
17 | = | 대입 연산자(=,+=,-=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=) | 오른->왼 |
18 | ... | 전개 | - |
19 | , | 쉼표 연산자 | 왼->오른 |
대입 연산자 (assignment operator)
- 변수에 값을 대입할 때 사용하는 이항 연산자
- 피연산자들의 결합 방향 : 오른쪽 -> 왼쪽
대입 연산자 | 설명 |
= | 왼쪽 피연산자에 오른쪽 피연산자 값을 대입 |
+= | 왼쪽 피연산자에 오른쪽 피연산자의 값을 더한 후, 결괏값을 왼쪽 피연산자에 대입 |
-= | " 뺀 후, " |
*= | " 곱한 후, " |
/= | " 나눈 후, " |
%= | " 나눈 후 , 그 나머지를 왼쪽 피연산자에 대입 |
var x = 10, y = 10, z = 10;
x = x - 5;
y -= 5; // y = y - 5 와 같은 표현임.
z =- 5; // z = -5 와 같은 표현임.
증감 연산자 (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
- 피연산자의 위치에 따라 달라지는 증감 연산자의 연산 순서
var x = 10;
var y = x-- + 5 + --x;
// x = 8, y = 23
비교 연산자 (comparison operator)
- 피연산자 사이 상대적 크기를 판단하여, 참(true)과 거짓(false)을 반환
- 두개의 피연산자를 가지는 이항 연산자
- 피연산자들의 결합 방향 : 왼쪽 -> 오른쪽
- 피연산자의 타입에 따른 비교 기준
- 두 피연산자가 숫자이면, 해당 숫자를 서로 비교
- 두 피연산자가 문자열이면, 문자열의 첫 번째 문자부터 알파벳 순서대로 비교
비교 연산자 | 설명 |
== | 두 피연산자의 값이 같으면 참을 반환 |
=== | 두 피연산가의 값이 같고 같은 타입이면 참을 반환 |
!= | 두 피연산자의 값이 같지 않으면 참을 반환 |
!== | 두 피연산자의 값이 같지 않거나 타입이 다르면 참을 반환 |
> | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환 |
>= | " 크거나 같으면 참을 반환 |
< | " 작으면 참을 반환 |
<= | " 작거나 같으면 참을 반환 |
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의 값은 문자열이므로 비교할 수 없음.
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
논리 연산자 (logical operator)
- 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환
- &&, || 연산자는 두 개의 피연산자를 가지는 이항 연산자이고, 피연산자의 결합 방향은 왼쪽 -> 오른쪽
- ! 연산자는 단항 연산자이며, 피연산자의 결합 방향은 오른쪽 -> 왼쪽
논리 연산자 | 설명 |
&& | 논리식이 모두 참이면 참을 반환 (논리 AND 연산) |
|| | 논리식 중 하나라도 참이면 참을 반환 (논리 OR 연산) |
! | 논리식 결과가 참이면 거짓, 거짓이면 참을 반환 (논리 NOT 연산) |
- 논리 연산자의 모든 결과를 보여주는 진리표(truth table)
A | B | A && B | A || B | !A |
true | true | true | true | false |
true | false | false | true | false |
false | true | false | true | true |
false | false | false | false | true |
var x = true, y = false;
document.write((x && y) + "<br>"); // false (논리 AND 연산)
document.write((x || y) + "<br>"); // true (논리 OR 연산)
document.write(!x); // false (논리 NOT 연산)
비트 연산자 (bitwise operator)
- 논리 연산자와 비슷하지만, 비트(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. 피연산자가 하나라도 문자열이면, 문자열 결합을 수행
var x = 3 + 4; // 피연산자가 둘 다 숫자이면 덧셈 연산을 수행함.
var y = "좋은 " + "하루 되세요!" // 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.
var z = 12 + "월" // 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.
- 피연산자가 하나는 문자열이고 하나는 아니라면, 자바스크립트는 문자열이 아닌 피연산자를 자동으로 문자열을 변환한 후 문자열을 결합
> 삼항 연산자 (ternary operator)
- 유일하게 피연산자를 세 개 가지는 조건 연산자
- 문법 : 표현식 ? 반환값1 : 반환값2
- 물음표 앞의 표현식이 참이라면 반환값1을 반환, 거짓이면 반환값 2를 반환한다
- 짧은 if / else문 대신 사용 가능
var x = 3, y = 5;
var result = (x > y) ? x : y // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");
> 쉼표 연산자
- for문에서 사용하면, 루프마다 여러 변수를 동시에 갱신 가능
// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.
for (var i = 0, j = 9; i <= j; i++, j--) {
document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");
}
> 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);
> 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
> 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
> void 연산자
- 피연산자의 타입이 어떤 것이 오던지 언제나 undefined 값만을 반환
- 단항 연산자
- 피연산자의 결합 방향 : 오른쪽 -> 왼쪽
- 다음과 같이 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용된다
<a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a>
<a href="javascript:void(document.body.style.backgroundColor='yellow')">
이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
</a>
[참고자료] http://tcpschool.com/javascript/intro
'Web > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트 배열(array) : 생성 및 활용 (1) | 2021.08.03 |
---|---|
[JavaScript] 자바스크립트 제어문 : 조건문, 반복문, 루프 제어(label, continue, break) (0) | 2021.07.16 |
[JavaScript] 자바스크립트 타입 : 타입 변환 (0) | 2021.07.14 |
[JavaScript] 자바스크립트 타입 : 기본 타입, 변수 (0) | 2021.07.13 |
[JavaScript] 자바스크립트 기본 : 개요, 문법, 출력, 적용 (0) | 2021.07.11 |