[쉽고 빠르게 배우는 자바스크립트] 3. 연산자

2024.10.05 - [프로그래밍언어/자바스크립트] - [쉽고 빠르게 배우는 자바스크립트] 2. 변수

[쉽고 빠르게 배우는 자바스크립트] 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보다 크거나 같음

 

자바스크립트에서는 의도한 게 아니라면 == 보다는 === 연산자를 사용하는 것을 권장드립니다. (예기치 않은 문제 발생할 수 있음)

 

반응형

SMALL

 

논리 연산자

논리 연산자는 논리식을 판단하여 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 출력

 

마무리

자바스크립트 연산자는 계산, 비교 등 다양한 작업에 사용되는 다목적 도구입니다. 연산자를 효과적으로 활용하면 코드가 더욱 효율적이고 표현력 있게 됩니다. 프로그래밍을 하다 보면 연산자가 중요한 역할을 하는 상황을 자주 만나게 될 것입니다.