JavaScript 101: 초보자를 위한 JavaScript 연산자 가이드
Source: Dev.to
자, 이제 control flow의 작동 방식을 조금 알게 되었으니, 좀 더 흥미롭게 진행해 봅시다. 이 글에서는 JavaScript에 어떤 연산자들이 있는지 살펴볼 것이며, 이를 통해 코드 흐름을 제어하는 방식을 크게 향상시킬 수 있습니다.
원본 게시물은 여기에서 확인할 수 있습니다.
연산자는 무엇에 사용되나요?
먼저 연산자가 무엇인지 정의해 보겠습니다. JavaScript에서 연산자는 특정 작업을 수행하기 위해 사용되는 기호 또는 키워드이며, 이러한 작업은 수학 연산, 논리 연산, 할당, 비교 등 다양한 종류가 있습니다. 요약하면, 연산자는 데이터를 조작하고 프로그램이 실행되는 동안 흐름을 제어하는 데 사용됩니다.
어떤 연산자를 가지고 있으며, 각각은 무엇에 사용되나요?
MDN Web Docs에 따르면, 현재 사용할 수 있는 연산자는 산술, 할당, 비교, 논리 등 네 그룹으로 나눌 수 있습니다. 각 그룹에 대해 아래에서 설명하겠습니다.
산술 연산자
이미 짐작하셨겠지만, 이 연산자들은 수학 연산을 수행하게 해 줍니다. 가장 흔히 사용하는 예는 다음과 같습니다:
// 덧셈 (+)
5 + 3 // = 8
// 뺄셈 (-)
10 - 4 // = 6
// 곱셈 (*)
6 * 7 // = 42
// 나눗셈 (/)
10 / 2 // = 5하지만 이것이 전부는 아닙니다. 다소 덜 흔히 쓰이는 산술 연산자도 있습니다:
// 나머지 (%)
12 % 5 // = 2
// 지수 연산 (**)
2 ** 3 // = 8퍼센트 기호(%)로 표시되는 나머지 연산자는 프로그래밍에서 나눗셈의 나머지를 구하는 수학 연산자입니다. 예를 들어 5 % 2는 1이 됩니다. 이는 2가 5에 두 번 들어가고 나머지가 1이라는 뜻입니다.
마지막으로 단항 산술 연산자 변형이 있는데, 이는 값을 증가/감소시키거나 int로 변환하거나 부정값을 만들 때 사용됩니다:
++/--(증가 / 감소)- 단항
+와-(형 변환 또는 부정)
let x = 5;
x++; // x는 6이 된다
let y = +"42"; // y는 42 (숫자)
let z = -10; // z는 -10할당 연산자
할당 연산자는 변수에 값을 저장하거나 업데이트할 때 사용됩니다. 가장 기본적인 형태는 값을 할당하는 = 연산자이며, 나머지 연산자는 복합 연산자라고 불리는데, 산술 연산과 할당을 한 번에 수행합니다.
이러한 단축키는 코드를 더 깔끔하게 만들고 반복을 줄여 줍니다.
// 기본 할당:
let count = 0;
count = 5;
// 복합 연산자:
count += 2; // count = count + 2
count -= 3; // count = count - 3
count *= 3; // count = count * 3
// 위 코드는 다음과 같이도 쓸 수 있습니다:
count = count * 3;더 많은 할당 연산자가 있으며, 전체 목록은 MDN 문서의 여기에서 확인할 수 있습니다.
비교 연산자
짧은 퀴즈: JavaScript는 1995년 5월에 만들어졌습니다. 처음에는 느슨한 비교 연산자(==와 !=)만 있었고, 1999년 12월에 **ECMAScript 3 (ES3)**가 도입되면서 엄격한 동등 연산자(===와 !==)가 추가되어 우리의 생활이 조금 더 편해졌습니다.
느슨한 동등(==와 !=)
// 타입 안전하지 않음:
"3" == 3 // true
3 != '3' // false
null == undefined // true
[] == false // true엄격한 동등(===와 !==)
0 === false // false (타입이 다름)
"5" === 5 // false (타입이 다름)
"hello" === "hello" // true (값과 타입 모두 동일)
1 === 1 // true (값과 타입 모두 동일)
3 !== '3' // true (타입이 다름)💡 추천: 특별히 형 변환을 허용해야 할 이유가 없는 한, 항상 ===(및 !==)를 사용하세요.
관계 연산자
3 4 // false
4 >= 4 // true
4 = 18 ? "adult" : "minor";비교: if…else vs. 삼항 연산자
// if…else 사용
function getFinalPrice(price, discount) {
let result;
if (discount > 0) {
result = price - price * discount;
} else {
result = price;
}
return result;
}
// 삼항 연산자 사용
function getFinalPrice(price, discount) {
return discount > 0
? price - price * discount
: price;
}💡 팁: 삼항 연산자는 코드를 짧고 읽기 쉽게 만들 수 있지만, 남용하거나 삼항을 연속해서 많이 사용하면 유지보수가 어려워질 수 있습니다. 적절히 활용하세요.
이제… 여기까지
이것들은 JavaScript에서 가장 흔히 마주치는 연산자들이지만, 전부는 아닙니다. 이 시리즈에서 나중에 더 고급 연산자를 살펴볼 수도 있습니다.
여기서 다룬 개념들을 바탕으로 이제 코드를 작성할 준비가 되셨을 겁니다.
다음 JavaScript 101 시리즈: 반복문—특히 for, while, 그리고 do…while.