FIRST CLASS FUNCTIONS 🔥ft. Anonymous Functions | Namaste JavaScript Ep. 13

Summary

In this educational video, the speaker recounts a nerve-wracking interview experience with a renowned Indian food-ordering startup, which led to a deep dive into JavaScript's functional programming concepts. The video clarifies the differences between function statements and expressions, explains the importance of hoisting, and distinguishes between anonymous and named function expressions. It also touches on the significance of parameters and arguments in functions. The crux of the video is the explanation of first-class functions, emphasizing JavaScript's ability to treat functions as values, allowing them to be passed as arguments and returned from other functions. This understanding is crucial for mastering functional programming in JavaScript.

Takeaways

• 😀 An anonymous function is a function without a name.
• 📚 First-class functions in JavaScript refer to the ability to treat functions as values, allowing them to be assigned to variables, passed as arguments, and returned from other functions.
• 🔍 The difference between a function statement and a function expression lies in hoisting; function statements can be called before they are declared, while function expressions cannot.
• 💡 Function declarations (also known as function statements) and function expressions are two ways to create functions in JavaScript.
• 🚫 Attempting to create an anonymous function using the function statement syntax results in a syntax error because function statements require a name.
• 🔑 Anonymous functions are used when functions are assigned to variables or used as values in other expressions.
• 📝 Named function expressions are similar to function expressions but include a name for the function. However, the name is scoped to the expression and is not accessible outside of it.
• 🤔 Parameters are the identifiers used within a function to receive values, whereas arguments are the actual values passed to the function.
• 🌐 The term 'first-class citizens' in JavaScript refers to functions being able to be used as values, similar to any other variable or data type.
• 👉 Arrow functions, introduced in ES6, are a more concise way to write function expressions and do not have their own `this`, `arguments`, `super`, or `new.target`.

Q & A

What is an anonymous function in JavaScript?

An anonymous function in JavaScript is a function that does not have a name. It can be used as a value and assigned to a variable or passed as an argument to other functions.

What are first-class functions?

First-class functions refer to the ability of functions to be used as values in JavaScript. They can be assigned to variables, passed as arguments to other functions, and returned from other functions.

What is the difference between a function statement and a function expression?

The main difference between a function statement and a function expression is hoisting. A function statement can be called before it is declared, while a function expression must be declared before it can be called.

Why is it called a 'first-class citizen' when referring to functions in JavaScript?

The term 'first-class citizen' refers to the fact that functions in JavaScript can be treated like any other value. They can be assigned to variables, passed as arguments, and returned from other functions, just like any other data type.

What is the role of hoisting in function statements and function expressions?

Hoisting allows function statements to be called before they are declared in the code. However, function expressions are not hoisted and must be declared before they can be called.

Can you provide an example of a function statement in JavaScript?

A function statement in JavaScript is declared using the `function` keyword followed by a name. For example: `function myFunction() { console.log('Hello, World!'); }`.

How do you create a function expression in JavaScript?

A function expression in JavaScript is created by assigning an anonymous function to a variable. For example: `const myFunction = function() { console.log('Hello, World!'); };`.

What is the significance of named function expressions in JavaScript?

Named function expressions in JavaScript are function expressions that have a name. The name is scoped to the function itself and can be used for recursion inside the function, but it is not accessible from outside the function.

What is the difference between parameters and arguments in JavaScript functions?

Parameters are the variables defined in the function declaration that receive the values passed to the function. Arguments are the actual values that are passed to the function when it is called.

Why is it important to understand the difference between function statements and expressions?

Understanding the difference between function statements and expressions is important for debugging JavaScript code and for understanding the scope and hoisting behavior of functions in the code.

Can you provide a scenario where an anonymous function would be useful in JavaScript?

Anonymous functions are useful in JavaScript when you need a function that is only used once and does not need to be referenced again, such as when passing a function as a callback or when using it as an event handler.

Outlines

00:00

😅 Interview Experience with JavaScript Concepts

The paragraph narrates the speaker's interview experience at a renowned Indian startup, where they were asked about anonymous functions and first-class functions in JavaScript. The speaker initially provided a vague answer for anonymous functions and admitted not knowing about first-class functions. This led to a nervous breakdown during the interview. The speaker then proceeds to explain function statements and expressions in JavaScript, highlighting the importance of understanding these concepts for programming and interviews.

05:00

📚 Understanding Function Statements and Expressions

This section delves into the difference between function statements and function expressions in JavaScript. The speaker clarifies that a function statement is a way to create a function with a name, while a function expression can be anonymous or named and is typically assigned to a variable. The main distinction between the two is hoisting, where function statements are hoisted during the memory creation phase, allowing them to be called before they are defined. In contrast, function expressions are treated like variables and are only assigned a function once the code execution reaches the expression line.

10:01

🔍 Deeper Insight into Anonymous and Named Function Expressions

The speaker further elaborates on anonymous functions, explaining that they cannot be created as standalone function statements due to syntax errors but can be used as values, such as being assigned to variables. Named function expressions are also discussed, where a function is given a name and used within an expression. The paragraph includes a cautionary note about the scope of named functions within expressions, highlighting that they are local to the function in which they are defined and cannot be accessed globally.

15:04

🎯 The Concept of First-Class Functions

This part of the script introduces the concept of first-class functions, emphasizing that in JavaScript, functions can be treated as values. This means they can be assigned to variables, passed as arguments to other functions, and returned from functions. The speaker clarifies that this flexibility and power of functions in JavaScript is what makes them first-class citizens. The paragraph aims to provide a clear understanding of this concept, which is crucial for any JavaScript developer.

20:06

🚀 Upcoming Topics: Callbacks and Higher-Order Functions

The final paragraph sets the stage for future videos that will cover callbacks and higher-order functions, which are integral to functional programming in JavaScript. The speaker reassures the audience that all basic concepts will be thoroughly covered before moving on to more advanced topics like arrow functions, introduced in ES6. The speaker also encourages viewers to like the video for motivation and announces the next topic to be discussed in the series.

Keywords

💡Anonymous function

An anonymous function is a function that does not have a name. In the context of the video, the script explains that these functions are used when functions are treated as values, such as when they are assigned to a variable or passed as arguments to other functions. The video emphasizes that while an anonymous function might look like a function statement without a name, according to the ECMAScript specification, a function statement must have a name, making a truly anonymous function statement a syntax error.

💡First class functions

First class functions refer to the ability of functions to be treated like any other variable in JavaScript. They can be assigned to variables, passed as arguments to other functions, and returned from functions. The video script uses this concept to highlight the power and flexibility of JavaScript functions, explaining that this treatment of functions as first class citizens is a fundamental aspect of the language that enables higher-order functions and other advanced programming techniques.

💡Function statement

A function statement, also known as a function declaration, is a way to define a function in JavaScript by using the 'function' keyword followed by a name. The video script explains that function statements are hoisted, meaning the function is available in the scope before it is declared in the code. This is demonstrated in the script with examples where the function can be called before it is defined without causing an error.

💡Function expression

A function expression in JavaScript is a function that is defined as an expression, typically assigned to a variable. Unlike function statements, function expressions are not hoisted, and thus, they must be defined before they are called. The video script uses the concept of function expressions to illustrate the difference in hoisting behavior between function statements and expressions, highlighting a key aspect of JavaScript's function handling.

💡Hoisting

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. The video script explains hoisting in the context of function declarations, where a function declared with a function statement can be called before it appears in the code. This is a critical concept for understanding the behavior of functions in JavaScript, as it affects when and how functions can be used within a script.

💡Callback function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. Although not explicitly defined in the script, the concept is alluded to when discussing first class functions, as callbacks are a common use case for functions being passed as arguments. The video script suggests that callbacks and higher-order functions will be covered in more detail in a future video.

💡Higher order function

A higher order function is a function that takes one or more functions as arguments, or returns a function as its result. The video script mentions higher order functions in the context of first class functions, indicating that the ability to pass functions as arguments and return them is a characteristic feature of higher order functions. This concept is integral to functional programming and is teased to be covered in more depth in an upcoming video.

💡Arrow function

An arrow function is a syntactically compact alternative to a traditional function expression in JavaScript, introduced in ES6. While not the main focus of the script, the video mentions that arrow functions can also be used to create function statements and expressions. The script promises a future video dedicated to arrow functions, covering their syntax, usage, and differences from traditional function statements.

💡Named function expression

A named function expression is a function expression that is assigned a name. The video script points out the peculiarity of named function expressions, where a function is given a name but is still treated as an expression and can be assigned to a variable. This concept is used to contrast with anonymous function expressions and to illustrate the flexibility of functions in JavaScript.

💡Parameters and arguments

Parameters are the variables listed inside the function's parentheses, while arguments are the values passed to the function when it is called. The video script clarifies the difference between these two terms, which are often used interchangeably but have distinct roles within a function's scope. Understanding the distinction between parameters and arguments is crucial for correctly using and understanding function calls in JavaScript.

Highlights

Anonymous functions are functions without a name.

First-class functions in JavaScript are functions that can be assigned to variables, passed as arguments, and returned from other functions.

Callback functions are functions passed into other functions as arguments.

Higher-order functions are functions that can take other functions as arguments or return them.

Arrow functions are a more concise way to write functions in JavaScript, introduced in ES6.

Function statements are used to declare functions with a name using the 'function' keyword.

Function expressions are functions assigned to a variable, which can be anonymous or named.

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope during the compilation phase.

Function declarations (statements) are hoisted, allowing them to be called before they are defined.

Function expressions are not hoisted, and thus cannot be called before they are defined.

Named function expressions are function expressions that are named, which can help with debugging.

Parameters are the identifiers used in a function definition, while arguments are the values passed to the function.

First-class functions allow for functions to be used as values, enhancing the flexibility and power of JavaScript.

Functions can be returned from other functions, showcasing the first-class nature of functions in JavaScript.

Understanding the difference between function statements and expressions is crucial for debugging JavaScript code.

The term 'first-class citizens' refers to the ability of functions to be treated as first-class entities in JavaScript.

The video promises a future segment on arrow functions, covering their syntax and usage in depth.

The video concludes with a teaser for upcoming content on callbacks and higher-order functions, crucial for functional programming.

Transcripts

once i was giving interview for a very

reputed indian startup i won't take the

name but that startup was a very famous

online food ordering startup the

interviewer over there asked me

that what is an anonymous function i

just quickly said that a function

without a name is an anonymous function

that was easy right then she moved on to

the next question which was what are

first class functions in javascript

okay

so

now i got nervous

because i never knew what first class

functions are

i have heard of callback functions i

have heard of higher order functions

i've heard of arrow functions pure

functions but i haven't heard of first

class functions what are they

and i got nervous the interviewer she

was looking directly into my eyes and

i was gone

i said that i don't know okay i don't

know the answer to this question so then

she moved on to the next question which

was what is the difference between a

function statement and a function

expression

and now that nervousness from here went

till here

okay i i didn't know i i didn't know

what a function expression statement is

so many things were going upon in my

head

i thought that statement expression both

were looking like the same so when the

nervousness went to the next level i

firmly said that

a statement which has functioned in it

is a function statement

and oh my god

the reaction of that interviewer was

like

she is just going to kill me there and

there itself she made a she made such a

weird face i mean like if i close my

eyes i can still like recall that face

okay and i knew that i am like gone in

the interview like

finished

so this video is dedicated to that

interview and that interviewer so let's

see what all these things are and uh

let's dive deep into the code now okay

so let's move so we will be covering all

these topics let's go upon these slowly

one by one okay so first of all let us

see what a function statement is okay so

so you know how we create a function

there is one way to create a function

like this so if we write a function

keyword and we give a name so this is a

function statement

okay

so if i so suppose our function does

nothing but just a console log okay

let's just console log and let's give it

a call

that's it right so this way of creating

a function is known as a function

statement that's it

that's all

okay

and remember i have told you several

times throughout these videos that

functions are very beautiful in

javascript and functions are like the

heart of javascript right

so

a beautiful feature of function is that

you can assign it to a variable also

okay so suppose if i have a var b we can

assign a function to it okay we can

assign a function to it function acts

like a value okay you might have heard

this before i am revising it function

acts like a value okay so you it's it's

like a value which you are

initializing you are initializing this b

with a value like putting function

this into b so this is how beautiful

functions are in javascript in many

programming languages you can't do this

and people coming from like other

languages might find this crazy but

what this you can do okay

let's just log something inside this

also so let me do a console log of

be

called okay

so this is known as a function

expression and this is known as a

function statement both are ways to

create function and i was using this

since many years in our programming but

i never knew what the difference between

these

jargons are like and in the interview i

i was using this right a lot in my code

but i never knew in the interview that

this is what it is

right

so

the interviewer did not ask me what it

is the interviewer asked me the

difference between function statement

and a function expression so what is the

difference between

these two

so the major difference between these

two is hoisting

okay

so let's first see how do you call this

function okay so you call this function

by just calling it like this you know

and even in the case of function

expression you call it like this right

if i call it if i run this program so

see it prints a call and it prints b

called right so that is how we call it

but the difference between creating

functions with these two types is

hosting

so how does hoisting come into picture

so what if i call this function a

even before creating it

okay so

here i am creating the function but i

want to call it before creating it and

similarly for b also

so you have seen my hosting video right

so what do you think the output will be

if i call these functions before even

creating them in code what will happen

can you give it a guess

yes let's just see so one will throw out

an error which one the b

so that is the difference between a

function statement and a function

expression so during the hosting phase

during the memory creation phase a is

created a memory and this function is

assigned to a

but in case of a function expression

this b is treated like any other

variable

it is assigned undefined initially

until the code hits this line itself

so when the javascript engine executes

this line by line and it reaches this

line then only this function is assigned

to this variable b until then it is

undefined

okay so here the value is undefined and

you can and you can't call that b right

that is the major difference between

function statement and a function

expression so now let's move on to

function declaration so function

declaration is nothing this is another

jargon and function statement is also

known as

function declaration okay so they both

are the same thing if you say

function declaration or a function

statement these are both the same things

so now let's move on to the anonymous

functions so anonymous functions as you

know a function without a name is an

anonymous function

this is an anonymous function

okay

but let me tell you a little more about

anonymous functions so anonymous

functions

does not have their own identity okay

when i say it does not have its own

identity that means if you create an

anonymous function like this this will

result out to be a syntax error okay so

via syntax error let me tell you an

anonymous function looks like a function

statement right it looks like similar to

that right see if you clearly see this

looks exactly same as a function

statement but it has no name

but according to ecmascript

specification a function statement

should always have a name so this is a

invalid syntax let me run and show it to

you so if i save this run this so this

is c a syntax error and clearly see the

message which it says a function state

function statements require a function

name

okay so see it's a function statements

okay this function statements it is type

of a function statement and it requires

a name okay you need to give a name over

here you can't leave it anonymous and

create anonymous functions like this

so now when you can't create it like

this what is the use of it

so anonymous functions are used in a

place where functions are used as values

so i have said this a lot of times let

me repeat it once again functions are

like very beautiful in javascript i love

functions and functions i think are

heart of javascript they are so powerful

you can use them as values also right

and anonymous functions are used when

the functions are used as values okay

when they are used as values so when i

say they are used as values that means

that you can use use it to assign it to

some variable so just like you assign

any other value to a variable okay you

can assign this anonymous function also

to a variable

so it acts like a value here you can use

anonymous functions but in function

statements you cannot use an anonymous

function okay so that is why it says

function statements

require a function name okay you know

this knowledge of knowing what is a

function statement or expression a

declaration and all these things is very

important also it helps you a lot if you

are debugging programs so if you read

clearly the message right so function

statement so here it's not an expression

it's a statement so these things these

keywords will kind of click your mind

and you will better understand

javascript

and generally you might have seen that

when we are reading blog articles or we

are reading books sometimes

we it is very confusing right the author

uses the term expression somewhere it is

a statement somewhere so this is what it

means okay so this knowledge will be

very helpful when you are reading some

books of javascript some blogs of

javascript some stack overflow answers

this all knowledge will be very helpful

for that so now let's just see what is a

named function expression okay so let me

just first of all remove these errors

okay let me just comment it out and

let me bring these calls uh over here

once again

so now let me tell you what is a named

function expression so a named function

expression is like exactly the same as

this function expression but when this

anonymous function instead of using an

anonymous function here we use a

function with a name suppose if i gave

it a name so this becomes a named

function expression

it's kind of weird right

you are like kind of giving a name to

the function here also and you are

giving the name to the function here

also it's it's like weird right but this

is possible in javascript like you can

have the name of a function itself and

then put it into an expression so this

is known as a named function expression

remember a named function expression now

here there is a corner case also there

is a gaucha okay so uh so you know we

can call this b function like this but

what do you think what will happen if i

do something like this x y z so can you

guess what will happen if you just call

this function x y z like this give a

guess

so you will get an error okay so it is a

very famous output question also so you

might get a mcq where

the person might have called this xyz

like this but it will throw out to be an

error okay so this will give a reference

error that xyz is not defined okay so

why it gives xyz is not defined so

if we see clearly this x y z if you put

a function like this right if you use

this function as a value so in this case

this x y z is not created in the

outer scope okay so this xyz is not a

function inside this outer scope in this

close global scope but it is created as

a local variable okay when i say a local

variable if you try to if you want to

access this function inside this

function okay if you want to access this

function inside this function

okay so suppose if you want to access

xyz you can access it over here right

you can access this function see it

prints xyz and you can access this

function over here but if you try to use

it outside like this it will throw out

to be an error where it is okay let's go

to console so it it gives you a

reference error that xyz is not defined

okay so this is what is called as a name

function expression and if you just

don't give a name over here it is like a

normal function expression or you might

call it as an anonymous function to

create a function expression okay so

something like this so let me just

revert it once again

um and just remove this

xyz

and let's move on to the next part okay

one more thing which i have often seen

is that

a lot of programmer use parameters and

arguments as interchangeably terms but

no they are very different okay so these

two things parameter and arguments are

very different okay so whenever you are

creating a function so whatever you put

over here right these these identifier

or this labels right

over here are known as parameters so

that is why you can call it as a param

param1 okay so you might have seen the

syntax written a lot of places so this

identifier or the label

or this variable okay this is a local

variable in the function scope okay so

this this param1 and param two are local

variables inside this function you

cannot access this param1 and param two

outside okay so these local variables or

you can call it them as the identifiers

or the labels so whatever you might call

them so these are the parameters

parameters of a function

and the arguments which you pass over

here like if i uh give a one and a two

so this is known as arguments a lot of

people you know

use this as interchangeably and don't

know this that is why often when you

read a blog or you read a book then

somebody is using an argument somewhere

if somebody using parameter so you

should actually have a mental model of

what that person is talking about that

is when you will understand these blogs

and articles and books right

so once again the values which we pass

inside a function are known as arguments

and

these label and identifier which gets

those values are known as parameters

okay so now let's move on to the most

critical part which is first class

functions okay

so what are first class functions so

this is a very heavy term for what we

already know

so as i already told you and let me

repeat it once again because it is very

important functions are very beautiful

in javascript functions are very strong

functions are heart of javascript

and

just because it is like that

we call them as a first class functions

so the functions are so beautiful so

beautiful that instead of these

arguments we can even pass functions

inside another functions as an arguments

okay listen to this carefully arguments

so functions are treated as values right

i told like you can use an anonymous

function to pass in as a value also okay

that is how beautiful functions are and

you can receive that in the parameters

okay so if i pass this anonymous

function inside param1 and i try to

access this panel and see what we get

okay this is a perfectly valid

javascript okay see we got this

anonymous function inside it right and

there is one more way to pass this

function

okay inside this function okay suppose

it was a named function let's call it as

uh x y z okay and if i pass this x y z

like this we can do that too okay so

it's like passing another function

inside a function right we are passing

this x y z inside b

that's how beautiful functions are and

we can do that

and not just this if we pass this

function into this function we can also

return a function from a function

okay crazy it sounds right so we can

return a function from a function we can

return an anonymous function from a

function

and what will happen is when you invoke

this b right when you call this b

this function will be returned over here

right so let's just try to do a console

log of this okay so if i do a console

log of this

so uh and

let me just remove this x y z

and let me just remove this x y z also

and if i now

run this code so see

when we call this function so

this function anonymous functions were

returned from b and we did a console log

so it prints an anonymous function and

if it was a named function we can return

that too okay so what is first class

functions so first class functions is

nothing but this only

the ability to use functions as values

is known as first class functions

so let me repeat it once again the

ability of functions to be used as

values and can be pass this in an

argument to another functions and can be

returned from the functions

is this ability is known as first class

functions in javascript

nothing more than that okay these

ability of these functions to use an n

value and assign it to a variable and

can be passed into another functions and

can be returned out of another functions

this ability all over all together is

known as first class functions

that is what is first class functions

and it's not just in javascript it is a

programming concept it's in other

languages also not in every language but

in many languages also so our interview

question can be what are first class

functions in javascript so you have to

explain it like this okay when they are

treated as a value parsed into another

functions or returned from another

functions so this is known as a first

class functions okay this ability is

known as the first class functions

that's all it is

right so if you read blog articles or if

you read books okay so a lot of times

you might also find a statement which is

functions are first class citizens let

me repeat it once again functions are

first class citizens okay so let me

write it down first class

citizens okay

so

when i say first class citizens it means

the same thing

first class functions functions are used

as first class citizens so it's both the

same thing okay so if you read it in

some blog or if you read it in some book

assume that this ability to be used like

values

makes the function as first class

citizens in javascript i know this is

kind of like a playing with english and

words right but that's how it is and it

is important to know all these things

because if we read it in some book we

should understand what that author is

trying to say right

javascript has a very vast community

right a lot of people are writing stack

overflow answers blogs blogs articles

this that and they use all sort of

notations so what i try to do is i am

just giving you this knowledge so that

next time you read these blog articles

you will properly understand what that

author is trying to say if somebody says

that functions are first class citizens

that means he is referring to first

class functions that means the ability

of these functions to be used as values

passed inside another function get out

from the function and like returned out

from the functions use them to assign

into a variable all these things make

say functions as the first class

citizens in javascript

remember will you remember this lifetime

remember this lifetime okay so one more

doubt you might get is that what if i

use a letter const over here so suppose

if i use a letter const over here so in

that case also it behaves the same way

just like let and const normal variables

do they are in a temporal dead zone

until it encounters this statement okay

so you it is treated exactly the same if

you want to get more information it is

in the latin cons video right go watch

that again if you are still confused

about it so in the latin const video

whatever rules are applied the same

rules are applied to these also so these

are nothing this const b is nothing but

just like a constant another variable

and this function over here is acting

just like any other value which is being

assigned to this b okay so that's how

and that's what it is okay

so now this function statement in a

function expression or a function

declaration these all things can also be

written using arrow functions okay arrow

functions has come up as a part of es6

you can call it as ecmascript 2015 and

this let const arrow functions these

things were introduced in es6 okay so

these function statements function

expression this all things can be

created using arrow functions also okay

but let's not do this in this video

because i haven't told you what an arrow

function is

up till now in this series i have seen a

lot of people asking in comments that

what will happen in case of arrow

functions error functions error

functions don't worry people

i am covering the basics first of all

okay the basics of javascript because

when javascript was built it was not

built with arrow functions right it used

to have where it used to have function

keyword so let us first explore these

basic nitty gritty things about uh these

this beauty of javascript which was

originally made right and we will slowly

transition towards this es6 new things

also you know i am not avoiding let

const or

arrow functions or something because

those things are being used a lot right

i will make a separate video all

together just for covering arrow

functions that will be a very

interesting video i will be covering

everything like how how this keyword

works and how arrow function syntax

works how higher order function works

and how

statements declaration expression

everything we will be covering in arrow

function series just keep calm and wait

no issues everything will be covered

slowly slowly slowly slowly slowly

slowly slowly slowly slowly slowly and

trust me i'm not going anywhere i'll

teach you everything just keep on

watching this series and watch it in the

sequence okay in the next video we will

be covering callbacks and higher order

functions those are very very very

important topics in javascript if you

want to learn functional programming

okay so don't miss that video that is a

very crucial video but before moving on

to that video give this video a thumbs

up it gives me a huge motivation and see

you in the next video till then thank

you for watching namaste javascript

[Music]

[Applause]

me