Destructuring Syntax in ES6

//function foo()
function foo() {
	return [1,2,3];
}
//function bar()
function bar() {
	return {
		x: 4,
		y: 5,
		z: 6
	};
}

//assign array and object's inner values to global variables
var tmp = foo(),
	a = tmp[0], b = tmp[1], c = tmp[2];

console.log( a, b, c );		    //1 2 3


var tmp = bar(),
	x = tmp.x, y = tmp.y, z = tmp.z;

console.log( x, y, z );				// 4 5 6

//same using destructuring
var[a,b,c]=foo();
var {x:x,y:y,z:z}=bar();

In the above snippet, var[a,b,c]=foo(); equals to :

var a = foo()[0];
var b = foo()[1];
var c = foo()[2];

var {x:x,y:y,z:z}=bar(); equals to:

var x = bar().x;
var y = bar().y;
var z = bar().z;

right?

Also, one of the potential purpose of doing this is to save that multi lines of code just to declare variables right?
and inside var {x:x,y:y,z:z}=bar(); the x,y,z that is left to the : are the global variables we just declared right? the ones that are on the right of : are the internal values of the object.

Am I understanding this correctly?

Thanks .

Also is this the only scenario where we can see [] or {} at the left hand side of the code?
Normally we see: var a = [1,2,3];
Now we see: var[1,2,3]=bar();

Can I assume that whenever I saw this kind of syntax it is about destructuring?
Is there anywhere else I am gonna use this kind of syntax?

@camperextraordinaire (20 character)

in the code snippet above,

var tmp = bar(),
	x = tmp.x, y = tmp.y, z = tmp.z;

console.log( x, y, z );		

x at the left hand side of = is the new variable and the right hand side one means the element inside the object , right?

sorry if this is a bit obvious, I just wanna make sure .

also in your snippet you forgot var{x,y,z} = myObj; I think.
:wink:

Also what about this?

Can I assume that whenever I saw this kind of syntax it is about destructuring?
Is there anywhere else I am gonna use this kind of syntax?

var{x:bam,y:baz,z:bap} = myObj;
console.log(x,y,z);// undefined
console.log(myObj.x); //4
console.log(myObj.y); //5
console.log(myObj.z); //6
console.log(bam,baz,bap); //4 5 6

the reason we got undefined/reference error on console.log(x,y,z) is because the engine treat these 3 as stand alone global variables right? they are not the same as those x,y,z inside the object.

It still works the same as variable assignment: you are saying

var bam = myObj.x

So x isn’t something that has been assigned: in this case, you have chosen to assign to a variable called bam instead

1 Like

I see. Thanks! (20 characters)

back to the FCC quest, how come it shows me I did not use destructuring assignment?

const AVG_TEMPERATURES = {
  today: 77.5,
  tomorrow: 79
};

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const {tomorrow:tempOfTomorrow} = AVG_TEMPERATURES; // change this line
  // change code above this line
  return tempOfTomorrow;
}

console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79

@camperextraordinaire @DanCouper

@zhouxiang19910319 Maybe it will work if you use avgTemperatures instead of AVG_TEMPERATURES inside the function:

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const {tomorrow:tempOfTomorrow} = AVG_TEMPERATURES; // change this line
  // change code above this line
  return tempOfTomorrow;
}

whatever on the right hand side of = should be the constant we draw data from isn’t it?
so in this case it has to be AVG_TEMPERATURES because it has the today and tomorrow elements in it isnt it?

Hey @zhouxiang19910319,

You are creating your function in manner that it will work only on AVG_TEMPERATURES object.
But, what if there was another object like :

const AVG_TEMPERATURES1 = {
  today: 75.5,
  tomorrow: 80
};

?
You will have to write function for that too.
So, you should use the argument passed in your function instead of actual object name and your function will be applicable for every object.
Does this help?

1 Like

ahhh I see.

Thanks for the help! This little issue had been bugging me for a few days!
Now I need to move forward!

Thanks!

1 Like