08. [JavaScript] 연산자
산술 연산자(arithmetic operator)
산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자이다.
산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.
항이란 해당 연산의 실행이 가능하기 위해 필요한 값이나 변수를 의미한다. 따라서 이항 연산자란 해당 연산의 실행을 위해서 두 개의 값이나 변수가 필요한 연산자를 의미한다.
| 산술연산자 | 예시 | 설명 |
| + | x + y | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 더함 |
| - | x - y | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌 |
| * | x * y | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 곱함 |
| / | x / y | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔 |
| % | x % y | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후 나머지 값을 반환 |
대입 연산자(assignment operaotr)
대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.
| 대입 연산자 | 예시 | 설명 |
| = | x = 5 | 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함 |
복합 대입 연산자
산술 연산자와 결합한 다양한 복합 대입 연산자가 존재한다.
| 복합 대입 연산자 | 예시 | 설명 |
| += | x += y | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함 |
| -= | x -= y | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함 |
| *= | x *= y | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함 |
| /= | x /= y | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함 |
| %= | x %= y | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함 |
증감 연산자(increment and decrement operator)
증감 연산자는 피연산자를 1씩 증가 혹은 감소 시킬때 사용하는 연산자이다.
| 증감 연산자 | 설명 |
| ++x | 먼저 피연산자의 값을 1증가시킨 후에 해당 연산을 진행함 |
| x++ | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴 |
| --x | 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함 |
| x-- | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴 |
비교 연산자(comparison operator)
비교 연산자는 피연산자의 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다.
| 비교 연산자 | 예시 | 설명 |
| == | x == y | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반홤함 |
| === | x === y | 왼쪽 피연산자와 오른쪽 피연산자의 값이 가고, 같은 타입이면 참을 반환함 |
| != | x != y | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함 |
| !== | x !== y | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함 |
| > | x > y | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반홤함 |
| >= | x >= y | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반홤함 |
| < | x < y | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함 |
| <= | x <= y | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함 |
논리 연산자(logical operator)
논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환한다.
| 논리 연산자 | 예시 | 설명 |
| && | x && y | 논리식이 모두 참이면 참을 반환함 (AND연산) |
| || | x || y | 논리식 중에서 하나라도 참이면 참을 반환함(OR연산) |
| ! | !x | 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함(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 |
문자열 결합 연산자
자바스크립트에서 덧셈(+) 연산자는 피연산자의 타입에 따라 2가지 연산을 수행한다.
1. 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행한다.
2. 피연산자가 하나라도 문자열이면, 문자열 결합을 수행한다.
|
1
2
3
|
var x = 5 + 6; // 11
var y = "hello" +" world"; // hello world
var z = 5 + "hello"; // 5hello
|
cs |
피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 자바스크립트는 문자열이 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행한다.
삼항 연산자(ternary operator)
삼항 연산자는 유일한 피연산자를 세 개나 가지는 조건 연산자이다.
Syntax
|
1
|
표현식 ? 반환값1 : 반환값2
|
cs |
물음표(?) 앞의 표현식의 결괏값을 따라 참(true)이면 반환 값 1을, 거짓(false)이라면 반환 값 2를 반환한다.
Example
|
1
2
3
|
var x = 10, y = 7;
var result = (x > y) ? x : y;
document.write("둘 중에 더 큰 수는" + result + "입니다.");
|
cs |
삼항 연산자는 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 해준다.
쉼표 연산자
for문 안에서 쉼표를 사용하면 여러 변수를 선언하거나 갱신할 수 있다.
|
1
2
3
4
|
// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.
for (var i = 0, j = 9; i <= j; i++, j--) {
document.write("i의 값 : " + i + " j의 값 : " + j + "<br>");
}
|
cs |
delete 연산자
delete 연산자는 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제해 준다.
피연산자가 성공적으로 삭제되었을 경우에는 참(true)을 반환하고, 삭제하지 못했을 경우에는 거짓(false)을 반환한다.
이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.
|
1
2
3
4
5
6
7
|
var arr = [1, 2, 3]; // 배열 생성
delete arr[2]; // 배열의 원소 중 인덱스가 2인 요소를 삭제함.
document.write(arr + "<br>"); // [1, 2, ]
// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
document.write(arr[2] + "<br>"); // undefined
// 배열의 요소를 삭제하는 것이지 배열의 길이까지 줄이는 것은 아님.
document.write(arr.length); // 3
|
cs |
typeof 연산자
typeof 연산자는 피연산자의 타입을 반환한다.
자바스크립트에서 많이 사용하는 값과 그 값에 대한 typeof 연사자의 결괏값은 다음과 같다.
| 값 | typeof 연산자의 결괏값 |
| 숫자, NaN | "number" |
| 문자열 | "string" |
| true, false | "boolean" |
| null | "object" |
| undefined | "undefined" |
| 함수 | "function" |
| 함수가 아닌 객체 | "object" |
|
1
2
3
4
5
6
7
|
typeof "string" // string
typeof 10 // number
typeof NaN // number
typeof false // boolean
typeof undefined // undefined
typeof new Date() // object
typeof null // object
|
cs |
instanceof 연산자
instanceof 연산자는 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인해 준다.
피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환한다.
|
1
2
3
4
5
6
|
var str = new String("this is string type.");
str instanceof Object; // true
str instanceof String; // true
str instanceof Array; // false
str instanceof Number; // false
str instanceof Boolean; // false
|
cs |
void 연산자
void 연사자는 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환한다.
이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.
|
1
2
3
4
|
<a href="javascript:void(0)">이 링크는 동작하지 않는다.</a>
<a href="javascript:void(document.body.style.backgroundColor='pink')">
이 링크도 동작하지 않지만 HTML 문서의 배경색을 핑크로 바꾼다.
</a>
|
cs |
void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용한다.