Constructors vs Literals in JavaScript

Raj Maharjan
Jun 21 · 3 min read

In JavaScript, we do have the freedom to get the same result in different ways. We can create strings, numbers, objects, arrays, etc. values using both constructors and literals approach. You can get the same values using any of those approaches. However, there are still some differences to know which might be useful to avoid runtime bugs.

For those who is only reading this quote, long story short, creating values with
literals are better than built-in constructors.

First, if you are wondering what these are.

You can just go on and use literals without knowing the differences and no one is going to say anything to you. I know, if you have a curious mind you will continue reading. But especially, for those who have come from class-based programming languages, you might be tempted to use the constructor approach. If you are then you must read the following before you continue coding.

Normally, you should prefer literals and primitives and avoid built-in constructors.

Why prefer literals and primitives?

1. Literals are shorter and easy to read and write.

let o = new Object();let o = {}; // easier and actual representation

2. Literals can still benefit from properties and methods that are provided by the objects created from constructors.

let a = [1, 2, 3];
a.length // 3
a.slice(2) // [3]

3. When you invoke a method on primitives, it is implicitly converted to a temporary object behind the scene.

let a = "Hello world";
a.toLowerCase() // hello world
a.length // 11

Why avoid built-in constructors?

1. new Object(), when used with dynamic arguments can lead to unexpected results, which can create confusion.

let n = new Object(1) // Number {1}
typeof n // "object"
n.constructor === Number // true
let b = new Object(true) // Boolean {true}
typeof b // "boolean"
b.constructor === Boolean // true

2. new Array() gives different results with different numbers of arguments.

let a = new Array(3) // [undefined, undefined, undefined]
a.length // 3
let a = new Array(1, 2, 3) // [1, 2, 3]
a.length // 3
let a = new Array(3.14) // Uncaught RangeError

3. new RegExp(), escaping characters like backslash and quotes are boring and reduces readability.

let reg = /\\/g; // /\\/g
let reg = new RegExp("\\\\", "g") // /\\/g

4. In JavaScript, you can call built-in constructor functions like Array, String, etc. without using a “new” operator, which might sometimes make you forget to call custom constructor functions with a “new” operator that uses “this”.

function Person(name) {
this.name = name;
}
let p = Person("Kelina");
p.name // undefined

Of course, preceding statements are not bugs nor reduces any performance but might lead to unexpected results and hence introduce bugs if you are not careful. You can still either use constructors or literals, it really depends upon your preference and necessity.

Summary

Literals and primitives   |  Built-in constructorslet o = {};               |  let o = new Object();let a = [];               |  let a = new Array();let s = “”;               |  let s = new String();let n = 0;                |  let n = new Number();let b = false;            |  let b = new Boolean();let reg = /[a-z]/g;       |  let reg = new RegExp( "[a-z]", "g" );throw {                   |  throw new Error(“oops... error”);
name: “Error”,
message: “oops... error”
};
throw Error(“oops... error”);

While each approach has its own benefit, generally, using literals is enough for most of the cases. As always, thanks for reading.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store