행복을 담는 블로그

[Javascript] 연산자 (Operators) 본문

FrontEnd/Javascript

[Javascript] 연산자 (Operators)

hyun0zin 2024. 1. 2. 12:04

📕 Javascript 의 연산자


1. 산술 연산자 (arithmetic operators)

: (+ , -, *, /, %)

더하기 연산자 : str(문자열)이 우세
그 외 연산자 : num(숫자)가 우세

1) 더하기 연산자 (+)

console.log(1+1); // 2
console.log(1 + "1"); //문자열로 변환 // 11

2) 빼기 연산자 (-)

console.log(1 -"2"); // -1
console.log(1-2); // -1

3) 곱하기 연산자 (*)

console.log(2 * 3); // 6 
console.log("2" * 3); // 6

4) 나누기 연산자 ( / )

console.log(4/2);  // 2
console.log("4"/2); // 2

5) 나머지 연산자 ( % )

console.log(5/2); // 나누기 연산자(/) : 2.5
console.log(5%2); // 나머지 연산자(%) : 1



2. 할당 연산자(assiganment operators)

1) 등호 연산자 (=)

let x = 10;  
console.log(x); // 10

2) 더하기 등호 연산자(+=)

let x = 10;  
x += 5; // x = x + 5  
console.log(x); // 15

3) 빼기 등호 연산자 (-=)

let x = 15;  
x-= 5; // x = x -5;  
console.log(x); // 10

// 여기서 x = -10으로 만들어보자.

x -= 20; // x = x - 20;  
console.log(x); // -10

4) 곱하기 등호 연산자 (*=)

let a = 10;  
a *= 2  
console.log(a); // 20



3. 비교 연산자 (comparison operators)

(→ true 또는 false 를 반환하는 연산자)

: 좌우의 값을 비교해서 true 나 false 값을 낼 때 사용. 조건 제시 할 때 중요한 연산자

1) 일치 연산자(===)

: 등호를 세개 붙인 연산자/ 타입까지 일치해야지만 true를 반환

// 숫자 2가 숫자 2랑 같니? 응!(true)  

console.log(2 === 2);  // true
console.log("2" === 2);  // false // type이 다르기 때문에 같지 않다!
console.log(2 === "2");  // false

2) 불일치 연산자 (!==)

: 타입까지 일치해야 false를 반환하는 연산자 (일치연산자(===)와 반대 개념)

// 숫자 2가 숫자 2랑 다르니? 아니?(flase)  

console.log(2 !==2);  // false
console.log("2" !== 2);  // true
console.log(2 !== "2");  // ture

3) 작다 연산자(<)/ 작거나 같다 연산자(<=) / 크다 연산자(>) / 크거나 같다 연산자(>=)

console.log(2 < 3);  // true
console.log(2 <= 3);  // true
console.log(3 <= 3);  // true
console.log(4 <= 3);  // false



4. 논리 연산자 (logical operators)

1) 논리곱 연산자( && ) = and

: 두 개의 값이 모두 true 일 때만 -> true 반환

console.log(true && true);  // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false);  // false

2) 논리합 연산자( || ) = or

: 두 값 중 하나라도 true 인 경우 true 반환

console.log(true || true);  // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false);  // false

3) 논리부정 연산자 (!) ⭐️ 중요 ⭐️

: 값을 반대로 바꿈

console.log(!true);  // false

let b = true;  
console.log(!b); // false



5. 삼항 연산자 (ternary opertor) ⭐️⭐️ 중요 ⭐️⭐️

: 조건에 따라 값을 선택한다.

📌 삼항이란? (항 1 = 조건) ? (항 2) : (항 3);
(항 1)이 true 이면 -> (항 2) 출력
(항 1)이 false 이면 -> ((항 3) 출력

let y =10;  
let result = (y > 5) ? "크다" : "작다";  

console.log(result); // 크다
let z = 20;  
// 3항 연산자를 이용해서 z < 10보다 작은 경우 작다를  
// console.log로 출력해주세요.  
// 10보다 크다면 크다를 출력해주세요. 

let answer = (z < 10) ? "작다" : "크다";  
console.log(answer); // 크다



6. 타입 연산자 (typeof)

: data type이 무엇인지 알려주는 연산자

console.log(typeof "5"); // string