07장 연산자

• 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만드는 것.

7.1 산술 연산자

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

부수효과 : 피연산자의 값을 변경하는 것.

7.1.1 이항 산술 연산자

• 이항 산술 연산자 : 2개의 피연산자를 산술 연산하여 숫자값을 만듬.
• 부수효과 X → + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), %(나머지)

7.1.2 단항 산술 연산자

• 단항 산술 연산자 : 1개의 피연산자를 산술 연산하여 숫자값을 만듬.
• 부수효과 O → ++ (증가), -- (감소)
• 부수효과 X → + (어떠한 효과도 없음), - (양수 ↔ 음수)

console.log(+10); // 10 - 아무 효과 없음
console.log(+(-10)); // -10

• 증가/감소(++/--) 연산자는 위치에 의미가 있음.
• 피연산자 앞에 위치 : 피연산자를 먼저 증가/감소 시킨 후, 다른 연산 수행

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

• 피연산자 뒤에 위치 : 다른 연산 수행 후, 피연산자를 증가/감소

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

• 숫자타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자타입으로 변환하여 반환함. 숫자로 변환할 수 없으면 NaN을 반환함.

console.log(+'Str'); // NaN
console.log(+'1'); // 1
console.log(-'10'); // -10
// - 단항 연산자는 부호를 반전한 값으로 반환함
console.log(-(-10)); // 10

7.1.3 문자열 연결 연산자

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

console.log('1' + 2); // '12'
console.log(1 + '2'); // '12'
console.log(1 + 2); // 3

7.2 할당 연산자

• 할당 연산자 : 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당함. 변수값이 변하는 부수효과 있음.

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 a, b, c;
a = b = c = 0; // 오른쪽에서 왼쪽으로 진행
console.log(a, b, c); // 0 0 0

7.3 비교 연산자

• 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언값으로 반환. if문이나 for문과 같은 제어문의 조건식에서 주로 사용

7.3.1 동등/일치 비교 연산자

• 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교. 부수효과는 없다.

연산자	이름	뜻
==	동등 비교	값 같음
===	일치 비교	값과 타입 같음
!=	부동등 비교	값과 다름
!==	불일치 비교	값과 타입 다름

console.log('5' == 5); // true
console.log('5' === 5); // false

• 동등 비교(==)의 경우 암묵적 타입 변환이 일어나기 때문에, 예측하기 어려운 결과를 만들어낼수도 있다. 그렇기 때문에 일치 비교 연산자(===)를 사용하는 것이 좋다.
• 비교 연산자에서 주의할 것은 NaN이다. NaN은 자신과 일치하지 않는 유일한 값이다.
  NaN인지 조사하려면 isNaN을 사용 해야한다.

console.log(NaN === NaN); // false

console.log(isNaN(NaN)); // true
console.log(isNaN(10)); // false

• 0도 양의 0과 음의 0은 다르지만 결과는 true를 나타낸다.

console.log(0 === -0); // true
console.log(0 == -0); // true

• ES6에서 도입된 Object.is 메서드를 사용하면 정확하게 비교하여 결과를 반환한다.

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

7.3.2 대소 관계 비교 연산자

연산자	ex	해석	console.log
>	x > y	x가 y보다 크다	console.log(5 > 0); // true
<	x < y	x가 y보다 작다	console.log(5 < 5); // false
>=	x >= y	x가 y보다 크거나 같다	console.log(5 >= 5); // true
<=	x <= y	x가 y보다 작거나 같다	console.log(5 <= 5); // treu

7.4 삼항 조건 연산자

• 삼항 조건 연산자 : 조건식의 평가 결과에 따라 반환할 값을 결정

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

var score = 70;
var result = score >= 60 ? 'pass' : 'fail';
console.log(result); // pass

• if ... else 문을 사용해도 유사하게 처리할 수 없지만, if문은 값처럼 사용 할 수 없다.
• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

7.5 논리 연산자

• 논리 연산자 : 우항과 좌항의 피연산자를 논리 연산함. 언제나 불리언 값을 반환함.
• || (논리합 OR)

true || true; // true
true || false; // true
false || true; // true
false || false; // false

• && (논리곱 AND)

true && true; // true
true && false; // false
false && true; // false
false && false; // false

• ! (부정 NOT)

!true; // false
!false; // true

• 암묵적 타입 변환

!0; // true
!'Hello'; // false

7.6 쉼표 연산자

• 쉼표 연산자 : 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환

var x, y, z;
x = 1, y = 2, z = 3;
console.log(x, y, z); // 1 2 3

7.7 그룹 연산자

• 소괄호('()')를 사용
• 연산자의 우선순위를 조절할 수 있음.
• 연산자의 우선순위가 가장 높다.

10 * 2 + 3; // 23
10 * (2 + 3); // 50

7.8 typeof 연산자

• typeof 연산자 : 연산자의 데이터 타입을 문자열로 반환함
• string, number, boolean, undefined, symbol, object, function 중 하나를 반환함.
• 7개의 데이터 타입과 정확하게 일치하지는 않음.

console.log(typeof ''); // string
console.log(typeof 1); // number
console.log(typeof NaN); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof new Date()); // object
console.log(typeof /test/gi); // object
console.log(typeof function (){}) // function

• null은 object로 반환하는 문제점이 있다. null인지 확인 할때에는 ===를 사용하는 것이 좋다.

var foo = null;
console.log(foo === null); // true

• 선언하지 않은 식별자에 대해 typeof로 연산시 참조에러가 아닌 undefined를 반환함.

console.log(typeof undecleared); // undefined

7.9 지수 연산자

• ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자값을 반환

console.log(2 * 2); // 4

• 지수 연산자가 도입되기 전에는 Math.pow 메서드를 사용함

console.log(Math.pow(2, 2)); // 4

• Math.pow보다 지수 연산자가 가독성에 좋다.

console.log(Math.pow(Math.pow(2, 2), 2)); // 16
console.log(2 ** 2 ** 2); // 16

• 음수를 거듭제곱의 밑으로 사용시 괄호로 묶어줘야함

console.log((-5) ** 2); // 25

• 할당 연산자와 함께 사용할 수 있음.

var num = 5;
num **= 2; // 25

• 이항 연산자 중에서 우선순위가 가장 높다.

console.log(2 * 5 ** 2); // 50

7.10 그 외의 연산자

• ?. : 옵셔널 체니이 연산자
• ?? : null 병합 연산자
• delete : 프로퍼티 삭제
• new : 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
• instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
• in : 프로퍼티 존재 확인

7.11 연산자의 부수 효과

• 부수 효과 있는 연산자 : 할당 연산자(=), 증가/감소 연산자(++/--), delte 연산자

7.12 연산자의 우선순위

• 연산자의 종류도 많고 우선순위를 기억하기 어렵기 때문에 가장 높은 우선순위 연산자인 () 그룹 연산자를 이용하여 우선순위를 명시적으로 조절하는 것을 권장함.

7.13 연산자 결합 순서

• 연산자의 어느 쪽부터 평가를 수행할 것인지
• 좌항 → 우항 : +, -, /, %, <, <=, >, >=, &&, ||, ., [], (), ??, ?., in, instanceof
• 우항 → 좌항 : ++, --, 할당 연산자(=, +=, ...), !x, +x, -x, ++x, --x, typeof, delete, (조건식) ? true : false