JavaScript the Basics for Beginners- Section 8: ES6 | Rob Merrill | Skillshare

JavaScript the Basics for Beginners- Section 8: ES6

Rob Merrill, JavaScript Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (56m)
    • 1. JavaScript the Basics - ES6: Promo Video

      1:55
    • 2. JavaScript the Basics - ES6: Let Statements

      5:29
    • 3. JavaScript the Basics - ES6: Let Statements Lab

      7:57
    • 4. JavaScript the Basics - ES6: Const Declaration

      3:08
    • 5. JavaScript the Basics - ES6: Template Literals

      6:09
    • 6. JavaScript the Basics - ES6: Template Literals Lab

      6:32
    • 7. JavaScript the Basics - ES6: Arrow Functions

      5:25
    • 8. JavaScript the Basics - ES6: Arrow Functions Lab

      6:13
    • 9. JavaScript the Basics - ES6: Spread Operator

      6:15
    • 10. JavaScript the Basics - ES6: Spread Operator Lab

      6:28

About This Class

Course 8 - ES6 JavaScript

In this course you will cover: 

  • let
  • const
  • template literals
  • arrow functions
  • spread operator

Through our whole JavaScript the Basics for Beginners course series you will find this is your one stop necessary to enter into the language of JavaScript. We are going to start from scratch and build up our understanding of the world's most popular programming language together. 

View JavaScript in action with whiteboard videos optimized for viewing on your smartphone. This is truly a course that you can engage with no matter where you are. Take your JavaScript eduction on the go! With whiteboard videos you get to visualize what JavaScript does under the hood. 

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

Learning JavaScript is like learning a language. This course won't make a false promise of saying you will master JavaScript overnight. However, this course will immerse you into the world's most popular programming language. 

Each course will introduce you to something new in JavaScript :

  • JavaScript Syntax
  • JavaScript Building Blocks
  • JavaScript Best Practices
  • JavaScript Objects
  • JavaScript Arrays
  • JavaScript Regular Expressions
  • JavaScript Functional Programming
  • JavaScript Algorithms
  • JavaScript Data Structures
  • JavaScript ES6 Syntax

You'll finish this course with an understanding of JavaScript that will let you take a deeper dive into the language and possibly launch you into a new career as a JavaScript web developer.

Learning a new language can be difficult and even feel intimidating. JavaScript the Basics makes the the learning process feel accessible and welcoming!

Transcripts

1. JavaScript the Basics - ES6: Promo Video : Welcome to Java script. The Basics. JavaScript is the most popular programming language in the world has been called the language of the Web Stack Overflow listed as the most popular deaf technology and get have numbers it as the top ranks language learning JavaScript will allow you to be a full stack developer or fund a specialty on the front end or the back end. With JavaScript, you'll be able to cope with front and frameworks like react and angular on the client side . And you can also cut on the back end server side with no Js and create databases with Mongo . DB JavaScript is a language, so it's going to take some time to learn before you can write poetry or a novel in any language, you have to first learn the languages alphabet, how to make words and see how others use it. To learn JavaScript. We're gonna look under the hood. This isn't just going to be an exercise in copying someone else's code to wind up with an application you don't understand. Everything we do will be visual in the form of a whiteboard lesson where you can really see how everything works and connects. If you are a visual learner, this is the course for you. This isn't about going 0 to 60 or zero to hero, because if you really are starting at zero, those courses leave you behind quickly. It's about learning. Understanding and applying is that you could build and create with JAVASCRIPT. Way will then follow our white board. Lessons into the lab way will enter into the Google Chrome software developer. Consul thistles are Java script playground. There is nothing you will need to download for this course. No special tools, no extra steps. Just Google, chrome, everything. You learnt the lesson we will then recreate in the lab together. I'll then give you a code challenge to recreate what we learned together and then we'll look together at a possible solution. Welcome to Java Script. The basics. Let's start speaking job script 2. JavaScript the Basics - ES6: Let Statements: All right, Welcome back to Java. Script for beginners in this section, we're looking at E s six, also known as Acma Script 2015. In this lesson, we're going to look at let's statements and JavaScript. What is the let statement in JavaScript? Let's statement allows for block scope to declare a local variable. This differs from the var keyword, which declares a variable globally or locally to the scope of a function. In many ways, it will operate just like the var keyword. But there are significant differences. Well, look at the implementation of both. Let and bar and see what those similarities and differences are. Let's first look at some basics of what we can do that is the same. We can assign a variable with both let and var and assign them a value. You can also reassigned the values with let as you would with far we can assign new values to the variables created with both far and wet. Now let's look at the first difference with the var key word. We can use the var keyword again with a variable that has already been declared, and it will not throw any kind of error. Even though we have used the VAR keyword again, we don't run into any kind of problem. However, if we were to use the let cured again for greeting, we're going to return an air thing. This is something called the temporal Dead Zone. Re declaring the same variable within same function or block scope raises a syntax air. Now let's look at the most notable difference between var and let function scope and blocks go. If you're newer to Java script and aren't clear what function scope is, let's go ahead and look at some code. Our consul dot log method is going to return the values of variables first name, and then we use a string of a space. And add to that the value of the last name are variable. First name is declared globally, so are logged. The console will be able to see it and access its value of the string. Joe. However, Var last name of Smith isn't in the global scope but defined within the scope of the function surname in which it was declared in. So when we tried toe log to the console, the value of last name way can't see it and we get an error. Last name has not been defined. Now let's look at the difference between function and block. Scoping the VAR keyword allows us to use functional scope. That means that when we declare a variable, it is going to belong to the global scope or the scope of the function that it was declared within. But what happens when we declare a variable within block scope, such as a conditional statement or a switch statement? Let's look at some code. If we were to look at this block of code declaring our variables with of our keyword, what would we expect to log to the consul? Because the VAR keyword is not declared in a function. Both count and more have a global scope. This means that our consul dot log confined the count value of four and add it to the more value of one and add them together to get a result of five. This is because their global variables and our council that log method can see them both. Let's try this again. Well, look at a similar block of code now. When we tried to print this out to our Consul. What results are we going to get? The code is exactly the same, except inside of the code blocks. We have the let keyword. The result is that we're going to get an air that more is not defined. One quick side note. If you're following along in your console, you will need to make sure that you have refreshed your page or a consul. Dot log will grasp the variable more that you declared with the VAR keyword in the previous example. So what is using the let statement result in the variable more being undefined? Because variables are function scoped and let's statements are blocks scoped. What that means is that when the consul dot log method is looking for these variables, it sees count in the global scope. But it can't see more because the let keyword, unlike the VAR keyword, hides it in the block scope it has declared in. All right, that's all we have for now. On the let statement, I'll see you in the lab, but we put what we have learned into practice 3. JavaScript the Basics - ES6: Let Statements Lab: welcome to the lab. We learned in our lesson that let is an alternative to far. In our next lesson, we'll learn of another alternative. Tovar called CONST. Lead is unique and that it utilizes block scope as its variables find their scope within the bloc of the code there declared in using VAR, will cause a variable to find its scope within the function that it was created within. There's also something called the temporal Dead Zone. This is when we re declared the same variable within the same function or block scope, and it raises a syntax air. And finally, as you are learning to code with, Let one clue that you are using it in an appropriate way is that it results in your code being easier to understand for those coming after you or working on a project with you. And it should make your code more predictable, making it less buggy. Let's go ahead and start off with the challenge. I want you to create two pieces of code. I want you to demonstrate how variables declared with far will create a valid output without returning and urge the console as it doesn't make use of block scoping. Then I want you to run that same code, using the let statement to show how it accesses. Block scope, hiding a value from being logged to the consul, giving us an air oven undefined variable. Go ahead and pause the video and give it a shot. When you are ready, continue the video and we'll come up with a solution together. All right, How to go? Hopefully that felt like review from our previous lesson. Let's look at a possible example that shows that let uses block scope while VAR uses global scope. We'll use the VAR keyword to declare a variable A and assign it value of the number four Well, then create an if statement will give the expression a true value and enter into the code block. And there we have declared a variable B and assigned it the value of five. However, that variable isn't a local variable. It's a global variable. So when we use the consul Doubt log method, it looks for the values of a which is global. So it confined it and B, which is global, so it confined it as well and multiplies them together. It returns to us a value of 20. Now let's use the let statement in place of the VAR keyword inside our conditional statement in the code block. But before you do this, you will want to refresh your browser window. Otherwise, we're going to have access to our variable. Be that we declared with our var keyword in the previous example. Now the variable B is no longer a global variable, like it was when we use the VAR keyword. It is a local variable to the code block that it was declared within giving us block scope . That means when we use the consul dot log method to multiply the value of A, which is four, and then multiply the value of B, we can't find be because it is a local variable. So the consul dot log method does not have access to it, and we receive an air. Let's close out this lab with the code review. We will have two identical pieces of code with the exception of the VAR, and let's statements both involve a function which we know. The VAR statement creates function scope, but they also both include a code block which the let statement will also give us block scope. Go ahead and review each section of code. What will we log out to the console when we run each example? What will be the two values of X that each function will return? Go ahead and pause the video and look over the code. A good way to really help your brain to engage the code is the talk a line by line by what you see happening and also to type it yourself. When you are ready for the answer, go ahead and resume the video. Let's first look at the VAR test function. It is signs values for X of one and to let's talk through our code. We have a function called var test. When we call that function, we enter into the code block and we have our X and we have assigned it a value of one who scope is not global, but it is scoped to the function of our test. We then have a conditional if statement the condition is true. So we go into the code block. We have our X equals two. Remember, the temporal dead zone does not apply divorce statements. You can repeat yourself are ex within. The Coe block actually has the same scope as our previous X with a scope of our function of our test. So in this function, scope X with the originally a son value of one has been reassigned a new value of two. When we log to the consul the value of X, it is going to take that updated value of X. We exit the conditional statement code block and run into another consul dot log method looking for the value of X because the value hasn't changed and both exes existed within the same scope. Ex remains at a value of two. Let's see how this differs in our next function. Make sure to do the browser refresh before entering this coat. When we invoke our function, we returned the values of two and one. Why? What did we do differently? Let's walk through this a little quicker, but slowing down for the difference, we invoke our function to start with entering the code block. Here we have the let statement assigning one toe X. It is now scoped to the function. Let test next is our conditional statement. Instead of that we have a code block, we have another Let's statement ascending to toe X. It's local scope isn't the function. Let test its local scope? Is the block statement it is declared within. This is why the temporal dead zone doesn't apply. It has a different scope. Our next line of code is a consul dot log at the value of X, which in this code, Block X has been assigned a value of two. When we exit out of the conditional statement and run into another consul dot log method that wants to print out the value of X to the consul, it doesn't have access to the X inside of the co block. Because of the let statement, This gives it block scope. So the consul dot log method can only see the X with the value of one scoped to the let test function. All right, that's all we have for now. Thanks for joining me in this lab for a look at the let statement in action 4. JavaScript the Basics - ES6: Const Declaration: All right, welcome back to Java. Script the basics In this lesson, we're going to look at the constant statement. What is the Const eight mint declaring? The Const will create a value that is a read on Lee reference. It can be either global or local to the function or block in which it is declared. Its value must be initialized when it is declared, as you can't change the reference or literal that's assigned to it. Let's quickly compare Const with let and Bar Const. Has more in common with Let Van var both const and let our block scoped while var is function scoped. Both const and let are subject to the temporal dead zone as we discussed last lesson. While var is not, const does differ from let and var in which values can be reassigned. CONST is read only by design. So what should stand out is that it would be most appropriate to use Const in a situation where you did not want the value of a variable to have any possibility of being altered. Let's head into the lab to look at one quick demonstration of when you might want to declare const in your coat. Let's say you want to save an A P I key to your file. Traditionally, when you saw Variable declared this way in all caps, it was the programmers way of telling other human eyes that this code should not be altered . However, it could still be altered. Let's do that right now to demonstrate, just like we could do with any other of our keyword. Const, however, doesn't allow that to happen. Let's do this again. But with the constant statement instead of our we get an UNCAUGHT type air assignment to constant variable. Now we already mentioned the temporal dead zone that won't let us declare a constant variable again, as we saw with let we get an uncaught type air identify Air A has already been declared, However, with what we could change the reference or literal assigned to it, just as we can when we declare a variable with the var keyword. If we try to do the same with Const, we will receive an air of uncaught type air assignment to constant variable. So when do we use const over let and var the best practice for using const as when we want greater stability in a variable. Thanks for joining me in this first look at using Const. We'll see you in the next lesson. 5. JavaScript the Basics - ES6: Template Literals: in this lesson, we're going to look a template, Liberals and es six. What is a template, literal? Here is a long definition that we will break down through the rest of the lesson template. Liberals are enclosed by the back tick. It is that button just above the tab button on the upper left hand corner. After keyboard, they replaced the single or double quotes typically used in strengths they may contain placeholders. Placeholders are indicated by the dollar sign and curly braces. The expressions in the placeholders, including text contained between them, are passed to a function. The parts are can caffeinated together by the default function into a single string. All right, that was a lengthy definition. But it is really simple to apply your to your code and quickly see the benefits first. Let's look at how we can do new lines with E s. Six versus E. S five and he s five. Suppose we had this line of code. We declared a variable called sentence and assigned it the value of a string. After the word rob, we hit the return key on our keyboard, moving to a new line. However, when the javascript engine interprets it and we logged the consul or results. We have the whole string on one line. Even though we hit return and went to a new line in our text editor or consul, we wouldn't get that new line. In fact, to get this new line, we would have to change our code. To this. We added the backslash escape clause and the letter N to let our interpreter know that we wanted a new line. The result is that we get what we were looking for. However, template liberals and E. S six let us accomplish this in another way. Let's change this to a template literal. Instead of the single or double quotes, we use a back tick toe open and close What we want Our string to be our Java script interpreter then takes into consideration the new line we went to when we hit return. The result looks just like what we typed. No, back slash is no special characters. Well, that was more intuitive and saves us some steps. It really only reduces the back slash escape character on the letter end. Let's look at another way that template liberals help us even more in syntax and readability. We've declared to pizza topping variables. Then for a pizza topping variable. We want to bring those variables into a strength. To do this, we have to do a lot of work with spacing by creating strings to account for spaces or lack of space is needed. This isn't very nice to look at, and you were continually needing to think about appropriate spacing and plus symbols. Let's go ahead and do this in E s six. We'll use the let statement and assign them the same values. We could also use the var keyword and produce the same results. In this case. We could also turn thes single quotes in our variables into back ticks for what I'm about to show you. But we don't have to, so we will choose not to. For now, like in our first example for our pizza topping, we're going to use back ticks instead of single or double quotes. Then we're going to write out our string exactly as we want to read it. To insert are place holders of topping one and topping too. We simply use the dollar sign, then place are variable inside of opening and curly braces. No concatenation, no plus signs. No worrying about creating a string for spaces between words or a string for a punctuation mark. Simple other than starting are variable with a dollar sign on wrapping it in curly braces. We write her sentence just as we would in English. Let's look at one more way that template, literal simplify things In s six Suppose in s five. We had an object with property value. Paris. We'll use our toppings one and toppings, too, as are properties and the same values as last time. Within that object, we want to have another property that has a value of an anonymous function to call on that property. In addition to what we did in our previous example, we have to use the this keyword toe access them. We could also, in this case, use the name of the object pizza toe access the properties of topping one and topping too. That is quite a bit of code and a lengthy process. Now let's look at this code again. What we're looking at now will make it much more painless to type and read. Let's look at the property favorite pizza that we assigned our method to. We will use the back ticks instead of single quotes. Then we won't have to worry about concatenation with the plus sign, creating spaces with strings or punctuation Zwick strings. We'll just use the dollar sign and curly braces and insert are place holders of topping one and topping, too. And the results are the same. All right, does all we have for now in this lesson. I'll see you next in the lab where we put what we have learned into practice. 6. JavaScript the Basics - ES6: Template Literals Lab: in this lab session, we're going to review template liberals and es six template. Liberals are a new feature in ES six to make him working with strings and string templates easier to use. You wrap text and back ticks rather than the matching single or double quotes we had used in the past. When working with strings, this will allow you to interpolate variables in them with a dollar sign and curly braces. You can also interpret late any kind of expression, not just variables. Template Liberals can also be multi line, and you can construct raw templates that don't interpret back slashes, as are single and double quotes used to do when working with strengths. All right, let's go ahead and get started with our first challenge. Let's implement a multi lion string. The first thing that I want you to do is create a multi line string. It can be a long or a short as you want, as long as it takes two lines. I first want you to create one using matching single or double quotes as an E s five. Next, I want you to implement the template literal on that same string to get the same results with R. E s six method. Go ahead and pause the video and when you're done, will come back together to look at a possible solution. All right, Hopefully that didn't take you too long in E s 51 way that we could create a multi line string is simply to put a backslash escape character followed by an end where we would like to start a new line. I also had to add the backslash character after the I in I'm because we wrapped our text and single quotes and would have thrown an error if we didn't in E s six. We could produce the same result much easier. We just replaced the matching single quotes with back ticks. And we don't have to deal with the backslash escape character on the letter end to start a new line. We also don't have to worry about the backslash character in the contraction. I'm much cleaner and very easy to write. No, let's review string interpolation. I'm going to create a few variables, will create a variable drink and the son of the value of coffee, a variable food, and assign it the string doughnut and the variable time with the value of the string. Morning. I would like you to use the yes five method to embed these variables within a normal strength. After that, I would like you to implement the same expressions using the es six syntax of template liberals that we just learned in both implementations. Make sure that your sentence contains a single and a pair of double quotes within your sentence and appropriate punctuation toe. End your sentence. Meaning? Have your sentence contain at least one contraction, such as I'm and one quote such as John said quote Good morning, unquote. Go ahead and pause the video and give it a shot when you're done, will come together and look at a possible solution. All right, let's go ahead and look at a possible solution. Using S five and s six using s five, we might have said var mash up and a sign it the value of the string. John said comma then closed the string and used the addition sign to begin toe, add another string with a single quote and inside of that have to use double quotes for John speaking with a space after good and close our string. Then we add the expression time which is morning and then we add that to another string in which we close John speaking quote and continue our sentence until we have to close the string again. After the space after hiss, we then add the expression drink and add that to another string with a space and ate his food than a space. Then we close our string and add the expression for food, which is doughnut. Finally, we add one more string with a period toe. End the sentence exhausting. No, let's solve this with E s six. Ah, quick review. As we declare our expressions, they could be single or double quotes when we assign their values or they can be in back ticks. That doesn't matter for interpolation. The syntax that we would use for her variables is slightly more complicated in E. S six. Instead of writing the name of the variables on Li like time, drink and food, as we did in our first example, we first used the dollar sign, then wrap the expression with curly braces. It is a bit more than before, but we're about to see how dramatically, more easier this is. We opened up with the back take, Then start writing out our text as we would any normal sentence. When we come to our first expression, we wrap it with curly braces and initialize it with a dollar sign than continue our string . When we get to our drink variable, we initialize it with the dollar sign and wrap drink and curly braces. And then we continue our string and finally repeat the process with our food expression and finish with a period. Closing it off with a back tick. No worrying about spaces. In addition, operators much smoother writes and reads much easier. All right, that is all we have. Time for now in this lab will see you in the next lesson. 7. JavaScript the Basics - ES6: Arrow Functions: All right. Welcome back to Java. Stripped the basics in this lesson. We're going to look at arrow functions. What is an arrow function and es six arrow functions, also called fat aero functions are more concise syntax for writing function expressions, they utilize a new token that looks like a fat Aargh. Aargh! Functions are anonymous and changed the way this binds and functions. Let's begin by looking at a function expression as we know them, an E s five and how the syntax compares ts six and are fat arrow functions. And he s five. In this case, we have a function expression. We have declared a variable called ES five funk, and we have assigned it the value of an anonymous function to help see the direct similarities and differences. I'm going to put this whole function on one line. This anonymous function has no parameters and the parentheses, and then we go into a code block. In this code block, we use the return key word to return the value of two. Now, let's look at one way of writing aero functions and es six. Let's make some observations. First of all, it is quite a bit less code. The second thing we notice is that the function keyword is gone. For some, this may seem like a lack of readability to someone working with our code. What will establish this is a function to the Java script. Interpreter is the equal sign and the greater than bracket. This is called a fat aero and lets us know that we are working with an E s six arrow function. I also noticed the parentheses in the equation. There are times when you may choose not to use the parentheses as well. In this case, it does not have a parameter. So the terrorists in tax in this case requires it. We then have the number two. There is no opening and closing curly braces. We will talk about scenarios in which we may still use them. However, when they're missing, they won't pleasantly return the following value. We don't have to type in the return key word. However, if we were to use curly braces around the to, then we would need to use the return statement to return the value of two. Let's go ahead and spend the rest of this lesson looking at some of the ways we can write out aero functions and es six. You may have a favorite way that you quickly adopt, but awareness of the different possibilities will help you interact with the code of others . Let's look at a few different ways of using arrow functions. With one parameter, we'll declare a variable called cubed with the let statement. We equally could have done this with the VAR keyword as well. In our first example, we don't use a parentheses for the parameter because there is only one parameter and arrow functions. We may choose not to add this code. We then have our fat arrow, followed by our parameter multiplied by itself three times. Because there are no curly brackets or code block, we will implicitly return the value and do not need to use the return statement. In our second example, we also don't use the parentheses. But because we use a code block as denoted by the curly braces, we have to use a return statement. If we want to return the value and our next two examples, we show that we may put our parameters and parentheses as we are accustomed to some people consider this a best practice to gain more uniformity in our code for when we look at multiple parameters. After these, we have fat arrows and a missing code block with an implicit return, then another with a code block and an explicit return. So we saw in our first example that with no parameters, the parentheses are required. In our second. We saw that there optional on Lee with one parameter. Now let's look at what our sin taxes for two parameters. We'll start by declaring a variable ad with their let's statement. Well, then a sign our function with two parameters to our variable ad. If you notice in both of these examples, the concise body and the block body operate, as we have learned in previous examples, and the parameters in this case are required to have parentheses around them. If there are two or more parameters, like our first example of no parameters in which we required parentheses, we find the same requirement for two or more parameters. All right, that is all we have. For now. I'll see you in the lab where we put what we have learned into practice 8. JavaScript the Basics - ES6: Arrow Functions Lab: in this lab. We're going to put what we have learned about aero functions into practice. In our lesson, we saw how arrow functions have a shorter syntax. They're all anonymous functions. They do not use the function cured Parentheses are required with zero or two or more parameters while they're optional for just one parameter ero functions also may have a concise body syntax with an implicit return or a block body syntax, in which an explicit return statement is required. Let's begin our lab with a function as we have known them In S five, we have the variable funk one and were sunning at the value of an anonymous function. When we call our function, we return the value of the string high. For a first challenge, I want you to rewrite this an ES six arrow function syntax right out the arrow function with examples of both the concise body and the block body options. Go ahead and pause the video and come up with the solution. And when you're ready to resume, press the play button. Okay, let's see how these turned out in e s six Syntax will declare a variable called funk to and the son of the value of an arrow function expression. Because there are no parameters, we need to have a set of empty parentheses. Then we have our fat arrow function. This is followed by a concise body in which we don't use curly braces, so we have an implicit return of the value of the string high. We have a set of empty parentheses, followed by a fat arrow with a block body. Because we have gone with the block body, we need to use an explicit return statement to return the value of the string high. Next, I want you to create two more arrow functions using the ES six syntax for one of them. Use no parameters. And for the other, I want you to use two or more parameters for each one. You may either use the concise or block body. Go ahead and pause the video, and when you're ready to move on to look at possible solutions, resume the video. Let's look at some possible solutions. This was an open ended question, So chances are my solution is going to look quite a bit different than yours. Here is an example of having zero parameters. This function name has zero parameters, so we have to use parentheses. So let's go ahead and look at the ES six version. This function, expression name and he s six has zero parameters. So we have to use the parentheses. We then have a concise body in which we have an implicit return. Now for a next problem using two or more parameters, we have variables of X and y. We use the var keyword, but we could have used the let keyword as well, because there are two or more parameters. We need to place them in parentheses. We then have the fat arrow function. I use a concise body without the curly braces to implicitly return the value of the product of X and y. All right, let's close up this lab with a more significant challenge. We're going to look at the map function, syntax and yes, five and convert it ts six. Let's go ahead and look at the S five implementation. Now, you may or may not be familiar with the map method and JavaScript at this point, if you are a new developer, we are going to look at the map method, which is something that we looked at in the functional programming section of our course in general, the map function. But we've passed each element of the array as an argument into the parameter we've designated with the variable end. We then run this function of n times n and transform every element in the array. First, we passed two as an argument to our function that multiply two times to transforming it into four. Then we passed four as our argument to our function, multiplying it four times, transforming it into 16 and so on. As we transform the rest of the elements in our array, you should know enough at this point to convert this to the E s six format. Even if you are still new to the map method, let's go ahead and create a function expression using the arrow function. Syntax will name are variable, and its sign it. The value of numbers are variable. That contains there, Ray. We're going to want our map function to transform. So just as he s five in which we pass this function as an argument to map inside of its parentheses, we will have parentheses that we fill for the map function. And yes, six. Inside, As in all our arrow function cases, we don't need the function keyword for our parameter end that will represent each element of the array because it is on Lee one element as an argument at a time, and we have only one parameter. We don't need to have it in parentheses, although that would have been acceptable. We then have a concise body and which will multiply the current elements value by itself. And it transforms that element in the array. And the results are the same. All right, thanks for taking a look at arrow functions with me and we'll see you in the next lesson. 9. JavaScript the Basics - ES6: Spread Operator: Welcome back to Java script, The basics and this lesson. We're going to look at the spread operator. What is the spread operator? According Toa NDN, the Mozilla Developer network, the spread operator allows an expression to be expanded in places where multiple arguments for function calls or multiple elements for a ray, literal or multiple variables for de structuring assignment are expected. So let's go ahead and spend the rest of this lesson illustrating this spread operator definition and action. If you are new to JavaScript, then this won't bear the same familiarity that we saw Const. And let head with var or aero functions had with functions or template liberals had with strings. This is something new. First, let's look at the syntax. Three dots are used to let the Java script interpreter know that you are using the spread operator. Now let's look at some things that spread operator conduce with an array. First, let's look at an array. We'll call it letters and a son at the value of an array with the elements containing the strings of A B and C. Now, when we look at the value of letters, it returns in array, consisting of the Elements A, B and C. This is what we would expect. No surprise. Now let's put the spread operator in the consul dot log. It returns the values of the strings A, B and C individually and not part of an array. It spreads them out, and this is the equivalent of entering them in without being grouped together as an array. The spread operator can also be used when constructing a race. Let's first look at an E s five approach to constructing a race. Let's say that we have to a race are variable. Alfa will hold the first array of the strings A, B and C our second variable. Bet we'll hold our second array with the string elements D, E and F previously an E s 51 way that we could add these to a race together would be to use the can cat method. The can cat method is used to join two or more Erase. This method does not change the existing arrays, but returns a new array containing the values of the joint a race. So we'll use the can cap method on Alfa Array and pass it. The argument of the array bet. The result is A, B, C, D, E and F all in one array. Let's look at a way in which he s six lets us use the spread operator to do this in a more convenient way. Let's imagine that we're starting with a clean sleep. If you're following along in your browser, be sure to do a refresh as the let statement deals with the temporal dead zone that we discussed in previous lessons will declare a variable bet and a sign in an array with the elements of the string D E and F. Next will declare a variable called alphabet will sign to it an array with the elements consisting of the strings A, B and C. Then we will use the spread operator with the three dots and then the variable bet that contains the value of the array we just created above. And the result is the same as our ES five approach, but with a much more simplified syntax. Now let's look at another way. The spread operator helps us with functions. The spread operator allows you to spread out the values of an array as if they were arguments. Let's go ahead and declare two variables containing the values of array. The first array will contain the values of 12 and three. The second array will contain the values of 24 and six. Let's suppose that we have a function called product of three. We're going to give our function three parameters. When we enter into our co block, we're going to want to find the product of those three values. Well, then logged. The result to the consul here is how we might find the results we wanted in E s five. We call our function product of three and passed to it. Three arguments to fill in the values for parameters for the function. To do this, we named the array and the index of the value from that array we want to use as our argument to plug into the array. So each time we named the array and the index of the element. Now let's use the ES six spread operator to do the same thing. I will call the product of three function forged three parameters that were trying to fill . We will use the spread operator indicated by the three dots, followed by the name of the array, whose elements we want to use as arguments and are a function. One will be passed to a two will be passed to be and three will be passed to see when we call our function. Using the spread operator on our two arrays, we receive the same results with a much less cumbersome process. We didn't have to Neymar Ray three times full about the index of each element in the array . There is much more we can do with the spread operator, but for now, let's head into the lab and put what we have learned into practice. 10. JavaScript the Basics - ES6: Spread Operator Lab: in this lab, we're going to review our spread operator lesson. This operator is designated with three dots in a row. We saw that the spread operator can be used to spread out the elements in an array. It can be used to construct an array, and the spread operator can be used to pass arguments into a function. So let's go ahead and look at and put the spread operator to use. First, let's go ahead and illustrate How are spread. Operator opens up the items within an array well, first logged the values of our names array to the consul returned the value of the array. And then when we use the spread operator on their way, it returns the elements individually. The spread operator makes it look more like you're passing individual strings as parameters to the consul dot log method. All right now, with that done, let's begin to look at some practical implementations of the spread. Operator will begin with the challenge based on what we learned in the lesson. Go ahead and create to a raise when you have done that. And he s five turned those two arrays in tow one array, then recreate the process. Using the ES six spread operator approach. Go ahead and pause the video and give it a shot. When you are ready will come together and view a possible solution. All right, let's go ahead and look at a possible solution. Using E s five implementation will declare a variable called es five rain and a sign it the value of an array containing the elements. Red, orange and yellow will declare another variable called Yes, five bow and a son of the values of an array contained the elements of green blue and to go and violet now toe add them together and store them to a variable. Using the S five approach will declare a variable called es five rainbow and we'll sign it the value of the array rain. Then we'll use the comm cap method and passed to it The argument of the array boat. This will bring them together into one array with the order of red, orange, yellow, green, blue, indigo and violet. All right, now let's do this with the ES six method, we'll declare our es six bo and assign it an array of green, blue indigo and violet then we'll move right into declaring R. E S six rainbow will assign it the value of red, orange and yellow. Then we'll use the spread operator expressed with three dots than insert R. E s six boat, and the result is the same. Why not just use the can cap method as an S five? Well, it's your choice. It's partly syntactic sugar, but the spread operator also works on other terrible objects, such as maps as well. Use later and sets. It's also handy when passing separate values into a function. Let's go ahead and look at passing values to a function right now. Here is your challenge. I want you to create a function that will take three parameters. You don't need to use the arrow function for this, but can stick with regular ES five syntax her functions. I then want you to pass to the function an array with three arguments using the spread operator, as we saw in our lesson, and to make this a little more complex, go ahead and pass them to the template literal to make a string out of them. This challenge has a few moving parts. I would suggest that you spend at least 15 to 20 minutes trying to solve it on your own. Even if you feel stuck, go back and watch previous lessons. If you need a bit of assistance, or look up the spread operator or template strings on Google, go ahead and pause the video and give it a shot when you're ready, will come back together and find a working solution. All right, How to go. Let's go ahead and create our ray will declare a variable array and assign it the values of the elements. Ran bathroom and quickly. Next, let's go ahead and create a function called Mad Lib. We'll give it three parameters of verb, noun and adjective inside of the co block will put a return statement than start with a back tick to begin our template. Literal Well, then, right out the rest of our string, we'll use the placeholder syntax of the dollar sign and wrapping the variable expression and curly braces. We'll do that for all three parameters. Then we'll close out our template with a back tick. Now the last thing we have to Dio is used the spread operator to pass the elements of our array as individual elements into our mad lib function. We do that simply by using the spread operator with three dots. The naming, our array and the results is I ran to the bathroom and quickly sat down. This produces the same results as if we had passed in individual arguments into our mad lib function that would have required us to name our array and the index of each element for each argument we wanted to pass to the mad lib function. All right, that's all we have for now. Thanks for joining me in. Looking at the spread operator will see you in the next lesson.