[JS] 모던자바스크립트 Deep Dive - 연산자

7장 연산자(Operator)

• 연산자(Operator): 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리 타입, 지수 연산 등을 수행해 하나의 값을 만든다.
• 피연산자(Operand): 연산의 대상

산술 연산자(Arithmetic Operator)

• 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술이 불가할 경우 NaN을 반환한다.

이항 산술 연산자(Binary Arithmetic Operator)

• 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

이항 산술 연산자

단항 산술 연산자(Unary Arithmetic Operator)

• 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

단항 산술 연산자

var x = 1;

// ++연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.
x++; // x = x+1;
console.log(x); // 2

// --연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.
x--; // x = x-1;
console.log(x); // 1

증가/감소 연산자(++ , --) 연산자는 위치에 의미가 있다.

• 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
• 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

var x = 5, result;

// 선할당 후증가
result = x++;
console.log(result, x); // 5, 6

// 선증가 후할당
result = ++x;
console.log(result, x); // 7, 7

// 선할당 후감소
result = x--;
console.log(result, x); // 7, 6

// 선감소 후할당
result = --x;
console.log(result, x); // 5, 5

문자열 연결 연산자

• + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12'

// 산술 연산자
1 + 2 ; // 3

// true는 1로 타입이 변환된다.
1 + true; // 2

// false는 0으로 타입 변환된다.
// true, false는 각각 1과 0의 값을 갖고 있기에 산술 연산자를 통해 암묵적 형변환(Implicit Coercion)된 상태이다. 아래 글을 참조하자.
1 + false; // 1

// null은 0으로 타입이 변환된다.
1 + null; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // NaN
1 + undefined; // NaN

할당 연산자(Assignment Operator)

• 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

할당 연산자

비교 연산자(Comparison Operator)

• 비교 연산자는 좌항과 우항의 피연산자를 비교한 후 결과를 불리언(Boolean) 값으로 반환한다.

동등/일치 비교 연산자

• 동등 비교(Loose Equality, 느슨한 비교) 연산자: 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 뒤 값만 비교한다.
• 일치 비교(Strict Equality, 엄격한 비교) 연산자: 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다. 둘 중에 하나라도 다를 시 false를 반환한다.

비교 연산자

// 동등 비교
5 == 5; // true

// 타입은 다르지만 암묵적 형변환을 통해 true 값 반환
5 == '5'; // true

// 일치 비교를 하면 false 값 반환
5 === '5'; // false

// 단 일치 비교 연산자에서 NaN을 주의해야한다.
NaN === NaN // false

// 숫자가 NaN인지 조사하려면 빌트 함수인 isNaN을 사용해야한다.
isNaN(NaN); // true
isNaN(10); // false
isNaN(1 + undefined); // true

// 부동등 비교 연산자 (!=)와 불일치 비교 연산자(!==)는 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념이다.

대소 관계 비교 연산자

• 피연산자의 크기를 비교하여 불리언 값을 반환

대소 관계 비교 연산자

삼항 조건 연산자

조건식 ? 조건식이 true일 때 반환 값 : 조건식이 false일 때 반환할 값

var result = scroe > 60 ? 'pass' : 'fail';

• 삼항 조건 연산자의 첫 피연산자는 조건식이므로 if...else문을 사용해도 유사하게 처리할 수 있다.

var x = 2, result;

// 2 % 2는 0이고 0은 false로 암묵적 형변환.
if(x % 2) result = '홀수';
else result = '짝수';

console.log(result); // 짝수

• 하지만, 삼항 조건 연산자 표현식은 if ... else 문과 중요한 차이가 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 값처럼 사용할 수 없다.

// 삼항 조건 연산자 표현
var x = 10;

var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

논리 연산자(Logical Operator)

• 논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다.

논리 연산자

// 논리합(||) 연산자, 좌항/우항 중 한 값만 true 값이면 true 반환
true || true; // true
true || false; // true
false || false; // false

// 논리곱(&&) 연산자, 좌항/우항 모두 true 값이어야 true 반환
true && true; // true
true && false; // false
false && false; // false

// 부정(!) 연산자, 좌항/우항 비교하여 false 값이면 true 반환
true != true; // false
true != false; // true
false != false; // false

typeof 연산자

• 피연산자의 데이터 타입을 7가지 문자열중 하나로 반환한다.
• string
• number
• boolean
• undefined
• symbol
• object
• function

연산자 우선순위

연산자 우선순위 - JavaScript | MDN

참고하면 좋을 글

[모든 자바스크립트 개발자가 알아야 하는 33가지 개념] 4. 암시적 형변환, 명시적 형변환, Nominal,

[모든 자바스크립트 개발자가 알아야 하는 33가지 개념] 5. == & === & typeof