#100DaysOfWeb in Python Transcripts
Chapter: Days 25-28: JavaScript Introduction
Lecture: Functions

Login or purchase this course to watch this video and the rest of the course contents.
0:00 This video is about functions.
0:04 Like in Python, functions are first-class citizens.
0:07 They can be assigned to variables, passed around, et cetera
0:12 with one or more expressions, also called side effects
0:16 and can optionally return a value.
0:18 It's not required though.
0:21 Each function creates a new scope.
0:23 Localizing the find parameters and bindings
0:26 not visible from the outside.
0:31 Functions can be nested
0:32 also called Closures, and call themselves
0:36 recursion just like in other languages
0:39 and they can have one or more parameters or arguments.
0:47 And here's some more information.
0:49 So that's stacks trading.
0:51 A function is defined with a function reserved word, a name
0:57 optionally you can give it arguments
1:00 and a block is defined within curly braces.
1:05 So in this case I am just going to bounce
1:07 'Hello' + name and we close off the function.
1:14 To call it, I can give it a name
1:21 and we see "Hello Mike" just as we would expect.
1:26 If we omit the argument
1:28 we get "Hello undefined".
1:30 And here again we see JavaScript's more permissive
1:33 because Python would raise an exception for example.
1:44 Type Error and expects one argument
1:48 and it doesn't allow you call it without that argument.
1:52 Not so in JavaScript, and we'll see later
1:55 how we can set default arguments.
1:58 Let's return the value Next.
2:00 So I'm going to do
2:02 a function Calculation2Celcuis
2:07 that takes a Fahrenheit temperature
2:12 does the calculation
2:27 And returns the value.
2:28 So now I can call this
2:30 with say 100 Fahrenheit
2:34 and I see that's 37.7 Degrees.
2:37 Great. Now let's talk about arguments.
2:40 JavaScript functions keep an internal
2:43 array like object with the arguments passed in.
2:47 So to Demo
2:49 let's just write a function called PrintArguments
2:54 that's going to print them out.
2:57 So we can do For let arg of arguments
3:09 Console Log of arg
3:14 close up the for loop
3:15 and close up the function.
3:21 So calling it without anything
3:23 I don't get anything
3:25 Calling it with 1,2,3 I get 1,2,3.
3:30 Arguments is only accessible within the function
3:37 because it's called to the block inside the function.
3:42 Okay, calling it with a bit more.
3:47 So next, how would you handle default arguments.
3:51 For example
3:53 we want to do another hello function
3:58 and if name is not provided we want to
4:00 bounce a "Hello stranger" message for example.
4:04 So one way to do it is to check name against undefined
4:11 and we will come to this with JavaScript gotchas
4:14 with our two comparison operators
4:17 2 equal signs and 3 equal signs
4:19 and you usually want to use the 3 equal signs
4:23 because it not only checks for equality
4:26 but also the same type.
4:28 So here it will exactly match undefined.
4:31 And that's just more specific
4:33 and you probably make less mistakes.
4:36 So if name is undefined
4:39 and doing this in the same line I can omit the curly braces
4:42 I can set name to "Stranger"
4:48 and then do the printing.
4:57 Let me close those off with semi colons
5:00 as is best practice.
5:03 So now if I call it without anything I get "Hello Stranger"
5:06 If I call it with a name
5:10 I get "Hello Name."
5:11 So that's one way to handle default arguments.
5:14 But there's a nicer way and it's similar to Python.
5:18 So as you know you can set
5:19 a default argument in Python like this.
5:27 And now if I call it without anything
5:28 I get "Stranger" and when I call it with a name
5:32 I get "Hello Name."
5:34 And starting ECMAScript 2015
5:38 JavaScript now has the same syntax
5:40 So we can write
5:41 function Hello Name = default "Stranger"
5:52 I don't think there's an Fstring.
5:53 No there's something similar actually.
5:55 You can do backticks
6:01 and embed the very role like this.
6:08 I call it without anything I get "Stranger"
6:11 I call it with Mike, I get
6:16 "Hello Mike".
6:17 So JavaScript is gaining a lot of nice improvements lately.
6:21 Another one I want to show you
6:22 introduced in ES6 is Arrow Functions.
6:26 And to use the same example
6:29 you can write it even shorter.
6:37 We can omit the function reserved word.
6:41 And instead of a block we can just
6:43 use the Equal Greater Than
6:45 or Fat Arrow I think it's called
6:50 and print the string.
6:55 Let's assign it to a variable.
7:03 And now I can call it like this
7:07 or passing a name.
7:12 So a bit more concise syntax.
7:14 Arrow Functions are pretty exciting
7:16 and again JavaScript syntax is getting a lot better.
7:20 So to recap a simple function
7:23 Function, Reserved Word, name of the function
7:26 Parameters, in the body inside curly braces
7:29 which defines a new scope.
7:31 And you can do some work and optionally return a value.
7:38 And when we print it to the console
7:40 it will return the value as a string.
7:45 So function takes input parameters
7:47 and returns one or more values.
7:50 You read it a typical calculation
7:53 from Fahrenheit to Celsius
7:56 and calling it with 100 Fahrenheit, you get 37.7 Celsius.
8:03 Arguments.
8:04 Internally JavaScript functions keep
8:06 an array like arguments object.
8:11 And here we print all the arguments passed in.
8:15 When we call this function with 1,2,3 it prints 1,2,3.
8:20 So how would we then handle default arguments.
8:24 The old way is to look explicitly for undefined
8:28 and set the name to a default value.
8:30 But lately with ECMAScript 2015
8:34 we got the new Python like syntax
8:36 of sending a default value in the parenthesis
8:39 and that's way nicer.
8:46 Lastly ES6 introduced Arrow Functions
8:48 which introduces a more concise way to write functions.
8:52 You can use it on one line like this
8:56 send to variable and call it.
8:58 Because functions are passed around as first class objects.
9:05 That's definitely not all there is to functions
9:07 but it's enough to get you started.
9:09 Functions are an important building block
9:10 when your programs grow
9:12 and when you have to interface
9:13 with other parts of the program.
9:15 Next up are Objects.