ES6 understanding problem

[GreccoOliva-Franco]

Hi, I’m new to JS and I’m learning this new feature called “destructuring an object into an arrow function” but I’ve a problem understanding this code:

---

const someObject = {
prop1: val1,
prop2: val2,
prop3: val3
}

const anotherObject = {
prop1: val11,
prop2: val22}

const someArrowFunction = ({prop1, prop2})  => 0.5 * (prop1 + prop2);

---

The question is: how do I know which of the keys are being destructured as arguments (how could I debug it?) ?

Thank you for you time!

[SixStringsCoder]

const someArrowFunction = ({prop1, prop2}) => 0.5 * (prop1 + prop2);

When you destructure you use the exact names of the keys in the object. So the destructured function parameter of prop1 and prop2 will use the values of prop1 and prop2 of the objects someObject and anotherObject.

Just try and create a third object like this:

const anotherObject2 = {
  prop4: 4,
  prop5: 2
}

Then call someArrowFunction(anotherObject2) in the console. It returns undefined. So prop4 and prop5 don’t work because they don’t exactly match the destructured function parameters of prop1 and prop2.

When I did this:

const someObject = {
  prop1: 5,
  prop2: 3,
  prop3: 1
}

someArrowFunction(someObject). It returns 4 which is correct.

When I do this:

const anotherObject = {
  prop1: 4,
  prop2: 2
}

then call someArrowFunction(anotherObject) it returns 3 which is correct.

Both of those work because their key names (prop1 and prop2) match exactly what the function parameters ask for: {prop1, prop2}. Because they’re wrapped in { } in the function, it’s like saying “This parameter should be an object with keys named prop1 and prop2”

[ilenia]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[DanCouper]

This is the longhand for creating an object and assigning values to keys (you’re never going to use this, but as comparison):

const someObject = new Object();
someObject.prop1 = "val1";
someObject.prop = "val2";
someObject.prop3 = "val3";

This is the shorthand, the object literal syntax (you’re always going to use this):

const someObject = {
  prop1: "val1",
  prop2: "val2",
  prop3: "val3",
};

This is the longhand for accessing properties on an object and assigning them to variables for using somewhere in your code:

const prop1 = myObject.prop1;
const prop2 = myObject.prop2;
const prop3 = myObject.prop3;

This is the shorthand for accessing properties on an object, assigning them to variables for use somewhere in your code:

const { prop1, prop2, prop3 } = myObject;

It is called pattern matching. Look at what it looks like – it’s the same as the object literal syntax:

const { prop1, prop2, prop3 } = { prop1: "val1", prop2: "val2", prop3: "val3" };

= means assign the value on the right-hand side to the variable name on the left-hand side. This is doing that, but it’s also saying “match this shape object”. You know which keys because you’re literally writing the keys you want to match: if you write something different that isn’t a key on the object then it isn’t going to match.

[GreccoOliva-Franco]

Thank you.

After reading your reply I noticed that I never coded the function call, just the function declaration and that’s why I couldn’t debug the code.

Thanks again!

[GreccoOliva-Franco]

It’s my first time writing in a forum of programmers, I apologize for it. From now on, I will write it the standard way:

// Thank you for your help!

[SixStringsCoder]

Yes. Just give real values and see if it works. I usually do that in CodePen or in the console. CodePen is good because you can save your examples.