연산자

안녕하세요😀

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

연산자

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

let number = 25;
console.log(number + 5); //30
console.log(number - 5); //20
console.log(number * 5); //125
console.log(number / 5); //5

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

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

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

산술 연산자

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

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

먼저 num1과 num2 두 개의 숫자형 변수를 생성 후 각각 10, 5의 값을 할당했습니다.

그 다음 우리가 알고있는 사칙연산을 +, -, *, / 기호들을 통해 수행했습니다.

코드를 실행하면 사칙연산의 결과 값들이 알맞게 출력된 것을 확인할 수 있습니다.

let num1 = 10;
let num2 = 5;

console.log(num1 % 2);
console.log(num2 % 2);

자바스크립트의 산술연산자에는 나머지 연산도 포함되어있습니다.

나머지 연산은 % 기호를 사용하고, 기호를 기준으로 왼족 값을 오른쪽 값으로 나눈 나머지를 반환하는 연산자입니다.

let num = 10;

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

산술연산자에는 사칙연산자와 나머지연산자 뿐만 아니라 위와 같이 변수의 값을 증가, 감소 시켜주는 증감 연산자도 포함되어있습니다.

증감 연산자에는 후위연산과 전위연산이 있는데요, 후위연산은 특정 변수의 값에 1을 더하기 바로 직전의 값을 출력하고,

전위연산은 특정 변수의 값에 1을 더한 결과 값을 출력하는 연산입니다.

위의 예시에서 console.log(num++)은 후위연산이기 때문에 num의 값에 1을 더하기 직전의 값인 10을 출력합니다.

후위연산자를 통한 연산 이후, 현재 num 변수의 값은 11이 되어있겠죠. 따라서 num의 값을 출력해보면 11이 출력되는 것을 볼 수 있습니다.

그 다음 console.log(++num)의 값은 전위연산이기 때문에, 현재 값이 11인 num 변수에 1을 더한 이후의 값인 12를 출력한다는 차이점이 있습니다.

대입 연산자

다음으로는 대입 연산자에 대해 알아보겠습니다.

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

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

num 변수에 5를 더하고, 빼고, 곱하고, 나눈 값을 다시 num 에 저장하는 연산은 이렇게 복합대입 연산자를 통해 간략하게 작성할 수 있습니다.

논리 연산자

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

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

논리 연산자에는 ! NOT, || OR ,&& AND연산자가 있는데요,

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

먼저 NOT 연산자 입니다.

NOT

let isOpen = false;
let isClicked = true;

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

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

위의 예시 코드를 실행시켜보면, 맨 처음 isOpen 의 값이 false 이기 때문에 true가 출력되고, isCliked 변수의 값은 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 값을 반환하는 연산자입니다.

위의 예시에서는 변수 a, b, c는 true의 값이 하나 이상 있기 때문에 true의 값을 반환하는 반면,

변수 d는 두 개의 값이 모두 false 이기 때문에 false 의 값을 갖게 됩니다.

AND

AND 연산자는 OR 연산자와 반대의 연산자입니다.

let a = true && true; // true

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

AND 연산자는 && 양 옆의 두 값이 모두 true 일 경우에만 true 값을 반환하는 연산자입니다.

마찬가지로, 위의 예시에서 변수 a는 && 기호의 양 옆의 값이 모두 true 이기 때문에 true의 값을 갖게되고

a 변수를 제외한 나머지 변수들은 false가 하나 이상 있기 때문에 false를 반환하게 됩니다.

비교 연산자

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

일치

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

let num1 = 10;
let num2 = 10;

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

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

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

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

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

이번엔 num2의 값을 문자열 10으로 변경한 다음 코드를 실행해보도록 하겠습니다.

변수 num1과 변수 num2 의 값은 10으로 동일하지만, 각각 숫자형, 문자형으로 자료형이 다른 변수입니다.

'===' 연산자는 두 변수의 값만 비교하는 것이 아니라, 두 변수의 자료형까지 같은지 비교하는 연산자 입니다.

그렇기 때문에, "num1 === num2" 를 출력한 결과, false 라는 값이 나오게 됩니다.

그럼, 이번엔 '==' 연산자를 사용해 결과를 출력해보겠습니다.

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

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

코드 실행 결과 true 라는 값이 출력된 것을 볼 수 있습니다.

"==" 연산자는 "===" 연산자와는 다르게 두 변수의 자료형은 비교하지 않고, 오직 값만 일치하는지를 비교하는 연산자입니다.

num1과 num2의 값은 10으로 일치하기 때문에 true 라는 값을 반환하게됩니다.

불일치

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

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 = "자바스크립트";

console.log(a + b); // 안녕 자바스크립트

위 코드의 출력 결과는 a, b 문자열을 연결한 "안녕 자바스크립트" 로 나오게 됩니다.

null 병합 연산자

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

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

console.log(num);

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

먼저 num이라는 변수를 선언해주겠습니다.

그 다음 num의 값에 "num ?? 20" 의 연산을 할당해주겠습니다.

null 병합 연산자는 ?? 를 사용해 작성할 수 있고,

num ?? 20 은 num 이라는 변수의 값이 null 이거나 undefined 이면 20을 대입하고

null이나 undefined가 아니라면 현재 num의 값을 그대로 유지하라는 것을 의미합니다.

우리가 작성한 코드에서는, 앞에서 배웠던 것과 같이 num 변수에 undefined라는 값이 할당되기 때문에

20을 대입한 결과인 20이 출력이 되게 됩니다.

그럼 이번엔 num 변수의 값을 100으로 할당해준 다음 동일한 코드를 실행시켜보도록 하겠습니다.

let num = 100;
num = num ?? 20;

console.log(num); //100

이 경우에는 num의 값이 null이나 undefined가 아니기 때문에 100이라는 값이 출력되는 것을 확인할 수 있습니다.

다시말해, null 병합 연산자는, ?? 의 왼쪽 값이 null이거나 undefined 라면 오른쪽의 값을 저장하는 연산자입니다.

삼항 연산자

우리가 마지막으로 배워볼 연산자는 삼항연산자 입니다.

삼항연산자는 A ? B : C 라는 형태의 연산자로, A라는 조건문이 참일경우 B를, 거짓일 경우 C를 수행하는 연산자입니다.

삼항연산자에는 조건문이 들어가기 때문에, 다음시간에 배우게 될 if-else 조건문을 대체해서 자주 사용되기도 하는 연산자입니다.

삼항연산자를 이용한 간단한 코드를 작성해보겠습니다.

num 변수에 할당된 숫자가, 짝수인지 홀수인지를 출력하는 코드를 작성해보겠습니다.

let num = 100;

console.log(num % 2 === 0 ? "짝수" : "홀수");

해당 조건식을 만족하면 짝수를, 만족하지 않는다면 홀수를 출력하는 식을 이렇게 작성할 수 있습니다.

자 이렇게 자바스크립트의 여러가지 연산자들에 대해 배워보았습니다.

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

감사합니다.