[JavaScript] 연산자

📚 연산자란 무엇인가요?

연산자는 데이터를 조작하고, 값을 비교하며, 논리적 결론을 도출하는 데 사용되는 특수한 심볼 또는 단어예요. 연산자는 프로그래밍의 기본 요소로, 다양한 연산을 수행하여 프로그램의 로직을 구성하는 데 필수적이에요.

 

연산자는 수학 문제를 푸는 도구와 같아요. 예를 들어, 덧셈 연산자(+)는 두 숫자를 더하는 데 사용되며, 비교 연산자(==, ===)는 두 값이 같은지 비교하는 데 사용돼요.

---

1. 산술 연산자

산술 연산자를 표로 정리하면 다음과 같아요.

산술 연산자	설명
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지
**	거듭제곱
++	1 증가
--	1 감소

• 일반 사칙연산과 마찬가지로 곱셈(*)과 나눗셈(/)이 먼저 계산돼요.

let a = 10 + 5 * 2; // 5 * 2가 먼저 계산되어 10 + 10이 됩니다.
console.log(a); // 출력: 20

let b = (10 + 5) * 2; // 괄호 안이 먼저 계산되어 15 * 2가 됩니다.
console.log(b); // 출력: 30

let c = 20 - 5 / 2; // 5 / 2가 먼저 계산되어 20 - 2.5가 됩니다.
console.log(c); // 출력: 17.5

• 산술 연산자의 사용 예시는 다음과 같아요.

// 덧셈
let sum = 10 + 5; // 결과: 15

// 뺄셈
let difference = 10 - 5; // 결과: 5

// 곱셈
let product = 10 * 5; // 결과: 50

// 나눗셈
let quotient = 10 / 5; // 결과: 2

// 나머지
let remainder = 10 % 3; // 결과: 1

// 거듭제곱
let exponentiation = 10 ** 2; // 결과: 100

// 1 증가 (증가 후의 값을 반환)
let increment = 0;
increment++; // increment는 1이 됨

// 1 감소 (감소 후의 값을 반환)
let decrement = 0;
decrement--; // decrement는 -1이 됨

 

---

2. 문자열 연결 연산자

• 문자열 연결 연산자는 + 기호를 사용해요.

// 문자열 연결
let greeting = "안녕" + "하세요";
console.log(greeting); // 출력: 안녕하세요

// 문자열과 숫자 연결
let age = 25;
let ageStatement = "나이는 " + age + "살입니다.";
console.log(ageStatement); // 출력: 나이는 25살입니다.

 

---

3. 할당 연산자

할당 연산자를 표로 정리하면 다음과 같아요.

할당 연산자	예	동일한 표현	설명
=	x = 2	-	2를 변수 x에 할당
+=	x += 2	x = x + 2	현재 x 값에 2를 더해서 얻은 값을 다시 x에 할당
-=	x -= 2	x = x - 2	현재 x 값에 2를 빼서 얻은 값을 다시 x에 할당
*=	x *= 2	x = x * 2	현재 x 값에 2를 곱해서 얻은 값을 다시 x에 할당
/=	x /= 2	x = x / 2	현재 x 값에 2를 나누어서 얻은 값을 다시 x에 할당
%=	x %= 2	x = x % 2	현재 x 값에 2를 나눈 나머지를 다시 x에 할당

• 할당 연산자는 어떤 값을 변수에 저장하거나, 변수의 현재 값에 연산을 수행한 후 그 결과를 다시 같은 변수에 저장하는 데 사용되는 연산자예요.

// = 사용
let x = 2;
console.log(x); // 출력: 2

// += 사용
x += 2; // x = x + 2와 동일
console.log(x); // 출력: 4

// -= 사용
x -= 2; // x = x - 2와 동일
console.log(x); // 출력: 2

// *= 사용
x *= 2; // x = x * 2와 동일
console.log(x); // 출력: 4

// /= 사용
x /= 2; // x = x / 2와 동일
console.log(x); // 출력: 2

// %= 사용
x %= 2; // x = x % 2와 동일
console.log(x); // 출력: 0

 

---

4. 비교 연산자

비교 연산자를 표로 정리하면 다음과 같아요.

비교 연산자	의미	예	결과	설명
==	같다	3 == 3	true	"3은 3과 같다", true
		"3" == 3	true	"3"은 문자열, 3은 정수, 데이터 형이 달라도 true
===	값과 데이터 형이 같다	3 === 3	true	"3은 3과 값과 데이터 형이 같다", true
		"3" === 3	false	데이터 형이 다르므로 false
!=	다르다	3 != 3	false	"3은 3과 다르다", false
		"3" != 3	false	"3"과 3의 데이터 형을 고려하지 않으므로 false
!==	값과 데이터 형이 다르다	3 !== 3	false	"3은 3과 다르다", false
		"3" !== 3	true	"3"과 3은 데이터 타입이 다름, true
>	크다	5 > 3	true	"5는 3보다 크다", true
<	작다	5 < 3	false	"5는 3보다 작다", false
>=	크거나 같다	5 >= 5	true	"5는 3보다 크거나 같다", true
<=	작거나 같다	5 <= 5	true	"5는 5보다 작거나 같다", true

• 비교 연산자는 값이나 변수들을 비교하는 데 사용되는 연산자로, 주로 조건문과 함께 사용되어 프로그램의 흐름을 제어해요. 이 연산자들은 비교의 결과에 따라 true 또는 false 값을 반환해요.

// 동등 비교
console.log(3 == "3"); // true, 값은 같지만 타입은 다름

// 일치 비교
console.log(3 === "3"); // false, 값은 같지만 타입이 다름

// 부등 비교
console.log(3 != "4"); // true, 값이 다름

// 불일치 비교
console.log(3 !== "3"); // true, 값은 같지만 타입이 다름

// 크기 비교
console.log(5 > 3);   // true, 5는 3보다 큼
console.log(5 < 3);   // false, 5는 3보다 작지 않음
console.log(5 >= 5);  // true, 5는 5보다 크거나 같음
console.log(5 <= 4);  // false, 5는 4보다 작거나 같지 않음

 

---

5. 논리 연산자

논리 연산자를 표로 정리하면 다음과 같아요.

논리 연산자	연산	설명
&&	AND	두 조건이 모두 true면 true를 반환
||	OR	두 조건 중 하나만 true가 되어도 true를 반환
!	NOT	결과가 true면 false로, false면 true로 변경하여 반환

• 논리 연산자는 여러 조건을 결합하여 논리적인 연산을 수행할 때 사용돼요.

// AND 연산자 (&&)
// 두 조건이 모두 true일 때만 true를 반환합니다.
console.log(true && true);   // 출력: true
console.log(true && false);  // 출력: false

// OR 연산자 (||)
// 두 조건 중 하나라도 true이면 true를 반환합니다.
console.log(true || false);  // 출력: true
console.log(false || false); // 출력: false

// NOT 연산자 (!)
// true를 false로, false를 true로 바꿉니다.
console.log(!true);  // 출력: false
console.log(!false); // 출력: true

 

---

🚨 주의할 점

연산자를 사용할 때는 연산자의 우선순위와 피연산자의 데이터 타입을 주의 깊게 고려해야 해요. 특히, ==와 ===의 차이점을 이해하는 것이 중요해요. ==는 값만을 비교하는 반면, ===는 값과 타입 모두를 비교해요.

 

---

📖 결론

연산자는 자바스크립트 프로그래밍에서 데이터를 조작하고, 조건을 평가하는 데 필수적인 요소예요. 각 연산자의 특성을 정확히 이해하고 올바르게 사용하는 것이 중요해요.

 

---

🔗 추가 정보

• 자바스크립트의 연산자에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.