[JavaScript] 데이터타입 별 빈값 체크('', null, undefined, unknown 차이)

개요

연산자 사용 시 true, false를 반환되는 것을 활용하여 값을 확인 할 수 있다.

 

 

1. 비교연산자 사용하여 빈값 체크

• 비교 연산자: >, <, >=, <=, =, ==, ===, !=, !==
• 보통 문자열은 동등/부등연산자를 사용하고 숫자나 객체 타입은 부등호 연산자를 사용하여 값을 체크한다.

console.log(a == b) // a, b의 문자가 일치하는 지 확인
console.log(a != b) // a, b의 문자가 불일치하는 지 확인

console.log(a === b) // a, b의 문자와 타입이 일치하는지 확인
console.log(a !== b) // a, b의 문자와 타입이 불일치하는 확인

console.log(a > b) // a가 b보다 큰 지 확인
console.log(a >= b) // a가 b보다 크거나 같은지 확인
console.log(a < b) // b가 a보다 큰 지 확인
console.log(a <= b) // b가 a보다 크거나 같은지 확인

 

예)

const a = 0
const b = '0'
const c = ''

console.log(a == b) // true
console.log(a != b) // false
console.log(a === b) // false
console.log(a !== b) // true

console.log(c === '') // true
console.log(c !== '') // false
console.log(c === null) // false
console.log(c !== null) // true
console.log(c === undefined) // false
console.log(c !== undefined) // true

 

const a = 'abc'
const b = 'abd'
const c = 10
const d = 11
const e = []
const f = ['']

console.log(a > b) // true (문자열 오름차순 비교)
console.log(a >= b) // true
console.log(a < b) // false
console.log(a <= b) // false
console.log(a.length > b.length) // false (문자열 길이 비교)
console.log(a.length >= b.length) // true

console.log(c > d) // false
console.log(c >= d) // false
console.log(c < d) // true
console.log(c <= d) // true
console.log(c.length > d.length) // undefined
console.log(c.length >= d.length) // undefined
console.log(c.toString().length > d.toString().length) // false
console.log(c.toString().length >= d.toString().length) // true

console.log(e > f) // false
console.log(e >= f) // true
console.log(e < f) // false
console.log(e <= f) // true
console.log(e.length > f.length) // false (배열 길이 비교)
console.log(e.length >= f.length) // false
console.log(e.length < f.length) // true
console.log(e.length <= f.length) // true
console.log(e.toString().length > f.toString().length) // false (배열 문자 형변환 후 오름 차순 비교)
console.log(e.toString().length >= f.toString().length) // true (배열 문자 형변환 후 오름 차순 비교)

 

 

2. typeof 연산자 사용하여 빈값 체크

console.log(typeof a === 'string') // a 타입이 문자열인지
console.log(typeof a !== 'number') // a 타입이 숫자인지
console.log(typeof a === typeof b) // a와 b가 타입이 같은지

 

예)

const a = 0
const b ='0'
const c = []
const d = [{'name':'kim'},{'age':'20'}]
const e = null
const f = undefined
const g = ''

console.log(typeof a) // 'string'
console.log(typeof b) // 'number'
console.log(typeof c) // 'object'
console.log(typeof d) // 'object'
console.log(typeof e) // 'object'
console.log(typeof e) // 'undefined'
console.log(typeof g) // 'string'

console.log(typeof a === 'string') // true
console.log(typeof a !== 'string') // false
console.log(typeof a === 'number') // false
console.log(typeof a !== 'number') // true
console.log(typeof c === 'object') // true
console.log(typeof f === 'undefined') // true

console.log(typeof a === typeof b) // false
console.log(typeof c === typeof e) // true
console.log(typeof c === typeof f) // false
console.log(typeof c === typeof g) // false

 

 

 

3. 부정연산자 사용

const a = ''
const b = null
const c = undefined

console.log(a) // ''
console.log(!a) // true
console.log(b) // null
console.log(!b) // true
console.log(c) // undefined
console.log(!c) // true

 

 

'', null, undefined, unknown 차이

• ' ' : 빈 문자열
• null : 값이 비어있는 변수를 명시할 때 사용하는 타입, 변수 초기화에 사용 한다.
• undifined : 변수를 선언하고 아직 값이 할당 되지 않은 상태일때 타입
• unknown : 타입스크립트에서 타입을 알 수 없을때 사용하는 타입

예)

const a = ''
const b = undefined
const c = null

console.log(a) // ''
console.log(!a) // true
console.log(a === '') // true
console.lod(a === undefined) // false
console.lod(a === 'undefined') // false
console.lod(a === null) // false
console.lod(a === 'null') // false
console.lod(a.length > 0) // false

console.log(b) // undefined
console.log(!b) // true
console.log(b === '') // true
console.lod(b === undefined) // true
console.lod(b === 'undefined') // false
console.lod(b === null) // false
console.lod(b === 'null') // false
console.lod(b.length > 0) // error

console.log(c) // null
console.log(!c) // true
console.log(c === '') // false
console.lod(c === undefined) // false
console.lod(c === 'undefined') // false
console.lod(c === null) // true
console.lod(c === 'null') // false
console.lod(c.length > 0) // error

 

마무리

1. null, undifined 경우 로직에 에러가 발생할 수 있기 때문에 예외처리를 반드시 해야한다.
2. 다만, '', null, undefined, unknown 은 타입이 다르기 때문에, 원하는 결과를 위해서는 크로스 검증을 해야할 수 있다.