# Reduce Method and From method - confusion

**URL:** <https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474>\
**Category:** General\
**Created:** [December 4, 2019, 1:08am UTC](https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474 "2019-12-04T01:08:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![silvercut](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@silvercut](https://forum.freecodecamp.org/u/silvercut)\
**Post date:** [December 4, 2019, 1:08am UTC](https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474/1 "2019-12-04T01:08:46Z")

</div>

Hi there,

I am following a react course (CS50M) [https://github.com/SilvercutYaz/cs50M](https://github.com/SilvercutYaz/cs50M)

I am having problem understanding some JS code:

1. What is the addkeys doing? it takes in a val and key and then returns the key? and a spread operator? im not entirely sure what’s happening here. ( **Contacts.js** )

```auto

// add keys to based on index
const addKeys = (val, key) => ({key, ...val})

// create an array of length NUM_CONTACTS and add keys
export default Array.from({length: NUM_CONTACTS}, createContact).map(addKeys)

```

1. there is an reduce and from method below that i dont really understand ( **SectionListContacts.js**

```auto
const SectionListContacts = props => {
  const contactsByLetter = props.contacts.reduce((obj, contact) => {
    const firstLetter = contact.name[0].toUpperCase()
    return {
      ...obj,
      [firstLetter]: [...(obj[firstLetter] || []), contact],
    }
  }, {})

  const sections = Object.keys(contactsByLetter).sort().map(letter => ({
    data: contactsByLetter[letter],
    title: letter,
  }))

```

i would appreciate your help if i could understand this. thanks

---

<div class="post-metadata">

**Author:** ![silvercut](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@silvercut](https://forum.freecodecamp.org/u/silvercut)\
**Post date:** [December 4, 2019, 7:19am UTC](https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474/3 "2019-12-04T07:19:11Z")

</div>

fantastic explanation for addkeys thanks. why must val be the first argument that is passed in? 3) i changed the arguments around and it produces a different result. So i am not 100% sure why that is.

1. 

```auto
// add keys to based on index
const addKeys = (val, key) => ({key:key, ...val})

// create an array of length NUM_CONTACTS and add keys
const generate = () => Array.from({length: NUM_CONTACTS}, createContact)

0: {name: "Lincoln Davies", phone: "825-442-5845"}
1: {name: "Andrew Mitchell", phone: "881-424-6703"}

```

1. 

```auto
// add keys to based on index
const addKeys = (val, key) => ({key:key, ...val})

// create an array of length NUM_CONTACTS and add keys
const generate = () => Array.from({length: NUM_CONTACTS}, createContact).map(addKeys)

0: {key: 0, name: "Scarlett King", phone: "309-869-1290"}
1: {key: 1, name: "Scarlett Scott", phone: "843-747-7404"}

```

1. 

```auto
// add keys to based on index
const addKeys = (key, val) => ({key:key, ...val})

// create an array of length NUM_CONTACTS and add keys
const generate = () => Array.from({length: NUM_CONTACTS}, createContact).map(addKeys)

0:
key: {name: "Stella Murphy", phone: "603-639-3162"}
__proto__ : Object
1:
key: {name: "Alexander Young", phone: "818-135-7262"}
__proto__ : Object

```

Also just confirming the spread operator below for future reference. Indeed the same:

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/5/c/5ca7339fa1d25b747e1ebc5bd489a94237c13186.jpeg)

---

<div class="post-metadata">

**Author:** ![silvercut](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@silvercut](https://forum.freecodecamp.org/u/silvercut)\
**Post date:** [December 4, 2019, 9:15am UTC](https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474/5 "2019-12-04T09:15:45Z")

</div>

> [@camperextraordinaire](#):
>
> What specifically do you not understand about the reduce method being used in SectionListContacts?

May i explain what i think is happening and see if i’m wrong?

1. obj is a list/section that displays on the screen (not the full contacts array; technically obj will display the section of arrays only) with key value pairs

2. contact is one contact with key value pairs

3. the reduce function firstly:  
a) sets a function that capitalises the first letter of the string of “name”  
b) returns a new object with i) the old object key value pairs and ii) appends a new key value pair such that name: Amanda should return key A: value [all objects cloned but with contact.name uppercased]

iii) i think the “contact” refers to the object that is being mutated? i.e., […obj[firstletter]] is applied to contact. yes?

Your response is hugely appreciated.

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/0/d/0d064d4b3974e7fd87e264677a5fd148bd7ba0d5.jpeg)

```auto
const SectionListContacts = props => {
  const contactsByLetter = props.contacts.reduce((obj, contact) => {
    const firstLetter = contact.name[0].toUpperCase()
    return {
      ...obj,
      [firstLetter]: [...(obj[firstLetter] || []), contact],
    }
  }, {})

```

---

<div class="post-metadata">

**Author:** ![silvercut](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@silvercut](https://forum.freecodecamp.org/u/silvercut)\
**Post date:** [December 4, 2019, 9:25am UTC](https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474/6 "2019-12-04T09:25:38Z")

</div>

I will look at the challenge. thanks 🙂

_array_ .map( _function(currentValue, index, arr), thisValue_ )

| currentValue | Required. The value of the current element |
| --- | --- |
| index | Optional. The array index of the current element |

---

<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 16, 2021, 11:31am UTC](https://forum.freecodecamp.org/t/reduce-method-and-from-method-confusion/330474/7 "2021-01-16T11:31:20Z")

</div>

Closed on January 16, 2021, 11:31am UTC