Web Logo

Web video tutorials from Toptal software engineers

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

This video demonstrates how to use first, initial, last, and rest functions to retrieve elements of an array.

Video transcript

In this demonstration, we’re going to take a look at some of the functions that are available in the underscoreJS code library to work with JavaScript arrays. In particular, we’re going to be taking a look at the first initial, last and rest functions. So to get started here, the first thing that we need is what we have here on line seven, we have included the underscore JavaScript library, so that we can call the various methods and stuff that are available in it, you can either download the library and include it locally on your website, or you can refer to a CDN as we have done here, and it will make the library available for the webpage.

Now down here, we’re going to write some code, we’re going to go ahead and setup an array for us to work with, we’ll call the array colors, and put some colors in the array. We’ll have red, and we’ll have blue, and we’ll put yellow and white, and then we’ll have black. So we’ve got an array of five colors here, and so we’re going to take a look at these functions and we’re going to see how we…

This video demonstrates how to use compact and flatten functions to clean up the structure of an array.

Video transcript

In this code demonstration, we’re going to take a look at two very interesting functions provided by the _JS library, the compact function and the flatten function for working with arrays. Now, in order to make use of the underscore library, we have to make sure that we include it as we have up here with a script tag, you can download _JS and include it in your own web application, or you can reference it from a CDN as we have done here.

Okay. So to get started here, we actually need an array with some values in it. Now, this array is going to kind of have a variety of values and and you’ll understand why here in a second when we run the compact function. So we come in here and create a little array called items, and we’re going to give it a bunch of different values, so maybe be the number 2, maybe an empty string, maybe true, we’ll do false, we’ll give it number 0, we’ll give it a value null, add a string with some text in it, then we can do undefined, and then finally, we’ll do not a number.

So we…

This video demonstrates how to use the without, union, intersection, and difference functions to perform operations using arrays.

Video transcript

In this code demonstration, we’re going to take a look at some additional array functions that are provided by the Underscore library. In order to make use of them, you actually have to have the Underscore library included in your web page like we do here. You can either download it as just an individual file and include it in your web application or you can actually make use of it from a CDN as we are here.

So, one of the cool things about Underscore, is it provides a lot of different array a manipulation functions. We’re going to take a look at the without function, the union function, the intersection function, and the difference function today. So, coming into our example here, let’s take a look at the without method. So we’re going to create a simple little array here called colors, and we’ll put some colors in to our array, just like this, see we’ve got a bunch of colors in there.

I intentionally have the color red twice, so let’s go ahead and take a look first at the without function. So, we’re going to just do a little console. log here, and then do _without….

This video demonstrates how to extract unique values from an array.

Video transcript

In this code demonstration, we’re going to take a look at the unique function available in the UnderscoreJS library. In order to make use of this functionality, we actually have to include underscoreJS here, we can either download the file and include it in a web project or we can reference it from a CBN as we’ve done here.

Now, basically, the unique function basically takes an array and returns back a list of unique elements in a new array. So there’s a couple of different ways you can actually invoke this function, we’re going to take a look at all three of them. The first one we’re going to actually take a look at is actually passing in an array of numbers and then giving back the various unique values in that array. So if we come down here in our code.

We’ll actually just do a console. log, and then we’re going to say _. unique, you actually don’t have to put the u and the the e at the end, you can but you don’t have to. You can just call it uniq if you want to call it like that, and you can pass in the…

In this demonstration, we will look at the zip function, the object function and finally the range function.

Video transcript

In this code demonstration, we’re going to take look at some more interesting array manipulation functions provided by UnderscoreJS. Now, to make use of _, we either have to download the UnderscoreJS file into our web project and reference it from there, or as I have done here in my demonstration, we can reference it from a CDN.

Okay. So the first one I want to take a look at is zip. Now, zip is, kind of, interesting, basically it’s going to merge together the values of multiple arrays, and so the best way to kind of understand what this thing is doing, is to actually kind of see it in action. So we’re to create a new variable here called var z, and we’re going to call the _zip function.,Now, what we’re going to do, is we’re going to pass into it several different arrays, so I’m going to create one array here, we’ll give it a 1, and we’ll say John, give John a last name here and that will be our first array.

And then our second array, give it a number 2, and we’ll say, Alice, and then we will say Taylor, so we have Alice…

In this demonstration, we will explore the indexOf function, the lastIndexOf function and the sortedIndex function.

Video transcript

In this code demonstration, we’re going to take a look at three more functions that are available for working with arrays and the UnderscoreJS code library. Now to make use of this, you can either download the file and include it in your web project or you can reference it here from a CDN like this to make use of it.

Now the three functions we’re going to take a look at indexOf, lastIndexOf, and sortedIndex. indexOf and lastIndexOf are very similar to their counterparts on the array prototype in JavaScript. Basically, you have an array, you pass in a value and it will give you the index of that value, and the case of indexOf, it starts from the beginning of the array, with lastIndexOf, it starts at the end of the Array.

So let’s come in here and create an array here real quick, we’ll do an array of colors, and we’ll say red, blue, orange, yellow, black, we’ll do red again, we’ll do purple, we’ll do blue, and we’ll do white. OK. So making use of the _indexOf function is actually quite simple. Just do console.

log, we’ll do _. indexOf, now we have to be sure…

JavaScript arrays are not really arrays, they’re object maps with numeric properties. In this example we explore the nature of JavaScript arrays and how to create them

Video transcript

In this code demonstration, we’re going to take a look at how we can actually create arrays in JavaScript, and we’re going to take a look at some interesting aspects about arrays. Alright, so if I want to create an array in JavaScript the usual way of doing that is actually to specify a variable like list, and then simply use this open and close bracket notations just like this, and the result of this operation is actually to create an actual array.

So if I say console. dir list and switch over to a web browser and load up my page we’ll see that we have in fact created an array. It has zero elements in it, but we have in fact created an array, and it actually inherits from the array prototype. Now, if we wanted to initialize some list items in our array all we have to do is come in and actually say red, blue, green.

We can save that, reload this on our web browser, and now you’ll see that we have an array with three items in it, red, blue, and green. Now it used to be that in order to create an array…

The JavaScript array prototype offers several methods to easily add and remove elements from a JavaScript array. In this video we explore push, pop, shift and unshift.

Video transcript

In this code demonstration we’re going to take a look at how we can add and remove items from the beginning as well as the end of a JavaScript array. This is incredibly useful for when we work with a JavaScript Arrays, being able to add items to them as well as to remove them. So to get started here let’s go ahead and create an Array variable, we’re just going to create a little list and we’re going to initialize our Array with the open and close brackets.

Now if I want to add a new item to the beginning of an array, I actually do this by calling the unshift function. So I can say list. unshift, and then in here I can pass my items. So we’re just going to say the color red, alright? And then now I’ll just do a console.dir and I’ll say, list and I’ll save that, and then I’ll switch over to my web browser and open up my developer tools, and then reload my webpage, and we’re going to see that now I have an array with one item, the first item being red.

Now if I want to add another…

In this example we show you how the JavaScript array prototype provides methods to extract parts of an array, add and remove multiple items at a specified location in the array, and concatenate arrays together.

Video transcript

In this code demonstration, we’re going to take a look at some more array manipulation functions, we’re going to take a look at how we have the ability to concatenate two arrays together, how we have the ability to insert and remove items from the middle of an array, as well as how to slice some elements out of an array.

So to get started here, let’s go ahead and create a new array, we’re going to create a new array called Colors, and we’re going to have red, and we’re going to have blue, and green and black. So the first thing we want to do, is actually concatenate two arrays together. So we’re going to create a new colors arrays.

We’re going to say colors. concat, and then we’re going to supply a new list of colors here. So we have pink, we’ll do orange, and we’ll do grey. Now this is not going to modify the original array, this is going to create a new array of seven elements. So if we do consolelog. dir(newColors), we’ll see that we have our new array of seven elements, and so here we have red, blue, green, black, pink, orange…

This video shows you an example of using the two provided methods in JavaScript, indexOf and lastIndexOf, to find items in an array.

Video transcript

In this code demonstration, we’re going to take a look at how we can search for and find items in a JavaScript Array. The ability to find items in an array is a very common programming task, and being able to do so in JavaScript is extremely helpful. So we’re going to create a little array of colors here.

We’ll say red, and then blue, and we’ll say green, and then we’ll add black, and then we’ll go ahead and add blue again, and then finally, we’ll end with yellow. So we have an array here of colors. We have one of the colors repeated twice, we have blue repeated twice, and what we want to do is, I’m first going to just output this array to the console, just so we can see the contents of it, make sure all is working well.

So we’ve got our list of arrays, we have our array here with our list of colors, and so what I want to do, is I want to take a look at this and say how can I find the first instance or index of blue and how can I find the last index of blue?…

The top Web freelance developers

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...]
Small photo ps
Jake Varghese, United StatesAs an architect, Jake understands the process of solving complex problems that plague enterprise and medium size businesses. He is a full-stack problem solver--he can build entire apps from scratch or he can optimize an existing app already in the field. [click to continue...]
Small dsc 0040   copy  2
Richard Rozsa, NetherlandsRichard Rozsa offers a vision of data as a self formatting entity. For more than 30 years, he's delivered top quality technical architecture, programming, testing and solutions for complex problems--on-time and within budget. He's extremely flexible and able to integrate as a standalone freelancer or within teams. [click to continue...]
Small josh ballanco color
Joshua Ballanco, United StatesJoshua is an architect, engineer, and scientist with experience building large-scale systems dealing with everything from massive amounts of video data to heavy web traffic to integration with a wide array of components in an SOA infrastructure. He's worked for Apple and AOL, and also led a group of 20+ consultants. [click to continue...]
Small profile
Lucas Tomas Casas Arregui, ArgentinaLucas is a strong, experienced developer and architect who has worked on a wide range of solutions including solid state, windowed, web MVC, and single page apps. He has developed and integrated solutions for manufacturing, VoIP, ad publishing, consumer experience, and hotel searching. [click to continue...]

Web blog posts

Never miss new Web videos

Thank you for subscribing

You can edit your subscription preferences here.