How to get first three items of a destructured array in a higher order function?

I have a users array with objects. My goal is to use a higher order function to show the first three users. I realize this can be done with slicing the array and setting the sliced items to a variable. However, what gets confusing is when the array is destructured. If I try const items = user.slice(0, size) then I get an error saying user.slice is not a function. And if I try const items = users.slice(0, size) (not using destructuring), "[{"" is returned three times in the console. I would like to leave destructuring in so I can learn and return the first three users. So if the array was larger in future, it would only return the first three users. Understand this jsfiddle is where I started so I have been researching each step and putting in the work to understand and progress. This jsfiddle is where I currently am.

const users = JSON.stringify([{
    firstName: 'Sarah',
    lastName: 'Jenkins',
    email: '[email protected]'
  },
  {
    firstName: 'Matt',
    lastName: 'Wheeler',
    email: '[email protected]'
  },
  {
    firstName: 'Amy',
    lastName: 'Preston',
    email: '[email protected]'
  }
])

// higher order function passing placeholder
function showFirstThreeUsers(f) {
  result = f();
  for (let user of result) {
    // destructure object in higher order function
    const {
      firstName,
      ...rest
    } = user;
    const size = 3
    const items = users.slice(0, size)
    console.log(items);
  }
}
//  Parse array of objects
function grabUsers() {
  return JSON.parse(users);
}
// call higher order function passing (f)
showFirstThreeUsers(grabUsers);

Answer

The other answer covers the largest problems, but there is still considerable confusion in your code.

I’ve kept the basic structure of your snippet, but refactored it to do what you expect.

  1. Declare your input array and JSON.stingify() it.
  2. Pass grabUsers() and optional size to showFirstThreeUsers().
  3. Retrieve parsed array using passed function.
  4. Create a slice of the first size users.
  5. Iterate over this new array using a for...of loop, destructure one property of each element and log that property.

const input = [{ firstName: 'Sarah', lastName: 'Jenkins', email: '[email protected]' }, { firstName: 'Matt', lastName: 'Wheeler', email: '[email protected]' }, { firstName: 'Amy', lastName: 'Preston', email: '[email protected]' }, { firstName: 'Sam', lastName: 'Jens', email: '[email protected]' }];

const users = JSON.stringify(input) //<-- 'users' is now a string

function grabUsers() {
  return JSON.parse(users);
}

function showFirstThreeUsers(fn, size = 3) { //<-- accept a size parameter and set a default of 3
  const parsedUsers = fn(); //<-- this is now an array;

  const firstNUsers = parsedUsers.slice(0, size); //<-- create a new array of the first N elements

  for (let user of firstNUsers) {
    const { firstName } = user; //<-- only destructure what you need
    console.log(firstName);
  }
}

showFirstThreeUsers(grabUsers); //<-- default size used (3)

console.log('n');

showFirstThreeUsers(grabUsers, 4); //<-- pass a size