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

연산자

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듬

피연산자 : 연산의 대상이자 값으로 평가될 수 있는 표현식

연산자 : 값으로 평가된 피연산자를 연산해 새로운 값으로 만듬

 

산술 연산자

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

이항 산술 연산자  : 2개의 피연산자를 산술 연산하여 숫자 값을 만듬

(피연산자의 값을 변경하는 부수 효과가 없고 언제나 새로운 값을 만듬)

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

 

단항 산술 연산자  : 1개의 피연산자를 산술 연산하여 숫자 값을 만듬

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

 

증가/ 감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이루어짐

• 전위 증가/ 감소 연산자 : 피연산자의 값을 먼저 증가/ 감소 시킨 후 다른 연산 수행
• 후위 증가/ 감소 연산자 : 다른 연산을 수행한 수 피연산자의 값을 증가/ 감소

var x = 5, result;

// 선할당 후증가
result = x++;
console.log(result, x); // 5 6

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

 

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

피연산자 자체를 변경하는 것이 아니라 단순히 숫자타입으로 변환한 값을 생성해서 반환

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

var x = 'Echichi'
console.log(+x)	// NaN
console.log(x) // Echichi 부수 효과 없음

 

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

// true는 1로 타입 변환
1 + true = 2

// false는 0으로 타입 변환 
1 + false = 1

암묵적 타입변환/ 타입 강제 변환 : 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 현상

 

할당 연산자

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

(좌항의 변수에 값을 할당하므로 변수의 값이 변하는 부수 효과가 있음)

할당 연산자	예	동일 표현	부수 효과
=	x = 5	x = 5	O
+=	x += 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

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

 

비교 연산자

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

동등/ 일치 비교 연산자

동등 비교/ 부동등 비교

• == / !=
• 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교

일치 비교/ 불일치 비교

• === / !==
• 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true/ false 를 반환
• NaN 은 자신과 일치하지 않는 유일한 값
• 양의 0 (+0)과 음의 0 (-0) 을 동일하다고 평가

대소 관계 비교 연산자 

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

 

삼항 조건 연산자

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

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식 문

// 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
var result = score >= 60 ? 'pass' : 'false'

// if...else 문을 사용해도 삼항 조건 연산자 표현식과 유사하게 처리 가능
// 하지만 if...else 문은 표현식이 아닌 문으로 값으로 사용할 수 없음
if(score >= 60){
	result = 'pass'
}else{
	result = 'false'
}

 

논리 연산자

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

논리 부정 연산자는 언제나 불리언 값을 반환

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

 

쉼표 연산자

쉼표 연산자 : 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환

 

그룹 연산자

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

 

typeof 연산자

typeof 연산자 : 피연산자의 데이터 타입을 문자열로 반환 (string, number, boolean, undefined, symbol, object, function)

// 자바스크립트의 첫번째 버그
typeof null // object

// undeclared 식별자를 선언한 적이 없다
typeof undeclared; // ReferenceError 가 아닌 undefined

 

지수 연산자

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

2 ** 2; // 4
Math.pow(2,2); // 4 Math.pow는 지수 연산자와 같음

// 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 함
(-5) ** 2; // 25

// 할당 연산자와 함께 사용 가능
var num = 5;
num **= 2; // 25 

// 이항 연산자 중 우선순위가 가장 높음
2 * 5 ** 2; // 50