2024.10.05 - [프로그래밍언어/자바스크립트] - [쉽고 빠르게 배우는 자바스크립트] 2. 변수
자바스크립트 연산자는 값이나 변수에 대해 연산을 수행하는 특별한 기호입니다. 프로그래밍에서 필수적인 요소로, 기능에 따라 여러 가지 유형으로 나눌 수 있습니다. 이번 글에서는 가장 흔히 사용되는 연산자들을 설명하고 예시를 통해 그 작동 방식을 알아보겠습니다.
산술 연산자
산술 연산자는 사칙연산과 같은 기본적인 수학 연산을 수행하도록 하는 연산자입니다.
- + : 덧셈
- - : 뺄셈
- * : 곱셈
- / : 나눗셈
- % : 나머지
- ** : 거듭제곱
let a = 10;
let b = 5;
console.log(a + b); // 15(10 + 5) 출력
console.log(a - b); // 5(10 - 5) 출력
console.log(a * b); // 50(10 * 5) 출력
console.log(a / b); // 2(10 / 5) 출력
console.log(a % b); // 0(10 % 5) 출력
console.log(a ** b); // 100000(10 ** 5) 출력
대입 연산자
let num = 2;
num = 3; // 대입 연산자
위와 같이 = 기호를 통해 오른쪽에 있는 데이터를 변수에 대입할 수 있습니다. 이때 사용되는 = 가 대입 연산자입니다.
let a = 0;
a = a + 2; // 0(기존 a에 저장된 데이터) + 2를 a에 대입
위 코드는 a에 저장된 기존 값 0에 2를 더한 후 다시 a에 대입하는 과정입니다.
let a = 0;
a += 2; // a = a + 2와 동일
대입 연산자에는 축약형도 있습니다. 예를 들어, a = a + 2는 a += 2로 축약할 수 있습니다.
let num = 5;
num += 10; // 5 + 10 = 15
num -= 5; // 15 - 5 = 10
num /= 2; // 10 / 2 = 5
num *= 4; // 5 * 4 = 20
num %= 6; // 20 % 6 = 2
num **= 3; // 2 ** 3 = 8
다음과 같은 다양한 산술 연산에서도 동일하게 적용됩니다.
증감 연산자
증감 연산자는 피연산자인 변수의 데이터를 1 증가시키거나 감소시킬 때 사용하는 연산자입니다.
let num = 2;
num++; // 3
++num; // 4
num--; // 3
--num; // 2
전위(++num)와 후위(num++) 증감 연산자의 차이
증감 연산자는 변수 앞에(++num, --num) 또는 뒤에(num++, num--) 사용할 수 있는데, 이 두 방식은 다른 연산과 함께 사용될 때 차이가 발생합니다.
- 전위 증감 연산자 (++num / --num): 먼저 변수의 값을 1 증가(또는 감소)시킨 후, 해당 값으로 연산을 수행합니다.
- 후위 증감 연산자 (num++ / num--): 먼저 현재 값으로 연산을 수행한 후, 변수의 값을 1 증가(또는 감소)시킵니다.
let num = 5;
console.log(++num * 2); // 12 출력 (num의 값인 5를 먼저 1 증가시킨 후 연산)
console.log(num++ * 2); // 12 출력 (num의 값인 6으로 먼저 연산 후 1 증가시킴)
console.log(num); // 7 출력
두 방식은 코드의 실행 순서에 차이를 만들어낼 수 있으므로, 상황에 맞게 신중하게 사용해야 합니다.
비교 연산자
비교 연산자는 두 개의 피연산자를 비교하여 true, false(boolean 타입)를 반환하는 연산자입니다.
- == : 두 값을 비교해서 같으면 true 반환
- != : 두 값을 비교해서 같지 않으면 true 반환
- === : 두 값과 타입을 비교해서 같으면 true 반환
- !== : 두 값과 타입을 비교해서 같지 않으면 true 반환
- > : 왼쪽에 있는 피연산자가 오른쪽에 있는 피연산자 보다 큰 경우에 true 반환
- >= : 왼쪽에 있는 피연산자가 오른쪽에 있는 피연산자보다 크거나 같은 경우에 true 반환
- < : 오른쪽에 있는 피연산자가 왼쪽에 있는 피연산자 보다 큰 경우에 true 반환
- <= : 오른쪽에 있는 피연산자가 왼쪽에 있는 피연산자보다 크거나 같은 경우에 true 반환
let a = 5;
let b = '5';
console.log(a == b); // true 출력 5와 '5'의 값이 같음
console.log(a === b); // false 출력 5와 '5'의 값은 같지만 타입이 다름
b = 7;
console.log(a > b); // false 출력 5는 7보다 크지 않음
console.log(a <= b); // true 출력 7은 5보다 크거나 같음
자바스크립트에서는 의도한 게 아니라면 == 보다는 === 연산자를 사용하는 것을 권장드립니다. (예기치 않은 문제 발생할 수 있음)
논리 연산자
논리 연산자는 논리식을 판단하여 true, false(boolean 타입)를 반환하는 연산자입니다.
- ! : NOT, 피연산자가 true면 false, false면 true 반환
- && : AND, 피연산자가 둘 다 true일 때만 true 반환
- || : OR, 피연산자가 둘 중 하나라도 true이면 true 반환
let a = 10;
let b = 5;
console.log((a + 5 > 14) && (b + 5 > a)); // false 출력
위 연산의 결과는 왜 false일까요?
a + 5는 15로 14보다 커서 true지만 b + 5는 10으로 10인 a보다 크지는 않기 때문에 false입니다. 이 둘의 AND 연산은 둘 다 true가 아니기 때문에 false 인 것이죠!
삼항 연산자
삼항 연산자는 조건에 따라 분기를 처리하는 연산을 수행하는 연산자입니다.
조건 ? 조건이 true인 경우 반환 : 조건이 false인 경우 반환
let age = 24;
console.log(age > 19 ? '성인' : '미성년자'); // '성인' 출력
age > 19가 조건이고 24인 age가 19보다 크므로 true입니다. true인 경우 반환되는 값은 '성인'이므로 '성인'이 출력이 됩니다.
기타 연산자
문자열 결합
자바스크립트는 + 연산을 할 때 피연산자의 타입이 한 개라도 String(문자열)인 경우 문자열 결합을 하게 됩니다.
const a = '안녕';
const b = '하세요';
console.log(a + b); // '안녕하세요' 출력
console.log(a + 3); // '안녕3' 출력
typeof
typeof 키워드는 피연산자의 타입을 반환합니다.
typeof 42; // "number"
typeof "hello"; // "string"
instanceof
피연산자인 객체가 특정 클래스 또는 생성자의 인스턴스인지 확인합니다.
let date = new Date();
console.log(date instanceof Date); // true 출력
마무리
자바스크립트 연산자는 계산, 비교 등 다양한 작업에 사용되는 다목적 도구입니다. 연산자를 효과적으로 활용하면 코드가 더욱 효율적이고 표현력 있게 됩니다. 프로그래밍을 하다 보면 연산자가 중요한 역할을 하는 상황을 자주 만나게 될 것입니다.
'프로그래밍언어 > 자바스크립트' 카테고리의 다른 글
[쉽고 빠르게 배우는 자바스크립트] 4. 조건문 (4) | 2024.10.12 |
---|---|
[쉽고 빠르게 배우는 자바스크립트] 2. 변수 (4) | 2024.10.05 |
[쉽고 빠르게 배우는 자바스크립트] 1. 실행 환경 구축하기 (0) | 2023.05.20 |
[쉽고 빠르게 배우는 자바스크립트] 0. 자바스크립트(JS)란 무엇인가 (0) | 2023.05.20 |