연산자(JavaScript)

연산자

다음과 같은 연산자가 존재한다.

// 산술 연산자
5 * 4 // -> 20
// 문자열 연결 연산자
'My name is ' + 'Lee' // -> 'My name is Lee'
// 할당 연산자
color = 'red' // -> 'red'
// 비교 연산자
3 > 5 // -> false
// 논리 연산자
true && false // -> false
// 타입 연산자
typeof 'Hi' // -> string

산술 연산자

1) 이항 산술 연산자

• 2개의 피연산자를 산술 연산 함.

5 + 2; // -> 7
5 - 2; // -> 3
5 * 2; // -> 10
5 / 2; // -> 2.5
5 % 2; // -> 1

2) 단항 산술 연산자

• 1개의 피연산자를 산술 연살 함.

var x = 1;

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

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

• x++ vs ++x

var x = 1;
console.log(x++); // 1
console.log(x); // 2

var y = 1;
console.log(++y); // 2
console.log(y); // 2

var x = 5, result;

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

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

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

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

• • 단항 연산자는 피연산자에 어떠한 효과도 없다.

// 아무런 효과가 없다.
+10;    // -> 10
+(-10); // -> -10

• 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 숫자 타입으로 변환된다.

var x  = '1';

// 문자열을 숫자로 타입 변환한다.
console.log(+x); // 1
// 부수 효과는 없다.
console.log(x);  // "1"

// 불리언 값을 숫자로 타입 변환한다.
x = true;
console.log(+x); // 1
// 부수 효과는 없다.
console.log(x);  // true

// 불리언 값을 숫자로 타입 변환한다.
x = false;
console.log(+x); // 0
// 부수 효과는 없다.
console.log(x);  // false

// 문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
x = 'Hello';
console.log(+x); // NaN
// 부수 효과는 없다.
console.log(x);  // "Hello"

• • 단항 연산자는 피연산자의 부호를 반전한 값을 변환한다. 그 외엔 + 단항 연산자와 동일

// 부호를 반전한다.
-(-10); // -> 10

// 문자열을 숫자로 타입 변환한다.
-'10'; // -> -10

// 불리언 값을 숫자로 타입 변환한다.
-true; // -> -1

// 문자열은 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
-'Hello'; // -> NaN

문자열 연결 연산자

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

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

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

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

// false는 0으로 타입 변환된다.
1 + false; // -> 1

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

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

할당 연산자

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

var x;

x = 10;
console.log(x); // 10

x += 5; // x = x + 5;
console.log(x); // 15

x -= 5; // x = x - 5;
console.log(x); // 10

x *= 5; // x = x * 5;
console.log(x); // 50

x /= 5; // x = x / 5;
console.log(x); // 10

x %= 5; // x = x % 5;
console.log(x); // 0

var str = 'My name is ';

// 문자열 연결 연산자
str += 'Lee'; // str = str + 'Lee';
console.log(str); // 'My name is Lee'

비교 연산자

동등 비교(”==”) VS 일치 비교(”===”)

동등 비교

• 타입이 달라도 암묵적 타입 변환을 통해 타입을 일치 시킨다.

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

// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
5 == '5'; // -> true

• 동등 비교는 편리하지만 예측하기 어렵다.

// 동등 비교. 결과를 예측하기 어렵다.
'0' == ''; // -> false
0 == '';   // -> true
0 == '0';  // -> true
false == 'false';   // -> false
false == '0';       // -> true
false == null;      // -> false
false == undefined; // -> false

일치 비교

• 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

// 일치 비교
5 === 5; // -> true

// 암묵적 타입 변환을 하지 않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
5 === '5'; // -> false

• NaN은 자신과 일치하지 않은 유일한 값이다. NaN과 비교 연산을 주의하자

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // -> false

// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // -> true
Number.isNaN(10);  // -> false
Number.isNaN(1 + undefined); // -> true

• 0은 +0과 -0이 같다.

// 양의 0과 음의 0의 비교. 일치 비교/동등 비교 모두 결과는 true이다.
0 === -0; // -> true
0 == -0;  // -> true

삼항 조건 연산자

• 삼항 연산자 표현은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어 유용하다.

논리 연산자

// 논리합(||) 연산자
true || true;   // -> true
true || false;  // -> true
false || true;  // -> true
false || false; // -> false

// 논리곱(&&) 연산자
true && true;   // -> true
true && false;  // -> false
false && true;  // -> false
false && false; // -> false

// 논리 부정(!) 연산자
!true;  // -> false
!false; // -> true

• 논리합( || ) 연산자는 앞에가 true라면 뒤에는 확인하지 않는다.
• 논리곱( && ) 연산자는 앞에가 false라면 뒤에는 확인하지 않는다.
• 드 모르간의 법칙

!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

쉼표 연산자

• 마지막 피연산자의 평가 결과를 반환한다.

function a() {
	var x, y;
	return x=1, y=1, conole.log(x), x+y;
}

a() // 1, 2(마지막 x+y결과가 반환됨)

그룹 연산자

• () 로 피연산자를 감싸 우선순위를 부여함.

10 * 2 + 3; // -> 23

// 그룹 연산자를 사용하여 우선순위를 조절
10 * (2 + 3); // -> 50

typeof 연산자

• 타입을 반환한다.

typeof ''              // -> "string"
typeof 1               // -> "number"
typeof NaN             // -> "number"
typeof true            // -> "boolean"
typeof undefined       // -> "undefined"
typeof Symbol()        // -> "symbol"
typeof null            // -> "object"
typeof []              // -> "object"
typeof {}              // -> "object"
typeof new Date()      // -> "object"
typeof /test/gi        // -> "object"
typeof function () {}  // -> "function"

지수 연산자

• ES7에서 도입됐다.

2 ** 2;   // -> 4
Math.pow(2, 2) // 4 (지수 연산자가 도입되기 전에 사용함)