{"id":2202,"date":"2016-12-31T16:44:14","date_gmt":"2016-12-31T21:44:14","guid":{"rendered":"http:\/\/www.ikriv.com\/blog\/?p=2202"},"modified":"2016-12-31T17:39:02","modified_gmt":"2016-12-31T22:39:02","slug":"javascript-wtf-4-undefined-vs-null","status":"publish","type":"post","link":"https:\/\/ikriv.com\/blog\/?p=2202","title":{"rendered":"JavaScript WTF #4: undefined vs null"},"content":{"rendered":"

The forth place in the JavaScript WTF competition goes to the amazingly large number of ways to represent lack of value<\/b>. Most C-like languages have keyword null<\/code> that means “no value”. Beside null<\/code>, JavaScript also has undefined<\/code>, apparently meaning “like, totally no value”. The actual situation is even more complicated. A variable in JavaScript can be in any of the following states of no-value-ness:<\/p>\n

    \n
  1. Not declared.<\/li>\n
  2. Not initialized or explicitly set to undefined<\/code>.<\/li>\n
  3. Explicitly set to null<\/code>.<\/li>\n
  4. Temporarily dead (this is not a joke).<\/li>\n<\/ol>\n

    There is an impressive number of subtle differences between these states.<\/p>\n

    Not declared<\/h3>\n

    In default, non-strict mode, not declared variables are treated as not initialized, and have implicit value of undefined<\/code>. In strict mode, accessing a not declared variable causes a ReferenceError<\/code>, except when used with typeof<\/code>. <\/p>\n

    \r\n'use strict';\r\nconsole.log(typeof notDeclared==="undefined"); \/\/ prints true\r\nconsole.log(notDeclared===undefined);          \/\/ ReferenceError\r\n<\/pre>\n
    Note that typeof notDeclared<\/code> returns string \"undefined\"<\/code>, which is different from undefined<\/code> value.<\/p>\n
    Not initialized<\/h3>\n
    Declared, but not initialized variables are implicitly assigned a value of undefined<\/code>. There is no way to distinguish between a variable that was never initialized, and a variable that was explicitly set to undefined<\/code>.<\/p>\n
    \r\nvar notInitialized;\r\nconsole.log(typeof notInitialized==="undefined"); \/\/ true\r\nconsole.log(notInitialized===undefined);          \/\/ true\r\n<\/pre>\n
    Null<\/h3>\n
    Null is interpreted as pointing to no object. It is different from undefined<\/code> in a number of ways:<\/p>\n
    \r\nvar nullVar = null;\r\n\r\nconsole.log(typeof nullVar === "object"); \/\/ true\r\nconsole.log(nullVar === null);            \/\/ true\r\nconsole.log(nullVar === undefined);       \/\/ false\r\nconsole.log(nullVar == undefined);        \/\/ true\r\nconsole.log(1+null);                      \/\/ 1\r\nconsole.log(1+undefined);                 \/\/ NaN\r\n<\/pre>\n
    An attempt to access any property of null<\/code> or undefined<\/code> leads to ReferenceError<\/code>. One can check for null<\/code> or undefined<\/code> in one shot using equality operator “==”:<\/p>\n
    \r\nif (someVar == null) ... \/\/ true if someVar is undefined or null\r\n<\/pre>\n
    However, simply writing if (!someVar)<\/code> is not recommended: the condition will be true not only for null<\/code> and undefined<\/code>, but also for false<\/code>, the number 0<\/code>, the empty string \"\"<\/code> and Number.NaN<\/code>.<\/p>\n
    Dead<\/h3>\n
    Temporarily dead variables are an addition of EcmaScript6: these are variables declared via let<\/code> or const<\/code> keywords in the lines preceding their declaration:<\/p>\n
    \r\nfunction foo() {\r\n   \/\/ x is in a "temporarily dead zone" (TDZ) here\r\n   let x; \r\n   \/\/ x has value of undefined here\r\n}\r\n<\/pre>\n
    “Normal” variables are “hoisted” to the top of their scope, but “let” and “const” variables are not. Any access to a let<\/code> or const<\/code> variable prior to its declaration is not allowed. This includes the typeof<\/code> operator.<\/p>\n
    \r\nconsole.log(declaredLater===undefined);        \/\/ true\r\nconsole.log(typeof notDeclared==="undefined"); \/\/ true\r\nconsole.log(typeof dead);                      \/\/ ReferenceError\r\nvar declaredLater = 42;\r\nlet dead;\r\n<\/pre>\n
    Conclusion<\/h3>\n
    To be fair, there are situations when it helps to distinguish “a value of null” and “no value at all”. E.g. when sending partial updates, null<\/code> may mean “replace this field with null” and undefined<\/code> may mean “do not touch”. When dealing with default function parameters: undefined<\/code> means “use default value”, and null<\/code> means “use null”. In the old days of COM we had VT_NULL, VT_EMPTY, and also vtMissing, which actually is a third, different value<\/a>.<\/p>\n
    Still, JavaScript situation is a mess. The differences between the four “no-value” states are not intuitive, to put it mildly, and there are no explicit checks for them. I wish we had something like isDeclared(symbol)<\/code>, and isInTdz(symbol)<\/code>, but alas: the best we can do is to rely on confusing side-effects. Hence, the WTF.
    \n    CodeProject<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    The forth place in the JavaScript WTF competition goes to the amazingly large number of ways to represent lack of value. Most C-like languages have keyword null that means “no […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[4,15],"tags":[],"class_list":["entry","author-ikriv","post-2202","post","type-post","status-publish","format-standard","category-hack","category-webdev"],"_links":{"self":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2202"}],"version-history":[{"count":31,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2202\/revisions"}],"predecessor-version":[{"id":2233,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2202\/revisions\/2233"}],"wp:attachment":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}