자바스크립트 - 연산자

연산자

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

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

 

추가적으로 자바스크립트의 산술연산자에는 나머지 연산도 포함되어있습니다. 기호는 %를 사용합니다. 왼쪽 값을 오른쪽 값으로 나눈 나머지를 반환합니다. 

let num1 = 10;
let num2 = 5;

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

 

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

증감연산자에는 후위연산과 전위연산이 있습니다. 

• 후위연산 : 특정 변수의 값에 1을 더하기 바로 직전의 값을 출력
• 전위연산 : 특정 변수의 값에 1을 더한 결과 값을 출력

let num = 10;

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

 

대입 연산자

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

let num = 20;
num = num + 5;

console.log(num); // 25

위의 코드에서 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연산자는 !를 이용해 false의 값을 true로, true의 값을 false로 변경해줍니다. 

let isOpen = false;
let isClicked = true;

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

 

 

OR

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

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

let d = false || 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

 

 

비교연산자

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

 

일치

• 두 값이 일치하는지를 알아보기 위한 연산자는 ===와 ==가 있습니다. ===연산자는 자료형과 값까지 비교를 하고 ==연산자는 값만 일치하는 지를 비교 합니다. 

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

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

 

불일치

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

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

console.log(num1 !== num2); // true
console.log(num1 != num2); // 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); // 안녕 자바스크립트

 

 

null 병합 연산자

• null 병합 연산자는 자바스크립트의 특별한 연산자 입니다. 

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

console.log(num);

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

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

console.log(num); //100

 

 

삼항 연산자

• 삼항연산자는 A? B: C 라는 형태의 연산자로 A라는 조건문이 참일경우 B를, 거짓일경우 C를 수행하는 연산자입니다.  삼항연산자는 조건문이 들어가기 때문에 If-else조건문을 대체헤서 자주사용되기도 합니다. num변수에 할당된 숫자가, 짝수인지 홀수인지를 출력하는 코드를 작성해보겠습니다.

let num = 100;

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

 

 

---

 

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의