연산자

오늘 한 것

연산자

표현식인 피연산자와 연산자의 조합으로 값으로 평가될 수 있는 표현식인 연산자 표현식을 이룬다.

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

산술 연산자

5 / 2; // -> 2.5

JavaScript는 number 타입이 모두 실수기 때문에 정수를 나눠 실수값을 얻을 수도 있다.

단항 산술 연산자

단항 산술 연산자인 증가/감소(++/–) 연산자는 위치에 의미가 있다.

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'

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

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

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

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

위와 같이 서로 연산할 수 없는 타입끼리 만나면 JS 엔진에 의해 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)이 일어난다.

비교 연산자

비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

동등비교(==) 연산자는 타입이 달라도 암묵적 타입 변환을 통해 비교된 값만 같으면 동등하다.

"0" == ""; // -> false
0 == ""; // -> true
0 == "0"; // -> true
false == "false"; // -> false
false == "0"; // -> true
false == null; // -> false
false == undefined; // -> false

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입과 값이 모두 같은 경우에 true를 반환한다.

5 === "5"; // -> false

주의할 점!

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

//isNaN 함수를 사용하자
isNaN(NaN); // -> true
isNaN(10); // -> false
isNaN(1 + undefined); // -> true

//0도 주의하자 JS는 음의 0, 양의 0 둘 다 있지만 타입과 같은 같다.
0 === -0; // -> true
0 == -0; // -> true

위 처럼 +0, -0은 같게 판단하고 NaN끼리는 다르다 그래서 Object.is()가 생겼다.

-0 === +0; // -> true
Object.is(-0, +0); // -> false

NaN === NaN; // -> false
Object.is(NaN, NaN); // -> true

부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는 다른지를 판단하는 개념이다.

// 부동등 비교(타입은 논외)
5 != 8; // -> true
5 != 5; // -> false
5 != "5"; // -> false

// 불일치 비교(타입도 판단)
5 !== 8; // -> true
5 !== 5; // -> false
5 !== "5"; // -> true

논리 연산자

논리 연산자(logical operator)는 우항과 좌항의 논리관계를 연산한다.

// 논리합(||) 연산자, 하나만 true면 true
true || true; // -> true
true || false; // -> true
false || true; // -> true
false || false; // -> false

// 논리곱(&&) 연산자, 모두 true여야 true
true && true; // -> true
true && false; // -> false
false && true; // -> false
false && false; // -> false

// 논리 부정(!) 연산자, 반대값을 출력
!true; // -> false
!false; // -> true

// boolean값이 아닐 경우 암묵적 타입 변환
!0; // -> true
!"Hello"; // -> false

지수 연산자

좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2; // -> 4
2 ** 2.5; // -> 5.65685424949238
2 ** 0; // -> 1
2 ** -2; // -> 0.25

//음수는 괄호로 묶어야한다.
(-5) ** 2; // -> 25

//지수 연산자는 이항 연산자 중에서 우선순위가 가장 높다.
2 * 5 ** 2; // -> 50

참고 도서: 모던 자바스크립트 Deep Dive

오늘 느낀 것

• C랑 Java랑 비슷하지만 새로 배우는 것도 있었다. 배움 앞에 겸손하자.

Nyong’s GitHub