JavaScript

JavaScript
Introduction
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).

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

Create and call a function
 For your code to run you must call the function
 Here the function is called at line 6

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":
Function Return
 You can display your value in many ways eg on console, saving it to a variable etc
Function Return
 Adding the return statement to our previous example we have:
 Running a function without the return value, the console will display “undefined”
Multiple Return
 Example: Multiple return statements
- Return statement can only return a single value

Function Return
 Return statement is the last line of code that runs

Pass Information Into 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

Parameters and arguments
 Parameter works just like a variable
 Inside your function you can use your parameter just like a variable
 When running the function you pass information, also called passing an argument to the
function
 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.
Variable Scope
 What will be the output of the following?

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

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
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

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.
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.

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:

Arrow Functions
Arrow Functions:
- An arrow function expression is a compact alternative to a traditional function expression,
with the function keyword dropped

Default Function Parameters:
- Default function parameters allow named parameters to be initialized with default values
if no value or undefined is passed.

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.
Why Functions?
 Accessing a function without the parenthesis () will return the function object instead
of the function result.

Why Functions?
 Functions can be used as variable values

Questions?

JavaScript - Functions

Uploaded by

JavaScript - Functions

Uploaded by

 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).

definition and assign it to a name.

 In the example below, it is named alertRandom

Create and call a function

 For your code to run you must call the function

 Here the function is called at line 6

after the invoking statement.

 Adding the return statement to our previous example we have:

 Example: Multiple return statements

- Return statement can only return a single value

 Return statement is the last line of code that runs

 JavaScript functions accept an argument which you pass to the function

parenthesis while creating a function

Parameters and arguments

 Parameter works just like a variable

Parameters and arguments

Parameters and arguments

 Functions can accept more than one argument.

 What will be the output of the following?

 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

Function Declarations vs. Function Expressions

- Lets you assign a function to a variable

Function Declarations vs. Function Expressions

function name, which can be omitted in function expressions to create anonymous

- A function expression can be used as an IIFE (Immediately Invoked Function Expression)

which runs as soon as it is defined

Function Declarations vs. Function Expressions

Function Expression hoisting:

use function expressions before you create them:

Function Declarations vs. Function Expressions

- A function declaration creates a Function object.

return statement, or undefined if the end of the function body is reached.

Function Declarations vs. Function Expressions

Function Declaration hoisting:

- You can use the function before you declared it:

- An arrow function expression is a compact alternative to a traditional function expression,

with the function keyword dropped

Default Function Parameters:

if no value or undefined is passed.

of the function result.

 Functions can be used as variable values

You might also like