Coding

ES6 JavaScript Tutorial for Beginners – Getting Started

  • 00:00:00 hi everyone you probably already noticed
  • 00:00:03 that JavaScript is rather important as a
  • 00:00:06 web development language nowadays that's
  • 00:00:09 why I decided to make the first module
  • 00:00:11 of my JavaScript bootcamp as well as my
  • 00:00:15 es6 bootcamp available for free on this
  • 00:00:18 channel that should give you the very
  • 00:00:20 basics or changes with es6 you will need
  • 00:00:24 to well work with javascript if you then
  • 00:00:27 want to dive into javascript deeper feel
  • 00:00:29 free to take the full courses I've been
  • 00:00:31 very happy to welcome you there but if
  • 00:00:33 you don't want you that's fine
  • 00:00:35 these free videos or this free video
  • 00:00:38 here should get you started and give you
  • 00:00:40 the very basics you need
  • 00:00:45 what is es5 or es6 well if you're
  • 00:00:49 watching this course you probably do
  • 00:00:51 note it but just to give you a quick
  • 00:00:52 refresher es stands for ACMA script
  • 00:00:56 which kind of is the language in the end
  • 00:00:59 though of course we say JavaScript all
  • 00:01:01 the time but theoretically ACMA script
  • 00:01:04 is T language and JavaScript was more
  • 00:01:07 like a dialect which follows ACMA script
  • 00:01:09 but of course javascript is the most
  • 00:01:12 popular language using ACMA script and
  • 00:01:14 therefore you can kind of think of es6
  • 00:01:17 just being the next chava script version
  • 00:01:20 but what are is five years six to begin
  • 00:01:23 with well is five is the version which
  • 00:01:25 currently runs in a browser and es6 is
  • 00:01:28 the next-gen version so what new
  • 00:01:30 features and so on yes five has just
  • 00:01:33 mentioned the support for all browsers
  • 00:01:35 but for es6 you will need some poly
  • 00:01:37 Falls or transpilers which basically
  • 00:01:40 takes your es6 code and rewrites it in a
  • 00:01:43 TS v styled way which kind of sounds
  • 00:01:47 strange but it allows you to use es6
  • 00:01:49 features today and kind of does what you
  • 00:01:53 would have to do in the past to do the
  • 00:01:55 same in years five it does that for you
  • 00:01:57 and so you are able to run es6 code
  • 00:01:59 today even though browsers don't fully
  • 00:02:01 support it yet this course of course
  • 00:02:04 will focus on es6
  • 00:02:11 throughout the course this is what you
  • 00:02:14 will see most of the time jsbin calm
  • 00:02:17 it's a great website which allows you to
  • 00:02:19 if you just check javascript and console
  • 00:02:23 up here write JavaScript code on the
  • 00:02:25 left and then if you lock something to
  • 00:02:30 the console and hit run you'll see it
  • 00:02:34 show up on the right and I will use this
  • 00:02:37 format throughout the course since it
  • 00:02:38 allows me to really focus on individual
  • 00:02:40 topics and show how they work and
  • 00:02:43 quickly play around with them without
  • 00:02:45 having to mess around with HTML and
  • 00:02:47 changing something in on the HTML page
  • 00:02:49 which you then would not see and so on
  • 00:02:52 so really I will get them come back to
  • 00:02:55 using HTML and actually showing
  • 00:02:58 something on the page but most of the
  • 00:03:00 time I will just stick javascript in the
  • 00:03:02 console now and if you rightfully say
  • 00:03:05 well my application won't just lock
  • 00:03:07 things to the console well it isn't
  • 00:03:10 really that hard a step from logging
  • 00:03:12 into the console to altering something
  • 00:03:15 in your HTML document and indeed in the
  • 00:03:17 final project of this course people of
  • 00:03:19 course do that so this is the format I
  • 00:03:22 will use most of the time and it should
  • 00:03:26 allow me to really give you a lot of
  • 00:03:28 tiny examples which should allow you to
  • 00:03:31 quickly understand all the new things
  • 00:03:34 being added with es6
  • 00:03:41 Hey in the last lecture you saw the
  • 00:03:45 format I'll use throughout this course
  • 00:03:46 so I will use J has been a webpage to
  • 00:03:49 show all these six features and how it
  • 00:03:52 works and I explain why I do it like
  • 00:03:54 this in the last video however if you
  • 00:03:57 build your own applications and you want
  • 00:03:59 to use es6 you'll probably do that on
  • 00:04:02 your local machine right so you need to
  • 00:04:04 know how to set this up how to set up a
  • 00:04:06 development environment which allows you
  • 00:04:08 to use es6 on your local machine because
  • 00:04:12 remember browsers don't support all the
  • 00:04:15 es6 features right now so therefore you
  • 00:04:18 need a way to run it on your machine on
  • 00:04:21 bless and code or work with es6 code in
  • 00:04:25 order to do this you basically need
  • 00:04:28 three things the first thing is a
  • 00:04:32 package or a tool which compiles your
  • 00:04:35 es6 code to es5 now you might say how
  • 00:04:38 does that work well basically it find
  • 00:04:41 some hacks some more difficult ways to
  • 00:04:44 achieve certain es6 behaviors with es5
  • 00:04:47 code and keep in mind that is only a
  • 00:04:49 temporary solution until es6 is natively
  • 00:04:52 supported but all browsers that's the
  • 00:04:54 first thing a compiler the second thing
  • 00:04:57 is a module loader you will see us later
  • 00:05:00 on in the modules module or sections
  • 00:05:02 course that if you're working with
  • 00:05:05 modules so you have a lot of JavaScript
  • 00:05:07 files you want to load dynamically you
  • 00:05:10 need a package to do that because this
  • 00:05:12 behavior also isn't supported natively
  • 00:05:14 by browsers yet so you need a module
  • 00:05:16 loader to and lastly you need a little
  • 00:05:19 server serving your application because
  • 00:05:22 even though it is static since you're
  • 00:05:25 working with modules those modules need
  • 00:05:27 to be served dynamically and therefore a
  • 00:05:30 little lightweight server is needed for
  • 00:05:33 it while development – now you can't
  • 00:05:37 install all these things with multiple
  • 00:05:39 options for example as a compiler you
  • 00:05:41 might use Babel as a much loader you
  • 00:05:44 might ever use webpack kind of or system
  • 00:05:47 chess as a pure module loader and for
  • 00:05:50 servers there are tons of options
  • 00:05:52 attached to this video you will find a
  • 00:05:54 document
  • 00:05:55 leading to some example setups or
  • 00:05:59 boilerplates
  • 00:06:00 on github which you can simply clone to
  • 00:06:02 get started and where you can dive into
  • 00:06:04 to learn more about how they are set up
  • 00:06:06 and which compiler and so on they use
  • 00:06:09 for example here I have this vanilla es6
  • 00:06:12 JSP m package open which always uses che
  • 00:06:15 SPM javascript package manager to load
  • 00:06:17 all those packages needed to work with
  • 00:06:20 the es6 and you can simply follow the
  • 00:06:23 instructions on this page to set up a
  • 00:06:26 local es6 development environment
  • 00:06:28 quickly of course you will find a link
  • 00:06:30 to that repository in the video or in
  • 00:06:32 the document attached to this video
  • 00:06:40 hi an important thing to realize is
  • 00:06:43 you're learning es6 but it's not
  • 00:06:45 natively supported by all browsers or
  • 00:06:48 all the features are not natively
  • 00:06:50 supported by all browsers yet so that
  • 00:06:52 means you can't use es6 in browsers
  • 00:06:56 right now there are some features you
  • 00:06:58 might be able to use but for most of
  • 00:07:00 them you will need some kind of compiler
  • 00:07:03 compiling your es6 code to es5 and you
  • 00:07:07 will see this in a later lecture where i
  • 00:07:08 talk about a local set up on your
  • 00:07:10 machine to use es6 today nonetheless if
  • 00:07:14 you want to find out which browser
  • 00:07:16 supports which feature and so on you
  • 00:07:20 should visit this get up page here to
  • 00:07:22 which you will find a link in the
  • 00:07:24 attached document in a document attached
  • 00:07:26 to this video and there you will see all
  • 00:07:28 the important new features on the left
  • 00:07:30 here and then on the right you can see
  • 00:07:32 which browser versions alike Internet
  • 00:07:35 Explorer Firefox Chrome and so on and
  • 00:07:39 which compiler possible compiler is
  • 00:07:42 compiling your code to es5 support which
  • 00:07:45 feature so for example if you're
  • 00:07:47 interested in four off loops you would
  • 00:07:50 see that the most recent versions of
  • 00:07:52 chrome support is for example and that's
  • 00:07:55 an important chart you should have a
  • 00:07:57 look at regularly if you're working with
  • 00:08:00 your six applications since it will tell
  • 00:08:02 you if you need a compiler or if you for
  • 00:08:06 example only target the latest versions
  • 00:08:08 of Chrome if you don't need a compiler
  • 00:08:11 because all the features you need are
  • 00:08:13 already supported which might be
  • 00:08:15 possible too
  • 00:08:15 so definitely check out this
  • 00:08:17 compatibility chart here to find out
  • 00:08:20 which features you can use natively
  • 00:08:22 today and for which features you will
  • 00:08:24 need a compiler in order to use them
  • 00:08:32 hi welcome to you the first content
  • 00:08:35 module in this course on es6 in this
  • 00:08:39 module I want to have a look at the most
  • 00:08:41 important syntax changes in addition cs6
  • 00:08:44 broad and there are quite a lot of them
  • 00:08:46 so let's dive right into it
  • 00:08:48 some insight J has been here to type my
  • 00:08:51 typescript code here on the left and
  • 00:08:53 then see it see the output in the
  • 00:08:55 console right here on the right and the
  • 00:08:59 thing I want to start with is lat and
  • 00:09:02 Const so lats and cons are new keywords
  • 00:09:06 added by es6 and they allow us to change
  • 00:09:09 the way we work with variables or like
  • 00:09:13 the name constant eyes use constants so
  • 00:09:16 before I come to the question why we
  • 00:09:18 need that let me first show you how it
  • 00:09:21 works imagine we have the variable name
  • 00:09:24 and the past would have said name equals
  • 00:09:27 max for example and this will still work
  • 00:09:30 if I print this name to the console will
  • 00:09:33 of course see max soul are still exists
  • 00:09:38 with Year six and of course that will
  • 00:09:40 always be the case since we need it for
  • 00:09:42 backward compatibility
  • 00:09:43 however es6 also offers a different way
  • 00:09:47 to create a variable we can use lat
  • 00:09:49 now with lat what do you think will
  • 00:09:52 happen if I hit run we still see max so
  • 00:09:57 it seems like it's doing the exact same
  • 00:09:59 thing just a different syntax right so
  • 00:10:02 why would we use lat
  • 00:10:03 instead of war well if you maybe
  • 00:10:07 remember my Chaves trip boot camp course
  • 00:10:09 or are a general familiar with
  • 00:10:11 JavaScript you'll probably know that we
  • 00:10:14 have the global scope and the function
  • 00:10:17 scope or local scope but JavaScript
  • 00:10:20 doesn't really have any block scoping
  • 00:10:22 and block scoping of course refers to
  • 00:10:24 the fact that a variable is contained
  • 00:10:26 between quale braces like in an if
  • 00:10:29 statement for example so in the past if
  • 00:10:32 we had something like this if true and
  • 00:10:35 then between the curly braces so in the
  • 00:10:38 body of the safe statement we would have
  • 00:10:40 a variable named named name
  • 00:10:43 which would be max and if we hit run
  • 00:10:45 this would work
  • 00:10:47 now with let this variable is now
  • 00:10:51 contained inside this block so what do
  • 00:10:53 you think will happen if I hit run now
  • 00:10:57 I'm referring to the name of my window
  • 00:11:01 object and it becomes much clearer if I
  • 00:11:04 use another name like age for example so
  • 00:11:08 if I now print out age will even get an
  • 00:11:11 error that age is not defined so let
  • 00:11:14 allows us to use blocks goping which
  • 00:11:17 means contain the variable in the body
  • 00:11:19 like here in the truth in the if
  • 00:11:21 statement where it is defined so if I
  • 00:11:25 define it outside of their tool let's
  • 00:11:28 say I also have age of 30 what do you
  • 00:11:32 think will now happen if I hit run well
  • 00:11:36 now I see 40 because again depart inside
  • 00:11:40 the if statement inside this block
  • 00:11:41 that's why it's called block scoping
  • 00:11:43 isn't touched it isn't accessible
  • 00:11:45 outside of this statement therefore if I
  • 00:11:48 lock the age inside of this if statement
  • 00:11:50 I'll of course see 27 and 30 it's all
  • 00:11:56 first print 27 inside your statement and
  • 00:11:58 then 3 outside of it and that is why lat
  • 00:12:01 is really useful and powerful it allows
  • 00:12:04 us to finally use block scoping in
  • 00:12:07 JavaScript – which of course is an
  • 00:12:08 important addition clearing many of the
  • 00:12:11 confusions that mind for reason if you
  • 00:12:13 used variables in let's say for loops
  • 00:12:16 and you were able to access them from
  • 00:12:18 outside or even the value might have
  • 00:12:20 changed inside of that due to some
  • 00:12:23 external value being said or anything
  • 00:12:25 like that with lat you can make sure
  • 00:12:28 that the variable you use inside of a
  • 00:12:31 block stays inside of that block and
  • 00:12:33 isn't touched from outside and it's next
  • 00:12:35 and accessible outside of it so that is
  • 00:12:37 why lat is really powerful
  • 00:12:39 now why wasn't largest changed to work
  • 00:12:43 like this well of course for backward
  • 00:12:45 compatibility reasons if you would
  • 00:12:48 change war to behave like this you would
  • 00:12:51 pretty sure render a lot of code useless
  • 00:12:53 because vara was used in a different
  • 00:12:56 way therefore it's important to have
  • 00:12:59 this new keyword lat so that was a lot
  • 00:13:02 of talking about lap but it's really
  • 00:13:04 core to understand how let differs from
  • 00:13:07 war that we are able to block skill with
  • 00:13:10 it and that it otherwise behaves like
  • 00:13:12 var it's a variable we may change it we
  • 00:13:16 may reassign each year to 29 and defiant
  • 00:13:19 now run we see 29 so we can use it like
  • 00:13:23 a variable the important difference is
  • 00:13:25 to block scope
  • 00:13:31 now with Const it's a different thing
  • 00:13:33 I'll get rid of my lat code here and
  • 00:13:36 I'll create a constant age 27 what do
  • 00:13:40 you think will happen if I now it run
  • 00:13:43 it's still 27 so that's not too
  • 00:13:48 surprising but what happens if I now set
  • 00:13:53 H to be 29 what do you think we'll see
  • 00:13:56 in a console affair now hit run well
  • 00:13:59 we'll get an error that we're trying to
  • 00:14:01 assign to a constant variable so this
  • 00:14:04 really is no variable in this case it's
  • 00:14:07 a constant it may not be changed
  • 00:14:09 therefore its comment you write it all
  • 00:14:12 uppercase to clearly show that this is a
  • 00:14:14 constant and if we ever try to change it
  • 00:14:18 we will get an error because that is not
  • 00:14:20 possible
  • 00:14:20 a constant as you find once and then it
  • 00:14:23 should keep its value now what do you
  • 00:14:25 think will happen if I create an array
  • 00:14:27 ages here for example with 27 29 and 31
  • 00:14:32 and of course I can print HS here if I
  • 00:14:37 hit run well we see the array now what
  • 00:14:41 do you think happens if I push a new
  • 00:14:45 value on to that array and then print it
  • 00:14:48 again like this what do you think we'll
  • 00:14:51 see in a console we'll get an error well
  • 00:14:55 we see the original array and then we
  • 00:14:58 print a new area with 25 added to it now
  • 00:15:01 that's certainly strange didn't I say
  • 00:15:03 that a constant may not be changed later
  • 00:15:06 on but it seems like we did change it
  • 00:15:09 right not really
  • 00:15:12 remember that arrays as well as objects
  • 00:15:14 are reference types this means what does
  • 00:15:18 this constant actually hold it doesn't
  • 00:15:21 hold those values it does hold a pointer
  • 00:15:25 to those values a pointer to this array
  • 00:15:27 the array is placed somewhere in memory
  • 00:15:30 and the very little constant here only
  • 00:15:33 holds a pointer to that space in memory
  • 00:15:36 therefore we don't change the constant
  • 00:15:38 we're not changing the pointer we're not
  • 00:15:40 pointing to a new
  • 00:15:42 check we're only changing the values to
  • 00:15:45 which the pointer points but that is
  • 00:15:47 totally valid we're not we're not
  • 00:15:50 hurting our constant here because again
  • 00:15:53 the constant value D pointer isn't
  • 00:15:55 changed only the value in the background
  • 00:15:57 that's why we are able to manipulate
  • 00:15:59 this array and for the same reason we
  • 00:16:02 will also be able to change an object
  • 00:16:05 like let's say we have our constant
  • 00:16:08 object which might look like this and
  • 00:16:13 here we have our H set to 27 now of
  • 00:16:18 course I print object here and
  • 00:16:20 thereafter I'll also print it down here
  • 00:16:22 thereafter I'll go to my object and
  • 00:16:25 change the H to be 30 if I now hit run
  • 00:16:30 we also see that the object was changed
  • 00:16:32 for the very same reason as the array
  • 00:16:34 it's a reference type the pointer isn't
  • 00:16:36 changed only the value I'm really
  • 00:16:38 stressing this because this is important
  • 00:16:41 to understand how constants work here
  • 00:16:43 and why you are able to change the
  • 00:16:47 constant or to be precise to change the
  • 00:16:51 value of that constant if you're using
  • 00:16:53 with reference types because you're not
  • 00:16:55 really changing the value only the value
  • 00:16:58 to which the pointer is pointing
  • 00:17:05 we also have important implications
  • 00:17:07 regarding poisoning
  • 00:17:09 remember hoisting referred to the fact
  • 00:17:12 that I could set something like this I
  • 00:17:14 could set my H to 27 and then I could
  • 00:17:18 print my age and I could define it
  • 00:17:21 thereafter like this or declare it like
  • 00:17:24 this if I had run this would work now
  • 00:17:29 let's see if it all works if I use lat
  • 00:17:32 what do you think will happen when it
  • 00:17:34 run well since I was asking like this
  • 00:17:38 you probably expected this result we're
  • 00:17:40 getting an error so the hoisting of the
  • 00:17:43 variables with flat or Const doesn't
  • 00:17:46 work the way it works with Laura we have
  • 00:17:49 to declare our variable before actually
  • 00:17:53 initializing it and this certainly is a
  • 00:17:55 good behavior because there really
  • 00:17:57 wasn't any big advantage of the old
  • 00:18:00 approach of pulling everything up at the
  • 00:18:03 top and therefore probably leading to
  • 00:18:06 bad code or you forgetting something
  • 00:18:08 it's better to get a clear error if you
  • 00:18:10 forget the declaration before the
  • 00:18:12 initialization so if I run this code
  • 00:18:15 well we see 27 so just works and again I
  • 00:18:19 think this is a change that really makes
  • 00:18:21 sense
  • 00:18:21 what of course still will work is if we
  • 00:18:25 have a function do something and here we
  • 00:18:30 for example have our H variable set it
  • 00:18:36 to 27 and then I have lat
  • 00:18:43 H like this now I call do something and
  • 00:18:52 I log H now what do you think will
  • 00:18:57 happen if I had run I get 27 so here it
  • 00:19:03 does work because actually it is
  • 00:19:06 declared because before it is used as
  • 00:19:08 I'm calling the function after declaring
  • 00:19:11 the variable and the function is to
  • 00:19:13 place where I use D variable so
  • 00:19:15 therefore this is a valid approach
  • 00:19:17 this will work but if you really think
  • 00:19:20 about it as I just mentioned it works
  • 00:19:23 two ways
  • 00:19:23 same way as before it is declared before
  • 00:19:25 it's being used and that is the core
  • 00:19:27 thing to keep in mind you have to
  • 00:19:29 declare things for actually using them
  • 00:19:37 so we had a look at lat and Const but
  • 00:19:39 another important field where a big
  • 00:19:40 change happened our functions you
  • 00:19:44 probably know the way to write functions
  • 00:19:47 like this I have my function with
  • 00:19:50 parentheses and then I have my function
  • 00:19:52 body where I may do something for
  • 00:19:55 example log hello to the console and if
  • 00:19:58 I now run this function like this you'll
  • 00:20:01 of course see hello so that isn't too
  • 00:20:04 new but es6 introduces a new syntax we
  • 00:20:07 can use to write our functions I can
  • 00:20:10 rewrite this function here in the
  • 00:20:13 following way I can assign it to a
  • 00:20:17 variable FN set this equal to and then I
  • 00:20:21 keep the parentheses but then I use this
  • 00:20:26 fat arrow so this equal sign followed by
  • 00:20:29 the greater than sign and if I now hit
  • 00:20:31 run what do you think will happen
  • 00:20:33 it still works so this is just a
  • 00:20:36 different way to write this function and
  • 00:20:38 I'll explain what happens here the pair
  • 00:20:42 of parentheses here stands for the
  • 00:20:45 arguments you want to pass to this
  • 00:20:46 functions there in this point you are
  • 00:20:48 not passing any arguments but an
  • 00:20:50 important thing to know is we always
  • 00:20:51 have to provide the empty pair of
  • 00:20:54 parentheses if we're not passing any
  • 00:20:56 arguments then separated by this fat
  • 00:20:59 arrow as it is called you have the
  • 00:21:02 function body and then went inside of
  • 00:21:05 this body you'll you execute your code
  • 00:21:07 now since we're only having one line of
  • 00:21:10 code there's even a shorter way to write
  • 00:21:12 this I can remove the curly braces and
  • 00:21:17 simply write the function like this if I
  • 00:21:20 now hit run you still see it works so
  • 00:21:24 again if I only have one line of code I
  • 00:21:28 may leave out all the rest and write my
  • 00:21:30 function like this now while this might
  • 00:21:32 look a bit strange it's simply a shorter
  • 00:21:36 way to write our functions but it also
  • 00:21:38 has another feature too which I will
  • 00:21:41 come back later first I want to talk a
  • 00:21:43 little bit more about the syntax and how
  • 00:21:45 it works here we're printing something
  • 00:21:47 with the console but imagine
  • 00:21:50 actually we would expect to get
  • 00:21:52 something back from this function which
  • 00:21:54 we could print to the console now the
  • 00:21:57 cool thing is if all your function does
  • 00:21:59 is have one line of code and return
  • 00:22:01 something with that line of code you can
  • 00:22:03 also simply write this so no return
  • 00:22:09 keyword or anything like that just what
  • 00:22:11 you want to return if I now hit run what
  • 00:22:13 do you think we'll see well we see hello
  • 00:22:17 so this function here is technically the
  • 00:22:20 same as this function here just much
  • 00:22:30 shorter of course so that's one thing
  • 00:22:33 but what if I do have more code than
  • 00:22:37 just one line well then I reintroduce my
  • 00:22:40 curly braces here and then I can do
  • 00:22:45 whatever I wanted you for example I
  • 00:22:47 might have my variable a and my variable
  • 00:22:51 B and I want to return a plus B if I now
  • 00:22:56 hit run what do you think we'll see we
  • 00:22:59 see five so we're using this function
  • 00:23:03 body like you would use it in a normal
  • 00:23:05 function or like in a function we know
  • 00:23:08 it from the es5 syntax so this works
  • 00:23:11 fine but we also have the shorter way of
  • 00:23:14 writing it if we only have two return
  • 00:23:16 statement the way you saw before now
  • 00:23:19 let's also talk about the arguments I'm
  • 00:23:21 not passing any arguments and I said
  • 00:23:23 that you need to provide this empty pair
  • 00:23:25 of parentheses in this case so how does
  • 00:23:29 this change if I actually do pass
  • 00:23:31 arguments let's say I want to pass a and
  • 00:23:35 B to it so like three and eight for
  • 00:23:38 example and I'm expecting a and B here
  • 00:23:41 and then this is the syntax how I write
  • 00:23:43 this I'm simply passing the arguments
  • 00:23:47 inside of the parentheses like a do you
  • 00:23:48 have it in the traditional function
  • 00:23:51 statement you probably know and then I
  • 00:23:54 can call this function so if I now hit
  • 00:23:56 run we see eleven now note of course
  • 00:24:01 that I again can get
  • 00:24:03 of everything but the a plus B term here
  • 00:24:07 is since I'm only having one line and
  • 00:24:09 I'm returning this so if I head round
  • 00:24:11 with the room so if I hit run with that
  • 00:24:14 I also see 11 now the cool thing is if I
  • 00:24:19 only have one argument so let's say I
  • 00:24:22 don't have B but this is always 5 so I'm
  • 00:24:25 only passing a what do you think will
  • 00:24:28 happen if I call this function like this
  • 00:24:31 well I get 8 and what do you think will
  • 00:24:34 happen if I still pass in our argument
  • 00:24:38 well it's ignored
  • 00:24:40 I still get 8 but here's another cool
  • 00:24:43 feature if I only have one argument then
  • 00:24:45 I may leave out the parentheses and
  • 00:24:47 that's important to know that is the
  • 00:24:50 only condition or the only case where I
  • 00:24:54 don't need parentheses if I have 1
  • 00:24:56 argument if I have no arguments I need
  • 00:24:59 an T parenthesis if I have two or more
  • 00:25:01 arguments I need them to but if I only
  • 00:25:03 pass one argument I right I might write
  • 00:25:06 this function like this very very short
  • 00:25:09 of course so if I now it run we see 8
  • 00:25:12 and this you short this possible way I
  • 00:25:15 could think of writing as function
  • 00:25:16 except for maybe trimming out the white
  • 00:25:18 space here so this our error functions
  • 00:25:22 in its basics or with the course syntax
  • 00:25:25 that is to it and one advantage you see
  • 00:25:27 here right away is that you save
  • 00:25:29 characters that it allows you to write
  • 00:25:31 functions in a more concise and shorter
  • 00:25:33 way of course I can also use functions
  • 00:25:36 like this in let's say a callback so if
  • 00:25:41 I have my set timeout function here I
  • 00:25:44 may pass this function like this and
  • 00:25:46 then as the second argument to this
  • 00:25:48 timeout functions I pass the interval
  • 00:25:51 1000 milliseconds so to do something
  • 00:25:53 after one second now of course here
  • 00:25:56 returning something doesn't really sell
  • 00:25:58 safai so I will instead simply log hello
  • 00:26:01 and I'll also not get any arguments here
  • 00:26:04 so I'll just pass parenthesis like this
  • 00:26:09 and you autocomplete here is really
  • 00:26:11 helpful thank you so if I now hit run
  • 00:26:14 what do you think will happen
  • 00:26:17 I get hello after one second so this is
  • 00:26:20 a place where I could use error
  • 00:26:21 functions as well generally I can use
  • 00:26:24 error functions wherever I used normal
  • 00:26:27 functions before as me and they are just
  • 00:26:29 functions just a different syntax
  • 00:26:31 however there is one big addition to
  • 00:26:34 them that I haven't talked about yet
  • 00:26:35 it's concerning that this keyword in
  • 00:26:38 JavaScript as you might be aware the
  • 00:26:41 this keyword oftentimes is the root of a
  • 00:26:44 lot of problems or a lot of
  • 00:26:47 misunderstandings at least and it can
  • 00:26:50 lead to code behavior you were not
  • 00:26:52 expecting due to the fact how this is
  • 00:26:55 assigned to different parts of the third
  • 00:26:58 different objects and you want to learn
  • 00:27:00 more about that definitely Google for
  • 00:27:02 some articles on it or check out my
  • 00:27:04 chalice but bootcamp course where I will
  • 00:27:06 also explain how this works now here I'm
  • 00:27:09 assuming you are aware of how this works
  • 00:27:11 and I want to show you how it differs it
  • 00:27:14 with new syntax T that arrow functions
  • 00:27:18 and the old functions
  • 00:27:24 I'll create a new function the
  • 00:27:28 traditional style and in this function
  • 00:27:31 all I want to do is I want to log this
  • 00:27:34 now I'm going to comment out the time
  • 00:27:37 out for now because I first want to show
  • 00:27:39 something else it will also give this
  • 00:27:41 function a name let's name it FN if I
  • 00:27:44 recall FN here what would you expect to
  • 00:27:47 see if I hit run well we get the window
  • 00:27:50 object that's what we see here the
  • 00:27:53 object or the window holding our
  • 00:27:55 application the global scope this is –
  • 00:27:57 what this will refer to generally now
  • 00:28:01 I'll also rewrite this with the error
  • 00:28:05 function like this and here I will
  • 00:28:11 simply also log this now if I call this
  • 00:28:17 function here and I'll comment out the
  • 00:28:20 first function call what do you think
  • 00:28:22 I'll get if I hit run I get it with no
  • 00:28:25 object as well this doesn't change it's
  • 00:28:27 still referring to the global context
  • 00:28:29 because this is the context in which
  • 00:28:31 this variable or this function here is
  • 00:28:33 setup right it's in the global scope so
  • 00:28:36 it makes sense that this refers to the
  • 00:28:38 global scope to the window object first
  • 00:28:41 you're good now I'll get rid of all of
  • 00:28:44 that and all of my function calls here
  • 00:28:47 and I'll pull that up to the top next
  • 00:28:51 I'll go to HTML because I went to add a
  • 00:28:54 button here in my HTML body and I will
  • 00:28:57 just click to name a test I also want to
  • 00:29:01 select my body here or so I will or my
  • 00:29:05 button here excuse me so I will use a
  • 00:29:07 query selector here to quickly grab hold
  • 00:29:09 of it and at the bottom of my code what
  • 00:29:15 I want to do is I want to assign an
  • 00:29:18 event listener to this button and you'll
  • 00:29:21 soon see why I'm doing all of this I
  • 00:29:22 want to listen to the click event then I
  • 00:29:24 want to execute the functions OD
  • 00:29:27 normal the old-style function here if
  • 00:29:30 while this happens and you see we still
  • 00:29:34 print this year so now if I go to the
  • 00:29:37 output and I run my JavaScript
  • 00:29:38 code and I click this test button what
  • 00:29:41 do I expect to see remember before we
  • 00:29:43 saw the window object and this is what
  • 00:29:46 this should refer to so if I click test
  • 00:29:49 here what will we see we get an object
  • 00:29:53 but this is not even no object as you'll
  • 00:29:55 see if you scroll to the top
  • 00:29:57 it's our HTML button element so this
  • 00:30:00 actually refers to what called
  • 00:30:04 dysfunction that's what I explained in
  • 00:30:07 the JavaScript bootcamp course
  • 00:30:08 so therefore this no longer refers to
  • 00:30:10 the window but now it refers to the
  • 00:30:13 button as the button is the one calling
  • 00:30:15 this function the end now this might be
  • 00:30:19 the behavior you want but in most
  • 00:30:21 languages is this not the behavior you
  • 00:30:23 expect you wouldn't expect for this to
  • 00:30:26 change its context here and you refer to
  • 00:30:30 different things depending on what calls
  • 00:30:32 this function generally you would expect
  • 00:30:35 that this always refers to to what it
  • 00:30:38 refers when you define this function so
  • 00:30:40 the global scope in this case here so if
  • 00:30:43 I exchange my event listener to now use
  • 00:30:46 function to the arrow function here what
  • 00:30:50 do you think will now happen if I run
  • 00:30:51 with Jes and then click test now I
  • 00:30:56 actually get the window object as you
  • 00:30:58 can see if you scroll up all to the top
  • 00:31:00 here so the fat arrow function actually
  • 00:31:05 keeps its context and that is super
  • 00:31:07 important to understand because that
  • 00:31:10 really is the main difference saving
  • 00:31:12 some characters shorter syntax that's
  • 00:31:15 all nice but the key difference to
  • 00:31:17 understand is that this is treated or
  • 00:31:20 handled differently with the fat arrow
  • 00:31:23 functions
  • 00:31:24 you won't need bind or apply or call all
  • 00:31:27 those workarounds you used with es5 to
  • 00:31:30 get this to the right context but it
  • 00:31:33 will just keep the context in which this
  • 00:31:35 function is defined so if this refers to
  • 00:31:38 the window object here it will refer to
  • 00:31:41 that window object no matter how or
  • 00:31:43 where you call this at this function
  • 00:31:45 here this F and two function that's
  • 00:31:48 super important to take away and the
  • 00:31:50 other function
  • 00:31:51 the old-style which you may still use
  • 00:31:54 it's not bad by any means it's just
  • 00:31:56 important to understand here this will
  • 00:31:59 behave yeah I keep like you know it to
  • 00:32:01 behave in JavaScript it will change to
  • 00:32:03 what it refers and that is a super
  • 00:32:06 important key difference
  • 00:32:13 so that has been the fat arrow function
  • 00:32:16 I was really stressing this because it
  • 00:32:18 is a key addition in es6 now functions
  • 00:32:22 also guard some additional new tricks
  • 00:32:24 and what I'm showing you now applies to
  • 00:32:26 both the traditional functions with your
  • 00:32:29 function keyword as well as fat arrow
  • 00:32:31 functions but since it's a bit nicer to
  • 00:32:34 read I'll stick to the traditional
  • 00:32:36 functions of the function keyword here
  • 00:32:38 if I have my function is equal to here
  • 00:32:43 for example and this function expects a
  • 00:32:46 number and a number to compare to and
  • 00:32:48 then let's say it returns if number is
  • 00:32:51 equal to compare then I of course can't
  • 00:32:55 call this function and lock the result
  • 00:32:58 like this is equal to and then maybe 10
  • 00:33:02 and 10 if I now hit run unsurprisingly I
  • 00:33:09 get true however with es6 we can assign
  • 00:33:13 default values to arguments for example
  • 00:33:17 I could give compare a default value of
  • 00:33:20 0 so if I now call this function with
  • 00:33:24 only one argument 10 what do you think
  • 00:33:26 I'll get well I get false because now
  • 00:33:30 I'm trying to compare 10 which I'm
  • 00:33:33 passing this number to compare which I
  • 00:33:36 don't pass but which is set to 0 by
  • 00:33:38 default if I change default 10 and I had
  • 00:33:41 run again I of course get true again so
  • 00:33:46 this our default values now I can also
  • 00:33:50 assign a default value to number and now
  • 00:33:53 I can call this function without any
  • 00:33:55 arguments at all and I still get true
  • 00:33:58 now what happens if I do this I set
  • 00:34:02 number to be a default of 10 but compare
  • 00:34:06 doesn't get a default value and now I
  • 00:34:08 call this function with 10 what do you
  • 00:34:11 think will happen if I had run I get
  • 00:34:15 false and the reason for this is I'm
  • 00:34:18 still setting number to 10 because I'm
  • 00:34:22 only passing 1 argument in this world
  • 00:34:24 set the first argument and I can prove
  • 00:34:26 this by
  • 00:34:27 logging number and then also logging
  • 00:34:33 compare and I will set is the argument
  • 00:34:38 here to 11 to be different or T to be
  • 00:34:40 not equal to this default value so for
  • 00:34:44 now I'd run what do you think we'll get
  • 00:34:47 well we get 11 that's what I pass for
  • 00:34:50 number then we get undefined because
  • 00:34:53 we're not setting compare I'm not
  • 00:34:54 passing it I'm not setting a default
  • 00:34:56 value and then of course I get false
  • 00:34:58 because 11 is not equal to compare or to
  • 00:35:01 undefined so that's important to
  • 00:35:03 understand JavaScript will not pick the
  • 00:35:06 values which don't have a default value
  • 00:35:09 or the arguments which don't have a
  • 00:35:11 default value to assign the values you
  • 00:35:13 are passing it's still keeping the
  • 00:35:15 ordering and if you pass one argument to
  • 00:35:18 a function with two arguments
  • 00:35:19 well then only the first argument will
  • 00:35:21 get set that doesn't change it does
  • 00:35:24 allow you to skip the other arguments if
  • 00:35:26 you only want to set the first one that
  • 00:35:28 does work but not the other way around
  • 00:35:30 so if I now hit run you of course get 11
  • 00:35:34 that's what we pass for number and then
  • 00:35:36 10 which is default for comparator we
  • 00:35:39 may not only do this we may also do some
  • 00:35:42 calculations here like 10 divided by 2
  • 00:35:45 for example and if I hit right now we
  • 00:35:48 see that as 5 how much sense that ever
  • 00:35:52 may make but it's possible but an
  • 00:35:54 interesting thing is you can also use
  • 00:35:56 the other arguments like this number so
  • 00:36:00 now I'm setting compare equal to number
  • 00:36:02 and what do you therefore expect to have
  • 00:36:05 my forehead run I get 1111 and of course
  • 00:36:09 true because I'm always sitting compare
  • 00:36:11 equal to number if no distinct value is
  • 00:36:14 provided if I do provide a separate
  • 00:36:16 value for compare and now I hit run well
  • 00:36:21 we see we're still overwriting this it's
  • 00:36:23 just a default value and we are able to
  • 00:36:26 assign a different or another argument
  • 00:36:29 as our default value we may also assign
  • 00:36:33 some kind of variable we have outside of
  • 00:36:36 this let's say we have a which is 100
  • 00:36:38 and I do this what if
  • 00:36:41 will happen if I now it run well now
  • 00:36:44 compare is 100 so we may use our
  • 00:36:46 variables from outside of this function
  • 00:36:49 as well now with that being said what do
  • 00:36:52 you think will happen if I do this I
  • 00:36:54 said compared to 10 and I said number to
  • 00:36:58 be equal to compare and then I'm calling
  • 00:37:01 this function without any arguments what
  • 00:37:05 do you think we'll see will we see true
  • 00:37:07 because all is 10 we get an error that
  • 00:37:11 compare is not defined and the reason
  • 00:37:14 for this is you can think of this
  • 00:37:16 function argument list here as well just
  • 00:37:21 some lines of code only wrapped in one
  • 00:37:23 line of code and what we're trying to do
  • 00:37:25 here is we're trying to use a variable
  • 00:37:27 compare before it's being set here so
  • 00:37:30 this does not work we can't set
  • 00:37:33 something equal to something which
  • 00:37:34 doesn't exist yet as compared will only
  • 00:37:36 be created in the second step in the
  • 00:37:38 second argument so this does not work
  • 00:37:41 but the other way around test because if
  • 00:37:44 we now set compare equal to number
  • 00:37:47 number has already been defined before
  • 00:37:49 and therefore if we run this we get true
  • 00:37:52 and both values are 10 of course so
  • 00:37:54 there are default values at work and of
  • 00:37:57 course the great benefit of default
  • 00:37:59 values are that you can write more
  • 00:38:00 dynamic functions which might work in
  • 00:38:03 well different circumstances which don't
  • 00:38:06 necessarily need for example free
  • 00:38:09 parameters to be passed to them they
  • 00:38:11 might work with one and the other tools
  • 00:38:13 are set by default and so on and you can
  • 00:38:15 really play around with that and try out
  • 00:38:18 where it works for you what you can pass
  • 00:38:20 and how oft that fits together but
  • 00:38:23 together with arrow functions the
  • 00:38:25 default values are really a big addition
  • 00:38:27 to chava script functions and certainly
  • 00:38:30 helpful in your day to day coding
  • 00:38:37 so we have a look at lat and cons and we
  • 00:38:40 also had a look at functions we also had
  • 00:38:43 some nice additions or changes to object
  • 00:38:47 literals what is an object literal well
  • 00:38:50 I'll give you a brief refresher we have
  • 00:38:52 an object and this is an object literal
  • 00:38:54 if we create it like this with quality
  • 00:38:57 braces we might have a name inside of it
  • 00:38:59 which is set up like this and we might
  • 00:39:01 have an age and of course we can print
  • 00:39:05 our object like that and if I run we see
  • 00:39:09 the object great so that is what we know
  • 00:39:11 and how we know it however JavaScript
  • 00:39:15 where years six added some additions for
  • 00:39:18 example you might have a variable an ax
  • 00:39:21 and also the variable age which is set
  • 00:39:26 let's say 25 and now what do you think
  • 00:39:30 will happen if I remove that so I'm not
  • 00:39:34 assigning any values in here what I
  • 00:39:37 think will happen if I hit run well
  • 00:39:41 actually the object will take T values
  • 00:39:44 from the surrounding variables so if
  • 00:39:47 we're not specifying values in here to
  • 00:39:49 initialize this object with it will
  • 00:39:52 automatically look if it has variables
  • 00:39:54 declared before the Declaration of this
  • 00:39:56 object here which match the property
  • 00:40:00 names here so name name and age and age
  • 00:40:03 and it will automatically take those
  • 00:40:05 values so that is a good way to quickly
  • 00:40:08 initialize a an object with the values
  • 00:40:11 of some variables you already have in
  • 00:40:13 your code of course you can still
  • 00:40:16 override this and I could still set name
  • 00:40:18 to max if I now hit run we see that H is
  • 00:40:23 still 25 but the name was overwritten so
  • 00:40:26 this still works it's just a shortcut
  • 00:40:28 you may use you may not only define
  • 00:40:31 properties this way you can also define
  • 00:40:33 methods or functions so wife for example
  • 00:40:36 you could specify greet here and
  • 00:40:40 priority you would do it like this
  • 00:40:42 function and then your function code now
  • 00:40:45 you may simply add parentheses here and
  • 00:40:47 then you function body right away and
  • 00:40:49 then here you
  • 00:40:51 and print out this name for example and
  • 00:40:56 then they start H now if I call object
  • 00:41:05 greet what do you think we'll see you
  • 00:41:11 got max 25 and so this name refers to
  • 00:41:16 the name in here and this age refers to
  • 00:41:19 our age with which is set with the
  • 00:41:22 variable outside of this code there have
  • 00:41:25 also been some other additions for
  • 00:41:27 example you already knew that you could
  • 00:41:29 create property names as string as well
  • 00:41:32 you can also do this for methods so I
  • 00:41:36 can wrap greet in quotation marks here
  • 00:41:39 and of course the parentheses have to
  • 00:41:42 stay out that outside of them as they
  • 00:41:43 are not part of the name but instead
  • 00:41:45 they indicate that this is a method and
  • 00:41:47 now if I want to call this function
  • 00:41:49 though I have to use square brackets to
  • 00:41:52 access this property name your greet
  • 00:41:56 since it now is a string so if I now it
  • 00:41:59 run this still works this of course also
  • 00:42:03 allows you to use names you would not be
  • 00:42:06 able to use without quotation marks like
  • 00:42:08 greet me with the white space in between
  • 00:42:10 if I now it run you see this works and
  • 00:42:15 of course this would not work if I were
  • 00:42:17 not to have my quotation marks here
  • 00:42:19 since this is not a valid property name
  • 00:42:22 as well I might may not have a white
  • 00:42:24 space in there as you can see we get an
  • 00:42:26 error number cool edition our dynamic
  • 00:42:30 fields so I'm going to switch this back
  • 00:42:35 to be a string let's say here like this
  • 00:42:39 get rid of the dot so that this runs
  • 00:42:42 again and now dynamic fields are an
  • 00:42:45 interesting thing to you let's say I
  • 00:42:47 have a variable here and I name this age
  • 00:42:51 field and it should be a string H now I
  • 00:42:57 can go into my object and with square
  • 00:43:00 brackets that's important that's descent
  • 00:43:02 axe here I can
  • 00:43:04 to h-field and now what this does is it
  • 00:43:08 does not create a property named square
  • 00:43:12 brackets age field but instead it will
  • 00:43:15 look for this age field variable and use
  • 00:43:17 this the string here as a property name
  • 00:43:21 and I can show this by printing the
  • 00:43:24 object out of the console now what do
  • 00:43:28 you think we'll see if I had run we get
  • 00:43:33 an error and the reason for this is now
  • 00:43:36 it's not able to automatically take this
  • 00:43:39 value and of course it isn't because
  • 00:43:42 string age is not the same as this
  • 00:43:45 variable name age so in order to get rid
  • 00:43:48 of this error I will have to manually
  • 00:43:50 assign a value here again so now if I
  • 00:43:53 had run you see we now print out this
  • 00:43:56 object and then max 28 here so we are
  • 00:44:00 able to dynamically add a property name
  • 00:44:03 age as you can see here and don't be
  • 00:44:06 confused that you will not see the
  • 00:44:07 quotation marks here you are still
  • 00:44:10 accessing those values wire quotation
  • 00:44:12 marks like you see here with the
  • 00:44:14 function call but as I said it's not
  • 00:44:17 able to automatically infer this value
  • 00:44:19 here Oh anymore since well aging
  • 00:44:22 quotation marks is not the same as this
  • 00:44:24 so this is how you can dynamically
  • 00:44:27 assign certain property values and of
  • 00:44:30 course you can also access those values
  • 00:44:33 so let's see what happens if I print the
  • 00:44:35 age of my object here and I'll get rid
  • 00:44:37 of the greeting for now so for now it
  • 00:44:40 run this still works and you also saw
  • 00:44:44 that it worked because here in my
  • 00:44:46 function hole I'm still accessing this
  • 00:44:48 age so I can still use dot notation for
  • 00:44:52 this field name since it doesn't have
  • 00:44:54 any invalid characters in it it's not
  • 00:44:57 like the greet me function here so I can
  • 00:45:00 still access it with dot age that
  • 00:45:04 doesn't work and that's important to
  • 00:45:06 understand now of course you can also
  • 00:45:09 access it like this H field the variable
  • 00:45:14 which holds the property name
  • 00:45:15 if I now hit run you also see 28 and
  • 00:45:19 that is one of the important things here
  • 00:45:21 you can create properties dynamically
  • 00:45:24 with the names stored in variables and
  • 00:45:26 then you can reuse those variables to
  • 00:45:28 access those properties probably a use
  • 00:45:31 case you will have in your apps if you
  • 00:45:34 work with that kind of property creation
  • 00:45:37 that you want to access your property
  • 00:45:39 names in the variables later on – and
  • 00:45:41 you can do this you can pass it to this
  • 00:45:44 square brackets notation to access your
  • 00:45:47 fields in this object so that were some
  • 00:45:51 additions to the way you work with
  • 00:45:53 object literals the fact that you have
  • 00:45:56 these shortcuts to initialize your
  • 00:45:59 fields or to set up functions
  • 00:46:01 yes you can put your field names here
  • 00:46:04 into quotation marks your function field
  • 00:46:08 names that you also have those dynamic
  • 00:46:11 fields like the age field here so a lot
  • 00:46:13 of little additions which might come in
  • 00:46:16 handy when you're actually writing your
  • 00:46:18 applications
  • 00:46:24 now in this lecture I want to introduce
  • 00:46:27 the rest operator now what is the rest
  • 00:46:30 operator all best show it by presenting
  • 00:46:33 some code so let's say we have an array
  • 00:46:36 of numbers 1 2 3 4 5 like this and then
  • 00:46:42 we will create a function which we'll
  • 00:46:44 call sum up and this function should
  • 00:46:48 somehow get this array or it should get
  • 00:46:52 a list of numbers and then I want to
  • 00:46:56 loop through them so let I equal 0 is
  • 00:46:59 smaller than 2 ad should be D array I
  • 00:47:05 get here to add length I plus plus and
  • 00:47:09 then I will simply have a result
  • 00:47:13 variable which takes the value of the
  • 00:47:18 current iteration L of course I'll
  • 00:47:20 initialize result here which should be 0
  • 00:47:23 at the beginning and then I will return
  • 00:47:26 result and if I now call this function
  • 00:47:29 here sum up and I pass numbers this
  • 00:47:34 numbers array what do you think will see
  • 00:47:37 if I had run we see an error because it
  • 00:47:41 is extremely helpful to write this
  • 00:47:46 correctly as well as to use a semicolon
  • 00:47:49 here's and now if I'd run we see 15
  • 00:47:52 which is 5 plus 4 is 9 plus 3 is 12
  • 00:47:56 14 15 ok so it works that's great now
  • 00:47:59 sometimes there are cases where you
  • 00:48:01 don't have the numbers you want to add
  • 00:48:03 or you want to work with the values you
  • 00:48:05 want to work with in the rain instead we
  • 00:48:08 have a list of values and you want to be
  • 00:48:10 able to pass this list of values so
  • 00:48:13 let's say I have 100 10 and 20 and this
  • 00:48:16 is no array notice that it's just a list
  • 00:48:19 of values these are free arguments
  • 00:48:21 however I'm only expecting one argument
  • 00:48:23 and by some fun sum up function also has
  • 00:48:26 no chance of knowing how many arguments
  • 00:48:29 it will get might be one might be 100 it
  • 00:48:32 doesn't know so I can't write it with
  • 00:48:35 let's say our
  • 00:48:36 one and ark two and then add them up
  • 00:48:39 that is not possible because I would
  • 00:48:41 need to know how many arguments I get
  • 00:48:43 that is where the rest parameter comes
  • 00:48:46 in it allows me to still get to add this
  • 00:48:50 array but since I'm not passing an array
  • 00:48:52 I add three dots in front of it the
  • 00:48:55 three dots here are the rest parameter
  • 00:48:57 and the free dots will actually convert
  • 00:49:00 this list of numbers into an array of
  • 00:49:03 numbers so if I now hit run
  • 00:49:07 you see one hundred and thirty and to
  • 00:49:10 make this clearer
  • 00:49:11 I'll even print the to add argument here
  • 00:49:14 and if I now it run you see that this
  • 00:49:19 actually is an array even though I did
  • 00:49:20 not pass one you also solve the behavior
  • 00:49:24 in the past in es5 already you have for
  • 00:49:28 example the math object with the max
  • 00:49:30 function to get the maximum value now
  • 00:49:33 this function also expects to get a list
  • 00:49:35 of values and not an array so internally
  • 00:49:38 this function was already using
  • 00:49:40 something like this to well be dynamic
  • 00:49:44 or to be flexible regarding the number
  • 00:49:47 of arguments it gets passed and now
  • 00:49:49 you're able to write something like this
  • 00:49:50 on your own with the rest parameter
  • 00:49:52 which simply takes a list of arguments
  • 00:49:54 doesn't have to be numbers could be
  • 00:49:56 strings could be mixed values and then
  • 00:49:58 just packs them together in an array so
  • 00:50:02 therefore if I for example do change one
  • 00:50:05 element here to be of type string if I
  • 00:50:08 now it run well you see we got it also
  • 00:50:11 packed together into an array so of
  • 00:50:14 course the value now differs because it
  • 00:50:17 first added 110 and then should just add
  • 00:50:20 a 20 in a string here so therefore we
  • 00:50:24 got this string value itself the correct
  • 00:50:26 result of the addition but it still
  • 00:50:28 works we are able to pass anything here
  • 00:50:30 and convert it into an array with the
  • 00:50:32 rest operator in this function argument
  • 00:50:35 here that's important we can use the
  • 00:50:37 rest operator in this function argument
  • 00:50:40 call
  • 00:50:45 now kind of the opposite of the rest
  • 00:50:48 operator is the spread operator actually
  • 00:50:51 it looks exactly the same but you use it
  • 00:50:54 in different places where do you use it
  • 00:50:57 let me show you I'll first create a
  • 00:51:00 variable variable numbers which is again
  • 00:51:03 array of numbers but this time I want to
  • 00:51:08 get the maximum now I was already
  • 00:51:12 mentioning that you already have the max
  • 00:51:15 function on the math object but if you
  • 00:51:19 try to pass numbers here what do you
  • 00:51:21 think it will get if you'd run not a
  • 00:51:25 number because this max method here
  • 00:51:28 actually expects to get a list of
  • 00:51:31 arguments a list of numbers and not an
  • 00:51:34 array now that's bad because we only
  • 00:51:36 have an array and in the past you would
  • 00:51:39 have to manually split it up somehow and
  • 00:51:42 make sure that you make a list of
  • 00:51:44 arguments out of that now with the
  • 00:51:46 spread operator I add my three dots
  • 00:51:48 again and remember the difference before
  • 00:51:51 we had in our own function in the
  • 00:51:53 argument list now we have it in a
  • 00:51:56 function call in the well list where we
  • 00:52:00 pass parameters to the functions on the
  • 00:52:02 exact opposite place now here with the
  • 00:52:05 free dots if I now hit run it works and
  • 00:52:09 why does it work well let's have a look
  • 00:52:12 what happens behind the scenes if I
  • 00:52:15 print out numbers with the spread
  • 00:52:18 operator in front of them and I hit run
  • 00:52:21 we see that it actually kind of loops
  • 00:52:24 through this array and prints all those
  • 00:52:27 numbers so it takes the array and splits
  • 00:52:29 it up into individual values that is
  • 00:52:32 what you spread operator does and
  • 00:52:33 therefore it's the opposite of the
  • 00:52:35 arrestee operator which takes a list of
  • 00:52:37 values and creates an area off it so
  • 00:52:39 rest and spread look exactly the same
  • 00:52:41 they differ by the place where you use
  • 00:52:43 them rest is used if you write your own
  • 00:52:46 function in the list of arguments your
  • 00:52:49 function expects and spread is used in
  • 00:52:52 your rather code to basically split up
  • 00:52:56 an array into a list of
  • 00:52:58 values
  • 00:53:04 es six also introduced a new loop to
  • 00:53:07 work with remember in es5 you already
  • 00:53:10 had the for loop you had the while loop
  • 00:53:12 to do while loop anta for in loop to
  • 00:53:15 loop through keys and object with es6
  • 00:53:19 you also have the for off loop in order
  • 00:53:23 to demonstrate this I'll create a new
  • 00:53:25 where variable here test results which
  • 00:53:27 is an array and here I'll just have some
  • 00:53:29 floating-point numbers and of course it
  • 00:53:32 will work with any values you might have
  • 00:53:34 here so that's just an example and then
  • 00:53:37 I can create this for loop like a
  • 00:53:39 traditional for loop I'll have my test
  • 00:53:42 result
  • 00:53:43 so no plural here just a convention this
  • 00:53:47 name is course totally up to you off
  • 00:53:49 test results so the second part here is
  • 00:53:53 the value or the variable through which
  • 00:53:56 I want to loop through those values of
  • 00:53:58 this array and the first one is to which
  • 00:54:00 individual element of this array will be
  • 00:54:03 assigned to in each iteration of this
  • 00:54:06 loop so now I can for example simply
  • 00:54:10 block test result here and I saw that I
  • 00:54:14 have a typo so I'll quickly repair this
  • 00:54:17 and if I now hit run what do you think
  • 00:54:20 will happen well now I get the values
  • 00:54:24 printed out of course this could have
  • 00:54:25 been achieved before with a for loop but
  • 00:54:28 this is a shorter syntax and it's
  • 00:54:30 perfect for looping through errors and
  • 00:54:32 that is what it's there for
  • 00:54:33 to quickly grab the individual elements
  • 00:54:36 of an array and do something with them
  • 00:54:38 here in this block of the for loop so
  • 00:54:41 let's see for off loop being added
  • 00:54:43 pretty straightforward but also pretty
  • 00:54:45 useful
  • 00:54:50 another interesting addition to es6 our
  • 00:54:53 template literals now template literals
  • 00:54:56 are basically kind of strings with extra
  • 00:55:01 features and I will show that to you so
  • 00:55:03 first create a traditional variable here
  • 00:55:06 a name with the value max and of course
  • 00:55:10 I could print it out but I'm sparing you
  • 00:55:12 this because well it's pretty
  • 00:55:14 straightforward what you would see then
  • 00:55:16 I will create another variable which
  • 00:55:17 I'll name description and here I want to
  • 00:55:20 use a template literal I do this by
  • 00:55:23 using the backtick that's the character
  • 00:55:26 you've never heard before in on your
  • 00:55:29 keyboard on your keyboard it's this
  • 00:55:34 angled quotation mark here so it is not
  • 00:55:38 the normal single quotation mark but the
  • 00:55:40 bit leaning to the left quotation mark
  • 00:55:44 you need two of them and then you might
  • 00:55:46 write multi-line strings for example
  • 00:55:48 like this if I now print this
  • 00:55:52 description here and I hit run you see
  • 00:55:59 it as this literal now that is a big
  • 00:56:02 difference already because with normal
  • 00:56:04 strings of course this would throw an
  • 00:56:06 error if I try to do something like this
  • 00:56:08 you see we get an syntax error so that
  • 00:56:12 already is an addition it allows us to
  • 00:56:14 write multi-line strings like that but
  • 00:56:17 it also has more in its pocket than
  • 00:56:19 chess debt for example we might use the
  • 00:56:23 variables inside of our template literal
  • 00:56:26 so I might write hello I'm and then
  • 00:56:31 notice also that I don't have to escape
  • 00:56:33 here since I use this backtick notation
  • 00:56:36 and then I can use the following syntax
  • 00:56:38 to print out a variable which is defined
  • 00:56:42 outside of this template literal for
  • 00:56:44 example my name I use a dollar sign for
  • 00:56:47 this and then curly braces and inside of
  • 00:56:50 those curly braces the name of the
  • 00:56:52 variable I want to print so name here if
  • 00:56:54 I now it run what do you think we'll see
  • 00:56:57 we see hello I max so with this syntax
  • 00:57:00 I'm able to insert a variable inside
  • 00:57:04 my string here like this without having
  • 00:57:06 to exit out of my string Plus value plus
  • 00:57:09 quotation marks string like before here
  • 00:57:12 you have one text and you can dynamic
  • 00:57:15 the output values that's where the name
  • 00:57:17 template literals comes from it kind of
  • 00:57:21 also might resemble if you're using that
  • 00:57:24 some templating engines you might use
  • 00:57:27 when doing some server-side or some
  • 00:57:29 general web development where you would
  • 00:57:31 also have special syntax to insert
  • 00:57:34 values in your HTML code if that is
  • 00:57:38 something you're aware of your or your
  • 00:57:40 using so that is kind of comparable here
  • 00:57:43 and with that we have a very quick and
  • 00:57:45 good way to write more complex text and
  • 00:57:48 store in a variable use multi-line and
  • 00:57:50 so on and also output our variables
  • 00:57:53 inside of it inside of this template
  • 00:57:57 expression you might also add text again
  • 00:58:00 so like multiple exclamation marks so if
  • 00:58:06 I now hit run you see them here so even
  • 00:58:10 though that's inside of this template
  • 00:58:11 expression inside of this curly brace
  • 00:58:14 block here
  • 00:58:15 well I added like we used to with a plus
  • 00:58:18 sign and any string so in the end what
  • 00:58:20 we're doing here is between those column
  • 00:58:23 prices you have to enter something which
  • 00:58:25 can be resolved to to a string and then
  • 00:58:28 you might do whatever you want to do you
  • 00:58:30 run some calculations and so on as long
  • 00:58:32 as the result of whatever you're doing
  • 00:58:34 here inside of the curly braces returns
  • 00:58:37 a string that's really important by the
  • 00:58:40 way if for some reason you have a
  • 00:58:43 template literal where you need to
  • 00:58:46 actually print this out instead of
  • 00:58:49 replacing it with this variable and so
  • 00:58:51 you can simply escape it with a
  • 00:58:53 backslash so now if I had run you'll see
  • 00:58:57 the whole template expression here and
  • 00:59:00 I'm not actually replacing name with max
  • 00:59:03 so that is how you can escape it if you
  • 00:59:05 need to and that our template literals a
  • 00:59:08 nice little addition to allow you to
  • 00:59:10 quickly write more complex texts and
  • 00:59:12 store them in variables as well as
  • 00:59:14 access different variables surrounding
  • 00:59:16 those
  • 00:59:17 plate literals
  • 00:59:22 now the last topic I wanna touch in this
  • 00:59:25 module is destructuring destructuring
  • 00:59:28 allows you to do what the name implies
  • 00:59:30 2d structure a complex object like an
  • 00:59:33 object or an array into simpler ones and
  • 00:59:36 I'll show you how this works I'll start
  • 00:59:39 with an array numbers and those should
  • 00:59:42 be one two three let's say and then the
  • 00:59:45 structuring works like this let's say I
  • 00:59:47 want to have 1 & 2 now of course I could
  • 00:59:51 set a equal to numbers index 0 and then
  • 00:59:57 I could do the same for B and access the
  • 01:00:02 item and D index 1 and then I could
  • 01:00:04 print out a P that would work this
  • 01:00:06 structuring gives you a shorter syntax
  • 01:00:08 use square brackets to the structure an
  • 01:00:12 array for objects as you will see later
  • 01:00:13 you use curly braces then the values you
  • 01:00:19 want to while already variable names you
  • 01:00:21 want to fill with values and then well
  • 01:00:24 the object you want to destructure
  • 01:00:26 numbers so that of course is syntax you
  • 01:00:31 probably haven't seen before because
  • 01:00:32 it's new and prior to es6 you didn't use
  • 01:00:37 square brackets on this side of the
  • 01:00:39 equal sign right you would use it on the
  • 01:00:41 right side to create an array but on the
  • 01:00:43 left that certainly is new now let me
  • 01:00:46 show you what this actually does by
  • 01:00:48 printing a and then also printing B and
  • 01:00:52 I we have the idea you already can guess
  • 01:00:55 what will happen but what do you think
  • 01:00:57 will happen if I hit run you see 1 & 2
  • 01:01:00 so this is a quick way to extract values
  • 01:01:03 from an array now of course all the I
  • 01:01:05 could add C to get the third value as
  • 01:01:07 well the question is what happens with
  • 01:01:10 the original array is it destroyed or is
  • 01:01:14 it changed by this restructuring or are
  • 01:01:16 we just retrieving copies of those
  • 01:01:18 values instead of actually pulling them
  • 01:01:21 out so what do you think we'll see if I
  • 01:01:23 now hit run well as you can see the
  • 01:01:26 original array still persists it's not
  • 01:01:28 changed we're just getting copies of the
  • 01:01:31 values you're pulling out with the
  • 01:01:33 structuring another interesting question
  • 01:01:36 of
  • 01:01:36 it is what if I actually pull out more
  • 01:01:40 values than this array has and now I
  • 01:01:42 want to print D here what do you think
  • 01:01:45 I'll get if I now hit run well I get
  • 01:01:50 undefined because remember you can think
  • 01:01:53 of a JavaScript array as kind of an
  • 01:01:56 infinite array where all the values you
  • 01:01:58 didn't set are just undefined values so
  • 01:02:01 you can pull out as many values as you
  • 01:02:03 want you will get them their chest and
  • 01:02:06 defined a different ways also to use the
  • 01:02:10 row DD respirometer here you may use it
  • 01:02:13 like this B and if I now print B what do
  • 01:02:19 you think I'll get if I had run I get a
  • 01:02:23 new array so with the rest parameter I'm
  • 01:02:26 basically pulling out all the remaining
  • 01:02:30 values which I didn't destructure before
  • 01:02:32 like a and put them into a new array
  • 01:02:35 which of course also is possible this is
  • 01:02:38 a quick way to reach you to retrieve a
  • 01:02:40 part off an array of course you will
  • 01:02:42 also have splice and slice for such
  • 01:02:44 operations but as you can see it is a
  • 01:02:47 really quick way to get certain values
  • 01:02:50 if you will need to get them needless to
  • 01:02:53 say the structuring of course also works
  • 01:02:55 with array that have strings or
  • 01:02:56 something like this so if a now it run
  • 01:02:58 this still works the same now back to
  • 01:03:01 the a B example and I also retrieve C
  • 01:03:06 and D like before now you already saw
  • 01:03:09 that if I run this D will be undefined
  • 01:03:11 of course with destructuring you can
  • 01:03:14 also assign default values like this
  • 01:03:16 default if I now hit run you see default
  • 01:03:21 if I also assign default to a here and
  • 01:03:25 then I hit run what do you think will
  • 01:03:27 happen we see one so that's kind of a
  • 01:03:31 mixture of functions with default values
  • 01:03:34 and of restructuring here so basically
  • 01:03:37 you are able to prepare for the case
  • 01:03:41 that a value you want to pull out is
  • 01:03:43 actually undefined in this case you
  • 01:03:46 would get whatever default
  • 01:03:47 you set up here and again this could
  • 01:03:49 also be a number or any type but if the
  • 01:03:54 value is available like here with a
  • 01:03:56 where we actually can pull out one
  • 01:03:58 melody fault will not be used and
  • 01:04:00 instead we get the actual value we pull
  • 01:04:02 out with the structuring the structuring
  • 01:04:05 can also be used for something else you
  • 01:04:08 can use it to quickly swap variables so
  • 01:04:11 let's say we have a which is five and we
  • 01:04:13 have B which is 10 and we just want to
  • 01:04:16 swap that so that a is 10 and B is 5
  • 01:04:19 well before you would need a helper
  • 01:04:22 variable C to temporarily store one
  • 01:04:24 value then set one variable to the other
  • 01:04:26 and then set tac-2 the other one and so
  • 01:04:29 on
  • 01:04:30 so it was possible but it had some extra
  • 01:04:32 steps now it's as simple as this use
  • 01:04:35 destructuring with the variable names
  • 01:04:37 you already define so B and a and you
  • 01:04:41 assign it like this a and B so we're
  • 01:04:47 kind of destructuring on both sides over
  • 01:04:49 here we're creating an array to be
  • 01:04:51 precise we're constructing an array and
  • 01:04:53 then we're instantly D structuring it so
  • 01:04:56 here we're creating an area where a is
  • 01:04:58 the first element and B is the second
  • 01:05:00 and then we're deconstructing it q well
  • 01:05:03 basically swap the values so therefore
  • 01:05:06 if I now log B and of course also log a
  • 01:05:14 if I run I get an error because I
  • 01:05:18 shouldn't use let here thank you so now
  • 01:05:20 I've had run you see B which is the
  • 01:05:24 first one we print is now actually 5
  • 01:05:26 even though we set it to 10 before and a
  • 01:05:29 is 10 so the values actually were
  • 01:05:31 swapped and this is a real quick way to
  • 01:05:33 do this in case you will have some code
  • 01:05:36 where you need to swap certain values T
  • 01:05:38 structuring really makes this easy
  • 01:05:40 another thing you can do with
  • 01:05:42 destructuring to go back to the array of
  • 01:05:45 numbers here you can also ignore certain
  • 01:05:49 values so let's say I want you pull out
  • 01:05:56 some values but not all of them I want
  • 01:05:59 to put
  • 01:06:00 one and the third one well then I just
  • 01:06:02 leave an empty space like that
  • 01:06:04 and set it equal to numbers and then I
  • 01:06:08 log a and C I can also use the log
  • 01:06:11 function like this if I now it run what
  • 01:06:13 do you think will get I get one and free
  • 01:06:16 so two will simply left out as I
  • 01:06:19 reserved an empty space here in the rest
  • 01:06:22 operator or is destructuring operator
  • 01:06:25 here so I've simply left out this space
  • 01:06:28 where I could assign B but I don't have
  • 01:06:30 to and therefore I'm able to just pull
  • 01:06:32 out specific places in the array
  • 01:06:35 I want to destructor you can also do
  • 01:06:37 something like this you don't even need
  • 01:06:40 to declare your array you can
  • 01:06:43 immediately for example the structure it
  • 01:06:47 like this a and B if I now hit run what
  • 01:06:50 do you think will get one and two so now
  • 01:06:54 I'm not even creating this array I'm not
  • 01:06:56 declaring it I'm not sending it to a its
  • 01:06:59 own variable instead I'm immediately
  • 01:07:01 structuring it to just get a and B out
  • 01:07:04 of it now this is kind of a way to also
  • 01:07:06 quickly create a and B variables
  • 01:07:09 initialized with one and two where if
  • 01:07:10 you think of this if you think of it
  • 01:07:12 like this so that is another way to use
  • 01:07:16 destructuring
  • 01:07:22 so now we always considered arrays and
  • 01:07:25 destructuring is also available for
  • 01:07:27 objects basically it works exactly the
  • 01:07:30 same and all the tricks or things that
  • 01:07:32 showed you are also true for objects but
  • 01:07:35 I still want to show it so I'll create
  • 01:07:37 an object and yes like of the array I
  • 01:07:40 don't have to create it and then
  • 01:07:43 restructure it I could do it all in one
  • 01:07:45 step like you saw it in the last lecture
  • 01:07:47 on arrays but I'll still do it in two
  • 01:07:49 steps just to make it a bit clearer
  • 01:07:51 clearer so I'll have a name Max and an
  • 01:07:56 age 27 and next I want you to destructor
  • 01:08:01 this so I want to get name and age out
  • 01:08:05 of this object now this would be as you
  • 01:08:07 use it with arrays with the square
  • 01:08:09 brackets however here we're
  • 01:08:11 destructuring an object and there were
  • 01:08:12 four we have to change this we have to
  • 01:08:15 use curly braces here now so now I can
  • 01:08:18 do structure it like this and this will
  • 01:08:21 pull out the name @h field from my
  • 01:08:23 object and store it in individual
  • 01:08:25 variables so I can now print name and
  • 01:08:30 age like this if I now it run what do
  • 01:08:33 you think I'll see well of course I get
  • 01:08:37 max and 27 so this works exactly as I
  • 01:08:40 just described it if I also have a greet
  • 01:08:43 function here like this do you think I
  • 01:08:50 also can pull out this greet function
  • 01:08:52 let's say simply by doing that and let's
  • 01:08:56 leave out the middle one chest for
  • 01:08:58 styling reasons if I now call greet like
  • 01:09:01 this do you think this will work what
  • 01:09:03 will happen if I had run this doesn't
  • 01:09:07 work because for styling reasons we
  • 01:09:10 could do this in the array where we have
  • 01:09:12 a clear order with an object we can't
  • 01:09:15 just skip a certain value here so I
  • 01:09:19 simply can leave it out though because
  • 01:09:21 we're not having ordered properties here
  • 01:09:24 we are identifying them by name anyways
  • 01:09:26 so I can do this
  • 01:09:28 if I now hit run what do you think will
  • 01:09:30 happen now you'll see hello there so
  • 01:09:34 this does work
  • 01:09:35 but it's important to understand why
  • 01:09:37 this syntax didn't work and the reason
  • 01:09:41 for this is as I said we're already
  • 01:09:43 referencing them by a name not by
  • 01:09:46 position in the air a we were
  • 01:09:48 deconstructing them by position now
  • 01:09:51 we're deconstructing this object by name
  • 01:09:54 therefore if we have name one year for
  • 01:09:56 example this also will create one and
  • 01:10:00 now it run this also wouldn't work
  • 01:10:02 because greet one isn't found as a
  • 01:10:05 property in this object those names here
  • 01:10:07 have to match that is really important
  • 01:10:10 to understand now explain that names
  • 01:10:13 have to match so name has to match name
  • 01:10:15 and greet has to match greet in order to
  • 01:10:17 successfully deconstruct this object but
  • 01:10:20 sometimes you want with a different name
  • 01:10:22 for this variable outside of this object
  • 01:10:25 then you are using inside of this object
  • 01:10:27 that's why when deconstructing objects
  • 01:10:31 or destructuring
  • 01:10:32 objects you can use a liaises so for
  • 01:10:35 example I could give greet and Aaliyah's
  • 01:10:37 of hello and then I could rename this
  • 01:10:40 function here too and if I now it run it
  • 01:10:44 still works because now greet here
  • 01:10:47 refers to the property name inside of
  • 01:10:49 the object but hello will be the name I
  • 01:10:51 use outside of this object like here and
  • 01:10:55 if I still try to use greet will that
  • 01:10:58 still work what do you think of what
  • 01:10:59 will happen if I hit run this won't work
  • 01:11:02 anymore because now Hello is the only
  • 01:11:04 name we may use outside of this object
  • 01:11:07 so we have to stick to it
  • 01:11:15 so that was destructuring on both arrays
  • 01:11:18 as well as objects a really powerful
  • 01:11:21 tool to quickly weldie structure a
  • 01:11:23 certain object or array to get certain
  • 01:11:26 values keep in mind that a you're not
  • 01:11:30 changing the original objects or arrays
  • 01:11:33 or arrays and be that basically you can
  • 01:11:37 do the same for rays and objects but
  • 01:11:41 there is this important difference that
  • 01:11:42 for object D structuring you pull out
  • 01:11:47 elements by their property name for
  • 01:11:50 array D structuring you pull them out by
  • 01:11:53 position that is really key to
  • 01:11:55 understand and to take away here and
  • 01:11:57 with that you're of course free to play
  • 01:11:59 around with that and see what else you
  • 01:12:01 can do with D structuring and use that
  • 01:12:03 syntax to be useful for you which a lot
  • 01:12:06 of fun with that and I'll see you in the
  • 01:12:09 next module
  • 01:12:16 so if that we finished is first module
  • 01:12:19 on the syntax changes in editions decor
  • 01:12:22 syntax changes in addition cs6 brings we
  • 01:12:25 had to look at Latin Const we had a look
  • 01:12:28 at the new function de fat arrow
  • 01:12:30 functions and default arguments we had a
  • 01:12:34 look at the additions to the literal
  • 01:12:36 notation of objects where we could use
  • 01:12:39 strings as names for our object methods
  • 01:12:43 for example we also had a look at rest
  • 01:12:46 and spread and add template literals so
  • 01:12:50 multi-line strings with values variable
  • 01:12:54 values being output right inside of them
  • 01:12:56 if you want to put it like this and we
  • 01:13:00 also had a look at D structuring all of
  • 01:13:02 that very important additions which make
  • 01:13:05 JavaScript more powerful and give you
  • 01:13:07 more flexibility and I really hope that
  • 01:13:10 through this module I was able to show
  • 01:13:13 you how all that works and how you use
  • 01:13:16 it what the limitations are and why it
  • 01:13:19 might be useful with that it's time to
  • 01:13:21 continue to the next module which will
  • 01:13:24 actually itself be about modules see you
  • 01:13:27 there bye