[모던 자바스크립트 Deep Dive] 07. 연산자

연산자

• 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듦
• 값으로 평가된 피연산자를 연산해 새로운 값을 만듦

피연산자

• 연산의 대상
• 값으로 평가될 수 있는 표현식
• 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 함

 

7.1 산술 연산자

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

 

7.1.1 이항 산술 연산자

• 2개의 피연산자를 산술 연산하여 숫자 값을 만듦
• 피연산자의 값을 변경하는 부수 효과가 없다. => 언제나 새로운 값을 만듦

 

이항 산술 연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지

 

 

7.1.2 단항 산술 연산자

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

단항 산술 연산자	의미	부수 효과
++	증가	O
--	감소	O
+	어떠한 효과도 없음	X
-	양수를 음수로, 음수를 양수로 반전한 값 반환	X

 

• 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환함
• 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환함

let x = '1';

//문자열을 숫자 타입으로 변환
console.log(+x); //1

//부수 효과는 없다
console.log(x); //"1"

x = true;
console.log(+x); //1
//부수 효과는 없다
console.log(x); //true

x = 'Hello';
//문자열을 숫자 타입으로 변환 불가능하므로 NaN 반환
console.log(+x); //NaN
//부수 효과는 없다
console.log(x);//"Hello"

 

• -단항 연산자도 +단항 연산자처럼 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환함, 부수효과는 없음

//문자열을 숫자 타입으로 변환
-'10' // ->10

-true; // ->-1

//문자열을 숫자 타입으로 변환 불가능하므로 NaN 반환
- 'Hello'; // -> NaN

 

 

7.1.3 문자열 연결 연산자

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

//문자열 연결 연산자
'1'+2 //->'12'

//true는 1로 타입 변환됨
1+true //->2

//false는 0으로 타입 변환됨
1+flase //->1

//null는 0으로 타입 변환됨
1+null; // ->1

//undefined는 숫자로 타입 변환되지 않음
+undefined; //->NaN
1+undefined; //->NaN

 

 

• 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)
  : 자바스크립트 엔진이 암묵적으로 타입을 변환하는 것

 

7.2 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당함
• 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있음
• 예) =, +=, -=, *=, /=, %=

 

 

할당문

• 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가됨
• 예) x = 10
• 위 할당문 x = 10은 x에 할당된 숫자 값 10으로 평가됨. 따라서 할당문을 다른 변수에 할당할 수도 있음

let a, b, c;

//연쇄 할당, 오른쪽에서 왼쪽으로 진행
//1)c = 0 : 0으로 평가됨
//2)b = 0 : 0으로 평가됨
//3)a = 0 : 0으로 평가됨

a = b = c = 0;

 

 

7.3 비교 연산자

• 좌항과 우항의 피연산자를 비교 후 그 결과를 불리언 값으로 반환 함
• if문이나 for문과 같은 제어문의 조건식에 주로 사용함

 

7.3.1 동등/일치 비교 연산자

동등 비교 연산자(==)

• 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교함
  => 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후 같은 값일 수 있다면 true를 반환함
• 예측하기 어려운 결과를 만드므로 사용하지 않는 편이 좋음

 

5 == 5; //->true

//타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등함
5 == '5'; //->true

 

 

일치 비교 연산자(===)

• 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환함
• 암묵적 타입 변환 없이 값을 비교한다. =>예측이 쉽다.
• NaN은 자신과 일치하지 않는 유일한 값이다.

5 === 5; //->true

//타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등함
5 === '5'; //->false

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

 

• 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다.

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

 

 

• +0, -0 은 일치 비교/동등 비교 모두 결과는 true이다.

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

0 == -0; //->true

 

ES6에서 도입된 Ojbect.is 메서드는 다음과 같이 예측 가능한 정확한 비교 결과를 반환한다. 그 외에는 일치 비교 연산자(===)와 동일하게 동작한다.

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

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

 

 

7.3.2 대소 관계 비교 연산자

• 피연산자의 크기를 비교하여 불리언 값을 반환한다.
• 예) >, <, >=, <=

 

7.4 삼항 조건 연산자

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

 

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

 

삼항 조건 연산자   VS   if...else

• 삼항 조건 연산자 표현식은 값처럼 사용할 수 있음
• if...else문은 값처럼 사용할 수 없음
• 조건에 따라 어떤 값을 결정해야 할 경우는 삼항 조건 연산자
• 조건에 따라 수행해야 할 문이 여러 개라면 if...else문이 가독성이 더 좋음
•  

7.5 논리 연산자

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

논리 연산자	의미	부수 효과
||	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

 

• 논리 부정(!)연산자는 항상 불리언 값 반환
• 피연산자가 반드시 불리언 값을 필요는 없음(불리언이 아닐시 불리언 값으로 암묵적 타입 변환됨)

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

!'Hello'; //->false

 

• 논리합 또는 논리곱 연산자 표현식의 평가 결과는 불리언이 아닐 수 있음
• 논리합 또는 논리곱 연산자는 언제나 2개의 피연산자 중 한쪽으로 평가됨

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

 

 

7.6 쉼표 연산자

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

let x, y, z;

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

 

7.7 그룹 연산자

• 소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가함
• 그룹 연산자는 우선순위가 가장 높음

 

7.8 typeof 연산자

• 피연산자의 데이터 타입을 문자열로 반환함
• "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나를 반환 함

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"

 

• typeof null은 "null"이 아닌 "object"를 반환하는 것 주의! (버그인데 기존코드 영향 때문에 수정되지 못함)
• 값이 null인지 확인할 때는 일치 연산자(===)를 사용함!

var foo = null;

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

 

• 선언하지 않은 식별자를 typeof연산자로 연산시 ReferenceError가 아닌 undefined가 발생함

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

 

 

7.9 지수 연산자

• ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑, 우항의 피연산자를 지수로 거듭 제곱하여 값을 반환 함

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

//지수 연산자 도입되기 이전에는 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

 

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

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

 

• 이항 연산자 중 우선순위가 가장 높음

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

 

 

7.11 연산자 부수효과

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