상세 컨텐츠

본문 제목

undefined와 null의 차이점이란 ?

프론트 엔드 연관/JAVAScript 연관

by 스튜핏 2022. 9. 19. 21:40

본문

undefined 

 

-변수를 선언하고 값을 할당하지 않은상태 , 

null

 

-변수를 선언하고 빈 값을 할당한 상태 ( 빈 객체 ) 이다 

-null은 어떤 값이 의도적으로 비어있다는 뜻입니다

 

 

여기서 두가지를 추가 설명을 하자면 ! 

 

undefined 은 자료형이 없는 상태이다 ,  따라서 typeof(타입) 을 통해 자료형을 확인해보면

null은 object (나중에 알아볼 자료),undefined는 undefined가 출력되는 것을 확인할 수 있다

 

두 타입의 공통점을 말씀드리자면 

-둘다 각각의 타입명 undefined,null)의 값이 유일하다.

-unedfined 타입의 값은 unedfined ( 밑에 설명이 있습니다)

-null 타입의 값은 null이 유일하다 

 

예시로 된 코드를 하나 가져와보겠습니다 !

 
var a;
console.log(a); // undefined
console.log(typeof a); // undefined

var 키워드로 선언한 변수는 자동 암묵적으로 undefined 으로 초기화를 시켜요 

따라서 변수 선언에 의해 확보된 메모리 공간을 처음 할당으로 이뤄질때 빈 상태 ("대부분 비어 있지 않고 쓰레기 값이 들어있다)

 

이 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화를 시킵니다

 

따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined 로 반환이 됩니다변수를 참조했을때 iundefined가 반환이된다면 선언 이후 값이 할당되지 않은 즉 , 초기화되지 않은 변수라는 것을 알아볼 수 있습니다 

 

선언과 정의

  • undefined를 직역하면 ‘정의되지 않은’이란 의미이다.
  • 자바스크립트 undefined에서 말하는 정의란 ‘변수의 값을 할당하여 변수의 실체를 명확히 하는 것’를 의미한다.
  • 자바스크립트의 경우 변수를 선언하면 암묵적으로 정의가 이뤄지기 때문에 선언과 정의의 구분이 모호하다.
  • ECMAScript 사양에서 변수는 ‘선언한다.’라고 표현하고, 함수는 ‘정의한다.’라고 표현한다.

 

-undefined

 

undefined 은 원시값 (Primitive Type : 프로모티브 타입) 로 선언한 후에 값을 할당하지 않은 변수와 값이 주어지지 않은 인수로 인하여 자동으로 할당됩니다 , 이 값은 전역 객체의 속성 중 하나 이므로 즉 전역 스코프에서의 변수 이기도 하다 , 따라서 undefined = undefined 똑같은 값이다  undefined 의 변수 값은 = 원시 값이라는 것 

 

여기서 도움말 (?) 을 추가를 해드리자면 

 

cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다.

그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다.

 

하지만 이 아래의 변수가 undefined을 반환한다느 것 

-값을 할당하지 않은 변수 

-메서드와 선언에서 변수가 할당받지 않은 경우 

 

null 타입 

  • null은 원시 자료형 null로 분류된다.
  • 자바스크립트는 대소문자를 구분하므로 null은 Null, NULL 등과는 다르다.
  • null은 ‘비어있는, 존재하지 않는 값'(값의 부재)을 의미한다.
  • 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용한다.
  • 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.
  • 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도 참조하지 않은 메모리 공간에 대해 *가비지 콜렉션을 수행할 것이다. ( 나중에 가비지 콜렉션이라는 것도 추가 공부하겠습니다)

typeof (타입) 에서 null

 

typeo로 자료형을 확인할 때 object (객체)를 반환하는데 , null 이 빈 참조를 나타내는 데 자주 사용되기 때문이다 

그래서 원시 자료형으로 생각해도 되지만 엄밀히 말해서는 null은 객체이고 참조형 자료이다 

 

예시코드

 
var nullType = null;
console.log(typeof null); // object

함수가 반환하는 null

함수가 유효한 값을 반환할 수 없는 경우에는 명시적으로 null을 반환하기도 한다 

또한 예를 들어 HTML 요소를 검색하는데 document,qureySelecter 메서드는 조건부에 부합하는 HTML 요소를 검색 할 수 없는 경우 에러 대신 null가 반환된다 

이에 대해서 null보다는 undefined를 반환하는 것이 타당하다느 의견이 있다

 

예시 코드 

 

var stupid = document.querySelector('.myClass');
// HTML 문서에 myClass 클래스를 가진 요소가 없다면 null을 반환한다.
console.log(stupid); // null

기타 팁 

  • undefined == null 은 true입니다
  • 상수 : 변하지 않는 변수
  • 리터럴 : 변수에 넣는 변하지 않는 데이터

출처: 정라잇님 

'프론트 엔드 연관 > JAVAScript 연관' 카테고리의 다른 글

전역변수 와 지역변수  (0) 2022.09.22
불리언(boolean) 뜻 과 이해  (0) 2022.09.21
메서드의 정의  (1) 2022.09.19
변수의 타입  (1) 2022.09.18
이스케이프 시퀸스 (escape sequence)  (0) 2022.09.18

관련글 더보기