Destructuring Syntax in ES6

Destructuring Syntax in ES6
0

#1
//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 .


#2

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?


#3

@RandellDawson (20 character)


#4

Sorry for the late response. I have been busy on the forum today.

Yes, this is correct

Yes, you are correct.

No, the ones of the left are the internal values of the objects’s properties and the ones on the right are the new variable names. Think about it in the following manner:

var {actualPropertyName: newVariableName} = objectName;

FYI - If you want the new variable’s name to be the same as the object property’s name, you can write:

var myObj = {
  x: 4,
  y: 5,
  z: 6
};
var {x, y, z};
console.log(x, y, z); // displays 1, 2, 3

#5

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?


#6
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.


#7

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


#8

I see. Thanks! (20 characters)


#9

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

@RandellDawson @DanCouper


#10

@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;
}

#11

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?


#12

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?


#13

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!