안녕하세요😀

이번 시간에는 자바스크립트의 연산자에 대해 배워보도록 하겠습니다.

연산자

연산자는 프로그래밍 언어에서 특정 연산을 할 수 있도록 도와주는 문자입니다.

대표적으로 우리 모두가 아는 사칙연산 을 도와주는 덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 / 이 연산자에 해당합니다

자바스크립트에는 다양한 연산자가 존재합니다.

하나씩 살펴보도록하겠습니다.

산술 연산자

위에서 설명드렸던 덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 / 은 가장 기본적인 산술 연산자입니다.

let num1 = 10;
let num2 = 5;

console.log(num1 + num2); // 15
console.log(num1 - num2); // 5
console.log(num1 * num2); // 50
console.log(num1 / num2); // 2

이렇게 산술연산자를 이용해 사칙연산을 수행할 수 있습니다.

산술연산자에는 사칙연산자 뿐만 아니라

let num = 10;

console.log(num++); //후위연산 -> 10
console.log(++num); //전위연산 -> 12

다음과 같이 변수의 값을 증가 감소 시켜주는 증감 연산자도 포함되어있습니다.

console.log(num++)은 num의 값에 1을 더하기 직전의 값을 출력하고,
console.log(++num)의 값은 num 값에 1을 더한 값을 출력한다는 차이점이 있습니다.

대입 연산자

대입 연산자는 변수에 특정 값을 대입하는 역할을 합니다.

let num = 20;
num = num + 5;

console.log(num); // 25

위의 코드에서 우리는 num 변수값에 5를 더한 값을 num 변수에 저장했습니다.

이때 num = num + 5; 에서 사용된 = 를 대입 연산자라고 할 수 있습니다.

대입 연산자에는 복합대입 연산자 라는 연산자가 존재하는데요,
복합대입 연산자는 산술 연산자와 대입 연산자가 결합한 것입니다.

아래의 예시에서 num = num + 5; 부분을 복합대입 연산자를 사용해서 작성해보도록 하겠습니다.

let num = 20;
num += 5;

console.log(num); // 25

위의 코드와 같이 우리는 num = num + 5; 부분을 num += 5; 로 대체할 수 있고, += 연산자는 복합 대입 연산자에 해당합니다.

복합 대입 연산자는 덧셈 뿐만 아니라 아래와 같이 사칙연산이 모두 가능합니다.

let num = 20;

num += 5; // num = num + 5
num -= 5; // num = num - 5
num *= 5; // num = num * 5
num /= 5; // num = num / 5

논리 연산자

다음으로 설명드릴 연산자는 논리연산자입니다.

논리 연산자는 전 시간에 배웠던 true, false 값으로 이루어진 Boolean 타입을 위한 연산자라고 할 수 있습니다.

논리 연산자에는 ! NOT, || OR ,&& AND연산자가 있습니다.

예시를 통해 하나씩 살펴보겠습니다.

먼저 NOT 연산자 입니다.

NOT

let isOpen = false;

console.log(!isOpen); // true
console.log(!isOpen); // false

NOT 연산자는 위의 예시처럼 ! 를 이용해 false 의 값을 true로,
true의 값을 false로 변경해줍니다.

OR

let a = true || true; // true
let b = true || false; // true
let c = false || true; // true

let d = false || false; // false

OR 연산자는 || 의 양 옆에 있는 값이 하나라도 true 라면 true 값을 반환합니다.

위의 예시에서는 두 개의 값이 모두 false 인 변수 d 만 false 의 값을 갖게 됩니다.

AND

let a = true && true; // true

let b = true && false; // false
let c = false && true; // false
let d = false && false; // false

OR 연산자와는 반대로, AND 연산자는 && 양 옆의 두 값이 모두 true 일 경우에만 결과값이 true로 나오게됩니다.

위의 예시에서는 양 옆의 값이 모두 true 인 변수 a 만 true 의 값을 가지게 됩니다.

비교 연산자

비교 연산자는 두 값을 비교할 때 사용하는 연산자입니다.

일치

두 값이 일치하는지를 알아보기 위한 연산자는 === 와 == 가 있습니다.

let num1 = 10;
let num2 = 10;

let isEquals = num1 === num2;

console.log(isEquals); // true

위의 코드는 === 연산자를 통해 num1, num2 의 값이 일치하는지 출력하는 코드입니다.

출력값은 true 가 나오고, 실제로 num1과 num2의 값은 10으로 일치하는 것을 볼 수 있습니다.

let num1 = 10;
let num2 = "10";

let isEquals = num1 == num2;

console.log(isEquals); // true

위 코드에서는 num1 과 num2 가 같은지를 비교할 때 === 연산자가 아닌 == 연산자를 사용하였습니다.

이 둘의 차이점은 == 연산자는 두 변수의 값만을 비교하지만 === 연산자는 두 변수의 값을 비교하면서 타입 검사까지 한다는 것입니다.

위 코드의 출력 결과는 == 연산자를 사용했기 때문에 true 값이 출력됩니다.

그렇다면 num1 과 num2 의 값을 === 연산자를 통해 비교해보면 어떻게 될까요?

let num1 = 10;
let num2 = "10";

let isEquals = num1 === num2;

console.log(isEquals); // false

console.log(num1 === num2) 가 실행되면 num1은 숫자형, num2는 문자형이기 때문에 false 값이 출력될 것 입니다.

불일치

두 값이 일치하지 않는지를 확인 할 때는 !== 또는 !=를 사용합니다.

let num1 = 10;
let num2 = "10";

console.log(num1 !== num2); // true
console.log(num1 != num2); // false

마찬가지로, !== 는 타입 검사를 하고, != 는 타입 검사를 하지 않는다는 차이가 있습니다.

위 코드를 실행시켜보면 순서대로 true, false 값이 출력됩니다.

대소 비교

두 개의 값 중, 무엇이 더 크고 작은지 비교하기 위해서는 다음과 같은 연산자를 사용 할 수 있습니다.

let a = 10;
let b = 20;
let c = 10;

console.log(a < b); // true
console.log(a > b); // false
console.log(b >= c); // true
console.log(b > c); // true
console.log(a <= c); // true
console.log(a > c); // false

우리가 흔히 알고있는 대소 비교 기호와 동일합니다.

위의 코드를 실행시켜보면 주석처리 되어있는 값들과 같이 출력됩니다.

연결 연산자

연결 연산자는 + 를 이용해 문자열과 문자열을 연결합니다.

let a = "안녕하세요 ";
let b = "hyobin";
let c = "입니다.";

console.log(a + b + c); // 안녕하세요 hyobin입니다.

위 코드의 출력 결과는 a, b, c 문자열을 연결한 "안녕하세요 hyobin입니다." 로 나오게 됩니다.

null 병합 연산자

다음은 null 병합 연산자 라는 자바스크립트의 특별한 연산자에 대해 알아보도록 하겠습니다.

let num;
num = num ?? 20; //20

console.log(num); 

위의 코드를 통해 설명드리겠습니다.

null 병합 연산자는 ?? 를 사용해 작성할 수 있고,
num ?? 20 은 num 이라는 변수의 값이 null 이거나 undefined 이면 20을 대입하고 아니라면 현재 num의 값을 그대로 유지하라는 것을 의미합니다.

다시말해 null 병합 연산자는 ?? 왼쪽의 값이 null이나 undefined이라면 오른쪽의 값을 선택하는 기능을 하는 연산자 입니다.

---

next

이번시간에는 자바스크립트의 여러가지 연산자들에 대해 알아보았습니다.

다음시간에는 자바스크립트의 조건문에 대해 배워보도록 하겠습니다.

감사합니다🤗

---

🙏참고 & 출처
https://ko.javascript.info/operators