자바스크립트 데이터타입 null undefined empty 차이

자바스크립트에서 빈값을 처리하는 경우는 조금 생소하다. 종류가 3가지이다. 이것들의 차이는 어쩌면 중요하지 않지만 알아두면 좋다. 에러처리와 데이터의 값이 없는 경우도 처리할 경우에 필요하다.

자바스크립트 데이터타입
null undefined empty 차이

결론부터 말하면 이들의 차이는 위치와 공간과 데이터의 존재유무를 말하고 있다.

자바스크립트는 엄연히 컴퓨터의 메모리보다는 브라우저의 메모리를 사용하고 있기도 하다.

그렇기에 데이터의 존재유무에 대해 유연한 처리와 함께 엄격하지 않은 구문처리를 하고 있기도 하다.

왠만한 html 웹페이지들이 에러가 나더라도 정상적으로 동작하는 이유가 여기에 있다.

자바스크립트의 변수 중 undefined null empty 또한 분명한 차이가 있다.

빈값 종류

자바스크립틔 빈값의 종류는 undefined null empty 3종류이다.

눈으로 보는 가시적인 정보는 빈값이다.

하지만, 내부적인 데이터타입으로 보면 서로 다 틀리다.

undefined 때문에 곤혹을 치르는 분들도 간혹 발생하기도 한다.

보통의 에러처리는 null 과 빈값으로 처리하기 때문이다.

서로 다른 데이터타입

가시적으로 보이는 빈값들의 종류와 의미는 다음과 같다.

undefined
null
empty

이들의 데이터타입은 다 다르다.

다시 정리하면 아래와 같다.

undefined : undefined
null : object
empty : string

이것은 내부적인 동작과도 같다.

메모리의 구조와 동작을 알면 금방 이해되지만 굳이 이것을 몰라도 자바스크립트를 개발하는데 문제는 없다.

다만 거의 무료로 제공하는 오픈소스들은 검증되지 않은 것들이 많기에 간혹 에러가 발생하면 데이터타입을 손볼 필요가 있을 경우에나 사용하지 이런 특수한 경우라면 그냥 넘어가도 상관없다.

일단 의미를 다시 살펴보자.

undefined : undefined
변수의 선언만 이루어진 상태
메모리에서 변수의 위치만 정해지고 공간은 텅 빈 상태
데이터가 없기 때문에 데이터타입이 undefined 이다.
null : object
변수의 선언과 데이터가 없는 상태
메모리의 변수의 위치가 정해지고 공간은 텅 빈 상태
null 이란 데이터가 들어갈 경우 object 로 데이터타입이 정해진다.
empty : string
변수의 선언과 데이터가 있는 상태
메모리의 변수의 위치가 정해지고 공간에 빈 문자열 하나만 있는 상태

코드 샘플

아래는 위에서 언급한 것을 코드로 작성한 것이다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 데이터타입 typeof</h1>

        <script>

            let vUndefined;
            let vNull = null;
            let vEmpty = "";

            console.log("vUndefined : ", vUndefined, typeof(vUndefined));
            console.log("vNull : ", vNull, typeof(vNull));
            console.log("vEmpty : ", vEmpty, typeof(vEmpty));

            if( vUndefined==null){
                console.log("inner vUndefined : ", vUndefined, typeof(vUndefined));
            }

        </script>
        
    </body>
</html>

결과화면을 보자.

undefined 또한 null 로 비교가 되고 있는 것을 볼 수 있다.

변수는 선언이 되었고, 메모리공간만 확보된 상태이기 때문이다.

undefined 의 의미는 정해진 데이터가 없기 때문에 정의되지 않은 것으로 표시될 뿐이다.

하지만 null 은 다르다.

공간은 확보했고 빈공간으로 자바스크립트는 인식하기 때문에 object 로 인식한다.

솔직히 이 내용은 몰라도 자바스크립트를 개발하는데 문제는 없다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 함수 파라미터 사용 방법 javascript function parameter (0)	2021.10.24
자바스크립트 함수 사용 방법 javascript function (0)	2021.10.24
자바스크립트 데이터타입 종류 보기 typeof 사용 javascript data type (0)	2021.10.21
자바스크립트 할당연산자 산술연산자와 혼합 사용하기 (0)	2021.10.20
자바스크립트 할당연산자 사용하는 방법 javascript assignment operator (0)	2021.10.19

자바스크립트 데이터타입 null undefined empty 차이