모던 자바스크립트 Deep Dive - Ch07 연산자

Ch07. 연산자

연산자는 하나 이상의 표현식(피연산자)을 대상으로 하나의 값을 만든다.

피연산자가 “값”이라는 명사의 역할을 한다면 연산자는 “피연산자를 연산하여 새로운 값을 만든다”라는 동사의 역할을 한다.

따라서 피연산자도 값, 연산의 결과도 값 이다.

7.1 산술 연산자

산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.

산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분한다.

이항 산순 연산자

모든 이항 산술 연산자는 피연산자의 값이 바뀌는 경우는 없고 새로운 값을 만든다.

ex) +, - , *, /, %

단항 산술 연산자 ex) ++, —, +, -

1. ++ / —

단항 산술 연산자 중 증가/감소 연산자(++/—)는 피연산자의 값을 변경하는 부수 효과가 있다.

증가/감소 연산자는 위치에도 의미가 있는데

피연산자 **앞**(전위)에 위치한경우 **증감을 먼저** 한 후 다른 연산을 수행한다

피연산자 **뒤**(후위)에 위치한경우 다른 연산을 수행한 **후 증감을 수행**한다

2. 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 숫자 타입으로 변환한다

   하지만 피연산자를 변경하는 것은 아니고 숫자 타입을 변환한 값을 생성해 반환한다.

3. • 와 마찬가지로 숫자 타입을 바꾸면서 부호도 바꿔준다

   하지만 피연산자를 변경하는 것은 아니고 부호를 반전해 값을 생성한다

문자열 연결 연산자

• 연산자는 피연산자 중 문자열이 1개 이상 있으면 문자열 연결 연산자로 동작한다

7.2 할당 연산자

할당연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다

이때 좌항의 변수 값이 변하는 부수 효과가 있다.

ex) =, +=, -=, *=, /=, %=, **=

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

var x;
console.log(x=10); // 10

이러한 특징으로 여러 변수에 동일한 값을 연쇄 할당할 수 있다.

var a,b,c;
a=b=c=10
console.log(a,b,c); // 10 10 10

7.3 비교 연산자

비교 연산자는 좌항과 우항의 피연산자를 비교한 후 결과를 boolean값으로 반환한다

**주의!

1. NaN은 자신과 일치하지 않는 유일한 값으로 NaN === NaN은 false이다

   따라서 NaN인지 검사하려면 Number.isNaN(검사할 값)을 사용해야한다

2. 0 == -0, 0 === -0 은 모두 true이다 이런걸 정확하게 판단하려면 ES6에 추가된 Object.is()를 사용할 수 있다.

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

7.4 삼항 조건 연산자

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

조건식 ? 참일때 반환: 거짓일때 반환

if … else문과 동일해보이지만 차이점이

삼항 조건 연산자는 표현식인 문이기 때문에 ‘값’이라서 할당이 가능하지만

if … else문 은 표현식이 아닌 문이라서 값처럼 사용할 수 없다

const result = x ? "true" : "false" // 가능

const result2 = if(x) {return "true" } else {return "false"} // 불가능 

7.5 논리 연산자

논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다

! 연산자는 boolean값을 반환

피연산자가 boolean값이 아니면 암묵적 타입변환을해서 boolean값으로 반환한다

&& , || 연산자는 논리 연산의 결과를 결정하는 피연산자를 반환

&&는 뒤에 값을 || 는 앞에 값을 반환한다

7.6 쉼표 연산자

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

var a,b,c;
a=1,b=2,c=3 // 3

이라고 하는데 무슨말이지..?

이게 되네

let a, b, c;
if ((3 === (a = 1), (b = 2), (c = 3))) {
    console.log("마지막 값 반환");
}
// 마지막값 반환

7.7 그룹 연산자

( )로 피연산자를 감싸면 연산자 우선순위가 가장 높아진다

7.8 typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열인 “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나로 반환한다 근데 정확히 일치하지는 않는다

JS의 첫번째 버그

typeof null // object

null타입 검사 제대로 못함

7.9 지수 연산자

ES7에 도입된 연산자는 Math.pow()와 동일하다, 근데 음수를 쓰려면 (-5)2 이렇게 묶어서 써야된다.

7.10 그 외의 연산자

연산자	설명
?.	옵셔널 체이닝 연산자,
좌항이 null
??(
좌항이 null
delete	객체의 프로퍼티를 삭제한다
new	생성자 함수를 호출할때 인스턴스를 생성한다
(call 대신 constructor 메서드를 쓴다)
instranceof	좌변의 객체가 우변의 성성자 함수와 연결된 인스턴스인지 판별한다
in	객체 안에 프로퍼티 존재 확인한다

(객체가 상속받은 모든 프로터 타입의 프로퍼티를 검사한다)
비슷한메서드로 Reflect.has(), obj.hasOwnProperty()가 있다
(hasOwnProperty()메서드는 객체 고유의 프로퍼티만 검사한다 ) |

7.11 연산자의 부수 효과

위의 연산자들을 정리해보면 부수효과가 있는 연산자는

1. 변수의 값을 바꾸는 ++, — 연산자
2. 변수에 다른 값을 할당하는 = 연산자
3. 변수의 프로퍼티를 삭제하는 delete 연산자

가 있다.

7.12 연산자 우선순위

다 필요없고 헷갈린다 싶으면 ( )로 묶어주자

7.13 연산자 결합 순서

너가 생각하는 그게 맞다. (몸으로 익힘)