Initializng an array with null values in Javascript

Question

Initializng an array with null values in Javascript

Can you explain why this Javascript code:

var myArray = new Array(3);

does not produce the same result as:

var otherArray = [null, null, null];

? Keep in mind that (myArray == otherArray) returns false.

Additionally, is there a way to create an array like otherArray, which contains 'nulls' but with a custom size?

Note:

[undefined, undefined, undefined]

is also found to be unequal to myArray.

javascript arrays

Answer 1

Answer №1

Utilizing EcmaScript 6 (ES2105), constructing an array with five null values can be accomplished effortlessly:

const newArray = new Array(5).fill(null);

MDN Reference Link

Answer 2

Utilizing EcmaScript 6 (ES2105), constructing an array with five null values can be accomplished effortlessly:

const newArray = new Array(5).fill(null);

MDN Reference Link

Answer 3

Answer №2

When you initialize an array like var myArray = new Array(3);, it creates an empty array. Therefore, even if myArray and otherArray had the same values - three undefined values - they would still be considered different arrays. This is because an array is treated as an object, and a variable like myArray merely holds a reference to that object. Having two objects with identical values does not make them equal.

For example,

var x = new Object();
var y = new Object();
console.log(x===y); // Outputs false.

Additionally:

var person1 = { name: "John" };
var person2 = { name: "John" };
console.log(person1===person2); // Outputs false.

Note:

Also, in the case of initializing an array using var myArray = new Array(3), the indices are not initialized, as noted by Paul in the comments.

For instance, if you do this:

var nums = [1,2,3];
console.log(Object.keys(nums));

You will see:

["1","2","3"];

However, if you try:

var nums = new Array(3);
console.log(Object.keys(nums));

You will get an output of:

[]

Answer 4

When you initialize an array like var myArray = new Array(3);, it creates an empty array. Therefore, even if myArray and otherArray had the same values - three undefined values - they would still be considered different arrays. This is because an array is treated as an object, and a variable like myArray merely holds a reference to that object. Having two objects with identical values does not make them equal.

For example,

var x = new Object();
var y = new Object();
console.log(x===y); // Outputs false.

Additionally:

var person1 = { name: "John" };
var person2 = { name: "John" };
console.log(person1===person2); // Outputs false.

Note:

Also, in the case of initializing an array using var myArray = new Array(3), the indices are not initialized, as noted by Paul in the comments.

For instance, if you do this:

var nums = [1,2,3];
console.log(Object.keys(nums));

You will see:

["1","2","3"];

However, if you try:

var nums = new Array(3);
console.log(Object.keys(nums));

You will get an output of:

[]

Answer 5

Answer №3

One key thing to remember is that when comparing two Arrays or any other Object, you must either iterate through them or serialize them because comparing their references will always result in false

Is there a way to create an array like otherArray, which contains only 'null' values but with a custom size?

Here is an alternative approach for generating Arrays with a default value for each item and all indices set:

function generateArray(length, item) {
    var array1 = [item],
        array2 = [];
    while (length > 0) {
        if (length & 1) array2 = array2.concat(array1);
        array1 = array1.concat(array1);
        length >>= 1;
    }
    return array2;
}

Now,

generateArray(7, null);
// [null, null, null, null, null, null, null]

Answer 6

One key thing to remember is that when comparing two Arrays or any other Object, you must either iterate through them or serialize them because comparing their references will always result in false

Is there a way to create an array like otherArray, which contains only 'null' values but with a custom size?

Here is an alternative approach for generating Arrays with a default value for each item and all indices set:

function generateArray(length, item) {
    var array1 = [item],
        array2 = [];
    while (length > 0) {
        if (length & 1) array2 = array2.concat(array1);
        array1 = array1.concat(array1);
        length >>= 1;
    }
    return array2;
}

Now,

generateArray(7, null);
// [null, null, null, null, null, null, null]

Answer 7

Answer №4

Upon conducting some investigation, I discovered that using Array(length).fill(null) is not the most optimal solution in terms of performance.

The solution with the best performance was:

const nullArr = Array(length)
for (let i = 0; i < length; i++) {
  nullArr[i] = null
}

Take a look at this:

const Benchmark = require('benchmark')
const suite = new Benchmark.Suite

const length = 10000

suite
  .add('Array#fill', function () {
    Array(length).fill(null)
  })
  .add('Array#for', function () {
    const nullArr = Array(length)
    for (let i = 0; i < length; i++) {
      nullArr[i] = null
    }
  })

  .on('cycle', function (event) {
    console.log(String(event.target))
  })
  .on('complete', function () {
    console.log('Fastest result: ' + this.filter('fastest').map('name'))
  })

  .run({ async: true })

The performance results are as follows:

Array#fill x 44,545 ops/sec ±0.43% (91 runs sampled)
Array#for x 78,789 ops/sec ±0.35% (94 runs sampled)
The fastest option is Array#for

Answer 8

Upon conducting some investigation, I discovered that using Array(length).fill(null) is not the most optimal solution in terms of performance.

The solution with the best performance was:

const nullArr = Array(length)
for (let i = 0; i < length; i++) {
  nullArr[i] = null
}

Take a look at this:

const Benchmark = require('benchmark')
const suite = new Benchmark.Suite

const length = 10000

suite
  .add('Array#fill', function () {
    Array(length).fill(null)
  })
  .add('Array#for', function () {
    const nullArr = Array(length)
    for (let i = 0; i < length; i++) {
      nullArr[i] = null
    }
  })

  .on('cycle', function (event) {
    console.log(String(event.target))
  })
  .on('complete', function () {
    console.log('Fastest result: ' + this.filter('fastest').map('name'))
  })

  .run({ async: true })

The performance results are as follows:

Array#fill x 44,545 ops/sec ±0.43% (91 runs sampled)
Array#for x 78,789 ops/sec ±0.35% (94 runs sampled)
The fastest option is Array#for

Answer 9

Answer №5

Try using [...new Array(76)] to create an array with 76 undefined values.

console.log(
  [...new Array(76)]
)

Another option is to fill the array with null.

console.log(
  [...new Array(76).fill(null)]
)

Answer 10

Try using [...new Array(76)] to create an array with 76 undefined values.

console.log(
  [...new Array(76)]
)

Another option is to fill the array with null.

console.log(
  [...new Array(76).fill(null)]
)

Answer 11

Answer №6

Success! I found a solution.

let list = [Array(9).fill(null)]

Answer 12

Success! I found a solution.

let list = [Array(9).fill(null)]

Initializng an array with null values in Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Tips on creating a literal type that is determined by a specific value within an object

The performance of the bubble sorting program is not up to par

applying a timeout for the .on(load) event

Developing a unique JavaScript object by extracting information from a jQuery AJAX response

Issue with idangero.us swiper: resizing problem occurs when image exceeds window size

Exploring click event beyond React Component: Jest + Enzyme Testing

Once invoked by an ajax request, the $().ready function is executed

Is it possible to retrieve all data from the Google translation API?

Exploring the Dynamic Resizing of Geometry Meshes in three.js

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

What is the correct way to utilize preloads and window.api calls in Electron?

The has-error class cannot be applied to certain input elements

What is the reason for me encountering an error message stating "Access-Control-Allow-Origin" does not allow this origin?

Is there a way to organize items in an array alphabetically according to a predetermined key value?

Invoke multiple stored functions using JavaScript, beginning with this one

Prevent horizontal HTML scrolling while displaying a layer

The dirtyVertices feature in Three.js seems to be malfunctioning

Why is my Feed2JS RSS feed functional locally but not operational after deployment on GitHub Pages?

Updates to Boolean Arrays in Ruby