1 00:00:00,000 --> 00:00:04,785 [MUSIC] 2 00:00:04,785 --> 00:00:08,454 In this part of the course we'll be looking at some of the more interesting 3 00:00:08,454 --> 00:00:12,660 parts of ES2015 like aero functions, default parameters, rest parameters, 4 00:00:12,660 --> 00:00:15,720 the spread operator and destructuring. 5 00:00:15,720 --> 00:00:18,350 First up, in this video, you'll learn a new syntax for 6 00:00:18,350 --> 00:00:22,040 writing JavaScript functions using arrow functions. 7 00:00:22,040 --> 00:00:24,910 Arrow functions are often referred to as lambda function 8 00:00:24,910 --> 00:00:26,560 in other programming languages. 9 00:00:26,560 --> 00:00:31,320 They provide a short syntax for defining functions and simplify function scope. 10 00:00:31,320 --> 00:00:31,820 Let's have a look. 11 00:00:33,080 --> 00:00:36,770 If you'd like to follow along using the latest work space, open the work space for 12 00:00:36,770 --> 00:00:37,940 this video. 13 00:00:37,940 --> 00:00:41,180 I'll start by opening the file arrowkeys.js. 14 00:00:41,180 --> 00:00:46,740 In the file, I have a person constructor which takes some data and 15 00:00:46,740 --> 00:00:52,120 has a method called getKeys that returns the current object's keys. 16 00:00:52,120 --> 00:00:55,350 Then, I have instantiated a new person and 17 00:00:55,350 --> 00:00:58,920 gave it a name Alena with a role of teacher. 18 00:00:58,920 --> 00:01:02,240 And right below I console.log the keys. 19 00:01:02,240 --> 00:01:07,050 Now right below this console.Iog, I reassign the getKeys 20 00:01:07,050 --> 00:01:12,170 method to a getKeys variable outside of the person instance. 21 00:01:12,170 --> 00:01:17,660 And finally, I execute the new getKeys function and log it to the console. 22 00:01:17,660 --> 00:01:20,005 So let's run this file in the console and see what happens. 23 00:01:25,658 --> 00:01:31,630 Well the scope for getKeys has changed, and the keys are not what I was expecting. 24 00:01:31,630 --> 00:01:35,390 The second getKeys does not refer to Alena and 25 00:01:35,390 --> 00:01:40,030 it's throwing the exception cannot convert undefined or null to object. 26 00:01:41,190 --> 00:01:45,130 So what I want is to get the same results for both getKeys calls. 27 00:01:47,210 --> 00:01:50,290 Using ES 2015, there is one simple yet 28 00:01:50,290 --> 00:01:55,250 significant change I can make to the code to return the same results. 29 00:01:55,250 --> 00:02:01,608 I'll change the getKeys method from an anonymous function to an arrow function. 30 00:02:01,608 --> 00:02:06,420 Now an arrow function is defined with a set of parentheses, and 31 00:02:06,420 --> 00:02:07,980 the new arrow token. 32 00:02:10,260 --> 00:02:11,980 So now let's save this file and 33 00:02:11,980 --> 00:02:16,280 run it in the console to see if we get the same results in both getKeys calls. 34 00:02:17,830 --> 00:02:19,059 And sure enough, we do. 35 00:02:21,883 --> 00:02:26,759 So what the arrow, or lambda function does, is it binds the function to 36 00:02:26,759 --> 00:02:31,380 the instance of the person, no matter where it was called. 37 00:02:31,380 --> 00:02:35,160 In other words, this now refers to Alena. 38 00:02:37,610 --> 00:02:39,760 Let's take a look at another example. 39 00:02:39,760 --> 00:02:43,265 I'll open the file arrow-this.js. 40 00:02:43,265 --> 00:02:46,560 This example introduces another new feature of ES2015. 41 00:02:47,690 --> 00:02:48,590 Promises. 42 00:02:48,590 --> 00:02:51,370 And you can find references to the Promise specification 43 00:02:51,370 --> 00:02:53,400 in the Teacher's Notes of this video. 44 00:02:53,400 --> 00:02:57,700 With Promises, callback functions are handed off to another scope 45 00:02:57,700 --> 00:02:59,940 to be called once an event is complete. 46 00:02:59,940 --> 00:03:02,710 And because of this, you have to take extra care when 47 00:03:02,710 --> 00:03:07,800 handing off a callback function so that it has a way to access its original scope. 48 00:03:07,800 --> 00:03:09,040 So in this example, 49 00:03:09,040 --> 00:03:15,250 I have a greet function on the classroom using the arrow function syntax. 50 00:03:15,250 --> 00:03:20,780 And here, the greet function calls greet on the instance of the teacher. 51 00:03:20,780 --> 00:03:25,350 Now here's where I'm making sure I have access to the correct scope. 52 00:03:25,350 --> 00:03:28,020 And as you can see, this is pretty hard to read. 53 00:03:28,020 --> 00:03:31,000 It's an immediately invoked function expression 54 00:03:31,000 --> 00:03:35,710 that returns a function which logs the name of the teacher and their greeting. 55 00:03:35,710 --> 00:03:41,128 And we also pass an error to the callback in the event an error happens. 56 00:03:41,128 --> 00:03:42,140 With the arrow function, 57 00:03:42,140 --> 00:03:46,390 I can make this a lot easier to read with fewer lines of code. 58 00:03:46,390 --> 00:03:46,892 Like this. 59 00:03:53,837 --> 00:03:57,268 Then, instead of saying classroom.teacher.name, 60 00:03:57,268 --> 00:03:59,461 we'll say this.teacher.name. 61 00:04:00,730 --> 00:04:04,392 We can also pass the error to the callback using the arrow function. 62 00:04:17,214 --> 00:04:22,630 So, now the promise returns then, we use our arrow function. 63 00:04:22,630 --> 00:04:26,560 The greeting is passed to our function and we log the message. 64 00:04:26,560 --> 00:04:30,680 And there was a lot less code to write compared with the previous example. 65 00:04:32,210 --> 00:04:35,230 Keep in mind that arrow functions don't require parentheses 66 00:04:35,230 --> 00:04:37,570 when your function only takes a single parameter. 67 00:04:37,570 --> 00:04:40,980 You can even omit the curly braces when you're simply returning 68 00:04:40,980 --> 00:04:44,010 the result of your expression like we are here. 69 00:04:45,560 --> 00:04:50,050 And be sure to review the teacher's notes for more information on Arrow functions. 70 00:04:50,050 --> 00:04:51,530 Coming up in the next video, 71 00:04:51,530 --> 00:04:54,470 you'll learn how to set default parameters in your functions.