[JS] 연산자

자바스크립트 연산자에 대해 알아보고자한다.

• 연산자의 사전적 의미
  식이 나타낸 일정한 규칙에 따라 계산하기 위해 사용되는 기호 혹은 문자

• 자바스크립트에서 연산자란?
  하나 이상의 표현식(피연산자)을 연산하여 새로운 값을 만든다

3 + 5 // 8
3 < 5 // true

사전적의미와 크게 다르지 않은 것을 볼 수 있다.
자바스크립트에서는 +(산술 연산자), <(비교 연산자) 외에도 다양한 연산자가 존재 한다.

• 연산자 유형
  1. 산술 연산자
  2. 할당 연산자
  3. 비교 연산자
  4. 삼항 조건 연산자
  5. 논리 연산자
  6. 쉼표 연산자
  7. 지수 연산자
  8. 관계 연산자
  9. 그 외 연산자

1. 산술 연산자

1.1 이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

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

5 + 2 // 7
5 - 2 // 3
5 * 2 // 10
5 / 2 // 2.5
5 % 2 // 1

1.2 문자열 연결 연산자

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

'10' + 2 // '102'
'hello' + 2 // 'hello2'
true + 2 // 3
false + 2 // 2
null + 2 // 2
undefined + 2 // NaN

🔎 JavaScript에서는 조건문이나 논리 연산을 수행할 때, 값들을 평가하기 위해 truthy와 falsy라는 개념을 사용한다. 이러한 개념은 JavaScript의 타입 변환 규칙에 근거하여 정해진다. 이러한 평가 규칙은 JavaScript의 설계에 내재되어 있으며, 조건문이나 논리 연산을 직관적이고 편리하게 작성할 수 있도록 도와준다.

• true: 논리적으로 참을 나타내는 값으로, 숫자로 변환하면 1이 된다.
• false: 논리적으로 거짓을 나타내는 값으로, 숫자로 변환하면 0이 된다.
• null: 값이 없음을 나타내며, 숫자로 변환하면 0이 된다.
• undefined: false나 null처럼 거짓으로 평가되지 않는다. "값이 할당되지 않았거나 변수에 값이 할당되지 않았음"을 나타내는 특별한 상태를 나타내기 때문에 타입 변환이 필요하지 않다. 따라서 undefined와 다른 값 사이의 연산이나 비교를 할 때에는 undefined가 다른 값으로 변환되지 않는다. 대신, 연산의 결과는 주로 NaN으로 평가된다.

1.3 단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

단항 산술 연산자	의미
++	피연산자에 1을 더함
--	피연산자에서 1을 뺌
+	피연산자가 숫자타입이 아니면 숫자로 변환을 시도
-	피연산자의 부호를 반대로 바꾼 값을 반환

let one = 1, two = 2

let result1 = ++one + two // 2+2
console.log(result1) // 4
console.log(one) // 2

let result2 = --one + two // 0+2
console.log(result2) // 2
console.log(one) // 0

let stringOne = '1', two = 2

let result3 = +stringOne + two // 1+2
console.log(result3) // 3
console.log(stringOne) // 1

2. 할당 연산자

오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다.

할당 연산자	예
=	x = 5
+=	x += 5
-=	x -= 5
*=	x *= 5
/=	x /= 5
%=	x %= 5

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

3. 비교 연산자

피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 boolean 값을 반환한다.
만약 두 피연산자가 서로 다른 타입이면, JavaScript는 피연산자들을 서로 비교하기에 적합한 타입으로 변환한다. 이 동작은 대개 두 값을 모두 숫자로 변환한 후 비교한다.

3-1. 대소 관계 비교 연산자

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

1 > 0 // true
1 < 0 // false
'1' >= 1 // true
'1' <= '1' // true

3-2. 동등/일치 비교 연산자

비교 연산에서 발생하는 타입 변환의 유일한 예외는 === 과 !== 연산자를 사용해 엄격 일치와 불일치 비교를 수행하는 경우인데, 두 연산자는 비교 전에 피연산자를 변환하지 않는다.

🔎 JavaScript의 독특한 타입 변환 규칙
JavaScript는 동적 타입 언어로, 변수에 할당되는 값의 유형이 동적으로 결정된다. 숫자와 문자열을 비교할 때 JavaScript는 유형 강제 변환(type coercion)을 수행하여 비교한다. 이런 유형 강제 변환을 발생시키지 않고 엄격하게 비교하기 위해 === 연산자를 사용한다. 이는 예기치 않은 결과를 방지하고 프로그램의 안정성을 향상시키기 위함이다.

동등/일치 비교 연산자	의미	예	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 자료형이 같음
!=	부동등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y의 값과 자료형이 다름

10 == 10 // true
'10' == 10 // true
'10' === 10 // false
'10' === '10' // true
'10' != 10 // false
'10' !== 10 // true

4. 삼항 조건 연산자

조건 연산자는 조건식 ? true일 때 반환 값 : false일 때 반환 값 으로 구성된다.
물음표(?) 이전 조건식의 값이 참이면 콜론(:) 이전의 값이 반환되고, 거짓이면 콜론(:) 이후의 값이 반환된다.

let number = 10
let result = number < 20 ? 'yes' : 'no' 

console.log(result) // yes

5. 논리 연산자

대부분의 경우 피연산자의 불리언 값과 함께 불리언 값을 반환하지만, 피연산자가 불리언 값이 아닌 경우 논리연산자의 반환 값도 불리언 값이 아닐 수 있다.

🔎 피연산자가 모두 true로 평가될 때

• 논리 연산자는 좌항에서 우항으로 평가가 진행된다.
• && : 논리곱 연산자는 피연산자 모두 true인지 평가해야 표현식을 평가할 수 있기 때문에 논리 연산의 결과를 결정하는 두번째 피연산자를 그대로 반환한다.
• || : 논리합 연산자는 피연산자 하나만 true여도 표현식을 평가할 수 있기 때문에 논리 연산의 결과를 결정한 첫 번째 피연산자를 그대로 반환한다.

논리 연산자	의미	설명
ㅣㅣ	논리합 (OR)	둘 중 하나가 참일 때 true를, 그 외에는 false를 반환
&&	논리곱 (AND)	둘 다 참일 때 true를, 그 외에는 false를 반환
!	부정 (NOT)	true를 false로, false를 true로 반환

true || true // true
true || false // true
false || true // true
false || false // false
'lee' || 'heeju'; // lee
123 || 'heeju'; // 123
false || 'heeju'; // heeju

true && true // true
true && false // false
false && true // false
false && false // false
'lee' && 'heeju'; // heeju
123 && 'heeju'; // heeju
false && 'heeju'; // false

!true // false
!false // true
!'heeju' // false

6. 쉼표 연산자

각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 평가 결과를 반환한다.

let arr = [1, 2, 3, 4, 5];

// 일반적인 함수
let result1 = arr.reduce((acc, cur) => {
    return acc + cur;
}, 0);

// 쉼표 연산자로 표현
let result2 = arr.reduce((acc, cur) => (acc += cur, acc), 0);

console.log(result1); // 15
console.log(result2); // 15

7. 지수 연산자

좌항의 연산자를 밑으로, 우항의 연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2 // 4
2 ** 3 // 8
(-5) ** 3 // -125
5 * 2 ** 2 // 20

8. 관계 연산자

피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 불리언 값을 반환한다.

관계 연산자	설명
in	지정한 속성이 지정한 객체에 존재할 경우 true를 반환
instanceof	지정한 객체가 지정한 객체 타입에 속하면 true를 반환

let color = ['red', 'orange', 'yellow']

0 in color // true
'length' in color // true
'red' in color // false

color instanceof Array // true
color instanceof Function // false

9. 그 외 연산자

연산자	설명
typeof	피연산자 타입을 나타내는 문자열을 반환
delete	객체의 속성을 제거할 수 있는 경우에는 true를 반환, 제거할 수 없을 땐 false를 반환

let me = {
    name: 'heeju',
    address: 'seoul',
};

typeof me // object
typeof me.name // string

delete me.address // true
console.log(me.address) // undefined