JavaScript
Introduction
JavaScript Functions
JavaScript Functions
Function
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
JavaScript Functions
Create a function
Once you write a function Javascript creates a space in memory to save the function
definition and assign it to a name.
In the example below, it is named alertRandom
JavaScript Functions
Create and call a function
For your code to run you must call the function
Here the function is called at line 6
JavaScript Functions
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code
after the invoking statement.
Functions often compute a return value. The return value is "returned" back to the
"caller":
JavaScript Functions
Function Return
You can display your value in many ways eg on console, saving it to a variable etc
JavaScript Functions
Function Return
Adding the return statement to our previous example we have:
Running a function without the return value, the console will display “undefined”
JavaScript Functions
Multiple Return
Example: Multiple return statements
- Return statement can only return a single value
JavaScript Functions
Function Return
Return statement is the last line of code that runs
Pass Information Into Functions
JavaScript Functions
Why Functions?
JavaScript functions accept an argument which you pass to the function
To have a function accept an argument you need to add a parameter inside the
parenthesis while creating a function
JavaScript Functions
Parameters and arguments
Parameter works just like a variable
Inside your function you can use your parameter just like a variable
JavaScript Functions
Parameters and arguments
When running the function you pass information, also called passing an argument to the
function
JavaScript Functions
Parameters and arguments
Functions can accept more than one argument.
When calling a function, you're able to pass multiple arguments to the function; each
argument gets stored in a separate parameter and used as a discrete variable within the
function.
JavaScript Functions
Variable Scope
What will be the output of the following?
JavaScript Functions
Variable Scope
Functions can access the global scope from inside a function
Example: Removing the let
keyword inside the function
leads to overwriting of the
value of the person variable
at the Global scope
***However this is not
JavaScript Functions
Function Declarations vs. Function Expressions
Function Expression:
- Lets you assign a function to a variable
- Function without a name after the function keyword making it an anonymous function
The name of the function is the variable name. The statement ends with a semicolon
JavaScript Functions
Function Declarations vs. Function Expressions
Function Expression:
- The main difference between a function expression and a function declaration is the
function name, which can be omitted in function expressions to create anonymous
functions.
- A function expression can be used as an IIFE (Immediately Invoked Function Expression)
which runs as soon as it is defined
JavaScript Functions
Function Declarations vs. Function Expressions
Function Expression hoisting:
- Function expressions in JavaScript are not hoisted, unlike function declarations. You can't
use function expressions before you create them:
- It runs only when the JavaScript engine reaches the line of code.
JavaScript Functions
Function Declarations vs. Function Expressions
Function Declaration:
- A function declaration creates a Function object.
- Each time when a function is called, it returns the value specified by the last executed
return statement, or undefined if the end of the function body is reached.
JavaScript Functions
Function Declarations vs. Function Expressions
Function Declaration hoisting:
- Function declarations in JavaScript are hoisted to the top of the enclosing function or
global scope.
- You can use the function before you declared it:
JavaScript Functions
Arrow Functions
Arrow Functions:
- An arrow function expression is a compact alternative to a traditional function expression,
with the function keyword dropped
JavaScript Functions
JavaScript Functions
Default Function Parameters:
- Default function parameters allow named parameters to be initialized with default values
if no value or undefined is passed.
JavaScript Functions
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce different
results.
JavaScript Functions
Why Functions?
Accessing a function without the parenthesis () will return the function object instead
of the function result.
JavaScript Functions
Why Functions?
Functions can be used as variable values
Questions?
