나의 개발일지

[Javascript] 3. 연산자 본문

JavaScript/Sparta

[Javascript] 3. 연산자

heew0n 2023. 10. 15. 15:53

1. 산술연산자

// 1-1. 더하기 연산자 
console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"
// --> 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환한다



// 1-2. 빼기 연산자
console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN
// --> 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다



// 1-3. 곱하기 연산자(*)
console.log(5 * 2);       // 10
console.log("5" * "2");   // 10
console.log("5" * 2);     // 10
console.log(5 * "2");     // 10
console.log("five" * 2);  // NaN
// --> 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다



// 1-4. 나누기 연산자(/)
console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN
// --> 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다



// 1-5. 나누기 연산자(%)
console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN
// --> 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다

 

 

2. 할당연산자

// 2-1. 등호연산자(=)
let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5
// --> 변수에 값을 할당한다. 
// --> = 기준 오른쪽 값을 왼쪽 변수에 넣는다는 것으로 생각해야 함!


// 2-2. 더하기 등호 연산자(+=)
let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15
// --> 변수에 값을 더한다.


// 2-3. 빼기 등호 연산자(-=)
let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5
// --> 변수에서 값을 뺀다.



// 2-4. 곱하기 등호 연산자(*=)
let x = 10;
console.log(x);   // 10

x *= 5;
console.log(x);   // 50
// --> 변수에 값을 곱한다.



// 2-5. 나누기 등호 연산자(/=)
let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2
// --> 변수에 값을 나눈다.



// 2-6. 나누기 등호 연산자(%=)
let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1
// --> 변수에서 값을 나눈 나머지 값을 구한다.

 

 

3. 비교 연산자

// 3-1. 일치 연산자(===)
console.log(2 === 2);   // true
console.log("2" === 2);   // false / 문자형과 숫자를 비교했을 때 같은 자료형이 아니기 때문에 불일치
console.log(2 === "2");   // false / 문자형과 숫자를 비교했을 때 같은 자료형이 아니기 때문에 불일치
// --> 두 값이 같은지 비교할 수 있다. 
// --> 자료형까지 비교한다.



// 3-2. 불일치 연산자(!==)
console.log(2 !== 2);   // false / 두 값이 일치하지만 불일치 연산자에서는 일치하면 안되기 때문에 false
console.log("2" !== 2);   // true / 비교했을 때 두 값이 불일치하기 때문에 true (문자 vs 숫자)
console.log(2 !== "2");   // true / 비교했을 때 두 값이 불일치하기 때문에 true (문자 vs 숫자)
// --> 두 값이 다른 지 비교할 수 있다.
// --> 자료형까지 비교한다.



// 3-3. 작다(<) 연산자
console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true
// --> 두 값을 비교하여 더 작은 값을 구할 수 있다.
// --> 문자열이랑 숫자랑 비교할 경우 문자열은 숫자로 자동 변환!


// 3-4 작거나 같다(<=) 연산자
console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true
// --> 두 값을 비교하여 같거나 더 작은 값을 구할 수 있다.
// --> 문자열이랑 숫자랑 비교할 경우 문자열은 숫자로 자동 변환!

 

 

4. 논리 연산자

// 4-1. 논리곱(&&) 연산자
console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

let a = 10 > 5;  // true
let b = 10 < 5;  // false
let c = 5 == '5'  // true

console.log(a && b); // false / a, b 중 하나만 맞으므로 false
console.log(a && c); // true / a, c 둘 다 맞으므로 true

// --> 두 값을 비교, 두 값이 모두 true일 경우에만 true를 반환한다.

 

 

5. 삼항 연산자(?:)

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

 

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

                                  true           false

 

 

 

 

6. 타입 연산자

 

typeof 연산자

console.log(typeof 123);   // "number"  숫자
console.log(typeof "123");   // "string"   문자열  
console.log(typeof true);   // "boolean"   true / false
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"