# ES6 understanding problem

**URL:** <https://forum.freecodecamp.org/t/es6-understanding-problem/443232>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [January 29, 2021, 3:33am UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232 "2021-01-29T03:33:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![GreccoOliva-Franco](https://avatars.discourse-cdn.com/v4/letter/g/c5a1d2/32.png) [@GreccoOliva-Franco](https://forum.freecodecamp.org/u/GreccoOliva-Franco)\
**Post date:** [January 29, 2021, 3:33am UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/1 "2021-01-29T03:33:49Z")

</div>

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:

* * *

```auto
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!

---

<div class="post-metadata">

**Author:** ![SixStringsCoder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sixstringscoder/32/131440_2.png) [@SixStringsCoder](https://forum.freecodecamp.org/u/SixStringsCoder)\
**Post date:** [January 29, 2021, 5:08am UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/2 "2021-01-29T05:08:39Z")

</div>

`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:

```auto
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:

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

```

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

When I do this:

```auto
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”

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 29, 2021, 7:34am UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/3 "2021-01-29T07:34:15Z")

</div>

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.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](http://www.freecodecamp.com/forum/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [January 29, 2021, 10:54am UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/4 "2021-01-29T10:54:58Z")

</div>

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

```auto
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):

```auto
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:

```auto
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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![GreccoOliva-Franco](https://avatars.discourse-cdn.com/v4/letter/g/c5a1d2/32.png) [@GreccoOliva-Franco](https://forum.freecodecamp.org/u/GreccoOliva-Franco)\
**Post date:** [January 29, 2021, 8:20pm UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/5 "2021-01-29T20:20:47Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![GreccoOliva-Franco](https://avatars.discourse-cdn.com/v4/letter/g/c5a1d2/32.png) [@GreccoOliva-Franco](https://forum.freecodecamp.org/u/GreccoOliva-Franco)\
**Post date:** [January 29, 2021, 8:25pm UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/6 "2021-01-29T20:25:22Z")

</div>

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:

```auto
// Thank you for your help!

```

---

<div class="post-metadata">

**Author:** ![SixStringsCoder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sixstringscoder/32/131440_2.png) [@SixStringsCoder](https://forum.freecodecamp.org/u/SixStringsCoder)\
**Post date:** [January 31, 2021, 12:00am UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/7 "2021-01-31T00:00:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [August 1, 2021, 12:00pm UTC](https://forum.freecodecamp.org/t/es6-understanding-problem/443232/8 "2021-08-01T12:00:37Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.