[Chap 07] 연산자

연산자 : 피연산자를 연산하여 새로운 값을 만듦
피연산자(operand) : 연산의 대상

---

7.1 산술 연산자 (arithmetic operator)

 ➔ 피연산자를 대상으로 수학적 계산 수행 및 새로운 숫자 값 생성, 산술 연산이 불가능한 경우, NaN 반환

 

7.1.1 이항 산술 연산자

➔ 2개의 피연산자를 산술 연산하여 숫자 값을 만듦

 

 

7.1.2 단항 산술 연산자

➔ 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); //6 5

 

 

└후위 증가/감소 연산자 : 다른 연산 수행 후, 피연산자의 값 증가/감소

var x = 5,
  result;

//전위 : 증감 후 할당
result = ++x;
console.log(result, x); //6 6

result = --x;
console.log(result, x); //5 5

 

➔ 숫자 타입이 아닌 피연산자에 + 단항 연산자 사용 시 피연산자를 숫자 타입으로 변환하여 반환함

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

 

 

7.1.3 문자열 연결 연산자

➔  + 연산자는 문자열이 하나라도 있으면 문자열 연결 연산자로 동작

//문자열 연결 연산자
'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

 

---

7.2 할당 연산자 (assignment operator)

➔  좌항의 변수에 값을 할당, 변수 값이 변하는 부수 효과 존재

 

➔  할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가됨

      └ 표현식* : 값으로 평가될 수 있는 문

// 할당문은 표현식인 문
var x;
console.log(x = 10); //10

 

---

7.3 비교 연산자 (compatison operator)

➔ 좌항과 우항의 피연산자를 비교한 후 그 결과를 불리언 값으로 반환함

 

7.3.1 동등/일치 비교 연산자

 

 

➔ 동등 비교 연산자(==) : 느슨한 비교

                                      : 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교

                                      : 비교 연산자를 사용할 때, 문자열, 불리언, null 등은 숫자로 변환

                                      : 때문에 예측하기 어려운 결과를 만들어냄(사용하지 않는 편이 좋음)

 

 

➔ 일치 비교 연산자(===) : 엄격한 비교

                                        : 좌항과 우항의 피연산자의 타입과 값 모두가 같은 경우에 true 반환

                                        : 암묵적 타입 변환은 하지 않고 값을 비교

                                        : NaN은 자기 자신과 일치하지 않는 유일한 값(숫자가 NaN인지 확인 시 - Number.isNaN 사용)

 

5 == 5; //true
5 == '5'; //true
5 != 8; // true
5 !== '5' //true

//동등 비교 - 결과를 예측하기 어렵다

'0' == ''; // false - 타입이 문자열로 같기 때문에 값만 비교

0 == ''; //true - 빈문자열을 숫자로 암묵적 타입 변환시 0

0 == '0'; // true - '0'을 숫자로 바꾸고 타입 비교

false == 'false'; 
// 문자열 'false'는 숫자로 변환될 수 없는 문자열이기 때문에 NaN으로 변환
//불리언 false는 숫자로 변환될 때 0

false == '0'; //true - 숫자로 암묵적 타입 변환시 false는 0, '0'은 0

false == null; // false - null과 undefined를 제외하고, null은 다른 어떤 값과도 동등하지 않음

false == undefined; // false - undefined는 null과만 동등하고, 다른 어떤 값과도 동등하지 않음

// NaN은 자신과 일치하지 않는 유일한 값
NaN === NaN // false
NaN === Number.isNaN(NaN); // true

 

 

➔ JS에는 +0과 -0이 존재하는데 이들을 비교하면 true를 반환

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

JS의 falsy한 값* : false, 0, '' (빈 문자열), null, undefined, NaN을 거짓으로 평가

 

➔ ES6에서 도입된 Object.is 메서드는 예측 가능한 비교 반환 (===와 동일하게 동작)

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

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

 

 

7.3.2 대소 관계 비교 연산자

➔ 대소 관계 비교 연산자는 피 연산자의 크기를 비교하여 불리언 값 반환

 

---

7.4 삼항 조건 연산자 (ternary operator)

➔ 조건식의 평가에 따라 반환할 값 결정

➔ 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환

➔ 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문임

var x = 10;
//삼항 조건 연산자 표현식은 표현식인 문
//따라서 값처럼 사용 가능

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

 

 

---

7.5 논리 연산자 (logical operator)

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

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

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

 

---

7.6 쉼표 연산자

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

var a, b, c, result;

// 전체 표현식을 result에 할당
result = (a = b = 3, c = 4);

// result 출력
console.log(result); //4

---

7.7 그룹 연산자

➔ 그룹 연산자는 우선순위가 가장 높음

10 * (2 + 3); // 50

---

7.8 typeof 연산자

➔ 데이터 타입을 문자열로 반환

typeof ''; // "string"
typeof 1; // "number"
typeof NaN; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof null; // "object" - null이 아닌 것은 JS의 버, null 값 확인 시 일치 연산자 사용
typeof []; // "object"
typeof {}; // "object"
typeof new Date(); // "object"
typeof /test/gi; // "object" (정규표현식)
typeof function () {}; // "function"
type of undecleared; // undecleared라는 식별자를 선언한 적이 없지만 undefined를 출력

 

---

 

7.9 지수 연산자

➔ 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱

2 ** 2; // 4
2 ** -2; //0.25
(-5) ** 2 //25

 

➔ 지수 연산자 도입 이전에는 Math.pow 메서드 사용

Math.pow(2, 2); // 4
Math.pow(2, 0); // 1

 

➔ 지수 연산자는 이항 연산자 중 우선 순위가 가장 높음

2 * 5 ** 2; // 50

 

---

7.10 그 외의 연산자

---

7.11 연산자의 부수 효과

➔ 대부분의 연산자는 다른 코드에 영향을 주지 않지만 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 존재

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

var x;

// 할당 연산자는 변수 값이 변하는 부수 효과 존재
x = 1;
console.log(x); //1

// 증감 연산자는 피연산자의 값을 변경하는 부수 효과 존재
x++;
console.log(x); //2

var o = { a: 1 };

// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과 존재, o객체를 사용하는 다른 코드에 영향 줌
delete o.a;
console.log(o); // {}

---

7.12 연산자 우선순위

➔ 연산자의 우선순위는 아래와 같지만 종류가 많아 기억하기 어려움

    때문에 그룹 연산자를 사용하여 명시적으로 조절하는 것을 권장함

---

7.13 연산자 결합 순서