5. 연산자 (Basic Operators)

JS의 연산자에 대해 알아봅시다.

 

수학 연산자

+ : 더하기(plus)

 

let x = 10 + 5;
console.log(x) // 15

const firstName = 'Giraffe';
const lastName = 'Park';
console.log(firstName + ' ' + lastName); // Giraffe Park

+ 연산자는 String의 결합에도 사용할 수 있습니다.

 

 

- : 빼기(minus)

const now = 2022
const ageGiraffe = now - 2000;
const agePark = now - 1991;
console.log(ageGiraffe, agePark); // 22, 31

 

 

* : 곱하기(times)

/ : 나누기(divide)

** : 제곱(exponentiation)

console.log(1 * 2); // 2
console.log(2 / 2); // 1
console.log(2 ** 3); // 8

 

++:증가(increment)

--:감소(decrement)

x++; // x = x + 1
x--; // x = x - 1

---

 

할당 연산자

= : 할당(assignment)

let x = 10 + 5;
console.log(x) // 15

 

 

+= : 더하기 할당 (addition assignment)

-= : 빼기 할당 (subtraction assignment)

*= : 곱하기 할당 (multiplication assignment)

/= : 나누기 할당 (division assignment)

x += 10; // x = x + 10
x -= 3; // x = x - 3

x *= 4; // x = x * 4
x /=5; // x = x / 5

---

비교 연산자

항이 참일 경우 true, 아니면 false를 return 합니다.

 

=== : 엄격히 같다 (strict equality)

 

 

!== : 엄격히 다르다 (strict non equality)

 

< : ~보다 작다 (less than)

 

> : ~보다 크다 (greater than)

 

<= : ~보다 작거나 같다 (less than or equal to)

 

>= : ~보다 크거나 같다 (greater than or equal to)

 

5 === 2 + 3 // true
5 !== 2 + 3 // false
10 < 6 // false
10 > 20 // false
3 <= 2 // false
5 >= 4 // true

 

 

주의 - '==' & '!=' 는 사용하지 마세요!

다른 언어에서는 위의 두 개를 가지고 비교 연산자로 사용하지만, JS에서는 등호를 하나 더 추가해서 사용합니다. '=='와 '==='의 차이점은 '값이 같으면서, 데이터 타입이 같을 때에서만 참인가 아닌가' 입니다. 

5 == '5' // true
5 === '5' // false

위의 예제를 보면 우항이 String 타입임에도 불구하고 '=='는 true를 반환합니다. 언뜻보기에는 편해보일 수 있습니다. 유저가 입력창에 숫자를 입력하면 브라우저는 Number가 아니라 String타입으로만 보내주기 때문에 일일이 String을 Number로 반환해주는 것이 불편할 수 있습니다.

 

하지만 데이터 타입을 혼용해서 사용하면 큰 프로젝트에서 예상치 못한 오류를 아주 아주 많이 발견할 수 있습니다. 그리고 데이터 타입을 고정해놓지 않으면 나중에 개발자가 코딩을 하다가 헷갈릴 수 있습니다.

 

 

---

다음 글에서 연산자 우선순위에 대해 이어서 다뤄보겠습니다.