모던 자바스크립트 입문 - Chapter 5: 표현식과 연산자 💻

오늘은 자바스크립트 코드의 가장 기본적인 구성 요소인 표현식과 연산자에 대해 알아보겠습니다.

---

📌 목차

• 표현식(Expression)과 문(Statement)의 차이
• 연산자란?
• 산술 연산자
• 할당 연산자
• 관계 연산자
• 논리 연산자
• typeof 연산자
• 연산자 우선순위
• 마무리 정리

---

🤔 표현식(Expression)과 문(Statement)의 차이

표현식: 하나의 값으로 평가될 수 있는 코드

5 + 3       // 8
"Hello"     // "Hello"
true        // true

 

문: 하나 이상의 표현식으로 이루어진 코드의 완전한 실행 단위

let x = 10;   // 변수 선언문
if (x > 5) {  // 조건문
    console.log("x는 5보다 큽니다");
}

 

👉 모든 표현식은 문이 될 수 있지만, 모든 문이 표현식이 되는 건 아닙니다!

---

➕ 산술 연산자

피연산자가 숫자인 연산자 입니다

피연산자가 숫자로 바꿀 수 없는 값이거나 계산할 수 없을 때는 NaN이 나옵니다

연산자	뜻	예제	예제의 뜻
+	더하기	a + b	a 와 b를 더한 값
-	빼기	a - b	a에서 b를 뺀 값
*	곱하기	a * b	a와 b를 곱한 값
/	나누기	a / b	a를 b로 나눈 값
%	나머지	a % b	a를 b로 나눈 나머지 값
++	증가 연산자	++a	a에 1을 더한 다음에 a 값을 평가한다
		a++	a를 평가한 다음에 a에 1을 더한다
--	감소 연산자	--a	a에서 1을 뺀 다음에 a 값을 평가한다
		a--	a를 평가한 다음에 a에서 1을 뺀다
+	아무것도 처리하지 앖음	+a	a와 같은 값으로 평가한다
-	부호 반전	-a	a의 부호를 반전한 값으로 평가한다

---

 

📝 할당 연산자

변수에 값을 저장할 때 사용하는 연산자

연산자	예제	예제의 뜻
+=	a += b	a = a + b
-=	a -= b	a = a - b
*=	a *= b	a = a * b
/=	a /= b	a = a / b
%=	a %= b	a = a % b

---

🔍 관계 연산자

두 값을 비교하여 true 또는 false를 반환

연산자	뜻	예제	예제의 뜻
==	값이 같음	a == b	a 값과 b 값이 같으면 true, 그 외에는 false
!=	값이 다름	a != b	a 값과 b 값이 다르면 true, 그 외에는 false
===	값과 타입이 같음	a === b	a 값과 b 값과 타입이 같으면 true, 그 외에는 false
!==	값과 타입이 다름	a !== b	a 값과 b 값과 타입이 다르면 true, 그 외에는 false
<	작음	a < b	a 값이 b 값보다 작으면 true, 그 외에는 false
>	큼	a > b	a 값이 b 값보다 크면 true, 그 외에는 flase
<=	작거나 같음	a <= b	a 값이 b 값보다 작거나 같으면 true, 그 외에는 false
>=	크거나 같음	a >= b	a 값이 b 값보다 크거나 같으면 true, 그 외에는 flase

---

⚙️ 논리 연산자

논리 연산자는 관계 연산자를 사용하여 만든 논리식과 결합하여 더욱 복잡한 논리를 정의합니다

연산자	뜻	예제	예제의 뜻
&&	논리곱	a && b	a와 b가 모두 true 면 true, 그 외에는 false
||	논리합	a || b	a와 b 중 하나라도 true 면 true, 모두가 flase 면 false
!	부정	!a	a가 true면 false, false 면 true

---

 

🧪 typeof 연산자

변수나 값의 데이터 타입을 문자열로 반환

typeof "안녕"      // "string"
typeof 42          // "number"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof null        // "object" (자바스크립트의 역사적 오류)
typeof {}          // "object"
typeof []          // "object"
typeof function(){} // "function"

 

---

🔢 연산자 우선순위

연산자가 여러 개 있는 경우, 어떤 연산이 먼저 실행되는지 결정하는 순서

괄호 > 단항 연산자 > 산술 > 비교 > 논리 > 할당

let result = 2 + 3 * 4;     // 2 + 12 = 14 (곱셈 먼저)
let result2 = (2 + 3) * 4;  // 5 * 4 = 20 (괄호 먼저)

---

📚 마무리 정리

오늘 배운 내용을 정리하면:

• 표현식은 하나의 값으로 평가되는 코드 조각이며, 문은 실행 가능한 전체 코드 단위입니다
• 자바스크립트에는 수많은 연산자가 있고, 그 역할은 값 계산, 비교, 할당, 논리 판단 등 다양합니다.
• 특히 엄격 비교(===), 단축 평가, 삼항 연산자는 실제 개발에서 매우 자주 사용됩니다.
• 연산자 우선순위를 이해하면 예기치 않은 결과를 방지할 수 있어요

💡 오늘 새롭게 알게 된 것

🤔 어려웠던 점

---

🎯 다음 학습 계획

다음 포스팅에서는 웹 브라우저에서의 입출력에 대해 알아보겠습니다.