07장 연산자

2022-05-10

7.1 산술 연산자(07-01)

피연산자 또는 피연산자와 연산자 조합도 값으로 평가될 수 있는 표현식이다
산술 연산이 불가능한 경우 NaN반환

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

7.1.1 이항 산술 연산자(07-02)

이항 산술 연산자(피연산자 2개)
피연산자 값을 변경하는 부수효과 없음. 그냥 새로운 값을 만들 뿐

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

7.1.2 단항 산술 연산자(07-03)

단항 산술 연산자(피연산자 1개)
피연산자 값을 변경하는 부수 효과 있음(암묵적 할당)

var x = 1;

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

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

07-04

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

07-05

- 단항 연산자

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

07-06

- 단항연산자는 피연산자 변경이 아니라 숫자 타입으로 변환된 값을 생성해서 반환
숫자 타입으로 반환한 값을 생성해서 반환하므로 부수 효과 없다

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"

07-07

- 단항 연산자는 피연산자의 부호를 반전한 값을 반환. 부수 효과 없다

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

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

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

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

7.1.3 문자열 연결 연산자(07-08)

’+’ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결

// 문자열 연결 연산자
'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 할당 연산자(07-09)

할당 연산자(부수 효과 O)

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'

07-10

표현식은 값으로 평가되는 문이라 했었고, 문은 표현식인 문과 아닌 문이 존재한다

var x;

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

07-11

할당문은 표현식인 문으로서 할당된 값으로 평가된다(연쇄 할당이 가능)

var a, b, c;

// 연쇄 할당. 오른쪽에서 왼쪽으로 진행.
// ① c = 0 : 0으로 평가된다
// ② b = 0 : 0으로 평가된다
// ③ a = 0 : 0으로 평가된다
a = b = c = 0;

console.log(a, b, c); // 0 0 0

7.3 비교 연산자

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

7.3.1 동등/일치 비교 연산자(07-12)

비교 연산자
동등 비교 : ==, 일치 비교 : ===

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

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

07-13

따라서 ‘===’을 추천(타입도 비교함)

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

07-14

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

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

07-15

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

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

07-16

Number.isNaN() 함수로 NaN 확인 가능

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

07-17

NaN말고 0과 -0도 비교 제대로 안됨

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

07-18

Object.is(); 를 활용하면 NaN이든 -0,+0이든 전부 확인가능

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

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

07-19

// 부동등 비교
!= 8;   // -> true
!= 5;   // -> false
!= '5'; // -> false

// 불일치 비교
!== 8;   // -> true
!== 5;   // -> false
!== '5'; // -> true

7.3.2 대소 관계 비교 연산자(07-20)

// 대소 관계 비교
> 0;  // -> true
> 5;  // -> false
>= 5; // -> true
<= 5; // -> true

7.4 삼항 조건 연산자(07-21)

삼항 연산자(표현식임)

var x = 2;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

07-22

var x = 2, result;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
if (x % 2) result = '홀수';
else       result = '짝수';

console.log(result); // 짝수

07-23

if…else문은 표현식이 아님(즉, 값으로 사용 못함)

var x = 10;

// if...else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError: Unexpected token if

07-24

이것이 삼항 연산자가 유용한 이유!

var x = 10;

// 삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

7.5 논리 연산자(07-25)

논리 연산자

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

07-26

// 암묵적 타입 변환
!0;       // -> true
!'Hello'; // -> false

07-27

9.4장에서 설명

// 단축 평가
'Cat' && 'Dog'; // -> 'Dog'

07-28

드 모르간의 법칙(가독성 좋게 활용하라는 의미)

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

7.6 쉼표 연산자(07-29)

쉼표 연산자는 왼쪽부터 차례대로 피연산자 평가후 마지막 피연산자 평가결과 반환

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

7.7 그룹 연산자(07-30)

그룹 연산자

10 * 2 + 3; // -> 23

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

7.8 typeof 연산자(07-31)

null타입이 object인건 자바스크립트의 첫번째 버그다

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"

07-32

따라서 null은 타입으로 비교하지말고 아래방법 이용할것

var foo = null;

typeof foo === null; // -> false
foo === null;        // -> true

07-33

또 주의할 부분은 선언한 적 없는데, 타입 undefined 출력된다

// undeclared 식별자를 선언한 적이 없다.
typeof undeclared; // -> undefined

7.9 지수 연산자(07-34)

지수 연산자

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

07-35

지수 연산자 도입전 사용한 Math.pow();

Math.pow(2, 2);   // -> 4
Math.pow(2, 2.5); // -> 5.65685424949238
Math.pow(2, 0);   // -> 1
Math.pow(2, -2);  // -> 0.25

07-36

// 지수 연산자의 결합 순서는 우항에서 좌항이다. 즉, 우결합성을 갖는다.
2 ** (3 ** 2); // -> 512
Math.pow(2, Math.pow(3, 2)); // -> 512

07-37

음수를 거듭제곱 밑으로 사용시 괄호필요

-5 ** 2;
// SyntaxError: Unary operator used immediately before exponentiation expression.
// Parenthesis must be used to disambiguate operator precedence

(-5) ** 2; // -> 25

07-38

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

07-39

지수 연산자가 이항 연산자 중에서 우선순위 제일 높음

2 * 5 ** 2; // -> 50

7.10 그 외의 연산자

?. => 9.4.2절 “옵셔널 체이닝 연산자” ?? => 9.4.3절 “null 병합 연산자” delete => 10.8절 “프로퍼티 삭제” new => 17.2.6절 “new 연산자” instanceof => 19.10절 “instanceof 연산자” in => 19.13.1절 “in 연산자”

7.11 연산자의 부수 효과(07-40)

연산자의 부수 효과
할당 연산자(=), 증감 연산자, delete 연산자가 부수 효과가 있다

var x;

// 할당 연산자는 변수 값이 변하는 부수 효과가 있다.
// 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x = 1;
console.log(x); // 1

// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있다.
// 피연산자 x의 값이 재할당되어 변경된다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x++;
console.log(x); // 2

var o = { a: 1 };

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

7.12 연산자 우선순위(07-41)

연산자 우선순위로 연산을 수행하는데 종류는 표 확인

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

7.13 연산자 결합 순서

어느 쪽 부터 평가를 수행할 것인지를 나타냄
좌항->우항 과 우항->좌항 순서가 있는데 해당 연산자들은 표 확인

Twitter Facebook LinkedIn

7.1 산술 연산자(07-01)

7.1.1 이항 산술 연산자(07-02)

7.1.2 단항 산술 연산자(07-03)

07-04

07-05

07-06

07-07

7.1.3 문자열 연결 연산자(07-08)

7.2 할당 연산자(07-09)

07-10

07-11

7.3 비교 연산자

7.3.1 동등/일치 비교 연산자(07-12)

07-13

07-14

07-15

07-16

07-17

07-18

07-19

7.3.2 대소 관계 비교 연산자(07-20)

7.4 삼항 조건 연산자(07-21)

07-22

07-23

07-24

7.5 논리 연산자(07-25)

07-26

07-27

07-28

7.6 쉼표 연산자(07-29)

7.7 그룹 연산자(07-30)

7.8 typeof 연산자(07-31)

07-32

07-33

7.9 지수 연산자(07-34)

07-35

07-36

07-37

07-38

07-39

7.10 그 외의 연산자

7.11 연산자의 부수 효과(07-40)

7.12 연산자 우선순위(07-41)

7.13 연산자 결합 순서

공유하기

댓글남기기

참고

2022-05-10 06장 데이터 타입 Modern_JavaScript_Deep_Dive

2022-05-10 07장 연산자 Modern_JavaScript_Deep_Dive

2022-05-10 08장 제어문 Modern_JavaScript_Deep_Dive

2022-05-10

06장 데이터 타입

Modern_JavaScript_Deep_Dive

2022-05-10

07장 연산자

Modern_JavaScript_Deep_Dive

2022-05-10

08장 제어문

Modern_JavaScript_Deep_Dive