Skip to main content

The Limits of ES6 Destructured Assignment

This is a cross post from my employer blog and I didn't bother to convert the markdown over to something that would work in Blogger. Official link is here.

In working with a React component today, I wanted to copy some, but not all, properties from props to state. My immediate thought was that there is certainly a way to do this with ES6 destructuring assignment. After failing to find any relevant examples online, I eventually found my way to [this SO answer][so] which concludes that it can’t be done with the current spec.

Still wanting something a bit less redundant than stating the object names for every assignment, I eventually thought up a partial “solution”. Use destructured assignment to initialize the required properties as local variables. Then again to set the properties of an object literal.

```
let props = {x:1, y:1, z:2, j:4};
let state;

{
 const {x, y, z} = props;
 state = {x, y, z};
 console.log(x);
}

console.log(state);
console.log(x);
```

Results:

```
1
{"x":1,"y":1,"z":2}
x is not defined
```

There are a few things I don’t like about this so I’m not sure if I’ll continue to use it. For one, you end up polluting your local namespace. Hence me wrapping the assignment in it’s own code block. This makes the local destructured variables unavailable throughout the rest of the function. It sort of solves that issue, but you still end up with a new code block and indenting. Also, I have a feeling it may not be very clear to other programmers what’s going on here.

[so]: http://stackoverflow.com/a/29621542/119909

Comments

Popular posts from this blog

IE Caches a Lot

Cross post from my employer's development blog: http://rootinc.github.io/2016/03/09/ie-caches/

In developing a page, I decided to do things a bit differently on the server. By doing an explicit check on the HTTP request headers, I can detect server-side if a request to the server is coming via XHR (Ajax) or a standard page load. I can then serve different content based on the request type. So, I can use the same URL for retrieving the initial HTML page and the raw JSON data associated with that page. Express makes this pretty easy:
if (req.xhr){      return res.json(await this.usersData());    }    else {      return res.view('users', await this.usersData());    }
I’m not sure if it’s technically more RESTful than having separate URL routes for data and HTML, but it felt like it made sense. The URL is referring to the same data, and based on a header, I want to determine how it is represented, but the data doesn’t change so why should the URL? This also makes it possible to d…

Quick Deepstream.io Setup Using JSPM

Cross post from my employer's development blog: http://rootinc.github.io/2016/02/12/deepstream-jspm/
Want to use JSPM rather than Bower for running the Deepstream.io example? Follow these steps. This is basically a duplicate of the [Getting Started tutorial][tutorial] on the [Deepstream.io website][website] but using a really simple JSPM setup. This is a very crude guide where I list everything I had to do to get things running.

Create an empty project folder npm install deepstream.io Copy server code verbatim from the Getting Started guide jspm install npm:deepstream.io-client-js Hit enter for all the prompts from JSPM

We’re going to modify the client side code a little bit. We have native support for ES6 compiling with JSPM/Babel so we can import the Deepstream client directly:

import deepstream from 'deepstream.io-client-js'; let ds = deepstream( 'localhost:6020' ).login();

let record = ds.record.getRecord( 'someUser' );

let input = document.querySelector( 'inp…

Atari E3 2004 PAL digital press kit

Making note of some old swag. The Atari E3 2004 PAL digital press kit. See video for details.