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