[JavaScript] 05. 연산자

🟡 1. 연산자(Operator)

- 연산이란 수나 식을 일정한 규칙에 따라 계산하는 것을 의미합니다. 연산자는 어떠한 연산을 하는 것인지 의미하는 기호입니다. 연산의 대상을 피연산자(Operand)라 합니다. 

- 연산자의 종류는 여러 가지가 있지만, 본 글에서는 (산술, 할당, 비교, 삼항 조건, 논리, 쉼표, 그룹, typeof) 8가지의 연산자를 설명하고자 합니다.

 

 

🟡 2. 산술 연산자 (Arithmetic Operator)

 - 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행합니다. 산술 연산이 불가능할 경우에는 NaN(Not a Number)을 반환합니다.

 

🟣 2.1 이항 산술 연산자

  - 이항 산술 연산자는 2개의 피연산자를 연산합니다.

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

 1 + 2 // 3 -> 피연산자 : 1, 2  연산자 : +
 4 - 1 // 3 -> 피연산자 : 1, 4  연산자 : -
 1 * 3 // 3 -> 피연산자 : 1, 3  연산자 : *
 6 / 2 // 3 -> 피연산자 : 2, 6  연산자 : /
 7 % 4 // 3 -> 피연산자 : 4, 7  연산자 : %

 

 

 🟣 2.2 단항 산술 연산자

  - 단항 산술 연산자는 1개의 피연산자를 연산합니다.

단항 산술 연산자	설명
++	값이 1 증가
--	값이 1 감소
+	다른 효과 없음.
-	부호를 반전시킨다. 음수->양수 , 양수->음수

- (++), (--) 연산자는 피연산자를 기준으로 앞에 있냐, 뒤에 있냐에 따라 의미가 조금 다릅니다. 피연산자의 앞에 있으면 전위 연산을 하게 되어, 다른 연산보다 먼저 진행이 됩니다.  피연산자 뒤에 있으면 후위 연산을 하게 되어, 다른 연산이 끝난 뒤 진행이 됩니다.

let oper = 10;
let result;

// 선대입 후위증가
result = oper++;
console.log(result, oper); // 10, 11 -> result에 10을 대입 후 oper의 값을 1 증가

// 선위증가 후대입
result = ++oper;
console.log(result, oper); // 12, 12 -> oper의 값을 1 증가시킨 후 result에 대입

// 선대입 후위감소
result =  oper--;
console.log(result, oper); // 12, 11 -> result에 12를 대입 후 oper의 값을 1 감소

// 선위감소 후대입
result = --oper;
console.log(result, oper); // 10, 10 -> oper의 값을 1 감소시킨 후 result에 대입

 

- (+)단항 연산자는 숫자 연산에서는 어떠한 효과도 없지만, 피연산자가 숫자가 아닌 경우에는 숫자 타입으로 변환시킵니다. 이때 피연산자가 숫자 타입으로 변환되는 것이 아닌 새로운 값이 생성이 되는 것입니다.

+17 // 17
+'17' // 17
+true // 1
+false // 0

 

- (-)단항 연산자는 숫자 연산에서는 부호를 바꾸고, 피연산자가 숫자 타입이 아닐 때는 숫자 타입으로 변환합니다.

-17 // -17
-'17' // -17
-true // 1
-false // 0

 

 

 🟣 2.3 문자열 연결 연산자

  - (+) 연산자는 피연산자 중에 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작합니다.

"1" + "안녕하세요" // "1안녕하세요"
6 + "17" // "617"

 

 

🟡 3. 할당 연산자 (Assignment Operator)

- 할당 연산자는 오른쪽에 있는 피연산자의 연산 결과를 왼쪽에 있는 변수에 할당합니다.

할당 연산자	표기	동일 표현
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

let x;

x = 5; // 5 -> 5 대입
x += 5; // 10 -> 5 + 5
x -= 4; // 6 -> 10 -4
x *= 5; // 30 -> 6 * 5
x /= 3; // 10 -> 30 / 3
x %= 3; // 1 -> 10 % 3

 

 

🟡  4. 비교 연산자 (Comparison Operator)

 - 비교 연산자는 왼쪽 피연산자와 오른쪽 피연산자를 비교하여 boolean 값을 반환합니다.

 🟣 4.1 동등/ 일치 비교 연산자

비교 연산자	의미	표현	설명
==	동등 비교	x == y	x와 y의 값이 같다
===	일치 비교	x === y	x와 y의 값과 타입이 같다
!=	부등 비교	x != y	x와 y의 값이 다르다
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다르다

// 동등 비교
10 == 10; // true
10 == '10'; // true
10 == 11; // false


// 일치 비교
10 === 10; // true
10 === '10'; // false --> 값이 같지만 타입이 다름


// 부등 비교
10 != 10; // false
10 != 11; // true -> 값이 다름
10 != '11'; // true -> 값과 타입이 다름



// 불일치 비교
10 !== 10; // false
10 !== 11; // false -> 값이 다르지만 타입이 같음
10 !== '11'; // true -> 값과 타입이 다름

 

 

 🟣 4.2 대소 관계 비교 연산자

 - 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 boolean 값으로 반환합니다.

대소 관계 비교 연산자	표현	설명
>	x > y	x가 y보다 크다
<	x < y	x가 y보다 작다
>=	x >= y	x가 y보다 크거나 같다
<=	x <= y	x가 y보다 작거나 같다

10 > 1 // true
10 > 10 // false
10 > 11 //false


10 < 1 // false
10 < 10 // false
10 < 11 //true


10 >= 1 // true
10 >= 10 // true
10 >= 11 //false


10 <= 1 // false
10 <= 10 // true
10 <= 11 //true

 

 

🟡 5. 삼항 조건 연산자(Ternary Operator)

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

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

let name = 'bigone';

// name이 'bigone'이면 'bigone입니다!'를 반환, 아니면 'bigone이 아닙니다!'를 반환
let result = name === 'bigone' ? 'bigone입니다!' : 'bigone이 아닙니다!';

// 1. name이 'bigone'인지 판단하여 boolean 값(true, false) 반환
// 2.1 반환된 boolean 값이 true이면 result에 'bigone입니다!'를 할당
// 2.2 반환된 boolean 값이 false이면 result에 'bigone이 아닙니다!'를 할당


console.log(result) // 'bigone입니다!'

 

 

🟡 6. 논리 연산자(Logical Operator)

- 논리 연산자는 왼쪽 피연산자와 오른쪽 피연산자를 논리 연산합니다. 

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

// 논리합 연산자 ||
true || true   // true
true || false  // true
false || true  // true
false || false // false

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

// 논리 부정 연산자 !
!true  // false
!false // true

 

- 논리 부정 연산자(!)는 언제나 boolean 값을 반환 하지만, 논리합 연산자(||)와 논리곱 연산자(&&)는 일반적으로는 boolean값을 반환하지만, 반드시 boolean값을 반환하는 것은 아닙니다.

// 암묵적 타입 변환
!0 // true


// 단축 평가

'Cat' && 'Dog' // 'Dog'
// &&의 경우 모든 피연산자가 true인 경우에 true를 반환한다. 
// 그러므로 모두 True일 경우에 마지막 값이 반환이 된다.
'Cat' && 'Dog' && 'Bird' // 'Bird'


'Cat' || 'Dog' // 'Cat'
// ||의 경우 피연산자 중 하나라도 true인 경우에 true를 반환한다.
// 그러므로 처음으로 나온 true 값을 반환한다.
false || 'Cat' || 'Dog' // 'Cat'

 

 

🟡 7. 쉼표 연산자

 - 쉼표 연산자(,)는 왼쪽 피연산자부터 차례대로 평가하고 마지막 피연산자의 평가 결과를 반환합니다.

let x, y, z;
x = 5, y = 10, z = 15; // 15

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

 

 

🟡 8. 그룹 연산자

- 그룹 연산자는 그룹 내의 표현식을 최우선으로 연산합니다.

5 * 3 + 2 // 17

5 * (3 + 2) // 25

 

 

🟡 9. typeof 연산자

- typeof 연산자는 피연산자의 데이터 타입을 반환합니다.

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 function () {}  // "function"

// 자바스크립트의 설계 오류
typeof null // "object"

 

 

 

📝 정리

• 연산자는 어떠한 연산을 할지 표현하는 기호이다.
• 산술 연산자는 주로 숫자 타입을 연산할 때 사용한다.
• 비교 연산자는 두 피연산자를 비교할 때 사용한다.
• 삼항 조건 연산자는 피연산자의 결과에 따라 반환해야 되는 값이 둘 중 하나 일 때 사용한다.
• 논리 연산자는 논리적인 연산을 하고 싶을 때 사용한다.
• 쉼표 연산자는 주로 여러 개의 변수를 한 번에 각각 연산할 때 사용한다.
• 그룹 연산자는 어떠한 연산을 최우선으로 하기 위해 사용한다.
• typeof 연산자는 피연산자의 데이터 타입을 구하기 위해 사용한다.

 

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~