2025. 4. 9. 14:20ㆍWEB/JavaScript
이번 포스팅에서는 연산자에 대해 배워본다.
연산자란?
연산자는 프로그래밍에서 값을 계산하거나 조작할 때 사용하는 기호 또는 키워드를 말한다.
쉬운 예를 들자면 산수/수학의 덧셈, 뺄셈, 곱셈, 나눗셈 같은 것을 할 수 있도록 해주는 키워드,
즉 + - * / 이런 기호들을 말한다.
연산자는 종류가 많지만 자주 사용되는 연산자들부터 익혀보자.
산술 연산자
숫자를 계산할 때 사용하는 연산자를 산술 연산자라고 한다.
| 연산자 | 설명 | 예시 | 결과 |
| + | 덧셈 | 5 + 2 | 7 |
| - | 뺄셈 | 5 - 2 | 3 |
| * | 곱셈 | 5 * 2 | 10 |
| / | 나눗셈 | 5 / 2 | 2.5 |
| % | 나머지 | 5 % 2 | 1 |
| ** | 거듭제곱(ES6+) | 2 ** 3 | 8 |
대입 연산자
값을 변수에 할당(또는 저장)할 때 사용하는 연산자를 대입 연산자라고 한다.
| 연산자 | 설명 | 예시 | 결과 |
| = | 할당 | x = 5 | x는 5 |
| += | 더해서 할당 | x += 2 | x = x + 2 |
| -= | 빼서 할당 | x -= 1 | x = x - 1 |
| *= | 곱해서 할당 | x *= 3 | x = x * 3 |
| /= | 나눠서 할당 | x /= 2 | x = x / 2 |
비교 연산자
두 값을 비교해서 참(true)인지 거짓(false)인지 판단할 때 사용하는 연산자를 비교 연산자라고 한다.
| 연산자 | 설명 | 예시 | 결과 |
| == | 값이 같은지 비교 | 5 == '5' | TRUE |
| === | 값과 자료형까지 같은지 비교 | 5 === '5' | FALSE |
| != | 값이 다른지 비교 | 5 != 3 | TRUE |
| !== | 값 또는 자료형이 다른지 비교 | 5 !== '5' | TRUE |
| > | 크다 | 5 > 3 | TRUE |
| < | 작다 | 5 < 3 | FALSE |
| >= | 크거나 같다 | 5 >= 5 | TRUE |
| <= | 작거나 같다 | 5 <= 4 | FALSE |
* 참고로 ==의 경우 자료형을 자동 형변환해서 비교하기 때문에 ===로 사용하는 것을 추천한다.
논리 연산자
여러가지 조건을 논리적으로 연결할 때 사용하는 연산자를 논리 연산자라고 한다.
| && | AND (그리고) | true && false | FALSE |
| || | OR (또는) | true || false | TRUE |
| ! | NOT (부정) | !true | FALSE |
각각의 연산자에 대해 간단하게 설명을 했지만 실제 이게 뭐하는건지를 알아야하니 아래와 같이 HTML문서에 자바스크립트로 코드를 작성해서 연산자들을 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<span id="exam1"></span></br>
<span id="exam2"></span></br>
<span id="exam3"></span></br>
<span id="exam4"></span></br>
<span id="exam5"></span></br>
</div>
<script>
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b); // true
console.log(a === 10); // true
console.log(a !== b); // true
console.log(a > 0 && b < 10); // true
document.getElementById('exam1').textContent = (a + b);
document.getElementById('exam2').textContent = (a > b);
document.getElementById('exam3').textContent = (a === 10);
document.getElementById('exam4').textContent = (a !== b);
document.getElementById('exam5').textContent = (a > 0 && b < 10);
</script>
</body>
</html>
위 html파일을 웹브라우저에서 실행하면 아래와 같이 출력될 것이다.
변수 a에는 10이라는 값이 할당되어 있고,
변수 b에는 5라는 값이 할당되어 있다.
두 변수에 사이에 연산자를 넣고 실행해서 아래와 같은 값이 출력된 것이다.
a + b (a와 b를 더하면 15)
a > b (a 가 b 보다 큰가? 참 / true)
a === 10 (a 가 10 의 값이 같은가? 참 / true)
a !== b (a 와 b 의 값이 다른가? 참 / true // a === b 라고 했다면 거짓 false 가 나올 것이다)
a > 0 && b < 10 (a 가 0 보다 크고, b 가 10 보다 작은가? 참 / true // 두개의 조건이 모두 만족해야 참이다)
* 참고로 위 코드에서 console.log() 는 콘솔창에서 확인할 수 있다.
웹브라우저에서 F12 를 누르면 개발자 도구 창이 열리는데 개발자 도구에서 콘솔 탭을 선택하면 아래와 같이 console.log() 의 내용을 확인할 수 있다.
연산자에 대해서는 여기까지.
끝.
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 연산자 우선순위 (0) | 2025.04.09 |
|---|---|
| [JavaScript] 자바스크립트 기초 문법 배우기 (변수) (0) | 2025.04.09 |
| [JavaScript] 자바스크립트를 배워보자 - JavaScript란 무엇인가? (0) | 2025.03.12 |