[리액트 기초 스터디] JavaScript 연산자

목차 (OPEN)

• 📑 JavaScript 연산자(Operators)
• ➡️ 대입 연산자 (Assignment Operator)
• ➕➖✖️➗ 산술 연산자 (Arithmetic Operator)
• 🔄️ 복합 대입 연산자 (Compound Assignment Operator)
• ⬆️⬇️ 증감 연산자 (Increment / Decrement)
• ⚖️ 논리 연산자 (Logical Operator)
• 🔎 비교 연산자 (Comparison Operator)
• 📚 결론

 

 

 

 

 

 

 

📑 JavaScript 연산자(Operators)

프로그래밍에서 연산자는 가장 기본적이면서도 필수적인 요소이다.

 

자바스크립트에서도 다양한 연산자를 제공하는데,

이는 변수의 값 변경부터 조건문과 반복문 제어까지 광범위하게 사용된다.

 

따라서 이번 글에서는 자바스크립트의 주요 연산자들을 간단한 예제와 함께 정리해보고자 한다.

 

 

---

➡️ 대입 연산자 (Assignment Operator)

변수에 값을 할당할 때 사용한다.

let var1 = 1;

 

 

대입 연산자는 단순해 보이지만,

const로 선언한 상수에는 재할당이 안된다는 점을 헷갈려 하는 경우가 많다.

const a = 10;
a = 20; // ❌ TypeError: Assignment to constant variable

 

위의 코드처럼 const는 값이 변하지 않는다는 특징을 가지고 있으므로

변수 변경이 필요한 경우에는 반드시 let을 사용해야 한다.

 

 

---

➕➖✖️➗ 산술 연산자 (Arithmetic Operator)

사칙연산 및 나머지 연산을 수행한다.

let num1 = 3 + 2; // 5
let num2 = 3 - 2; // 1
let num3 = 3 * 2; // 6
let num4 = 3 / 2; // 1.5
let num5 = 3 % 2; // 1

 

 

 📌 참고

자바스크립트는 number 타입이 모두 부동소수점(64비트 float)으로 처리되기 때문에

예상치 못한 결과가 나올 수 있음에 주의해야 한다.

console.log(0.1 + 0.2); // 0.30000000000000004

 

따라서 금융 계산 같은 정밀도가 중요한 로직에서는 BitInt나 Decimal 등의 라이브러리 사용을 고려하는 것이 좋다고 한다.

 

 

---

🔄️ 복합 대입 연산자 (Compound Assignment Operator)

대입 연산자와 산술 연산자를 결합한 형태이다.

let num7 = 10;

num7 += 20; // 30
num7 -= 5;  // 25
num7 *= 2;  // 50
num7 /= 5;  // 10

 

 

---

⬆️⬇️ 증감 연산자 (Increment / Decrement)

변수 값을 1씩 증가(++) 또는 감소(--) 시킨다.

let num8 = 10;

console.log(num8++); // 10 (후위 연산)
console.log(++num8); // 12 (전위 연산)

 

후위 연산자(변수++)는 먼저 변수 값을 사용한 후에 이를 증가 시키는 것이고,

전위 연산자(++변수)는 먼저 변수 값을 증가시킨 후에 이 증가된 값을 사용하는 것이라는 점을 잘 기억해두자.

 

 

 

---

⚖️ 논리 연산자 (Logical Operator)

Boolean 값에 대한 논리 연산을 수행한다.

let or = true || false;   // true
let and = true && false;  // false
let not = !true;          // false

 

실무에서는 보통 기본값 설정 등의 상황에서 논리 연산자를 자주 활용한다고 한다.

let username = nickName || "Guest";

 

 

---

🔎 비교 연산자 (Comparison Operator)

값이나 자료형을 비교할 때 사용한다.

let comp1 = 1 === "1"; // false (자료형까지 비교)
let comp2 = 1 !== 2; // true (값과 자료형 다르면 true)

let comp3 = 1 == "1"; // true (값만 비교, 자료형은 무시함)


//크기 비교
let comp4 = 2 > 1; // true
let comp5 = 2 < 1; // false
let comp6 = 2 >= 2; // true
let comp7 = 2 <= 2; // true

 

이때 == 은 값만 비교하는 것이고,

=== 은 값 + 자료형까지 비교한다는 것을 잘 기억하고 있어야 된다.

(실무에서는 예상치 못한 타입 변환을 막기 위해 === 사용을 권장한다고 한다.)

 

 

---

📚 결론

나는 그동안 C나 Java 같은 정적 타입 언어만 주로 다뤄왔기 때문에,

연산자라는 개념 자체는 익숙하다고 생각했었다.

그런데 자바스크립트를 처음 접해보니 똑같은 연산자라도 동작 방식이 조금씩 다르고,

특히 동적 타입 언어라서 생기는 묵시적 형변환 같은 부분이 새롭고 낯설게 다가왔다.

 

예를 들어, == 와 === 의 차이나, 10 + true 같은 연산이 실제로 어떻게 처리되는지는

C나 Java를 할 때는 크게 의식하지 않았던 부분이었는데,

이런 걸 직접 실험해보니 자바스크립트에서는 기본적인 연산자조차도 훨씬 더 주의 깊게 다뤄야 한다는 걸 느낄 수 있었다.

 

연산자는 언어를 불문하고 기초 중의 기초겠지만 ,, 문득 언어마다의 특징과 철학이 묻어나는 것 같다는 생각이 들었다 🤔