Lodash project : About relationship between array.length and undefined

Get Help JavaScript
,
#1 
//Breaks up the supplied array into arrays of the specified size and return it.
chunk(array,size=1){
    let arrayChunks = [];
    for(let i=0;i<array.length;i+=size){
      let arrayChunk = array.slice(i,i+size);
      arrayChunks.push(arrayChunk);
    }
    console.log(arrayChunks[1].length);
    return arrayChunks;
  }

When I test this code, some cases make me confused about undefined.
For example,

//case 1:
let arr = [1,2,3,4,5];
let chunkArr = chunk(arr,3); // [[1, 2, 3], [4, 5]]
console.log(chunkArr[1][2]); //undefined.
console.log(chunkArr[1].length); //2

//case 2:
let arr= [1,2,3,4,5];
arr[4] = undefined;
console.log(arr.length); //5
arr[5] = undefined;
console.log(arr.length, arr[6]); //6, undefined

Q1.
I learned that variables that have not been initialized store the primitive data type undefined. So console.log(chunkArr[1][2]); prints undefined. But why chunk(arr,3) returns [[1, 2, 3], [4, 5]] instead of [[1, 2, 3], [4, 5, undefined]]?

Q2.
In case 2: JS engine counts arr[5] that has undefined value. But arr[6] isn’t counted length of an array even though it has ‘undefined’ too. What is difference? How the engine distinguish that?

Practice JavaScript Syntax: Arrays, Loops, Objects, Iterators | Codecademy

1 Like
#2

If an array has length 5, then there is no value at index 5 since the rightmost index is 4, not 5. There is no value since the element does not exist.

1 Like
#3

The reason it doesn’t return [[1, 2, 3], [4, 5, undefined]] is that your chunk method is using the built-in slice() method, which is aware of the length property and will not go beyond that even if you tell it to return more.

If you had done a

arr.length = 6;

prior to the call, then it would have done what you thought. You could have also done other things, such as arr[5] = undefined;, initialized it with an undefined, push(), splice(), etc. all the things that will result in the update of the length property.

Part of the answer to this ties in with the answer to the first question. There are internal mechanisms in place so that JavaScript is aware of the length.

Even though you’ve set something to undefined, it doesn’t mean you’ve removed it from the array. The length property was not updated when you set the last value in the array to undefined with arr[4] = undefined, so the length remained 5.

When you explicitly set the value of arr[5] to undefined, it was beyond the original length so JavaScript updated the length to 6 to include that index. Note, you could have set arr[50] to undefined and you’ll see that JavaScript now shows the length is 51.

Just getting the value won’t change the length, though.

Here’s an interesting read that illustrates this too: MDN Arrays - Relationship between length and numerical properties

A JavaScript array’s length property and numerical properties are connected.

Several of the built-in array methods (e.g., join(), slice(), indexOf(), etc.) take into account the value of an array’s length property when they’re called.

Other methods (e.g., push(), splice(), etc.) also result in updates to an array’s length property.

1 Like
#4

Thank you so much. I really appreciate it.