연산자

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

 

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

 

 

1. 산술 연산자
1) 사칙 연산자

 

// 사칙 연산자
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

 

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

 

2) 나머지 연산자

 

// 나머지 연산자
let num3 = 10;
let num4 = 5;
console.log(num3 % 2);
console.log(num4 % 2);

 

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

3) 증감 연산자

// 증감 연산자
let num5 = 10;
console.log(num5++); //후위연산 -> 10
console.log(num5); // 현재 num 값 -> 11
console.log(++num5); //전위연산 -> 12
console.log("=====");
let num6 = 10;
console.log(num6--); //후위연산 -> 10
console.log(num6); // 현재 num 값 -> 9
console.log(--num6); //전위연산 -> 8

 

 

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

 

// 대입 연산자
let num7 = 20;
num7 = num7 + 5;
console.log(num7); // 25

 

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

 

// 복합 대입 연산자
let num8 = 20;
num8 += 5;
console.log(num8); // 25

let num9 = 20;
num9 += 5; // num = num + 5
num9 -= 5; // num = num - 5
num9 *= 5; // num = num * 5
num9 /= 5; // num = num / 5

 

 

3. 논리 연산자
true, false 값으로 이루어진 Boolean 타입을 위한 연산자.
! : ! 를 이용해 false 의 값을 true로, true의 값을 false로 변경.

 

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

 

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

 

// OR
let a1 = true || true; // true
let b1 = true || false; // true
let c1 = false || true; // true
let d1 = false || false; // false
console.log(a1, b1, c1, d1);

 

&& : OR 연산자와 반대의 연산자로, && 양 옆의 두 값이 모두 true 일 경우에만 true 값을 반환하는 연산자.

 

// AND
let a2 = true && true; // true
let b2 = true && false; // false
let c2 = false && true; // false
let d2 = false && false; // false
console.log(a2, b2, c2, d2);

 

 

4. 비교 연산자
두 값을 비교할 때 사용하는 연산자

 

1) 일치
"===" 연산자는 두 변수의 값만 비교하는 것이 아니라, 두 변수의 자료형까지 같은지 비교하는 연산자
"==" 연산자는 "===" 연산자와는 다르게 두 변수의 자료형은 비교하지 않고, 오직 값만 일치하는지를 비교하는 연산자

 

// 일치
let num10 = 10;
let num11 = "10";
console.log(num10 === num11); // false (값, 자료형 비교)
console.log(num10 == num11); // true (값 비교)

 

2) 불일치
"!==" 는 타입 검사를 하고, "!=" 는 타입 검사를 하지 않는다는 차이가 있다.

 

// 불일치
let num12 = 10;
let num13 = "10";
console.log(num12 !== num13); // true (값, 자료형 비교)
console.log(num12 != num13); // false (값 비교)

 

3) 대소 비교
두 개의 값 중, 무엇이 더 크고 작은지 비교

 

// 대소 비교
let a3 = 10;
let b3 = 20;
let c3 = 10;
console.log(a3 < b3); // true
console.log(a3 > b3); // false
console.log(b3 >= c3); // true
console.log(b3 > c3); // true
console.log(a3 <= c3); // true
console.log(a3 > c3); // false

 

 

5. 연결 연산자
+ 를 이용해 문자열과 문자열을 연결하는 연산자

 

// 연결 연산자
let a4 = "안녕";
let b4 = "자바스크립트";
console.log(a4 + b4); // 안녕자바스크립트

 

 

6. null 병합 연산자
자바스크립트의 특별한 연산자로 ?? 를 사용해 작성할 수 있고, ?? 의 왼쪽 값이 null이거나 undefined 라면 오른쪽의 값을 저장하는 연산자.

 

// null 병합 연산자 : ?? 왼쪽의 값이 null이거나 undefined인 경우 오른쪽 값 대입
let num14;
num14 = num14 ?? 20; //20 (undefined이므로)
console.log(num14);

let num15 = 100;
num15 = num15 ?? 20;
console.log(num15); //100

 

 

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

 

// 삼항 연산자
let num16 = 100;
console.log(num16 % 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

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