Home

오늘의 기억

[JavaScript] JS 기억하기 (7) :: 연산자


대입 연산자

대입 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 대입한다. 또한 대입 연산자와 동시에 연산을 하는 복합 대입 연산자도 존재한다.

이름 복합 대입 연산자
대입 연산 x = y x = y
덧셈 대입 x += y x = x + y
뺄셈 대입 x -= y x = x - y
곱셈 대입 x *= y x = x * y
나눗셈 대입 x /= y x = x / y
나머지 연산 대입 x %= y x = x % y
왼쪽 이동 연산 대입 x «= y x = x « y
오른쪽 이동 연산 대입 x »= y x = x » y
부호 없는 오른쪽 이동 연산 대입 x »>= y x = x »> y
비트 단위 논리곱 연산 대입 x &= y x = x & y
비트 단위 베타적 논리합 연산 대입 x ^= y x = x ^ y
비트 단위 논리합 연산 대입 x |= y x = x | y

비구조 대입

비구조 대입이라는 것은 ES6에 추가된 문법으로 객체나, 배열의 정형화된 값을 다른 변수에 대입하는걸 비구조화된 배열과, 객체를 이용해 수행하는 것을 뜻한다.

var arr = [1, 2, 3];

// 기존의 방식으로 배열을 변수에 대입
var one = arr[0];
var two = arr[1];
var three = arr[2];

// 비구조 대입을 이용하여 배열을 변수에 대입
var [one, two, three] = arr;

자세한 사항은 여기서 설명하겠다.


비교 연산자

비교 연산자는 피연산자들을 비교하고 비교에 따라 Boolean 값을 반환한다. 피연산자에는 숫자, 문자, Boolean, 객체를 사용할 수 있다. 즉 모든 데이터 타입이 비교가 가능하다.

문자열 같은 경우에는 유니코드 값을 사용하여 표준 사전 순서를 기반으로 비교를 하며, 만약 두 피연산자가 다른 데이터 타입인 경우, 피연산자를 적절한 타입으로 변환한다. 하지만 그 경우에는 원하는 비교가 이루어지지 않을 수도 있다. 따라서 자동 데이터 타입 변환을 하지 않고 비교를 하는 방법도 존재한다.

연산자 설명 true를 반환하는 예
같은(==) 피연산자들이 같은지 확인한다.
데이터 타입이 다른 경우 자동 변환을 함
3 == ‘3’
3 == 3
다른(!=) 피연산자들이 다른지 확인한다.
데이터 타입이 다른 경우 자동 변환을 함
1 != 2
1 != ‘2’
엄격히 같은(===) 피연산자들이 같은지 확인한다.
데이터 타입 자동 변환을 하지 않는다.
3 === 3
엄격히 다른(!==) 피연산자들이 다른지 확인한다.
데이터 타입 자동 변환을 하지 않는다.
3 !== ‘3’
3 !== 4
~보다 큰(>) 오른쪽 피연산자보다 왼쪽 피연산자가 더 큰 값인지 확인한다. 2 > 1
‘3’ > 1
~보다 크거나 같음(>=) 오른쪽 피연산자보다 왼쪽 피연산자가 더 크거나 같은 값인지 확인한다. 2 >= 2
3 >= 1
~보다 작음(<) 오른쪽 피연산자보다 왼쪽 피연산자가 더 작은 값인지 확인한다. 1 < 2
1 < ‘2’
~보다 작거나 같음(<=) 오른쪽 피연산자보다 왼쪽 피연산자가 더 작거나 같은 값인지 확인한다. 2 <= 2
1 <= 3

산술 연산자

산술 연산자는 숫자값을 피연산자로 갖고, 하나의 숫자 값을 반환한다.

연산자 설명 예제
덧셈(+) 이항 연산자이다.
두 피연산자를 더한 뒤 값을 반환한다.
1 + 2 = 3
뺄셈(-) 이항 연산자이다.
두 피연산자를 뺀 뒤 값을 반환한다.
3 - 2 = 1
곱셈(*) 이항 연산자이다.
두 피연산자를 곱한 뒤 값을 반환한다.
4 * 3 = 12
나눗셈(/) 이항 연산자이다.
두 피연산자를 나눈 뒤 값을 반환한다.
단, 0으로 나누는 경우 Infinity 값을 반환한다.
4 / 2 = 2
2 / 0 = Infinity
나머지(%) 이항 연산자이다.
두 피연산자를 나눈 뒤 나머지를 반환한다.
12 % 5 = 2
증가(++) 단항 연산자이다.
피연산자에 1을 더한다.
만약 연산자를 피연산자 앞에 사용하면, 1을 더한 값을 반환하고, 연산자를 피연산자 뒤에 사용하면, 1을 더하기 전 값을 반환한 뒤, 더한다
var a = 3;
console.log(a++); // 3
console.log(++a); // 5
감소(–) 단항 연산자이다.
피연산자에 1을 뺀다.
반환 값에 대해서는 증가 연산자와 유사하다.
var a = 5;
console.log(a–); // 5
console.log(–a); // 3
부정(-) 단항 연산자이다.
피연산자의 반대값(부호 바뀐값)을 반환한다.
var a = 5;
console.log(-a); // -5
숫자화(+) 단항 연산자이다.
피연산자가 숫자값이 아니라면 피연산자를 숫자로 변환한다.
+”3” // 3
+true // 1

비트단위 연산자

비트단위 연산자는 피연산자를 10진수, 16진수, 8진수로 취급하지 않고, 32비트의 집합으로 취급하여 연산한다.

연산자 사용법 설명
비트단위 논리곱 a & b 두 피연산자를 가지고 AND 연산을 수행한다.
비트단위 논리합 a | b 두 피연산자를 가지고 OR 연산을 수행한다.
비트단위 배타적 논리합 a ^ b 두 피연산자를 가지고 XOR 연산을 수행한다.
부정 ~ a 피연산자를 가지고 NOT 연산을 수행한다.
왼쪽 시프트 a « b a의 비트를 b의 비트 만큼 왼쪽으로 이동시킨 값을 반환한다.
오른쪽 시프트 a » b a의 비트를 b의 비트 만큼 오른쪽으로 이동시킨 값을 반환한다.
부호가 없는 오른쪽 시프트 a »> b a의 비트를 b의 비트 만큼 오른쪽으로 이동시킨 값을 반환한다.
단, 왼쪽 비어있는 공간에는 0으로 채운다.

논리 연산자

논리 연산자는 피연산자로 사용된 값 중 하나를 반환한다. 보통 Boolean 값으로 논리연산자를 사용하기 때문에 반환되는 값 또한 Boolean 값이다. 그러나 만약 Boolean 값이 아닌 값을 함께 사용하였을 때는 꼭 Boolean이 반환되지 않을 수 있다.

연산자 사용법 설명
논리곱(&&) expr1 && expr2 expr1이 false로 변환할 수 있으면 expr1을 반환한다.
만약 true인 경우 expr2를 반환한다.
논리합(||) expr1 || expr2 expr1이 true로 변환할 수 있으면 expr1을 반환한다.
만약 false인 경우 expr2를 반환한다.
부정(!) !expr expr이 true로 반환될 수 있으면 false를 반환한다.
그 외에 경우에는 true를 반환한다.

문자열 연산자

문자열 연산자는 연결 연산자(+) 단 하나를 가지고 있다. 이는 두 문자열 값을 연결하고, 합쳐진 새로운 문자열을 반환한다.

var tmp1 = 'abcd';
var tmp2 = 'efgh';

console.log(tmp1 + tmp2);	// abcdefgh

삼항 연산자

삼항 연산자는 JavaScript에서 세 개의 항을 사용하는 유일한 연산자이다.

조건 ? 1 : 2

먼저 조건을 Boolean 값으로 판단한 뒤, true이면 ‘값1’ 을 반환, false이면 ‘값2’ 을 반환한다.

var tmp = 1 > 2 ? 't' : 'f';

console.log(tmp);		// f

콤마 연산자

콤마 연산자는 두 피연산자를 비교하고, 마지막 피연산자의 값을 반환한다. 이 연산자는 주로 for 반복문 안에서 복수의 변수들을 선언할때 사용한다.

for( var i = 0, j = 9; i <= j; i++, j-- ) {
	...
}

하지만 for문 안에서 사용되는 콤마 연산자는 선언만 하는 경우이다. 콤마 연산자의 반환값을 사용하지는 않는다.

다음은 콤마 연산자의 반환값을 사용하는 경우이다.

var tmp1;
var tmp2;

console.log( (tmp1 = 10, tmp2 = 20) );		// 20

이런식으로 콤마 연산자를 어떤 변수나, 함수에 대입하는 경우에는 마지막 피연산자의 값을 반환한다.


단항 연산자

단항 연산자는 오직 하나의 피연산자를 가지고 연산하는 연산자이다.

delete

delete 연산자는 객체의 특정 프로퍼티를 삭제할때 사용되는 연산자이다.

var obj = {a:1, b:2, c:3, d:4};

delete obj.a;

console.log(obj);	// {b:2, c:3, d:4}

delete 연산자의 자체 반환 값은 실제 삭제 가능 여부에 따라 Boolean 값이 반환된다. 만약 내장 객체에 정의된 프로퍼티를 지우고자 할 때는 삭제가 불가능해 false 값이 반환된다.

typeof

typeof 연산자는 피연산자의 타입을 나타내는 문자열을 반환한다.

var myFun = new Function("5 + 2");
var shape = "round";
var size = 1;
var today = new Date();

console.log(typeof myFun);	// function
console.log(typeof shape);	// string
console.log(typeof size);	// number
console.log(typeof today);	// object
console.log(typeof true);	// boolean

void

void 연산자는 반환값이 무조건 undefined 인 연산자이다.

void (expression);

대표적으로 void가 사용되어지는 곳은 html에서 아무 일도 안하는 하이퍼링크를 생성할 때 많이 사용된다.

<a href="javascript:void(0)">Click here to do nothing</a>

이 경우에는 void의 반환값이 undefined 이기 때문에 아무런 동작을 하지 않는 하이퍼링크가 만들어졌다.


관계 연산자

관계 연산자는 피연산자들을 연산자에 따라 비교하여 Boolean 값을 반환하는 연산자이다.

in

in 연산자는 객체에 특정 프로퍼티가 존재하는지 여부를 확인한다. 존재하면 true, 존재하지 않으면 false 를 반환한다.

var obj = {a:1, b:2, c:3};

console.log( 'a' in obj );	// true
console.log( 'e' in obj );	// false

좌측 피연산자는 확인하고자 하는 프로퍼티의 명을 입력하고, 우측 피연산자는 확인하고자 하는 대상 객체를 입력한다.

instanceof

instanceof 연산자는 객체가 명시된 객체형과 일치하는지 확인한다. 일치하면 true, 일치하지 않으면 false 를 반환한다.

var theDay = new Date();

console.log( theDay instanceof Date );	// true

좌측 피연산자는 확인하고자 하는 대상 객체를 입력하고, 우측 피연산자는 확인하고자 하는 객체형을 입력한다.


연산자 우선순위

연산자 우선순위는 구문을 수행할 때 수행될 순서를 결정한다. 추가로 괄호를 통해서 우선순위를 재정의 할 수도 있다.

다음 표는 우선순위가 높은 순서부터 낮은 순서까지 나열된 목록이다.

연산자명 연산자 목록
멤버 연산자 . []
객체 호출/생성 연산자 () new
부정/증가 연산자 ! ~ - + – ++ typeof void delete
곱셈/나눗셈 연산자 * / %
덧셈/뺄셈 연산자 + -
비트 단위 시프트 연산자 « » »>
관계 연산자 < <= > >= in instanceof
같음 비교 연산자 == != === !==
비트 단위 논리곱 연산자 &
비트 단위 베타적 논리합 연산자 ^
비트 단위 논리합 연산자 |
논리곱 연산자 &&
논리합 연산자 ||
조건 연산자 ? :
대입 연산자 = += -= *= /= %= «= »= »>= &= ^= !=
콤마 연산자 ,
20161215 Charyum.Park