Front-end Logo

Front-end video tutorials from Toptal software engineers

A series of Front-end video tutorials and other educational posts to help you rapidly develop and perfect your Front-end skills.

In this demonstration, we will use max() and min() functions to extract the maximum and minimum values from collection of values and objects.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we are going to take a look at the max() and min() functions provided by the underscoreJS code library. In order to make use of these functions we actually have to include the UnderscoreJS code library in our webpage, now I’ve done this by referencing it from a popular CDN but you can also download it to your local website and reference it from your local server as well.

Now basically the max() and min() functions basically allow us to find the maximum or minimum value of something within an array or a collection, we can use it with simple values or we can actually use it with objects. So to get started here, I’m going to do console dot log and I’m going to call underscore dot max and I’m going to pass into it in array.

So in our array we’re going to have one, two, three and four. Now in this run, they should find a maximum value which in this case will be the number four, so I’m going to reload our web page here, we’re going to see that four as I’ll put it to the console. So now let’s take…

In this demonstration, we will use sortBy() function to sort a collection of values and objects.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we’re going to take a look at the sortBy() function provided by the Underscore JS code library. Now to make use of underscore you have to be sure to include a reference to it in your webpage as you can see here I have a reference to it from a popular CDN, you can also download it to the local development copy of your website and reference it from your local development server as well.

OK, so to get started here the sortBy() function basically allows us to pass in a collection of items, now it could be a simple array of values, or it could be a collection of objects, basically we can take that collection and sort it based upon some value in the collection. Now to get started with this, we are going to come down here and we are going to type in some code and do console dot log. I’m going to do underscore dot sortBy and then I’m going to pass in an array of numbers to kind of demonstrate how this works.

I can do four, two, six, one, three, eight, nine and we will do seven. So now…

In this demonstration, we will use groupBy() function to group a collection of objects by a selected property.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the group by function provided by the UnderscoreJS code library. Now, in order to make use of Underscore, you have to first reference it from your webpage as I’ve done here. I’m referencing it from a popular CVN, but you can also download it to your local development environment and reference it from your local web server as well.

Now, the group by function in Underscore basically allows us to take a collection of data, and take one of the properties or fields of that data, and group the various item in the collection by the values for that particular property or field. So what we want to do is, we are going to take this list of people that we have here, and we want to set this up so that somebody can click on the age, city, or gender headers, and basically group this data by those values.

So for example, if I clicked on city, I should be able to group the data by city. So, I would have the two people who live in Atlanta would be right next to each other, the two people…

In this demonstration, we will generate an index for an array of objects.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we’re going to take a look at the index By() function provided by the UnderscoreJS code library. Now to make use underscore you first have to reference it on our webpage as I’ve done here. I’ve referenced it form a popular CDN, but you can also download it to your local development environment and reference it from your local server as well.

So basically, we’ll index By() allows us to do is to take a collection of data and extract from it an index value, and then basically produce a new collection of data where we have that index value as a key and then we have the rest of the data as the object associated with that particular key. Now what we’ve done here is we have a webpage that has some tabular data in it.

What we want to do is we want to extract this tabular data and then we’re going to use it to produce a collection of JavaScript objects and then we’re going to use the ID that we have listed here to actually be the key or the index of the data that we extract from this table. So if…

In this demonstration, we will use sample() and size() functions to take a sample of items from a collection and to calculate the number of properties on an object.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the sample() and size() functions provided by the UnderscoreJS code library. Now to make use of the UnderscoreJS code library you first have to include a reference to it inside of your webpage. As you can see here I’ve referenced it from a popular CDN, but you could also download a local copy to your development server and reference it from there as well.

Alright, so we’re going to create an array of numbers here, there we go one through nine, now we’re going to take a look at the sample function say var result underscore dot sample then I’m going to specify my array, and then I’m going to specify the number of numbers that I would like from my sample or the number of items.

In this case I’ll say three, and I’ll say console dot log result just like that then I’m going to reload my page, you’ll notice I get the numbers three, eight and two. So what is sample two? It basically goes into your array and it randomly picks the number of items that you ask for. So in this case I got…

In this demonstration, we will use toArray() function to convert an object’s property values into an array of values.

Source code used in this demonstration can be found at Github.

Video transcript

In this core demonstration we’re going to take a look at the two array function provided by the UnderscoreJS code library. Now to make use of this function we have to make sure we include a reference to underscore in our webpage as you can see here I’m including a reference from a popular CDN, but you can also download UnderscoreJS to your local development environment and reference it from your own development server.

Now basically what two array does is it allows us to pass in an object and it will convert it into an array, so let’s take a look at how this works. I create a function here called MyFunk, and MyFunk is going to be called down here with a number of arguments. Just say one, two, three, four, five, six now in JavaScript there is a special object called arguments and so JavaScript named function parameters while they’re definitely a good practice.

They’re actually optional. You can actually set it up so that you can reference those arguments through the argument object instead of through parameter names. This is especially useful if you have a function where you do not quite sure what the number…

In this demonstration, we will use countBy() function to count the number of items per group in a collection of objects.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the countby() function provided by the UnderscoreJS code library. Now to make use of the UnderscoreJS code library, you first have to include it in your web page like I have done here. I’m including it from a popular CDN, but you can also download a local copy of it to your web server and reference it that way as well.

Now, what countBy() basically does? It’s very similar to a group by operation, where basically you’re looking for rws of data or objects of data, that have the same value for a particular property, and then basically grouping them by that value. Well, in countBy(), instead of actually displaying all of the details for each row, we’re basically doing a count. So, for example, if I’ve got five rows and one of the properties for each row is color, and I have five rows with the same color, then my countBy() would be five because I’d have five with that same color.

So what we’re going to do here is, we’re going to basically use countBy() to basically analyze some information that we’re going to extract from a…

In this demonstration, we will use partition() function to apply a predicate that will split an array.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the partition() function provided by the UnderscoreJS code library. Now to make use of this library, we have to make sure that we include it in our webpage. As you can see here, I’m including it from a popular CDN, but you can also download a copy to your local development server and reference it from there as well.

Now the partition() function is kind of interesting. Let’s take an array of numbers like this, one, two, three, four, five, six, seven, eight, nine, create a result variable here. Now, the partition() function, it will take our numbers array here, and it will allow us to basically iterate over this array, taking each value and passing it into a predicate function.

Now a predicate function is a function that basically either returns true, or returns false. And what this is going to do is, based upon the results, true or false, it’s going to create two arrays. So, for example, let’s say I wanted to divide this array based upon all numbers greater than four being one array and all numbers that were four or less being in a…

In this demonstration, we will explore the each() function’s ability to iterate over arrays, object properties, and the NodeList of a DOM element.

Video transcript

In this code demonstration, we’re going to take a look at the each() function provided by the underscoreJS code library. In order to access this function, you first have to include the underscore.js file in your webpage. You can do so by referencing it via a CDN like I’ve done here, or you can actually download the web, you can actually download the JavaScript file into your web project and then reference it that way.

So if you come down here, basically, the each() function, the purpose of it is to iterate over the collection of items. Now that collection could be an array, it could be properties on a JavaScript object or it could be some type of other collection type of data type like getting a node list on a DOM element.

So let’s go ahead and get started here with a simple array, we’re going to do an array of colors. We’ll do red, blue, yellow and white. Then we’ll come down here and we will do _.each, and then we’ll pass in our array colors, and then we’re going to have a function. Now this function is going to basically have three different parameters get passed…

In this demonstration, we will use the map() function to transform a number of different collections.

Video transcript

In this code demonstration, we’re going to take a look at the map() function provided by the underscoreJS code library. To make use of underscore, you either have to include it with a reference to a CDN URL like I have here, or you can actually download underscore,js and make use it for your own folder within your website.

So basically what the map() function does, is it allows us to iterate over a collection, and then take each item in that collection and do some type of transformation on it, and then return back a transformed item. Maybe just a particular property of an object, or maybe the result of some type of mathematical calculation, but all of those return values for each item then get populated into a new array.

So the map() function is really useful for transforming collections of data. So let’s take a look at how we can do that. So we’re going to come in here and we’re going to create a new array of colors. This array will have red, blue, green and black. So now to call the map() function, we have to do _.map, and the first parameter we pass in…

The top Front-end freelance developers

Small img 20130507 121812
Juraj Gemic, CroatiaA talented freelance software developer with over 10 years of experience, Juraj has spent most of his career working in Java, PHP, JavaScript and .NET. Lately, he's focused primarily on JavaScript development and has worked on some exciting projects using the AngularJS framework. [click to continue...]
Small med edited 2
Brian W. McAllister, United StatesBrian is a freelance designer and developer based in NYC. He is an expert web developer and has extensive experience with CoffeeScript, CSS, JavaScript, and more. [click to continue...]
Small c
Tiago Silva, PortugalTiago left his position at Microsoft to co-found Hive. From then on, building up Hive has led him through working on projects in every kind of language and environment, performing every skill imaginable from sales, to project management and hardcore development. For him, programming is an art form, and he gets a kick out of making his code as elegant as possible. [click to continue...]
Small ericwgreene
Eric W. Greene, United StatesEric loves to write code in a high-paced and challenging environment with an emphasis on using best practices to develop high quality software that meets project requirements, budget, and schedule. He enjoys learning new technologies and sharing findings with his colleagues. [click to continue...]
Small tomislav03
Tomislav Krnic, CroatiaTomislav is a freelance web developer and designer with over 10 years of experience working independently and as a project leader. He has built CMS's from start to finish, including developing a project plan, creating the UI/UX, and programming the front and back-end. Portfolio: http://tomislav.krnic.info/v-2 [click to continue...]

Front-end blog posts

Never miss new Front-end videos

Thank you for subscribing

You can edit your subscription preferences here.