JavaScript 정복하기[2] - 형변환, 연산자

자바스크립트 형 변환에 대해 알아보자! 형 변환이란 말 그대로 형태를 바꾼다는 뜻이다.

 

 

1. 암시적

1-1. 문자열

숫자와 문자열(숫자)가 더할 경우

let result1 = 1 + "2"
console.log(result1) // 12
console.log(typeof result1) // string

 

 

문자열(숫자)와 boolean 타입이 더할 경우

let result2 = "1" + true

console.log(result2) // 1true
console.log(typeof result2) // string

 

 

객체, null, undefinded와 문자열(숫자)이 더할 경우

{}, null, undefined + "1" => 문자열

 

 

 

1-2. 숫자

숫자에서 문자열(숫자)를 뺄 경우

let result3 = 1 - "2"
console.log(result3) // -1
console.log(typeof result3) // number

 

 

문자열(숫자)와 문자열(숫자)를 곱할 경우

let result4 = "2" * "3"
console.log(result4) // 6
console.log(typeof result4) //number

 

 

 

 

 

---

2.명시적 형 변환

2-1. Boolean

 

console.log(Boolean(0)) // false
console.log(Boolean("")) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(NaN)) // false

console.log(Boolean("false")) // true
console.log(Boolean({})) // true

 

 

2-2. 문자열

 

let result5 = String(123)
console.log(typeof result5) // string
console.log(result5) // 123

 

let result6 = String(true)
console.log(typeof result6) // string
console.log(result6) // true

 

let result7 = String(false)
console.log(typeof result7) // string
console.log(result7) // false

 

let result8 = String(null)
console.log(typeof result8) // string
console.log(result8) // null

 

let result9 = String(undefined)
console.log(typeof result9) // string
console.log(result9) // undefined

 

 

 

2-3. Number

 

let result10 = Number("123")
console.log(result10) // 123
console.log(typeof result10) // number

 

 

 

 

 

---

연산자(+, -, *, %)

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. 나누기 연산자 vs 나머지 연산자

 

console.log(5 / 2) // 2.5
console.log(5 % 2) // 1

 

 

6. 할당 연산자(assignment)

6-1. 등호 연산자(=)

 

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

 

 

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

 

let x = 10

x += 5  // x = x + 5
console.log(x) // 15

 

 

6-3. 빼기 등호 연산자

 

let x = 10

x -= 5 // x = x - 5
console.log(x) // 5

 

 

6-4. 곱하기 등호 연산자

 

let a = 10

a *= 2   // a = a * 2
console.log(a) // 20

 

 

 

 

 

---

비교 연산자

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

타입까지 일치해야 true를 반환하는 연산자

 

console.log(2 === 2) // true
console.log(2 === "2") // false
console.log("2" === 2) // false

 

 

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

타입까지 일치해야 false를 반환하는 연산자

 

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

 

 

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

 

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

 

 

 

 

 

---

논리 연산자

1. 논리곱 연산자(&&) : 모두 true 일 떄 true 반환

 

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

 

 

2. 논리합 연산자(||) : 두 값 중 true인 경우 true

 

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

 

 

3. 논리 부정 연산자(!) : 값을 반대로 바꿈

 

console.log(!true) // false
let abc = true
console.log(!abc) // false

 

 

4. 삼항연산자(⭐️중요⭐️)

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

 

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

 

문제)

// 삼항연산자를 이용해서 q가 10보다 작은 경우 작다를, 10보다 크다면 크다를 console.log로 출력

let q = 20

let result1 = q < 10 ? "작다" : "크다"
console.log(result1)

 

 

5. 타입연산자(typeof)

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