skip to Main Content

In Javascript, if I make an array using Array(10), it creates an array with 10 empty items. If I access any item in that array, it returns undefined. However, if I create an array with a length of 10 and fill it with undefined like so: Array(10).fill(undefined), and access any item of that array, it also returns undefined. Similarly, if I were to coerce an empty value to a number using Number(), it returns 0. However, if I coerce undefined to a number by using Number(undefined), it returns NaN. How do I identify an empty value vs. a specifically undefined value?

2

Answers


  1. Any "empty" items you are seeing are just your tools way of showing you have an array with fewer properties than your array length would indicate.

    var a = Array(3);
    console.log(Object.getOwnPropertyNames(a)); // ["length"]
    
    a.fill(undefined);
    console.log(Object.getOwnPropertyNames(a)); // ["0", "1", "2", "length"]

    There isn’t really an empty value type in JavaScript, it’s just the absence of a property, which you can detect in a variety of ways, with varying nuances in terms of walking the prototype chain and backwards compatibility with legacy software.

    var a = Array(3);
    console.log('0' in a); // false
    console.log(a.hasOwnProperty('0')); // false
    console.log(Reflect.has(a, '0')); // false
    
    
    a.fill(undefined);
    console.log('0' in a); // true
    console.log(a.hasOwnProperty('0')); // true
    console.log(Reflect.has(a, '0')); // true

    The reason you get undefined when you access one of these empty array slots is because that’s the value you normally get when you access a property which does not exist on an object.


    Similarly, if I were to coerce an empty value to a number using Number(), it returns 0.

    This should not be happening according to the ES specification, all of these will produce NaN:

    a = Array(3);
    console.log(Number(a[0])); // NaN
    console.log(+a[0]); // NaN
    console.log(parseInt(a[0])); // NaN

    Passing no argument to Number() will produce 0 though.

    Login or Signup to reply.
  2. Let us try to understand it in one by one.

    What is undefined:
    As per MDN documentation

    A variable that has not been assigned a value is of type undefined. A
    method or statement also returns undefined if the variable that is
    being evaluated does not have an assigned value. A function returns
    undefined if a value was not returned.

    Which means if you do not assign a value to a variable/property(array index in this case) it will always be undefined

    When you create an array with the below statement.

    var arr = Array(10);
    

    As per the MDN documentation for this which says

    An array is created with its length property set to that number, and
    the array elements are empty slots.

    All this statement does is that it creates a variable named arr which is declared to be of type Array and will contain 10 items. This does not assign any values at all to any of the items of the array nor have you added any items yet.
    So when the array can contain 10 elements but has none, you see each item as empty(this may vary based on what tool you are using).

    This also means that since the array is declared to hold 10 items but none of their values are assigned/defined yet so if you try to access any values you will always get undefined

    const arr = Array(10)
    console.log(arr[0]); // this will return undefined
    
    // assign a value to any item in array
    arr[1] =10;
    console.log(arr[1])

    For the second query related to Number
    That is simply how the Number constructor is supposed to behave read here Number() constructor.
    But when you pass undefined since the type of value undefined is also undefined and not a valid number, also it can not be converted to a valid number hence you get NaN which means not a number.

    Read more about NaN here

    const num = Number();
    console.log(num);
    
    console.log(`type of undefined is:${typeof undefined}`)
    
    const num1 = Number(undefined)
    console.log(num1)
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search