반응형
자바스크립트의 **연산자(Operators)**를 종류별로 깔끔하게 정리하고, 각 연산마다 간단한 예제를 만들었습니다.
1. 산술 연산자 (Arithmetic Operators)
숫자 연산에 사용됩니다.
연산자설명예제결과
| 연산자 | 설명 | 예제 | 결과 |
| + | 더하기 | 5 + 3 | 8 |
| - | 빼기 | 5 - 3 | 2 |
| * | 곱하기 | 5 * 3 | 15 |
| / | 나누기 | 5 / 2 | 2.5 |
| % | 나머지 | 5 % 2 | 1 |
| ** | 거듭제곱 | 2 ** 3 | 8 |
| ++ | 1 증가 | let x=5; x++; | 6 |
| -- | 1 감소 | let x=5; x--; | 4 |
2. 대입 연산자 (Assignment Operators)
변수에 값을 할당합니다.
| 연산자 | 설명 | 예제 | 결과 |
| = | 기본 할당 | x = 10 | 10 |
| += | 더해서 할당 | x += 5 | x = x + 5 |
| -= | 빼서 할당 | x -= 5 | x = x - 5 |
| *= | 곱해서 할당 | x *= 5 | x = x * 5 |
| /= | 나눠서 할당 | x /= 5 | x = x / 5 |
| %= | 나머지로 할당 | x %= 5 | x = x % 5 |
| **= | 거듭제곱 할당 | x **= 3 | x = x ** 3 |
3. 비교 연산자 (Comparison Operators)
값을 비교하고 true / false 반환.
| 연산자 | 설명 | 예제 | 결과 |
| == | 값만 비교 | 5 == '5' | true |
| === | 값과 타입 모두 비교 | 5 === '5' | false |
| != | 값이 다르면 true | 5 != '5' | false |
| !== | 값 또는 타입이 다르면 true | 5 !== '5' | true |
| > | 크다 | 5 > 3 | true |
| < | 작다 | 5 < 3 | false |
| >= | 크거나 같다 | 5 >= 5 | true |
| <= | 작거나 같다 | 3 <= 5 | true |
4. 논리 연산자 (Logical Operators)
| 연산자 | 설명 | 예제 | 결과 |
| && | AND(그리고) | true && false | false |
| || | OR(또는) | true || false | true |
| ! | NOT(부정) | !true | false |
5. 비트 연산자 (Bitwise Operators)
| 연산자 | 설명 | 예제 | 결과(2진수 기준) |
| & | AND | 5 & 3 | 1 (0101 & 0011 = 0001) |
| | | OR | 5 | 3 | 7 (0101 | 0011 = 0111) |
| ^ | XOR | 5 ^ 3 | 6 (0101 ^ 0011 = 0110) |
| ~ | NOT | ~5 | -6 |
| << | 왼쪽 시프트 | 5 << 1 | 10 |
| >> | 오른쪽 시프트 | 5 >> 1 | 2 |
| >>> | 부호 없는 오른쪽 시프트 | -5 >>> 1 | 큰 양수 |
6. 문자열 연산자
문자열 연결에 사용.
let firstName = "홍";
let lastName = "길동";
console.log(firstName + lastName); // "홍길동"
console.log("나이: " + 20); // "나이: 20"7. 삼항 연산자 (Ternary Operator)
조건에 따라 값을 선택.
let age = 18;
let result = (age >= 18) ? "성인" : "미성년자";
console.log(result); // "성인"8. 타입 연산자
변수의 자료형을 확인.
console.log(typeof 123); // "number"
console.log(typeof "abc"); // "string"
console.log(typeof true); // "boolean"💡HTML에서 실행하는 간단한 예제
브라우저에서 입력값을 받아서 계산하고 결과를 출력하는 방식입니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>더하기 연산자 예제</title>
</head>
<body>
<h2>자바스크립트 더하기 연산자 예제</h2>
<input type="number" id="num1" placeholder="첫 번째 숫자">
+
<input type="number" id="num2" placeholder="두 번째 숫자">
<button onclick="calculate()">계산</button>
<p>결과: <span id="result">?</span></p>
<script>
function calculate() {
let a = Number(document.getElementById("num1").value);
let b = Number(document.getElementById("num2").value);
let sum = a + b;
document.getElementById("result").textContent = sum;
}
</script>
</body>
</html>📌 특징
- <input type="number">로 숫자만 입력받음
- Number()로 변환해서 문자열 더하기(문자열 결합) 문제가 없도록 함
- 버튼 클릭 시 calculate() 함수 실행
- 결과를 <span>에 표시
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| Javascript: 함수 Function (11) | 2025.08.14 |
|---|---|
| Javascript: 계산기 calculator (6) | 2025.08.13 |
| Javascript: 호이스팅 Hoisting (1) | 2025.08.13 |
| Javascript: 변수 Variable var let const (5) | 2025.08.12 |
| Javascript: 자바스크립트로 원의 넓이와 둘레 계산기 (4) | 2025.07.27 |