Javascript Destructuring Sucks

Destructuring assignment in Javascript is a way to unpack arrays values or object properties into variables. The way this is done is fairly straightforward.

const user = {
	id: 5,
	name: 'John Doe',
	age: 29,
};

const { name, age } = user;

const values = [10, 20]
const [a, b] = values;

As arrays usually contain lists of data, we often don’t unpack elements individually and instead use methods like filter and find to get the elements we’re after. Therefore, it is far more commmon to deconstruct objects.

Whilst this ES6 feature can be useful, I find it to be counterproductive for the most part!

Destructuring Increases Typing

One of the core arguments for destructuring is that it allows for less typing. But, does it?

// 107 characters
function fullName1(user) {
	return `${user.title} ${user.firstName} ${user.middleName} ${user.lastName}`;
}

// 125 characters
function fullName2({ firstName, lastName, middleName, title }) {
	return `${title} ${firstName} ${middleName} ${lastName}`;
}

Not particularly! Of course each use case is different, but more often than not it actually creates more typing. Furthermore, if you are using type annotations in your Javascript using something like Typescript or Flow, you end up writing the property 3 times with just a single use.

interface User {
	firstName: string;
	middleName: string;
	lastName: string;
	title: string;
}

function fullName({ firstName, middleName, lastName, title }: User) {
	return `${title} ${firstName} ${middleName} ${lastName}`;
}

Destructuring Increases Name Conflicts

Entity names are less likely to clash than their properties.

function renderProductPage(product, page) {
	const { description, title } = product;
	const { title } = page;
	// SyntaxError: Identifier 'title' has already been declared
}

Destructuring Makes Us Jump Around More

Without namespaces, we often have to jump around a file to find the references. For function signatures or variables this can sometimes be annoying, but file imports result in jumping across the file to either see what the reference is, or to assign a new variable by deconstructing a library import.

It must be noted that sometimes this is beneficial to reduce bundle size.

Destructuring Makes Logging Cumbersome

Sometimes I just want to log the object arguments of a function to see what values I’m working with.

function doSomethingWithUser(user) {
	console.log(user);
	...
}

function doSomethingWithUser({ firstName, lastName }) {
	console.log(firstName);
	console.log(lastName);
	// What about other properties?
	...
}

As you can see, with destructuring we cannot quickly log the whole user here. Instead we would need to assign a new variable to capture any other properties by using the spread operator, whilst continuing to log the other properties seperately. How painful:

function doSomethingWithUser({ firstName, lastName, ...rest }) {
	console.log(firstName);
	console.log(lastName);
	console.log(rest);
	...
}

Nested Destructuring Is A Thing

Language features are supposed to help people write clearer code. This is not clear.

const { y, y: { z: { b } } } = x;