[JS] 자바스크립트 연산자

 

자바스크립트 연산자

+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지

 

 

자바스크립트 증감 연산자

++	증가
--	감소

그러나 위치에 따라서 의미가 달라짐!

num++ : 증가 나중, 다른 연산 후에 증가한다.

++num : 증가 먼저, 증가 연산 후에 다른 연산이 일어난다.

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

 

다른 타입에 +,- 붙이기

• +true : 1로 반환한다.
• -true : -1로 반환한다.
• -'10' : 문자열이지만 -10으로 반환된다.

 

 

암묵적 타입 변환(타입 강제 변환)

개발자의 의도와 상관없이 JS엔진에 의해 타입이 암묵적으로 변환된다.

"1" + 2; // '12'
1 + "2"; // '12'


1 + true       // 2 (true → 1)
1 + false      // 1 (false → 0)

true + false    // 1 (true → 1 / false → 0)
1 + null       // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)

 

• 연산 시 true는 1
• false는 0
• null은 0
• undefined는 NaN

 

할당 연산자

=	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와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름

 

5 == "5"; // true
5 === "5" //false

- 동등 및 부딩 비교의 경우 부작용이 있을 수 있으므로 사용하지 않는 것이 좋다.

 

예외 사항

하지만 일치 비교 연산자에서 NaN은 다르게 동작한다.

NaN === NaN // false

자신과 일치하지 않는 유일한 값이다. 

따라서 숫자가 NaN인지 조사하려면 함수 isNaN을 사용한다.

 

0 === -0 //true
-0 === +0 //true

// Object.is ES6에서 도입된 메서드로, 예측가능한 정확한 비교 결과를 반환한다. 그 외에는 ===와 같이 동작한다.

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

 

삼항연산자

조건에 따라서 어떤 값을 결정해야 할 때. 조건 ? '참일때 반환' : '거짓일때 반환'

(단, 조건이 여러개라면 if ~ else문이 가독성이 좋다)

let number = 2;
let result = x % 2 ? "홀수" : "짝수";

console.log(result); // 짝수

 

 

논리 연산자

||	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

// 논리합(||) 연산자
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 || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

- 단축 평가는 객체가 null인지 확인하고 프로퍼티를 참조할 때 유용하다

let elem = null;

console.log(elem.value); // TypeError: Cannot read property 'value' of null
console.log(elem && elem.value); // 앞이 false이므로 뒤까지 평가할 필요가 없다. null을 반환한다.

 

 

지수 연산자(ES7)

2 ** 2; // 4
2 ** 0; // 1
2 ** -2; // 0.25

지수 연산자 도입 이전에는 Math.pow(x,y)를 사용했다.

 

참고! 음수를 거듭제곱할 때에는 밑을 괄호로 묶어야 한다,
(-5)**2;

 

그 외의 연산자

• delete : 프로퍼티 삭제
• new : 생성자 함수 호출할 때 사용, 인스턴스 생성
• instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
• in :프로퍼티 존재 확인
• ?? : ?? 좌측이 null이나 undefined면 우측을 반환. 

name = name ?? '나';
name ??= '나' //같은 코드