Freecodecamp Generate An Array With Object.keys

by Alex Permyakov

GitHub Gist: star and fork sedera-tax's gists by creating an account on GitHub. Internally, array is a kind of data structure that can store a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type. Array consists.

When you read about Array.reduce and how cool it is, the first and sometimes the only example you find is the sum of numbers. This is not our definition of ‘useful’. ?

Freecodecamp Generate An Array With Object.keys Keyboard

Moreover, I’ve never seen it in a real codebase. But, what I’ve seen a lot is 7–8 line for-loop statements for solving a regular task where Array.reduce could do it in one line.

Recently I rewrote a few modules using these great functions. It surprised me how simplified the codebase became. So, below is a list of goodies.

  • Mar 24, 2017 Iterating through arrays in javascript can be done with for loops. Create a counter (i) that will go through the indexes of the array as long as it(i) is less than the length of the array.
  • Title: Generate an Array of All Object Keys with Object.keys Description: We can also generate an array which contains all the keys stored in an object using the Object.keys method and passing in an object as the argument. This will return an array with strings representing each property in the object.
  • The object whose enumerable own properties are to be returned. MDN link MSDN link. Object.keys returns an array whose elements are strings corresponding to the enumerable properties found directly upon object. The ordering of the properties is the same as that given by looping over the properties of the object manually.
  • Object.keys(obj) Parameters. The object whose enumerable own properties are to be returned. MDN link MSDN link. Object.keys returns an array whose elements are strings corresponding to the enumerable properties found directly upon object. The ordering of the properties is the same as that given by looping over the.

If you have a good example of using a map or reduce method — post it in the comments section. ?

Let’s get started!

1. Remove duplicates from an array of numbers/strings

Freecodecamp generate an array with object.keys letters

Well, this is the only one not about map/reduce/filter, but it’s so compact that it was hard not to put it in the list. Plus we’ll use it in a few examples too.

2. A simple search (case-sensitive)

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

3. A simple search (case-insensitive)

4. Check if any of the users have admin rights

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

5. Flattening an array of arrays

The result of the first iteration is equal to : […[], …[1, 2, 3]] means it transforms to [1, 2, 3] — this value we provide as an ‘acc’ on the second iteration and so on.

We can slightly improve this code by omitting an empty array[]as the second argument for reduce(). Then the first value of the nested will be used as the initial acc value. Thanks to Vladimir Efanov.

Note that using the spread operator inside a reduce is not great for performance. This example is a case when measuring performance makes sense for your use-case. ☝️

Thanks to Paweł Wolak, here is a shorter way without Array.reduce:

Also Array.flat is coming, but it’s still an experimental feature.

6. Create an object that contains the frequency of the specified key

Let’s group and count the ‘age’ property for each item in the array:

Thanks to sai krishna for suggesting this one!

7. Indexing an array of objects (lookup table)

Instead of processing the whole array for finding a user by id, we can construct an object where the user’s id represents a key (with constant searching time).

It’s useful when you have to access your data by id like uTable[85].name a lot.

8. Extract the unique values for the given key of each item in the array

Freecodecamp Generate An Array With Object.keys

Let’s create a list of existing users’ groups. The map() method creates a new array with the results of calling a provided function on every element in the calling array.

9. Object key-value map reversal

This one-liner looks quite tricky. We use the comma operator here, and it means we return the last value in parenthesis — acc. Let’s rewrite this example in a more production-ready and performant way:

Here we don’t use spread operator — it creates a new array on each reduce() call, which leads to a big performance penalty: O(n²). Instead the old good push() method.

10. Create an array of Fahrenheit values from an array of Celsius values

Think of it as processing each element with a given formula ?

11. Encode an object into a query string

12. Print a table of users as a readable string only with specified keys

Sometimes you want to print your array of objects with selected keys as a string, but you realize that JSON.stringify is not that great ?

JSON.stringify can make the string output more readable, but not as a table:

13. Find and replace a key-value pair in an array of objects

Let’s say we want to change John’s age. If you know the index, you can write this line: users[1].age = 29. However, let’s take a look at another way of doing it:

Here instead of changing the single item in our array, we create a new one with only one element different. Now we can compare our arrays just by reference like updatedUsers users which is super quick! React.js uses this approach to speed up the reconciliation process. Here is an explanation.

14. Union (A ∪ B) of arrays

Less code than importing and calling the lodash method union.

Freecodecamp Generate An Array With Object.keys Line

15. Intersection (A ∩ B) of arrays

The last one!

As an exercise try to implement difference (A B) of the arrays. Hint: use an exclamation mark.

Thanks to Asmor and incarnatethegreat for their comments about #9.

That’s it!

If you have any questions or feedback, let me know in the comments down below or ping me on Twitter.

If this was useful, please click the clap ? button down below a few times to show your support! ⬇⬇ ??

Here are more articles I’ve written:

Production ready Node.js REST APIs Setup using TypeScript, PostgreSQL and Redis.
A month ago I was given a task to build a simple Search API. All It had to do is to grab some data from 3rd party…

Thanks for reading ❤️

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments

commented Mar 1, 2018

Just going through the beta challenges and learning in the process, I think I may have found a problem with passing Basic Data Structures: Modify an Array stored in an Object.

In my Dev Tools console I have passed, I see the the new array with 'Pete' under friends, but can't pass the challenge

First time posting a problem, so apologise if wrongly done

Freecodecamp Generate An Array With Object.keys

Freecodecamp Generate An Array With Object.keys Paper

closed this Mar 1, 2018

commented Jun 14, 2018

You're not suppose to return the entire user object :
// change code below this line
userObj.data.friends.push(friend);
return userObj.data.friends;
// change code above this line

Freecodecamp Generate An Array With Object.keys Letters

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment