Destructuring in ES6

Learn JSDestructuring is a very useful newer feature of javascript.  I’ve been using it for more than a year but I never sat down and looked at its details.  How did this come up?  I got a reference to this video from one of my weekly e-newsletters;  its about ten minutes and goes quickly from a simple example of

// Destructuring objects, simple case

let obj={ a: 3, b: 5 };

let { a, b } = obj;   // New syntax for a=obj.a; b=obj.b;

to the headscratcher:

// Destructuring function arguments

function f( L1, L2 ) {

  // ...


f( R1, R2 );

[L1, L2] = [R1, R2]; //

I was very unclear what this last example was doing which made me realize I’d only touched the tip of the iceberg as far as this feature was concerned.  The video was over and I still didn’t understand it.  I decided to watch the next video that Youtube so kindly recommended.  Its this one by that wacky FunFunFunction guy.

He spent most of the video on what I call the simple case above, with the notable exception of showing destructuring used in a function argument declaration, with default values – a widespread pattern now among ReactJS coders:

// One parameter which is an object is passed in, and two of its properties are destructured

function ModalName({ onClickNext, step ='whatever' }) {
  return (
     <h1>Step {step} - Name</h1>
     <Button onClick={onClickNext}>Next</Button>

I also found this article which lists ES6 features frequently seen in ReactJS development.


Leave a Reply

Your email address will not be published. Required fields are marked *