[모던 자바스크립트 Deep Dive] 7장_연산자

[모던 자바스크립트 Deep Dive] 자바스트립트의 기본 개념과 동작 원리

07장 연산자 
       7.1 산술 연산자
            7.1.1 이항 산술 연산자
            7.1.2 단항 산술 연산자
            7.1.3 문자열 연결 연산자
       7.2 할당 연산자
       7.3 비교 연산자
            7.3.1 동등/일치 비교 연산자
            7.3.2 대소 관계 비교 연산자
       7.4 삼항 조건 연산자
       7.5 논리 연산자
       7.6 쉼표 연산자
       7.7 그룹 연산자
       7.8 typeof 연산자
       7.9 지수 연산자
       7.10 그 외의 연산자
       7.11 연산자의 부수효과
       7.12 연산자 우선순위
       7.13 연산자 결합 순서

 

07장 연산자 

연산자 : “피연산자를 연산하여 새로운 값을 만든다"

즉, 동사의 역할

       7.1 산술 연산자

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

 

 

            7.1.1 이항 산술 연산자 :  2개의 피연산자를 산술 연산

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

            7.1.2 단항 산술 연산자 : 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); //7 7

// 선할당 후감소
result = x--;
console.log(result, x);  //7 6

// 선감소 후당
result = --x;
console.log(result, x);  //5 5

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

var x = '1';

// 문자열을 숫자로 타입 변환
console.log(+x); // i
// 부수 효과 없음
console.log(x); // "l"
// 불리언 값S 숫자로 타입 변환
x = true;
console.Xog(+x); // i
//부수 효과 없음
console.log(x); // trut
// 불리언 값을 숫자로 타입 변환
console.log(+x); // 0
// 부수 효과 없음
console.log(x); // false
// 문자열율 숫자로 타입 변환합 수 없으으로 NaN을 반환
x 'Hello';
console.log(+x); // NaN
// 부수 효과 없음
console.log(x); // "Hello"

- 단항 연산자는 피연산자의 부호를 반전한 값을 반환

+ 단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자률 숫자 타입으로 변환하여 반환

  ㄴ피연산자률 변경하는 것은 아니고 부호를 반전한 값을 생성해 반환(부수 효과 X)

// 부호 반전한다.
-(-10) // 10
// 문자열을 숫자로 타입 변환
-'10'; // -10
// 불리언 값을 숫자로 타입 변환한다.
-true; //  -1
// 문자일은 숫자로 타입 변환 불가 -> NaN
- 'Hello'; // NaN

 

            7.1.3 문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
그 외 : 산술 연산자

// 문자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 할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당 : 부수효과 존재

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); // l0

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'

 

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

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

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 동등/일치 비교 연산자

1) 동등 비교(==) 연산자 : 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환, 타입을 일치시 킨 후 비교

    ㄴ결과를 예측하기 어렵고 실수하기 쉬움

// 동등 바교
5 == 5; // true
// 타입은 다르지만 암목적 타입 변환을 통해 타입을 일치시키면 동등
5 == '5'; // true

 

// 동동 비교. 결과를 예측하기 어려움
'0' == '';// false
0 == '' // true
0 == '0' // true
false == 'false'; // false
false == '0'; //true
false == null; // false
false == undefined; // false

2) 일치 비교(===) 연산자 : 좌항과 우항의 피연산자가 타입도 갑고 값도 같은 경우에 한하여 true를 반환

   ㄴ 암묵적 타입 변환을 하지 않고 값을 비교(예측하기 쉬움)

   ㄴ NaN주의(NaN : 자신과 일치하지 않는 유일한 값->빌트인 함수 Number.isNaN사용)

   ㄴ 0 주의(양의 0과음의 0 비교시 true 반환)

// 일치 비교
5 === 5; // - true
// 암묵적 타입 변환 X
// 즉, 값과 타입이 모두 같은 경우만 true 반환
5 === '5';  // false

// NaN :  자신과 일치하지 않음
NaN === NaN; // false

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

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

             [Object.is 메서드]

             - ES6에서 도입 : 정확한 비교 결과 반환

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

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

2) 부동등 비교 연산자(!=)와 불일치 비교 연산자(!==) : 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념

// 부동둥 바교
5 != 8; // true
5 != 5 // false
5 != '5'; // false

// S 일치 비교
5 !== 8; // true
5 !== 5; // false
5 !== '5'; // true

 

            7.3.2 대소 관계 비교 연산자

대소 관계 비교 연산자 : 피연산자의 크기 비교,  불리언 값 반환

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

       7.4 삼항 조건 연산자

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

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

var x = 2;

// 2 % 2 = 0 -> false로 암묵적 타입 변환

var result = x % 2 ? '홀수' : 짝수' ;

console.log( result); // 짝수

var x = 2, result;
// 2 % 2 = 0 -> false로 암묵적 타입 변환

if (x % 2) result = '훌수' ;
else result = '짝수';
console.log(result); // 짝수

        [ 삼핟 조건 연산자와, if else문의 차이점 ]

        1) 삼항 조건 연산자 표현식 : 값처럼 사용 가능

var x = 10;

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

        2) if-else 문 :  값처럼 사용 불가

var x = 10;
var result = if (x % 2) { result = '홀수'; } else { result = '짝수' ; };
// SyntaxError: Unexpected token if

 

       7.5 논리 연산자

논리 연산자 : 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산

1) 논리 부정(!) 연산자는 언제나 불리언 값 반환

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

2) 논리합(II) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수 있음

    ㄴ언제나 2개의 피연산자 중 어느 한쪽으로 평가

// 단축 평가
Cat' && 'Dog.; // Dog'

       [드모르간의법칙]

       논리 연산자로 구성된 복잡한 표현식 : 가독성이 좋지 않음 -> 가독성 좋은 표현식으로 변환

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

 

       7.6 쉼표 연산자

쉼표 연산자
1) 왼쪽 피연산자부터 차례대로 피연산자를 평가하고,
2) 마지막 피연산자의 평가가 끝나면

마지막 피연산자의 평가 결과 반환

var x, y, z;
x = 1, y = 2, z = 3; //3

       7.7 그룹 연산자

그룹 연산자 : 소괄호(‘()')로 피연산자를 감쌈 -> 표현식을 가장 먼저 평가

연산자의 우선순위를 조절 가능

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

       7.8 typeof 연산자

typeof 연산자 : 피연산자의 데이터 타입을 문자열로 반환

반환 값 : "string", "number", "boolean", "undefined", "symbol"object", "function" 중 1개

cf) "null" 반환하는 경우: 없음

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"

1) null 타입인지 확인할 때 :  일치 연산자(===) 사용해야 함

var foo = null;
typeof foo === null; // false
foo === null; // true

2) 선언하지 않은 식별자 : ReferenceError 대신 undefined를 반환

// undeclared 식별자는 선언 된 적 없음
typeof undeclared; // undefined​

       7.9 지수 연산자 : ES7에서 도입

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

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

1) 음수를 거듭제곱의 밑으로 사용해 계산시 :  괄호로 묶어야함

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

cf) 지수 연산자가 도입되기 이전 :  Math.pow 메서드 사용(가독성 Bad)

Math.pow(2, 2); // 4
Math.pow(2, 2.5); // - 5.6568542W9238
Math.pow(2, 0); // 1
Math.pow(2, -2); // - 0.25

2) 할당 연산자와 함께 사용 가능

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

3) 이항 연산자 중에서 우선순위가 가장 높음

2 * 5 ** 2; // 50

 

       7.10 그 외 연산자

 

       7.11 연산자의 부수효과

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

        2) 그 외 : 없음. 즉, 다른 코드에 어떠한 영향도 주지 않고 새로운 값만을 생성.

 

       7.12 연산자의 우선순위

       7.12 연산자의 결합 순서

---

정리 기본 출처 : [모던 자바스크립트 Deep Dive 이웅모 지음]