DEV Community

Cover image for Code Smell 196 - Javascript Array Constructors
Maxi Contieri
Maxi Contieri

Posted on • Originally published at maximilianocontieri.com

3

Code Smell 196 - Javascript Array Constructors

Array creation is homogenous and predictable, or is it a hack?

TL;DR: Be very careful with Javascript Arrays.

Problems

  • The Least surprise principle violation

Solutions

  1. Be as declarative as possible

  2. Avoid creating Arrays with one argument.

Context

Javascript has a lot of magic tricks.

Knowing them makes some developers proud and a sense of belonging to juniors.

A language should be intuitive, homogeneous, predictable, simple, and pure.

Sample Code

Wrong

const arrayWithFixedLength = new Array(3);

console.log(arrayWithFixedLength); // [ <5 empty items> ]
console.log(arrayWithFixedLength[0]); // Undefined
console.log(arrayWithFixedLength[1]); // Undefined
console.log(arrayWithFixedLength[3]); // Undefined
console.log(arrayWithFixedLength[4]); // Undefined
console.log(arrayWithFixedLength.length); // 3
Enter fullscreen mode Exit fullscreen mode

Right

const arrayWithTwoElements = new Array(3, 1);

console.log(arrayWithTwoElements); // [ 3, 1 ]
console.log(arrayWithTwoElements[0]); // 3
console.log(arrayWithTwoElements[1]); // 1
console.log(arrayWithTwoElements[2]); // Undefined
console.log(arrayWithTwoElements[5]); // Undefined
console.log(arrayWithTwoElements.length); // 2

const arrayWithTwoElementsLiteral = [3,1];

console.log(arrayWithTwoElementsLiteral); // [ 3, 1 ]
console.log(arrayWithTwoElementsLiteral[0]); // 3
console.log(arrayWithTwoElementsLiteral[1]); // 1
console.log(arrayWithTwoElementsLiteral[2]); // Undefined
console.log(arrayWithTwoElementsLiteral[5]); // Undefined
console.log(arrayWithTwoElementsLiteral.length); // 2
Enter fullscreen mode Exit fullscreen mode

Detection

[X] Automatic

We can check for the notation with one argument and flag it as a warning.

Tags

  • Smart

Conclusion

Many "modern" languages are full of hacks to make life easier for programmers but are a source of potential undiscovered bugs.

Relations

Disclaimer

Code Smells are just my opinion.

Credits

Photo by Ryan Quintal on Unsplash

Originally on this tweet:


When someone says, "I want a programming language in which I need only say what I want done," give him a lollipop.

Alan J. Perlis


This article is part of the CodeSmell Series.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay