- Function Parameters and Arguments 4:48
- Pass an Argument to a Function 3 objectives
- Pass Multiple Arguments to a Function 4:32
- Parameters and Arguments Review 5 questions
- Create a max() Function 2 objectives
- Variable Scope 7:01
- Function Declarations vs. Function Expressions 4:29
- Scope and Function Expressions Review 7 questions
Preview
Video Player
00:00
00:00
Function Declarations vs. Function Expressions
4:29There is another syntax for creating a function that is called a "function expression."
So far, you've written functions that
look like this, the function keyword,
0:00
followed by the name of the function.
0:04
This is what's called
a function declaration.
0:07
There's another syntax for
0:10
creating a function,
that's called a function expression.
0:11
Open the file, expressions.js,
and in index.html,
0:14
update the source attribute in
the script tag to js/expressions.js.
0:19
A function expression lets you
assign a function to a variable.
0:26
For example,
0:30
you could rewrite the getRandomNumber
function to look like this.
0:31
Notice that there's no name
after the function keyword.
0:41
A function without a name after
the function keyword is called
0:45
an anonymous function.
0:47
Instead, the name comes from the variable.
0:49
In other words,
I'm storing a function as a value
0:51
in a variable named getRandomNumber.
0:54
Also in this case,
0:57
you're creating a statement by
assigning a value to a variable.
0:58
Because of this, you add a semicolon
after the closing curly brace.
1:01
You call this type of function the same
as you would have function with a name or
1:05
a function declaration.
1:09
Use the name of the variable,
followed by parenthesis.
1:10
So now any time you come across
a function that's assigned to a variable,
1:14
you'll know that it's
a function expression.
1:18
You're also going to explore
function expressions
1:20
further in the next stage
on arrow functions.
1:22
Finally, function declarations and function
expressions work in much the same way,
1:25
except for one subtle but
important difference.
1:29
You can call a function
declaration before it's defined.
1:32
For example, I'll convert this function
back to a function declaration.
1:36
Then call getRandomNumber
above the function and
1:45
print its return value to
the console with console.log.
1:49
Notice how the function still works
as expected, we get a random number.
1:58
That's because function declarations
load before any code is executed.
2:02
When the JavaScript file loads, the
JavaScript engine behind the scenes moves
2:07
all function declarations to
the top of their current scope,
2:11
in this case the global scope.
2:15
Since the JavaScript engine immediately
knows about any function declarations,
2:16
you're able to call a function
before it's declared in the file.
2:20
This behavior is called hoisting.
2:24
Function expressions,
on the other hand, are not hoisted or
2:26
lifted up to the top of their scope.
2:29
A function expression loads only when
the JavaScript engine reaches the line of
2:31
code it's on.
2:35
For instance,
2:36
I'll, again, convert the getRandomNumber
function into a function expression.
2:37
Now the console outputs an error.
2:47
It says, uncaught ReferenceError,
2:50
cannot access GetRandomNumber
before initialization.
2:52
So remember, if you call a function
expression before it's defined,
2:55
you'll get an error
3:00
The approach you use to writing functions
is a matter of personal preference.
3:09
Choose one style and try to stick
with it throughout your script.
3:12
If your program at some point might need
to call a function before it's declared,
3:16
then use function declarations.
3:20
Now, some developers also prefer
the structure that function expressions
3:22
provide to their code.
3:25
Since you're not able to call a function
expression before it's declared,
3:27
it requires that you write your functions
up top, in a specific order, otherwise,
3:31
they won't work.
3:35
And any code that calls and runs
functions get placed toward the bottom
3:36
of the program or file, which can make
your code more readable and predictable.
3:40
But, again, the style is mostly
up to you and your team.
3:45
Understanding the basics
of functions is a big deal.
3:50
Just about every program you'll write
will use one or several functions.
3:53
As you become more experienced with
JavaScript, you'll start to notice that
3:57
parts of your code are repetitive,
and do the same thing over and over.
4:01
So, if you find yourself writing
the same exact code more than once,
4:04
it's a symptom that
something is likely wrong.
4:08
That's where a function can help you avoid
duplicating code, and provide a way to
4:10
group reusable code together to use, or
call later at any point in the program.
4:14
In the next stage, you'll build on your
knowledge of functions by learning about
4:20
arrow functions, which offer a more
concise syntax for writing functions.
4:24
See you soon.
4:27