JS(자바스크립트)의 연산자에 대해 알아보자!

자바스크립트 연산자는 상식선에서 작동하기 때문에 크게 어렵지 않다! 

쉽게 정복해보자 연산자!

---

연산자

1. 대입 연산자
   1. 대입 연산자는 변수에 값을 할당하는 데 사용, 대입 연산자는 `=`

let some = 1; //변수 some에 값 `1`을 대입

1. 산술 연산자
   1. 산술 연산자는 숫자에 대한 기본적인 수학 연산을 수행

//덧셈 연산자 `+`
let num1 = 3 + 2; //5

//뺄셈 연산자 `-`
let num2 = 3 - 2; //1 

//곱셈 연산자 `*`
let num3 = 3 * 2; //6

//나눗셈 연산자 `/`
let num4 = 3 / 2; //1.5

//나머지 연산자 `%`
let num5 = 3 % 2; //1

//괄호를 사용하여 연산 순서를 지정가능
let num6 = (1 + 2) * 10; //30

1. 복합 대입 연산자
   1. 복합 대입 연산자는 대입 연산과 산술 연산을 결합한 것(쉽게 말해서 길게 쓰기 귀찮으니 줄여쓰자)

let num7 = 10; 

num7 += 20; //30 (num7 + 20)

num7 -= 20; //10 (num7 - 20)

num7 *= 20; //200 (num7 * 20) 

num7 /= 20; //10 (num7 / 20)

num7 %= 10; //0 (num7 % 20)

1. 증감 연산자
   1. 증감 연산자는 변수의 값을 1씩 증가 또는 감소

//전위 증가  
let num8 = 10; 
++num8; //11

//후위 증가 
num8++ //11
console.log(num8) //12

//후위증가는 먼저 값을 출력하고 증감을 실행 그래서 7번쨰 줄에서야 증가 된다.

1. 논리 연산자
   1. 논리 연산자는 boolean 값을 다루는 데 사용되는데 많이 쓰인다.

//OR 연산자 `||`
let or = true || false; //true 

//AND 연산자`&&` 
let and = true && false; //false 

//NOT 연산자 `!`
let not = !true; //false

//오른쪽으로 이어나가면서 연산을 한다

1. 비교 연산자
   1. 비교 연산자는 두 값을 비교하여 boolean 값을 반환

//일치 연산자 `===`
let comp1 = 1 === "1"; //false (타입이 다름)

//불일치 연산자 `!==`
let comp2 = 1 !== 2; //true

//크다 연산자 `>`
let comp3 = 2 > 1; //true

//작다 연산자 `<`
let comp4 = 2 < 1; //false

//크거나 같다 연산자 `>=`
let comp5 = 2 >= 2; //true

//작거나 같다 연산자 `<=`
let comp6 = 2 <= 2; //true

// '==' 두개를 쓰는 연산자도 있는데 권장하지는 않음 값의 값의 자료형까지는 완벽하게 연산하지 못함

 

---

위 연산자들은 두 번 정도만 봐도 알아차리기 쉬운데 이번에는 조금 특별한 연산자를 소개합니다!

1. null 병합 연산자
   1. 존재하는 값을 추려내는 기능(null, undefined가 아닌 값을 찾아내는 연산자)

//왼쪽항이 null이나 undefined다? 오른쪽 값 쓰세요~
let some1;
let some2 = 10;
let some3 = 20;

let some4 = some1 ?? some2; //10
let some5 = some1 ?? some3; //20

some1 = 1
let some6 = some1 ?? some2; //1


let userName = SAHA
let userNickName = "SAHA.dev";

let displayName = userName ?? userNickName; //SAHA 
//만약 userName이 null이나 undefined다? SAHA.dev이게 출력됩니다.

 

1. typeof 연산자
   1. 값의 타입을 문자열로 반환하는 기능을 하는 연산자

//타입 확인하는 연산자
let some7 = 1;

let typeCheck = typeof some7;
console.log(typeCheck); //number

some7 = "hello";
console.log(typeCheck); //string

some7 = true;
console.log(typeCheck); //boolean

 

1. 삼항 연산자
   1. 항을 3개 사용
   2. 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환

let isToggle = true;

// 요구사항 : 변수 res에 isToggle의 값이 참이냐 거짓이냐
// (조건식 ? 참이면반환 : 거짓이면 반환)
let res = isToggle ? "보여줘" : "안보여줘"; //보여줘

isToggle = false;
let res = isToggle ? "보여줘" : "안보여줘"; //안보여줘

//요런식으로 쓰입니다. 
//로그인했으면 로그아웃 버튼 보여주기 
//로그인 안했으면 로그인 버튼 보여주기