티스토리 뷰
1. 연산자의 의미
연산자(operator)는 값을 계산하거나, 변수에 값을 저장하거나, 두 값을 비교하거나, 조건에 따라 다른 코드를 실행하기 위하여 사용하는 기호이다. 자바스크립트에서 연산자는 숫자 계산뿐 아니라 문자열 연결, 변수 값 변경, 비교 판단, 조건 처리에 사용된다.
예를 들어 다음 코드에는 세 가지 연산자가 사용된다.
let x = 10;
let y = 5;
let result = x + y;- =는 오른쪽 값을 왼쪽 변수에 저장하는 대입 연산자(assignment operator)이다.
- +는 두 값을 더하는 산술 연산자(arithmetic operator)이다.
- x + y는 두 변수의 값을 계산하여 하나의 결과를 만든다.
2. 연산자의 주요 종류
자바스크립트 연산자는 기능에 따라 여러 종류로 나눌 수 있다. 이 장에서는 기초 웹프로그래밍에서 가장 자주 사용하는 연산자를 중심으로 다룬다.
| 구분 | 기능 | 예 |
| 산술 연산자 | 숫자 계산 | +, -, *, /, % |
| 대입 연산자 | 변수에 값 저장 | =, +=, -=, *= |
| 비교 연산자 | 두 값 비교 | ==, ===, >, < |
| 논리 연산자 | 여러 조건 결합 | &&, ` |
| 조건 연산자 | 조건에 따라 값 선택 | ? : |
이 중 산술, 대입, 비교, 조건 처리는 자바스크립트 기초 문법에서 반드시 이해하여야 하는 핵심 내용이다.
3. 산술 연산자
3.1 산술 연산자의 의미
산술 연산자(arithmetic operator)는 숫자 값을 계산할 때 사용한다. 숫자는 코드에 직접 작성한 리터럴(literal)일 수도 있고, 변수에 저장된 값일 수도 있다.
let x = 100 + 50;변수에 저장된 값도 계산할 수 있다.
let a = 100;
let b = 50;
let x = a + b;
console.log(x);1503.2 피연산자와 연산자
산술식에서 계산 대상이 되는 값을 피연산자(operand)라고 한다. 계산 방법을 나타내는 기호는 연산자(operator)이다.
100 + 50위 식에서 100과 50은 피연산자이다. +는 연산자이다.
즉, 연산자는 피연산자 사이에서 어떤 계산을 수행할지 결정한다.
3.3 기본 산술 연산자
| 연산자 | 의미 | 예 | 결과 |
| + | 더하기 | 5 + 2 | 7 |
| - | 빼기 | 5 - 2 | 3 |
| * | 곱하기 | 5 * 2 | 10 |
| / | 나누기 | 5 / 2 | 2.5 |
| % | 나머지 | 5 % 2 | 1 |
| ** | 거듭제곱 | 5 ** 2 | 25 |
| ++ | 1 증가 | x++ | 기존 값에서 1 증가 |
| -- | 1 감소 | x-- | 기존 값에서 1 감소 |
산술 연산자는 숫자 계산에 사용되며, 나머지 연산자 %는 나눗셈의 나머지를 구할 때 사용한다. 거듭제곱 연산자 **는 왼쪽 값을 오른쪽 값만큼 제곱한다.
3.4 더하기 연산자
+는 두 숫자를 더한다.
let x = 5;
let y = 2;
let z = x + y;
console.log(z);실행 결과는 다음과 같다.
7
3.5 빼기 연산자
-는 왼쪽 값에서 오른쪽 값을 뺀다.
let x = 5;
let y = 2;
let z = x - y;
console.log(z);33.6 곱하기 연산자
- *는 두 숫자를 곱한다.
let x = 5;
let y = 2;
let z = x * y;
console.log(z);10
3.7 나누기 연산자
/는 왼쪽 값을 오른쪽 값으로 나눈다.
let x = 5;
let y = 2;
let z = x / y;
console.log(z);2.53.8 나머지 연산자
%는 나눗셈의 나머지를 구한다.
let x = 5;
let y = 2;
let z = x % y;
console.log(z);1나머지 연산자는 짝수와 홀수 판별에 자주 사용된다.
let number = 7;
if (number % 2 === 0) {
console.log("짝수");
} else {
console.log("홀수");
}홀수
3.9 증가 연산자와 감소 연산자
++는 변수의 값을 1 증가시킨다.
--는 변수의 값을 1 감소시킨다.
let count = 5;
count++;
console.log(count);실행 결과는 다음과 같다.
6감소 연산자는 다음과 같이 사용한다.
let count = 5;
count--;
console.log(count);4증가와 감소 연산자는 반복문, 카운터, 점수 계산, 남은 횟수 처리 등에 자주 사용된다.
3.10 거듭제곱 연산자
**는 왼쪽 값을 오른쪽 값만큼 거듭제곱한다. x ** y는 Math.pow(x, y)와 같은 결과를 만든다.
let x = 5;
let z = x ** 2;
console.log(z);25let x = 5;
let z = Math.pow(x, 2);
console.log(z);253.11 연산자 우선순위
연산자가 여러 개 함께 사용되면 자바스크립트는 정해진 우선순위에 따라 계산한다. 일반적인 수학 계산처럼 곱하기와 나누기가 더하기와 빼기보다 먼저 계산된다. 괄호 ()를 사용하면 괄호 안의 식이 먼저 계산된다.
let result = 100 + 50 * 3;
console.log(result);실행 결과는 다음과 같다.
25050 * 3이 먼저 계산되어 150이 되고, 그 다음 100 + 150이 계산된다.
괄호를 사용하면 결과가 달라진다.
let result = (100 + 50) * 3;
console.log(result);450100 + 50이 먼저 계산되어 150이 되고, 그 다음 150 * 3이 계산된다.
4. 대입 연산자
4.1 대입 연산자의 의미
대입 연산자(assignment operator)는 변수에 값을 저장할 때 사용한다. 여기서 assignment는 ‘과제’가 아니라 대입 또는 할당의 의미이다. 가장 기본적인 대입 연산자는 =이다.
let x = 10;위 코드는 숫자 10을 변수 x에 저장한다는 뜻이다.
수학에서 사용하는 “같다”의 의미가 아니라, 오른쪽 값을 왼쪽 변수에 넣는 동작이다.
4.2 기본 대입 연산자 =
let score = 90;
console.log(score);90score 변수에 숫자 90이 저장된다.변수에는 계산 결과도 저장할 수 있다.
let x = 10;
let y = 5;
let total = x + y;
console.log(total);154.3 복합 대입 연산자
복합 대입 연산자는 산술 연산과 대입을 한 번에 처리한다. 예를 들어 x += y는 x = x + y와 같은 의미이다.
| 연산자 | 예 | 같은의미 | 설명 |
| = | x = y | x = y | y 값을 x에 저장 |
| += | x += y | x = x + y | x에 y를 더하여 다시 x에 저장 |
| -= | x -= y | x = x - y | x에서 y를 빼서 다시 x에 저장 |
| *= | x *= y | x = x * y | x에 y를 곱하여 다시 x에 저장 |
| /= | x /= y | x = x / y | x를 y로 나누어 다시 x에 저장 |
| %= | x %= y | x = x % y | x를 y로 나눈 나머지를 x에 저장 |
| **= | x **= y | x = x ** y | x를 y만큼 거듭제곱하여 x에 저장 |
4.4 += 연산자
+=는 기존 변수 값에 오른쪽 값을 더한 뒤 다시 변수에 저장한다.
let x = 10;
x += 5;
console.log(x);실행 결과는 다음과 같다.
15위 코드는 다음 코드와 같다.
let x = 10;
x = x + 5;
console.log(x);+=는 점수 증가, 수량 증가, 총합 계산에 자주 사용된다.
let score = 0;
score += 10;
score += 20;
console.log(score);실행 결과는 다음과 같다.
304.5 -= 연산자
-=는 기존 변수 값에서 오른쪽 값을 뺀 뒤 다시 변수에 저장한다.
let life = 3;
life -= 1;
console.log(life);실행 결과는 다음과 같다.
2게임의 생명 감소, 재고 수량 감소, 남은 시간 감소 등에 사용할 수 있다.
4.6 *= 연산자
*=는 기존 변수 값에 오른쪽 값을 곱한 뒤 다시 변수에 저장한다.
let price = 10000;
price *= 2;
console.log(price);200004.7 /= 연산자
/=는 기존 변수 값을 오른쪽 값으로 나눈 뒤 다시 변수에 저장한다.
let total = 10000;
total /= 2;
console.log(total);50004.8 %= 연산자
%=는 기존 변수 값을 오른쪽 값으로 나눈 나머지를 다시 변수에 저장한다.
let x = 10;
x %= 3;
console.log(x);110을 3으로 나누면 나머지는 1이다. 따라서 x에는 1이 저장된다.
4.9 문자열에서의 +=
+=는 숫자뿐 아니라 문자열에도 사용할 수 있다. 문자열에서 +=는 기존 문자열 뒤에 새로운 문자열을 이어 붙인다.
let text = "Hello";
text += " World";
console.log(text);Hello World한글 문자열도 같은 방식으로 연결할 수 있다.
let message = "안녕하세요.";
message += " 자바스크립트입니다.";
console.log(message);안녕하세요. 자바스크립트입니다.5. 비교 연산자
5.1 비교 연산자의 의미
비교 연산자(comparison operator)는 두 값을 비교하고, 그 결과를 true 또는 false로 반환한다. 비교 결과는 조건문에서 판단 기준으로 사용된다.
let x = 5;
let result = x > 3;
console.log(result);truex의 값은 5이고, 5 > 3은 참이므로 결과는 true이다.
5.2 주요 비교 연산자
| 연산자 | 의미 | 예 | 값 |
| == | 값이 같다 | 5 == "5" | true |
| === | 값과 자료형이 모두 같다 | 5 === "5" | false |
| != | 값이 같지 않다 | 5 != 8 | true |
| !== | 값 또는 자료형이 같지 않다 | 5 !== "5" | true |
| > | 크다 | 5 > 8 | false |
| < | 작다 | 5 < 8 | true |
| >= | 크거나 같다 | 5 >= 5 | true |
| <= | 작거나 같다 | 5 <= 8 | true |
비교 연산자는 항상 true 또는 false를 반환한다. ==는 값만 비교하고, ===는 값과 자료형을 함께 비교한다.
5.3 ==와 ===의 차이
==는 두 값이 같은지 비교한다. 이때 자료형이 다르면 자바스크립트가 자동으로 자료형을 변환하여 비교할 수 있다.
console.log(5 == "5");true===는 값과 자료형이 모두 같은지 비교한다.
console.log(5 === "5");false웹페이지 입력값을 비교할 때는 자료형 차이로 인한 오류가 발생할 수 있으므로 ===를 사용하는 습관이 필요하다.
5.4 문자열 비교
문자열도 비교 연산자로 비교할 수 있다. 문자열 비교는 문자 순서를 기준으로 이루어진다.
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
console.log(result);true문자 "A"는 "B"보다 앞에 있으므로 text1 < text2의 결과는 true이다.
- 문자열 숫자는 숫자처럼 보이더라도 문자열 기준으로 비교될 수 있다.
let text1 = "20";
let text2 = "5";
let result = text1 < text2;
console.log(result);true숫자로 보면 20은 5보다 크지만, 문자열 비교에서는 첫 글자인 "2"와 "5"를 비교한다. "2"가 "5"보다 앞에 있으므로 "20" < "5"는 true가 된다.
5.5 서로 다른 자료형 비교
서로 다른 자료형을 비교하면 예상하기 어려운 결과가 나올 수 있다. 문자열과 숫자를 비교할 때 자바스크립트는 문자열을 숫자로 변환하여 비교하려고 한다. 빈 문자열은 0으로 변환되고, 숫자로 바꿀 수 없는 문자열은 NaN이 되어 비교 결과가 대부분 false가 된다.
console.log(2 < "12");
console.log(2 < "John");true
false- "12"는 숫자 12로 변환될 수 있으므로 2 < 12가 되어 true이다.
- "John"은 숫자로 변환할 수 없으므로 비교 결과는 false이다.
입력값을 숫자로 비교하여야 할 때는 먼저 숫자로 변환하는 것이 안전하다.
let age = "20";
age = Number(age);
if (age >= 18) {
console.log("성인");
} else {
console.log("미성년자");
}성인- Total
- Today
- Yesterday
- 휴리스틱평가
- 파이썬 기초
- UX
- 챗GPT
- 컴퓨팅사고력
- 텍스트 마이닝
- 관계자분석
- 안드로이드
- figma
- 초보자를 위한 텍스트마이닝
- HCI
- 챗봇
- 데이터R지
- HIG
- 자바스크립트
- 피그마
- 라이브러리
- pygame
- 프로토타입
- 텍스트마이닝
- python
- 4차산업혁명
- 스마트기술
- 파이썬
- 파이썬기초
- matplotlib
- Idle
- UI
- Text Mining
- 데이타R지
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |