[자바스크립트/JavaScript] 연산자

연산자

연산자란 이름 그대로 연산을 수행하는 기호를 뜻한다. 대표적인 예시로, 사칙 연산을 수행하는 +, - , / , * 연산 기호가 바로 산술 연산자에 해당하는 연산자이다. 그리고  연산자를 통해 연산을 당하는 주체를 피연산자라고 하고, 피연산자의 개수에 따라 연산자는 아래와 같이 분류할 수 있다.

 

• 이항연산자(binary operator) : 피연산자 2개
• 단항연산자(unary operater) : 피연산자 1개
• 삼항연산자(ternary operater) : 피연산자 3개

 

자바스크립트에서 위의 예시에서의 산술 연산자 이외에도 대입, 부호, 증감, 관계(비교), 논리, 비트연산자가 존재한다.

 

 

대입연산자

대입 연산자는 이름 그대로 해당 값을 대입해주는 연산자이다. 연산 기호는 등호(=)를 사용하고 등호의 오른쪽의 값을 왼쪽에 대입한다.

//num 변수에 10을 대입
const num = 10;

 

 

산술연산자

산술연산자는 계산과 관련된 연산자이다. 사칙연산을 포함한 나머지, 제곱 연산자(ES7에서 등장) 등이 이에 해당한다.

//사칙연산 : + - * /
console.log(4 + 2);
console.log(4 - 2.0);
console.log(4 / 2);
console.log(4 * 2.0);

//나머지연산자 : %
console.log(4 % 3);

//제곱 연산자 : ** <- ES7 등장
console.log(2 ** 4);
console.log((-3) ** 3); //음수 제곱시 소괄호()
console.log(2 ** -1);
console.log(2 ** (1/2));
console.log(2 ** 1/2);

 

NaN (Not a Number)

자바에서 산술연산자 등으로 숫자 데이터를 다룰 때, 만약 숫자 데이터가 들어와야 하는 곳에 그 이외의 값이 들어온다면 무엇을 리턴할까? 

 

바로 Not a Number(숫자가 아니다)의 줄임말인 NaN 값을 리턴한다. 여기서 NaN의 타입은 Number이다.

console.log((-1) ** (1/2)); // NaN : Not a Number
//typeof : type을 확인할 수 있는 키워드
//Number 타입을 출력함
console.log(typeof NaN); //Number

 

 

복합대입연산자

복합 대입 연산자는 대입 연산자와 산술 연산자가 복합된 보다 간편하게 표기할 수 있는 연산자이다. 복합 대입 연산자는 변수를 이용하여 산술한 결과를 다시 그 변수의 대입할 때 사용할 수 있다.

let num = 1;
const n = 10;

//복합 대입 연산자 사용X
num = num + 1;
num = num / 2;
num = num * 2;
num = num ** 2;
num = n + num;

//복합대입 연산자 사용O
num += 1;
num /= 2;
num *= 2;
num **= 2;
num = n + 4; // <= 복합대입 연산자 사용 불가

 

 

부호연산자

부호 연산자는 수의 부호와 관련된 연산을 하는 연산자로 +, - 가 있다.

• + : 수의 부호(양, 음)이 바뀌지 않음
• - : 수의 부호(양, 음)이 반대로 바뀜

// + : 부호가 바뀌지 않음
let n1 = 10;
const num1 = +n; //+10
n1 = -10;
const num2 = +n; //-10

// + : 부호가 바뀜
let n2 = 10;
const num3 = -n; //-10
n2 = -10;
const num4 = -n; //+10

 

 

증감연산자

증감연산자는 Number 타입의 데이터를 1씩 증가 또는 감소 시킬 때 사용하는 연산자이다. 증감연산자는 연산자의 위치에 따라 두 종류로 나뉜다.

• prefix(접두사) : 변수앞에 붙을 때, 증감이 먼저 된 후 다른 연산자가 동작
• postfix(접미사) : 변수 뒤에 붙을 때, 다른연산자 먼저 실행된 후 증감

//prefix : 증감이 먼저 된 후 다른 연산자 동작
let num1 = 10;
let num2 = ++num1 + 1;

console.log(num1);  //11
console.log(num2);  //12

//postfix : 다른 연산이 수행된 후 증감
num1 = 10;
num2 = num1++ + 1;

console.log(num1);  //11
console.log(num2);  //11

 

 

관계(비교)연산자

관계연산자는 비교연산의 결과를 참 또는 거짓으로 반환하는 연산자이다. 

연산자	의미
A < B	A는 B보다 작다
A > B	A는 B보다 크다
A >= B	A는 B보다 작거나 같다
A <= B	A는 B보다 크거나 같다
A == B	A는 B보다 같다(값만 비교)
A != B	A는 B보다 다르다(값만 비교)
A === B	A는 B보다 값과 타입이 같다
A !== B	A는 B보다 값과 타입이 다르다

자바스크립트의 비교연산자에서 ===, !== 는 매우 중요한 개념이다. ==, != 비교 연산자는 값만 비교하고 ===, !== 연산자는 값과 타입 둘다 비교하기 때문이다.

 

일반적으로, ===, !== 연산자를 사용하는 것을 권장하는데, 그 이유는 자바스크립트에서 ==, != 연산자는 비교하는 피연산의 타입을 변환하였을 때 값이 일치하는 경우도 true로 리턴하기 때문이다. 자바스크립트에서 자동으로 형변환을 해준 후 값을 비교하는 것이다.

// ==, != -> 원하지 않는 결과를 내기도 함
// 자바스크립트에서 자동으로 형변환해서 비교를 하기 때문에...

if(1 == true) {
    console.log('이거 무조건 나오게 해줘');
} else {
    console.log('이거 나오면 안됨');
}

// 출력 결과 --> 이거 나오면 안됨

 

위의 예시와 같이 원하지 않는 결과를 내기도 하기 때문에 대부분의 경우에서 ===, !== 연산자를 사용하는 것이 좋다.

 

 

논리연산자

논리연산자는 조건식을 연산하는 연산자이다. 조건식이란, 결과가 true, false의 결과만 가지는 식을 의미한다.

연산자		설명
&&	AND	모두 참일 때만 true
||	OR	모두 거짓일 때만 false
!	NOT	true => false & false => true

 

 

비트연산자

자바스크립트에서 비트연산자는 32bit number에 의해 연산된다. 비트연산자의 피연산자를 32bit number로 변환한 후, 비트 연산을 수행하고 그 결과를 다시 자바스크립트의 number타입으로 반환한다.

연산자		설명
&	AND	모두 1일때 1
|	OR	모두 0일때 0
^	XOR	둘이 같으면 0, 아니면 1
~	NOT	1 => 0 & 0 => 1
>> n	RIGHT SHIFT	오른쪽으로 n 비트씩 이동
<< n	LEFT SHIFT	왼쪽으로 n 비트씩 이동