Scribd
Upload
6 views42 pages

js_sem2_lec4

The document is a lecture on JavaScript functions, covering topics such as function declaration, parameters vs arguments, return values, and higher-order functions. It explains the concepts through analogies and examples, emphasizing the importance of functions in programming for code reusability and modularity. Additionally, it introduces the rest and spread operators, showcasing their utility in managing data within functions.

Uploaded by

anushkatyagi.2013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views42 pages

js_sem2_lec4

The document is a lecture on JavaScript functions, covering topics such as function declaration, parameters vs arguments, return values, and higher-order functions. It explains the concepts through analogies and examples, emphasizing the importance of functions in programming for code reusability and modularity. Additionally, it introduces the rest and spread operators, showcasing their utility in managing data within functions.

Uploaded by

anushkatyagi.2013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

The Complete

Javascript Course Lecture 4:


Functions
-Vishal Sharma

@newtonschool
Table of Contents
● Function Declaration and Syntax
● Parameters vs Arguments
● Spread and Rest Operator
● Function Return Values
● Higher Order Functions and Callback Functions
Function Declaration and
Syntax
What is a Function?
Function is a block of code made out of set of steps which result in a single
specific action.

What does it mean??


Let’s understand with an
analogy
Set of
Instructions
PRIMITIVES
Functions: Like Tying your shoes
A function is like tying your shoes—once you learn how, you can repeat the steps
whenever needed without rethinking the process

Functions = Tying your shoes

PRIMITIVES
Similarly we use functions in our programs
Let us define a tie shoes function and reuse it multiple times:-

PRIMITIVES
Naming a function
A programmer can give function a name and be used again and again.

PRIMITIVES
Challenge:

Write a Function to Display


Hello World
Were you able to do it??
Let’s start writing:-

How simple it is!!

PRIMITIVES
Think of a more complex task/function
Your dad wants you to calculate your daily expenses but you find it
difficult to do manually, you are crying for help!!
Your Rescue: Write an add function
Don’t worry functions are here for rescue.

But how to tell the function


what to add??
Function: parameters
We can define parameters in function to receive values.

Function Parameters
Here “num1” and
“num2” are
function
parameters.
Function: using parameters to add
Let’s use parameters to calculate the sum. And print it:-

Using parameters to
perform addition
Function: calling using arguments
Let’s just call the function by passing values inside it:-

Arguments are the values


passed to a function and
assigned to its parameters.

Actual values passed to


function are called arguments
Parameters vs Arguments
Difference: parameters and arguments
Now can you tell me the difference between these two??
Difference: parameters and arguments
Parameters are placeholders in a function declaration, while arguments
are the actual values passed during a function call.
Function Return Values
Function: return values
Wherever you assign some task to someone, you expect them to return something
which is could be final outcome/status of task etc.
Function: return values
Similarly function do return values on completion.
Function: return value syntax
Similarly function do return values on completion.

We want to return result


value to where function
was called from.
Function: return values with Example
Let’s reuse the add function again but this time we will return values instead of printing.
Function: return values with Example
Displaying returned values by calling the function and storing result in a variable.

Returning values is preferred over


displaying the result inside the
function.
Functions: Arrow Functions
Arrow functions are a shorter syntax for writing functions in JavaScript. They use the =>
syntax and are often more concise than traditional function expressions.

They not only make


function earlier to
write but also easier
to read and debug.
Functions: Arrow Function example
Let’s look at an example:-

Can you observe that


arrow function syntax is
simpler, easier and
more readable
compared to traditional
function.
Arrow Functions: Shortcut to Simplicity
Arrow functions make coding faster and cleaner, like taking a shortcut.

Feeling awesome,
right??
Higher Order Functions and
Callbacks
Values we can pass/return in a function
You can pass variety of values in a function. Let’s have a look:-

values Functions did I


heard correct??

Primitive Data
Objects Functions Others
Types
Higher-Order Functions
A higher-order function is a function either accepts a function as an argument or
returns a function.

But why do we
need function to
receive and accept
values??
Advantage of Higher-Order Functions
We receive or return functions as values to make our code flexible and reusable, allowing
us to define behavior dynamically and build more modular, maintainable programs.

Don’t worry? Let’s


Understood?? understand it with an
example in next slides.
Understanding HOF with example
Let’s create a greet function which takes name and function as input and returns a greeting.

This might seem of no


use, but when we will
read arrays methods like
map, filter etc, you will get
to know helpful the higher
order functions are.
Few popular higher order functions
Here are few most popular higher order functions:-

Don’t worry we will


learn these higher
order functions in
later lectures.
Understanding Callbacks
A callback is a function passed as an argument to another function, which is then
executed inside that function. You can name callback function as you wish.

Callback function
Rest and Spread Operator
Rest operator: team player of javascript
You are tasked to form a cricket team. First, pick your favourite duo to open the
batting, then select the captain. The rest make up the team.
Rest operator: team player of javascript
Let’s write a code for it:-
rest operator
grouping rest of
the values in
variable team

Output:

Captain: Virat Kohli


Team: [“Jasprit Bumrah”, “Hardik
Pandya”, “Ravindra Jadeja”,
“Others”]
Rest operator: team player of javascript
Let’s pass values to the function:-

Team members are grouped


together in receiving function
using rest operator
Spread Operator: The Team Promoter
The spread operator (...) takes values from a group (like an array or object) and
spreads them out into individual pieces, just like a promoter showing off each team
member one by one.
Spread Operator: The Team Promoter

Player 1 Player 2 Player 3 Player 4 Player 5 Others


Spread Operator: The Team Promoter
Let’s understand it with a code:-

Here We are using spread


operator to spread out
individual player names in
player 1, player 2, …etc.
In Class Questions

41
Thanks
for
watching!

42

You might also like