const obj = {
  name: 'joe',
  age: 940,
  isStudent: false
}

buttonElement.onclick = () => {
  friends.unshift({
    name: nameInput.value,
    age: ageInput.value
  })
}

const student = {
  first: 'Harry',
  last: 'Potter',
  age: 25
}

const firstName = student['first'] // firstName has the value 'Harry'

const student2 = student
student2['name'] = 'last'
/*
student2 is the same as student, which is:
{
  name: 'last',
  first: 'Harry',
  last: 'Potter',
  age: 25
}
*/

student2[student2.name] = 'Weasley'
/*
Notice how student2.name is a variable that contains the string 'last'
Therefore, it evaluates to 
student2.last = 'Weasley'

student2 is the same as student, which is:
{
  name: 'last',
  first: 'Harry',
  last: 'Weasley',
  age: 25
}
*/

// Section 1:
/*
star is the same as star2, which is:
{
  name: 'Tarzan',
  friend: Object,
  lover: "Jane"
}
*/

// Section 2:
/*
star is the same as star2, which is:
{
  name: 'Sarah',
  friend: Object,
  lover: "Jane"
}
*/

// section 3
/*
star is the same as star2, which is:
{
  name: 'Sarah',
  friend: Object,
  lover: "Sarah"
}
*/
/*
allStars is: 
    [
        { name: 'Sarah', friend: [Circular], lover: 'Sarah'},
        { name: 'Sarah', friend: [Circular], lover: 'Sarah'}
    ]
*/

// calories -> 200
// calories -> 9
// calories -> 135

/* Problem 1: houdini is:
{
  perform: () => {
    return magician
  }
}
same is true
*/

/* Problem 2:
const prepareStage = {
  then: () => {
    return prepareStage
  }
}
*/

/* Problem 3:
const prepareStage = {
  then: (input) => {
    console.log(input)
    return prepareStage
  }
}
*/

/* Problem 4:
const prepareStage = {
  then: (input) => {
    input()
    return prepareStage
  }
}
*/

1. Tests

   describe('addKV function', () => {
     it('should add a key and value to an object', () => {
       const marvel = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       fn.addKV(marvel, 'antman', 'funny')
       expect(marvel.antman).toEqual('funny')
     })
     it('should add a key and value to an object', () => {
       const marvel = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong',
         antman: 'funny'
       }
       fn.addKV(marvel, 'wonderwoman', 'smart')
       expect(marvel.wonderwoman).toEqual('smart')
     })
     it('should add a key and value to an object', () => {
       const marvel = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong',
         antman: 'funny',
         wonderwoman: 'smart'
       }
       const b = ['leader', 'honest']
       fn.addKV(marvel, 'captainamerica', ['leader', 'honest'])
       expect(marvel.captainamerica).toEqual(b)
     })
   })
   
   

2. Shape

   const addKV = (obj, key, val) => {
     obj[key] = val
   }
   
   

3. Explanation

   • You are given an object obj, a string key and a string val.
   • Assign val to obj at a given key.

4. Code

   const addKV = (obj, key, val) => {
     obj[key] = val
   }
   
   

To check if a key exists in an object, just try to access it—if it doesn’t exist you’ll get undefined, which is falsey.

1. Tests

   describe('filterNonKeys function', () => {
     const avengers = ['ironman', 'strange', 'thor', 'spiderman', 'hulk']
     const info = {
       ironman: 'arrogant',
       spiderman: 'naive',
       hulk: 'strong'
     }
     it('should return an empty array when filtering on an empty object', () => {
       const result = fn.filterNonKeys(avengers, {})
       expect(result).toEqual([])
     })
     it('should return an empty array when starting with an empty array', () => {
       const result = fn.filterNonKeys([], info)
       expect(result).toEqual([])
     })
     it('should return an empty array if no matches are found', () => {
       const b = ['batman', 'superman', 'flash']
       const result = fn.filterNonKeys(b, info)
       expect(result).toEqual([])
     })
   })
   
   

2. Shape

   const filterNonKeys = (arr, obj) => {}
   
   

3. Explanation

   • You are given an array arr and an object obj.
   • Use array helper method filter to filter out the matching keys from the obj.

4. Code

   const filterNonKeys = (arr, obj) => {
     return arr.filter(e => {
       return obj[e]
     })
   }
   
   

1. Tests

   describe('addDescriptions function', () => {
     it('should add 3 descriptions to corresponding names', () => {
       const characters = [
         { name: 'ironman' },
         { name: 'spiderman' },
         { name: 'hulk' }
       ]
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       fn.addDescriptions(characters, info)
       expect(characters).toEqual([
         { name: 'ironman', description: 'arrogant' },
         { name: 'spiderman', description: 'naive' },
         { name: 'hulk', description: 'strong' }
       ])
     })
     it('should not add descriptions to objects without names', () => {
       const characters = [
         { tonyStark: 'ironman' },
         { peterParker: 'spiderman' },
         { name: 'hulk' }
       ]
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       fn.addDescriptions(characters, info)
       expect(characters).toEqual([
         { tonyStark: 'ironman' },
         { peterParker: 'spiderman' },
         { name: 'hulk', description: 'strong' }
       ])
     })
     it('should ignore unmatched keys', () => {
       const characters = [
         { name: 'ironman' },
         { name: 'rocket' },
         { name: 'drax' }
       ]
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       fn.addDescriptions(characters, info)
       expect(characters).toEqual([
         { name: 'ironman', description: 'arrogant' },
         { name: 'rocket' },
         { name: 'drax' }
       ])
     })
   })
   
   

2. Shape

   const addDescription = (chars, obj) => {}
   
   

3. Explanation

   • You are given an array of objects chars and an object obj.
   • Go through each element of chars and assign "description" key.
   • The value of description is the value of the obj at a given name.

4. Code

   const addDescriptions = (chars, obj) => {
     chars.forEach(e => {
       e.description = obj[e.name]
     })
     return chars
   }
   
   

1. Tests

   describe('countOccurrences function', () => {
     it('should count occurrences of strings', () => {
       const abc = ['abc', 'a', 'abc', 'b', 'abc', 'a', 'b', 'c', 'abc']
       const result = fn.countOccurrences(abc)
       expect(result).toEqual({ abc: 4, a: 2, b: 2, c: 1 })
     })
     it('should count occurrences of numbers', () => {
       const nums = [0, 3, 3, 1, 0, 0, 3, 0, 0, 2]
       const result = fn.countOccurrences(nums)
       expect(result).toEqual({ 0: 5, 3: 3, 1: 1, 2: 1 })
     })
     it('should return an empty object for an empty array', () => {
       const result = fn.countOccurrences([])
       expect(result).toEqual({})
     })
   })
   
   

2. Shape

   const count0occurences = arr => {}
   
   

3. Explanation

   • You are given an array arr.
   • Use array helper method reduce

4. Code

   const countOccurrences = arr => {
     return arr.reduce((acc, e) => {
       acc[e] = (acc[e] || 0) + 1
       return acc
     }, {})
   }
   
   

We could have also done this using forEach: initialize an empty object outside, then call arr.forEach and pass in a function that adds to the object, then return it after the forEach call. But reduce is an extremely versatile function, and can simplify this task down to one function call.

Note that we added 1 to acc[e] || 0 in case acc[e] isn't defined yet--adding 1 to undefined results in NaN.

1. Tests

   describe('longestString function', () => {
     it('should find the longest string from the beginning of an object', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       expect(fn.longestString(info)).toEqual('arrogant')
     })
     it('should find the longest string from the end of an object', () => {
       const leaders = {
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga',
         saffron: 'Sabrina'
       }
       expect(fn.longestString(leaders)).toEqual('Sabrina')
     })
     it('should return the empty string for an empty object', () => {
       expect(fn.longestString({})).toEqual('')
     })
   })
   
   

2. Shape

   const longestString = obj => {}
   
   

3. Explanation

   • You are given an object obj.
   • Use array helper method reduce to go through each string value and find the longest string in the obj.
   • Starts with an empty string.

4. Code

   const longestString = obj => {
     return Object.values(obj).reduce((str, e) => {
       if (e.length > str.length) return e
       return str
     }, '')
   }
   
   

1. Tests

   describe('keyOfLongestString function', () => {
     it('should find key of longest string in the beginning of an object', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       expect(fn.keyOfLongestString(info)).toEqual('ironman')
     })
     it('should find key of longest string at the end of an object', () => {
       const leaders = {
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga',
         saffron: 'Sabrina'
       }
       expect(fn.keyOfLongestString(leaders)).toEqual('saffron')
     })
     it('should return undefined (no key) for an empty object', () => {
       expect(fn.keyOfLongestString({})).toEqual(undefined)
     })
   })
   
   

2. Shape

   const keyOfLongestString = obj => {}
   
   

3. Explanation

   • You are given an object obj.
   • We need a local variable(let's call it allKeys) and it will store all the keys from the obj.
   • When the length of allKeys reaches 0, return undefined.
   • We need another local variable(let's call it longestKey. It finds the longest key by using array method reduce to compare the length of the values and return the key with the longest value.
     • It starts with the first element of allKeys.

4. Code

   const keyOfLongestString = obj => {
     const allKeys = Object.keys(obj)
     if (allKeys.length === 0) return undefined
     const longestKey = allKeys.reduce((lKey, key) => {
       if (obj[key].length > obj[lKey].length) {
         return key
       }
       return lKey
     }, allKeys[0])
     return longestKey
   }
   
   

1. Tests

   describe('removeLongestString function', () => {
     it('should remove the longest string in the beginning of an object', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       fn.removeLongestString(info)
       expect(info).toEqual({ spiderman: 'naive', hulk: 'strong' })
     })
     it('should remove the longest string at the end of an object', () => {
       const leaders = {
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga',
         saffron: 'Sabrina'
       }
       fn.removeLongestString(leaders)
       expect(leaders).toEqual({
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga'
       })
     })
     it('should work on an empty object', () => {
       const imEmpty = {}
       fn.removeLongestString(imEmpty)
       expect(imEmpty).toEqual({})
     })
   })
   
   

2. Shape

   const removeLongestString = obj => {}
   
   

3. Explanation

   • You are given an object obj.
   • We need an additional variable(let's call it longestKey). It stores the result of passing in the obj as an argument.
   • delete the object value when the obj is at key longestKey.

4. Code

   const removeLongestString = obj => {
     const longestKey = keyOfLongestString(obj)
     delete obj[longestKey]
   }
   
   

1. Tests

   describe('commas function', () => {
     it('should separate three items', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       expect(fn.commas(info)).toEqual('arrogant, naive, strong')
     })
     it('should put no commas if only one element', () => {
       expect(fn.commas(['funny'])).toEqual('funny')
     })
     it('should return an empty string if no elements', () => {
       expect(fn.commas([])).toEqual('')
     })
   })
   
   

2. Shape

   const commas = obj => {}
   
   

3. Explanation

   • You are given an object obj.
   • You need to get all the values of the obj. Attach reduce method to it.
   • Inside the reduce method,
     • create a local variable(let's say firstComma) which starts at empty string.
     • When index i reaches 0, firstComma equals empty string.
     • return acc + firstComma + e (In this case accumulator is result)
     • starts with an empty string

4. Code

   const commas = obj => {
     return Object.values(obj).reduce((result = '', e, i) => {
       let firstComma = ', '
       if (i === 0) {
         firstComma = ''
       }
       return result + firstComma + e
     }, '')
   }
   
   

1. Tests

   describe('headers function (part 1)', () => {
     it('should create h1s for 3 items', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       expect(fn.headers(info)).toEqual(
         '<h1>ironman</h1><h1>spiderman</h1><h1>hulk</h1>'
       )
     })
     it('should create headers for 4 elements', () => {
       const leaders = {
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga',
         saffron: 'Sabrina'
       }
       expect(fn.headers(leaders)).toEqual(
         '<h1>vermilion</h1><h1>cinnabar</h1><h1>fuchsia</h1><h1>saffron</h1>'
       )
     })
     it('should return an empty string if no elements', () => {
       expect(fn.headers([])).toEqual('')
     })
   })
   
   

2. Shape

   const headers = () => {}
   
   

3. Explanation

   • You are given an object obj.
   • Get all the keys from the obj and attach reduce method to it.
   • Inside the reduce function,
     • return accumulator + h1 tag wrapped around each element.
     • starts with an empty string

4. Code

   const headers = obj => {
     return Object.keys(obj).reduce((result, e, i) => {
       return result + '<h1>' + e + '</h1>'
     }, '')
   }
   
   

1. Tests

   describe('headers function (part 2)', () => {
     it('should create h1s for 3 items', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       // The line breaks are just for ease of reading;
       //   they won't count as part of the expected
       //   solution since they're escaped with \
       const exp =
         '<h1>ironman: arrogant</h1>\
   <h1>spiderman: naive</h1><h1>hulk: strong</h1>'
       expect(fn.headers(info)).toEqual(exp)
     })
     it('should create headers for 4 elements', () => {
       const leaders = {
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga',
         saffron: 'Sabrina'
       }
       const exp =
         '<h1>vermilion: Surge</h1>\
   <h1>cinnabar: Blaine</h1><h1>fuchsia: Koga</h1>\
   <h1>saffron: Sabrina</h1>'
       expect(fn.headers(leaders)).toEqual(exp)
     })
     it('should return an empty string if no elements', () => {
       expect(fn.headers([])).toEqual('')
     })
   })
   
   

2. Shape

   const headers = obj => {}
   
   

3. Explanation

   • You are given an object obj.
   • Get keys and values for obj using object helper method entries. Attach reduce method to it.
   • Inside the reduce function,
     • return the accumulator inside a string and wrap key and value with h1 tag.

4. Code

   const headers = obj => {
     return Object.entries(obj).reduce((result, e, i) => {
       return `${result}<h1>${e[0]}: ${e[1]}</h1>`
     }, '')
   }
   
   

1. Tests

   describe('headers function (part 3)', () => {
     it('should create h1s for 3 items', () => {
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       const exp =
         '<div><h1>ironman</h1><h2>arrogant</h2></div>\
   <div><h1>spiderman</h1><h2>naive</h2></div>\
   <div><h1>hulk</h1><h2>strong</h2></div>'
       expect(fn.headers(info)).toEqual(exp)
     })
     it('should create headers for 4 elements', () => {
       const leaders = {
         vermilion: 'Surge',
         cinnabar: 'Blaine',
         fuchsia: 'Koga',
         saffron: 'Sabrina'
       }
       const exp =
         '<div><h1>vermilion</h1><h2>Surge</h2></div>\
   <div><h1>cinnabar</h1><h2>Blaine</h2></div>\
   <div><h1>fuchsia</h1><h2>Koga</h2></div>\
   <div><h1>saffron</h1><h2>Sabrina</h2></div>'
       expect(fn.headers(leaders)).toEqual(exp)
     })
     it('should return an empty string if no elements', () => {
       expect(fn.headers([])).toEqual('')
     })
   })
   
   

2. Shape

   const headers = obj => {}
   
   

3. Explanation

   • You are given an obj.
   • Get all the keys from the obj. Attach reduce method to it.
   • Inside the reduce function,
     • return the accumulator inside a string and wrap the element with h1 tag and wrap the obj at that key with h2 tags.
     • wrap both h1 and h2 tags with div tag.
     • starts with an empty string

4. Code

   const headers = obj => {
     return Object.keys(obj).reduce((result, e, i) => {
       return `${result}<div><h1>${e}</h1><h2>${obj[e]}</h2></div>`
     }, '')
   }
   
   

1. Tests

   describe('forEach function', () => {
     it('should run a function 3 times on 3 elements', () => {
       const fun = jest.fn()
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       info.forEach(fun)
       expect(fun).toHaveBeenCalledTimes(3)
     })
     it('should run a function 0 times on an empty object', () => {
       const fun = jest.fn()
       const imEmpty = {}
       imEmpty.forEach(fun)
       expect(fun).not.toHaveBeenCalled()
     })
     it('should let functions access object values & positions', () => {
       const vals = []
       const fun = (_k, v, i) => {
         vals.push(i + v)
       }
       const info = {
         ironman: 'arrogant',
         spiderman: 'naive',
         hulk: 'strong'
       }
       info.forEach(fun)
       expect(vals).toEqual(['0arrogant', '1naive', '2strong'])
     })
   })
   
   

2. Shape

   Object.prototype.forEach = function (cb) {}
   
   

3. Explanation

   • You are given a callback function cb.
   • We need an additional variable(let's call it i) to keep track of index which starts at 0.
   • We need another additional variable(let's call it keys) to get all the keys of the object given this.
   • When i reaches the length of keys, return.
   • Call the callback function.
   • Continue

4. Code

   Object.prototype.forEach = function (cb, i = 0, keys = Object.keys(this)) {
     if (i === keys.length) return
     cb(keys[i], this[keys[i]], i, this)
     return this.forEach(cb, i + 1, keys)
   }
   
   

1. Tests

   describe('filter function', () => {
     const leaders = {
       vermilion: 'Surge',
       cinnabar: 'Blaine',
       fuchsia: 'Koga',
       saffron: 'Sabrina'
     }
     it('should filter based on keys', () => {
       const seven = k => {
         return k.length === 7
       }
       const result = leaders.filter(seven)
       expect(result).toEqual({ fuchsia: 'Koga', saffron: 'Sabrina' })
     })
     it('should filter based on keys', () => {
       const six = (_k, v) => {
         return v.length < 6
       }
       const result = leaders.filter(six)
       expect(result).toEqual({ vermilion: 'Surge', fuchsia: 'Koga' })
     })
     it('should return an empty object if no matches', () => {
       const celadon = k => {
         return k === 'Celadon'
       }
       const result = leaders.filter(celadon)
       expect(result).toEqual({})
     })
   })
   
   

2. Shape

   Object, (prototype.filter = function (cb) {})
   
   

3. Explanation

   • We are given a callback function cb.
   • We need an additional variable(let's call it result) and it starts with an empty object.
   • We need an additional variable(let's call it i) to track index and it starts at 0.
   • We need another additional variable(let's call it keys) to get all the keys of the object given this.
   • When i reaches the length of keys, return result.
   • We need a local variable(let's call it currentKey) and it starts with first index of keys.
   • We need a local variable(let's call it element) and it stores the result of calling the callback function.
   • When element is true, result at key currentKEy is equal to this at key currentKey.
   • Continue

4. Code

   Object.prototype.filter = function (
     cb,
     result = {},
     i = 0,
     keys = Object.keys(this)
   ) {
     if (i === keys.length) return result
     const currentKey = keys[i]
     const element = cb(currentKey, this[currentKey])
     if (element == true) result[currentKey] = this[currentKey]
     return this.filter(cb, result, i + 1, keys)
   }