Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 undefined와 void(0)의 차이점 완벽 정리

JavaScript undefined란?

undefined는 변수가 선언되었지만 아직 값이 할당되지 않았을 때 나타나는 기본값입니다. 즉, 변수의 공간은 존재하지만 어떤 값도 담겨 있지 않은 상태를 의미합니다.

예제:

var demo;
alert(demo); // undefined 출력
alert(typeof demo); // "undefined" 출력

다음 예제는 typeof 연산자와 undefined를 활용하여 변수의 존재 여부를 확인하는 방법을 보여줍니다.

예제

<html>
   <body>
      <script>
         var age = 10;
         if( typeof age !== 'undefined' ) {
            document.write("True");
         } else {
            document.write("False");
         }
      </script>
   </body>
</html>

출력 결과

True

변수 age가 선언되어 있으므로 typeof age !== 'undefined' 조건이 참이 되어 "True"가 출력됩니다. 이 패턴은 선언되지 않은 변수에 직접 접근할 때 발생하는 ReferenceError를 방지하면서 안전하게 변수의 존재 여부를 검사할 수 있는 대표적인 방법입니다.

JavaScript void(0)란?

void는 자바스크립트에서 중요한 키워드로, 단항 연산자(unary operator)로 사용됩니다. void는 임의의 타입을 가질 수 있는 하나의 피연산자 앞에 위치하며, 해당 표현식을 평가(evaluate)하되 항상 undefined를 반환합니다.

void의 문법은 다음 두 가지 형태 중 하나로 작성할 수 있습니다.

<head>
   <script>
      <!--
         void func()
         javascript:void func()
         또는:
         void(func())
         javascript:void(func())
      //-->
   </script>
</head>

실무에서는 주로 <a href="javascript:void(0)"> 형태로 사용되어, 링크 클릭 시 페이지가 이동하거나 새로고침되는 것을 방지하는 용도로 활용됩니다.

undefined와 void(0)의 차이점 요약

undefined는 값이 할당되지 않은 변수의 기본 상태를 나타내는 원시 타입(primitive type)의 입니다. 반면 void(0)는 표현식을 평가한 후 항상 undefined를 반환하는 연산자입니다. 즉, void 연산자의 실행 결과값이 undefined일 뿐, void 자체는 값이 아니라 연산자라는 점이 두 개념의 핵심적인 차이입니다.