[JavaScript] 형 변환 ( Type Conversion ) / 참과 거짓 (Truthy & Falsy )

1. 형 변환 ( Type Conversion )

JavaScript에서 동등 연산자(==)를 사용할 때, 자동 형변환이 발생한다.

 

 

// 형변환
const a = 1     
const b = '1'

// 일치 연산자
console.log(a === b)
// 동등 연산자 ( 형변환이 일어난다 )
console.log(a == b)

변수 a의 값은 숫자고, b의 값은 문자열이지만 동등 연산자를 사용하였을 때,

형변환이 일어나 b가 숫자일때 a와 값이 동일해짐으로결과가 true로 나타난다.

 

이렇게 동등 연산자는 형변환이 일어날 수 있기 때문에, 일치 연산자를 사용하는 것이 안전하다.

 

 

 

Boolnea 자동 형변환

 

JavaScript에서 true는 1로, false는 0으로 형변환이 발생한다.

 

const a = true     
const b = 1
console.log(a === b)
console.log(a == b)

const a = 0     
const b = false
console.log(a === b)
console.log(a == b)

 

// Boolean 형변환
let str = "hello"
let bool = true

console.log(`str + bool = ${str + bool}`) // 문자열로 형변환 되어 계산
console.log(`str - bool = ${str - bool}`) // NaN (Not-a-Number)
console.log(`str * bool = ${str * bool}`) // NaN (Not-a-Number)

// true: 1, false: 0 으로 형변환
console.log(`3 + Number(true) = ${3 + Number(true)}`)
console.log(`3 + true = ${3 + true}`)
console.log(`3 + false = ${3 + false}`)

 

문자열과 Boolean이 만났는데 연산자가 +일 경우, 문자열로 취급된다.

+이외에 다른 연산자가 사용되었을 경우 Nan이 출력된다.

 

2. 참과 거짓 ( Truthy & Falsy )

JavaScript에서 if 조건을 통과하는 데이터는 참이다.

 

참인 경우 예시

if (true) {
    console.log('참')
}

 

// if 조건을 통과하는 데이터는 참이다 -> truthy
if (123) {
    console.log('참')
}

JavaScript는 if 조건문에 숫자를 넣으면 참으로 취급한다.

but 모든 숫자가 참인 것은 아님 !

 

 

 

참이 아닌 경우

// 모든 숫자가 truthy인 것은 아님
if (0) {
    console.log('참')
}

 

0의 경우 참이 아닌 것으로 취급한다.

 

 

 

하지만 문자열 '0'은 참이다.

// 문자 0은 참이다 
if ('0') {
    console.log('참')
}

 

이렇게 헷갈리는 경우가 많은데 . .

뭐가 참이고 뭐가 거짓인지 어떻게 알까?

-> Falsy에 해당하는 값 7개만 외우자 !

 

Falsy에 해당하는 값

1. false
2. 숫자 0
3. null
4. undefined
5. NaN
6. " " (빈문자데이터)
7. 0N(Bigint)

 

 

 

배열은 무조건 참일까?

const fruits = ['Apple', 'Banana']

if(fruits) {
    console.log('과일이 있어욤')
}

배열 데이터는 참이라 if 조건문에 넣었을 때 값이 잘나온다.

 

 

 

배열이 비어있다면 ?

const fruits = []

if(fruits) {
    console.log('과일이 있어욤')
}

빈 배열도 참으로 취급해서 조건문이 잘나온다 !

 

 

 

하지만 빈 배열에 length를 찍으면 거짓이다.

const fruits = []

if(fruits.length) {
    console.log('과일이 있어욤')
}

빈 배열 그 자체는 참이지만, 빈 배열의 length는 거짓이라는 점 !

 

 

자바스크립트는 이렇게 참 거짓이 헷갈리는 경우가 많은 것 같다.

오늘 공부한 것을 잘 기억해보ㅈ ㅏ !!