2. 연산자의 종류

연산자는 하나 이상의 표현식을 대상으로

산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다.

이때 연산의 대상을 피연산자(operand)라 한다. 

 

피연산자는 값으로 평가될 수 있는 표현식이어야 한다.

피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

// 산술 연산자
4 * 5 // 20

//문자열 연결 연산자
'sung' + 'tt' // sungtt
'sung ' + 'tt'// sung tt

//할당 연산자
result = red // red

//비교 연산자
3 > 5 // false

//논리 연산자
true && false // false

//타입 연산자
typeof 'Hi' // string

1.산술 연산자

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

산술 연산이 불가능한 경우 NaN을 반환한다.

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

 

1-1.이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

특징으로는 피연산자의 값을 변경하는 부수효과가 없으며, 언제나 새로운 값을 만든다.

1 + 20; // 덧셈 21 
1 - 20; // 뺄셈 -19
5 * 4; // 곱셈 20
5 / 4; // 나눗셈 1.25
5 % 4; // 나머지 1

1-2.단항 산술 연산자는 1개의 피연산자를 연산하여 값을 만든다.

5++ // 증가 6
5-- // 감소 4
+ // 아무 기능도 없다. 음수를 양수로 반전하지도 않음
- // 양수를 음수로, 음수를 양수로 반전한 값을 반환

증가/감소(++/--) 연산자는 위치에 의미가 있다.

피연산자 앞에 위치한 전위 증/감 연산자는 먼저 피연산자의 값을 증/감시킨 후 다른 연산을 수행한다.

피연산자 뒤에 위치한 후위 증/감 연산자는 다른 연산을 수행 후, 피연산자 값을 증/감 시킨다.

var x = 10, result;

// 피연산자 뒤에 있으므로 선할당, 후증가 한다.
result = x++;
console.log (result, x); // 10, 11

// 피연산자 앞에 있으므로 선증가, 후할당 한다.
result = ++x;
console.log (result, x); // 11, 11

// 피연산자 뒤에 있으므로 선할당, 후감소 한다.
result = x--;
console.log(result, x); // 11, 10

// 피연산자 앞에 있으므로 선감소, 후할당 한다.
result = --x;
console.log(result, x); // 10, 10

//아무 효과도 없다
+10; // 10
+(-10) // -10

//부호를 반전한다.
-(-10); // 10

 

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

정확히는 피연산자를 변경하는것이 아닌, 변환한 값을 새로 생성한다.

var x = '1'; // 문자열 1

console.log(+x); // 1
console.log(x); // '1'

x = true
console.log(+x); // 1
console.log(x); // true

x = false
console.log(+x); // 0
console.log(x); // false

x = 'Hello'
console.log(+x) // NaN (Not a Number의 약자)
console.log(x) // Hello

 

2.문자열 연결 연산자는 +연산 수행 중 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

그 외의 경우에는 산술 연산자로 동작,

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

// 산술 연산자
1 + 3 // 4

//true는 1로 타입 변환된다.
1 + true // 2

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

//null은 0으로 타입 변환
1 + null // 0

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

 

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

할당 연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수효과가 있음.

let x;

x = 10 // 10
x += 5 // x = x + 5 // 15
x -= 5 // x = x - 5 // 10
x *= 5 // x = x * 5 // 50
x /= 5 // x = x / 5 // 10
x %= 5 // x = x % 5 // 0

//문자열 연결 연산자에도 적용 가능하다

let result = '안녕하세요! 제 이름은 '
result += 'sungtt입니다';
console.log(result); // '안녕하세요! 제 이름은 sungtt입니다

 

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

if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다. 비교 연산자의 종류는 아래와 같다.

 

4-1.동등/일치 비교 연산자

동등/일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지

비교해 불리언 값을 반환한다. 동등과 일치는 비교하는 엄격성의 정도가 다르다.

비교 연산자	의미	사례	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부동등 비교	x != y	x와 y의 값이 다름
!==	부일치 비교	x !== y	x와 y의 값과 타입이 다름

 

동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후

같은 값인지 비교한다. 그렇기때문에 결과예측이 어려울 때도 있어, 때에 따라 일치 비교를 통해 더 쉽게 예측할 수 있다.

10 == 10; // true
10 == '10'; // true 암묵적 변환을 통해 일치시키면 동등하다.
'sungtt' == 'sungtt'; // true

10 === 10; // true
10 === '10'; // false 암묵적 변환을 하지않고, 값과 타입을 비교한다.
NaN === NaN; // false NaN은 자신과 일치하지않는 유일한 값이다.
// NaN 조사는 isNaN 빌트인 함수 참조

0 === -0; // true 자바스크립트에는 양과 음의 0이 따로 존재하지만 true로 반환하는것을 주의하자
0 == -0; // true
Object.is(-0,+0); // true
// 정확한 비교는 ES6의 Object.is 메서드 참조

 

4-2.부동등/부일치 비교 연산자는 반대 개념이다.

//부동등 비교
10 != 8; // true
8 != 8; // false

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

 

 

 

5.대소 관계 비교 연산자

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

대소 관계 비교 연산자	예제	설명	부수효과
>	x > y	x가 y보다 크다	X
<	x < y	x가 y보다 작다	X
>=	x >= y	x가 y보다 크거나 같다.	X
<=	x <= y	x가 y보다 작거나 같다.	X

 

6.삼항 조건 연산자

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

삼항 조건 연산자 표현식은 다음과 같다.

조건식 ? 조건식이 true 시 값 : 조건식이 false 시 값;

// 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값;
let score = 50
let result = score >= 60 ? 'pass':'fail';
console.log(result); // 'fail'

7.논리 연산자

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

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

true || true; // true
true || false; // true
false || false; // false

true && true; // true
true && false; // false
false && false; // false

!true; // false
!false; // true

 

8.쉼표 연산자

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

마지막 피연산자의 평가 결과를 반환한다.

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

 

9.그룹 연산자

소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.

따라서 그룹 연산자를 사용하면 연산자의 우선순위를 조절할 수 있다. 그룹 연산자는 연산자 우선순위가 가장 높다.

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

10. typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환해준다. null 타입 확인은 === 사용.

typeof '' // sritng
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

11. 지수 연산자

ES7에서 도입. 지수 연산자는 좌항의 피연산자를 베이스로, 우항의 피연산자를 지수로 거듭 제곱해 숫자값을 반환한다.

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

-5 ** 2 ; // SyntaxError ( -를 연산자로 인식하기때문)
(-5) ** 2; // 25

12. 옵셔널 체이닝 연산자

90p