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 (
   <div>
     <h1>Step {step} - Name</h1>
     <Button onClick={onClickNext}>Next</Button>
   </div>
  );
 }

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

 

Raspberry Pi in box

Raspberry Pi – My introduction to hardware

Raspberry Pi in boxI just got a Raspberry Pi 2. I don’t really know what to do with it yet!  Its a itty-bitty linux box.   I’m used to writing code but hardware is a whole unknown world to me.  This is my dive into the world of the Internet of Things, robots, drones, smart devices, and electronic dyi gadgetry in general.

Join me as I learn and twiddle.

Continue reading Raspberry Pi – My introduction to hardware