JavaScript Tutorial

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jafar Husain: Who has a familiar at least with JavaScript 6, or what's sometimes called ES6? A few people here, okay. The language spec for JavaScript 6 is technically called ES 2005 now days, has just sort of been finalized. And you're gonna start to see these features in browsers, being introduced in browsers.

[00:00:21]
But one that I wanna call your attention to today, and the one maybe if you got a late, a really new version of browser. You might actually be able to use is JavaScript now has a new shorthand syntax for function, so that you can take this and convert it into this, much, much nicer.

[00:00:41]
So today, we are gonna be writing a lot of functions. So I happen to know the latest version of Firefox supports this. So if while I'm talking here, you wanna go and download Firefox because later we're gonna be filling out interactive exercises. I think it would actually help you cuz you can use this arrow function there.

[00:00:56]
You can always use Chrome if you want to, whatever you're comfortable with. I believe the Canary of Chrome may support this already. So shorthand for writing functions, I'm just gonna go through that one more time and get rid of all the boilerplate and just write it like this.

[00:01:11]
So we'll come back to this. But yes, so that is the end of the JavaScript 6 tutorial. That's all you need to know for this particular presentation. So first function of 6 that I'm be teaching you today forEach, who here has used forEach? So you'll notice the next few functions I'm gonna be showing you are all on arrays.

[00:01:33]
In fact, today we are probably not gonna get to covering any asynchronous programming whatsoever. We are going to be doing what I like to call wax on, wax off exercises. We are going to learn something, which may not seem as if it's related to asynchronous programming at first, which is how to program without loops.

[00:01:52]
Let's say today that if I was to say you can't use any loops when you go into to work on Monday. Could you still get your job done? No while loops, no for loops. No do while loops, no cheating. How many of you feel like yeah, I could probably get my job done?

[00:02:05]
A couple people out there, but generally, I think most people are pretty comfortable using loops, right. We might be a lost a little bit if our programming language didn't have loops. Well, when you start doing async programming, that's exactly the world you're in. You can't repeat an asynchronous function with a loop, and I'll explain a little bit more about that later, but that's effectively the world that we're in as soon as we start doing larger asynchronous programming, larger synchronous programs, loops become useless to us.

[00:02:33]
So we need to find ways of repeating actions, right? And processing streams of data as they come in without using loops and these, this is what I'm gonna be teaching you guys today. Programming without loops using just a few simple functions. So what forEach does is it takes a function, and it applies that function to every item in an array.

[00:02:52]
In this case, I'm just printing each one of these items to the console, using console.log. That's relatively straightforward even if you want you have a JavaScript Interpreter up right now, maybe in the console, you can play around with that very example yourself. Unfortunately, if your browser doesn't support error function, you gotta write it the long way function x return.

[00:03:14]
Next, I'm gonna introduce you to the map function. The map function, similar to the forEach function, except the difference is what map does is it takes a function and applies it to every item in a collection, creating a new value. And then creates a new array with all the results of applying that function to each value in the array.

[00:03:33]
So map does not change the array. And I wanna call your attention to this notion, this thing very specifically. None of the functions I'm gonna be showing you today change arrays. What they do are create new arrays. So what I'm gonna do is I'm gonna apply this function to every item in the collection and create a new collection containing the results.

[00:03:53]
So if we run this, we get 2, 3, 4. So we didn't change the original array. We actually created a whole new array. So if you ever wanna transform every item in a collection and put it into a new collection, map's the tool for the job. Next we wanna talk about filter.

[00:04:11]
Filter is very similar to map. It's going to apply a function to every item in the array, the difference is this function is a test function. Instead of transforming the value, it's going to apply a test to every single value. And only if that value passes the test, will it make it in to the new collection.

[00:04:30]
So here if I run this, we actually get an entirely new array. We didn't change the original array. I'm gonna keep hammering this point cuz it's really important. We haven't changed the original array. We just created a new one with only those items that pass the test. Does that make sense everybody?

[00:04:46]
Great, just a quick question here at the end of current section, will ES4, I guess I can talk about this later. But for of lists will talk about that when we resume. ConcatAll. So concatAll is not in JavaScript. It's a function we're actually gonna write later on and add to the array object.

[00:05:07]
But what concatAll does is very simple. It takes a multidimensional array and flattens it by one dimension. So in this case, we've got a two-dimensional array. And if I run this, it's going to get flattened into a two-dimensional array. Now I wanna call your attention to something. It's gonna be important later on.

[00:05:24]
Notice what happens to an empty array in a two-dimensional array when it gets flattened. It just disappears. You take an empty collection inside of a two-dimensional collection, and you flatten it, that empty collection goes away. We'll see why that's important later on. So quick review, map/filter/concatAll. One thing I wanna mention is concatAll will not recursively flatten deep collections.

[00:05:50]
If you have a three-dimensional collection, it'll turn into a two-dimensional collection. If you have a five-dimensional collection, it'll turn to a four-dimensional collection, and so on and so on. It doesn't recursively flatten and dimension collections. So map for transforming every item into an array, every item into an array, into a new collection.

[00:06:07]
Filter applies a function to every item in the array, and only if it passes the test, does it make it into a new array. And concatAll, flattens multidimensional collections by one dimension.