07장 연산자

모던 자바스크립트 딥다이브 07장 연산자

연산자

연산자는 하나 이상의 을 대상으로 연산을 수행하여 하나의 값을 만든다.

연산의 대상인 피연산자는 반드시 값으로 평가 될 수 있는 표현식이어야 한다. 또한 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가 될 수 있는 표현식이다.

$연산자 표현식 = \{ 피연산자, 연산자, ... \}$

$연산자표현식 \in 표현식$

피연산자는 '값' 이라는 명사, 연산자는 ' 새로운 값을 만든다.' 라는 동사

1.산술 연산자

수학적 계산 수행

숫자값 혹은 NaN 반환

이항 산술 연산자(X, 2개의 피연산자를 연산), 단항 산술 연산자(부수효과O, 1개의 피연산자를 연산)

• 단항 산술 연산자

  • 증가/감소 연산자 (++/--)

    • 증가/감소 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.(부수효과)

    • 증가/감소 연산자의 위치에는 의미가 있다.

    • 전위 증가/감소 연산자 : 먼저 피연산자의 값을 변경하고 다른 연산을 수행

    • 후위 증가/감소 연산자 : 다른 연산을 수행한 뒤 피연산자의 값을 변경

  • + , - 단항 연산자

    • 숫자 타입이 아닌 연산자에 사용하면 숫자 타입으로 변환한 값을 새로 생성해서 반환한다.

• 문자열 연결 연산 ( 이항 연산에서 )

  • + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 산술 연산자로 동작한다.

  • 이때 true는 1로 false는 0으로 null 은 0으로 암묵적 타입 전환이 되며 undefined는 숫자로 변경되지 않는다.

2.할당 연산자

우항에 있는 평가 결과를 좌항에 할당. 변수의 값이 변하는 부수효과가 있다.

할당하는 역할만 하는 것이 아니라, 할당문 역시 연산자표현식으로 값으로 평가되는 표현식이다.

$x=10$은 x 우항에 10을 할당하는 역할 뿐 아니라, 10 자체로도 평가된다. 따라서 여러변수에 동일한 값을 연쇄 할당 가능하다.

$a=b=c=10$ 이와 같은 연쇄할당은 오른쪽에서 왼쪽으로 진행되며 c=10, b=10, a=10 과 같다.

3.비교 연산자

좌항과 우항을 비교하여 불리언 값으로 반환한다.

동등비교, 일치비교 : 같은 값인지 비교, 엄격성의 차이

• 동등비교 : 암묵적 타입 변환을 통해 타입을 일치 시킨 후 비교, 따라서 개발자의 의도와 다른 값이 나올 수 있음.

• 일치비교 : 값과 타입이 모두 일치하는지 확인. 보다 엄격.

  • NaN 주의 : NaN는 자신과 일치하지 않는 유일한 값. $NaN \neq NaN$

    • 따라서 NaN === NaN // false

  • +0,-0 주의 : 둘은 다른 값인데 비교하면 또 같다고 함

    • 0 === -0 //true

    • 0 == -0 //true

  • Object.is 메서드

    • ES6에 추가된 메서드 예측 가능한 결과를 반환한다.

    • Object.is(-0, +0) //false

    • Object.is(NaN, NaN) //true

• 대소관계비교

  • 피연산자의 크기를 비교하여 불리언 값을 반환

4.삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정.

자바스크립트 유일의 삼항 연산자, 부수효과 없음.

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

if ... else 문과 논리적 구조가 유사하나, if ... else 문은 문으로 값처럼 사용할 수 없다.

말도 안되는 코드...

var result = if(x > 2){result =  '2보다 큼'} else { result = '2보다 작음'}

반면, 삼항 조건 연산자 표현식은은 동일한 논리라도 값으로 사용할 수 있기 때문에 유용하다.

완전 가능.. 파서블

var result = x>2?'2보다 큼':'2보다 작음'

5.논리 연산자

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

• || : OR, 논리합

• && : AND, 논리곱

• ! : NOT, 부정

  • 논리합과 논리곱 논리연산자는 피연산자 한쪽을 반환한다.

  • 부정 논리연산자는 반드시 불리언을 반환한다. 피연산자가 불리언이 아닐경우 묵시적 형변환을 통해 불리언으로 형 변환한다음 부정값을 반환한다.

6.쉼표 연산자

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comma_operator

7.그룹 연산자

소괄호로 피연산자를 감싸는 연산자. 그룹 연산자를 사용하면 연산자위 우선순위를 조절 할 수 있다.

8.typeof 연산자

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

• 자바스크립트의 모든 데이터 타입과 일치하지 않는다. (null을 연산할 경우 'object'를 반환한다. 따라서 null 체크를 위해서는 일치 연산자를 사용 해야 한다.)

• 선언하지 않은 식별자를 연산할 경우에도 'object'를 반환한다.

9.지수연산자

ES7에 도입된 연산자

• 2**2 = $2^2$
• 좌항을 밑으로 우항을 지수로 거듭제곱한 숫자값을 반환한다. 도입 이전에는 Math.pow 메소드를 사용했다.

• 음수 거듭제곱을 위해서는 괄호로 감싸야 한다. (-5)**2

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

10. 연산자의 Side Effect

대부분의 연산자는 값을 생성 할 뿐 다른 코드에 영향을 주지 않음.

• 할당 연산자 : 변수값을 변화 하는 부수 효과

• 증가/감소 연산자 (++/--) : 피연산자 값이 재할당 되어 변화 하는 부수 효과

• delete 연산자 : 객체 프로퍼티를 삭제하는 부수효과

  1. var obj = { a : 'apple', b : 'bananna'}

  2. delete obj.a

  3. console.log(obj) // {b: 'bananna'}