Javascript

Module 2
Functions and Scope
Functions

● Special tools that help you organize your code and perform specific actions
whenever you need them.
● Instead of writing the same code over and over, you can use functions to make your
life easier. Consider functions as mini-programs that you can use and reuse to make
your code more organized and efficient.
● Function allows us to declare & pack a bunch of code in a block so that we can use
(and reuse) a block of code in our programs. Sometimes, they take some values as
`parameters` to do the operation and return some value as a result of the operation.
Functions
● A function definition (also called a function
declaration, or function statement) consists
of the function keyword, followed by:
a. The name of the function.
b. A list of parameters to the function,
enclosed in parentheses and separated
by commas.
c. The JavaScript statements that define
the function, enclosed in curly braces, {
/* … */ }.
functions
● Parameters are essentially passed to functions by value — so if the code within the body of a

function assigns a completely new value to a parameter that was passed to the function, the
change is not reflected globally or in the code which called that function.
● Defining a function does not execute it. Defining it names the function and specifies what to do
when the function is [Link] the function actually performs the specified actions with the
indicated parameters.
Scope

● It is a region of the program where a variable can be accessed. In other words, scope
determines the accessibility/visibility of a variable.
● There are three kinds of scopes in JavaScript:
a. Global scope: Variables declared outside of all functions are known as global
variables and in the global scope. Global variables are accessible anywhere in the
program.
b. Function scope: Variables that are declared inside a function are called local
variables and in the function scope. Local variables are accessible anywhere inside
the function.
c. Block scope: Variable that is declared inside a specific block & can't be accessed
outside of that block. In order to access the variables of that specific block, we need
to create an object for it.
● The code inside a function has access to:
○ Function's arguments
○ Local variables declared inside the function
○ Variables declared in its parent function's scope
○ Global variables.
● Before ES6, JavaScript variables could only have Global Scope or Function Scope.
● ES6 introduced two important new JavaScript keywords: let and const.
● These two keywords provide Block Scope in JavaScript.
● Variables declared with let and const inside a code block are "block-scoped," meaning
they are only accessible within that block.
● This helps prevent unintended variable overwrites and promotes better code organization:
● Variables declared with the var keyword can NOT have block scope.
● Variables declared with the var keyword, inside a { } block; can be accessed from outside
the block.
Scope

Scope chain: Whenever our code tries to access a variable during the function call, it starts the
search from local variables. And if the variable is not found, it'll continue searching in its outer
scope or parent functions' scope until it reaches the global scope and completes searching for
the variable there. Searching for any variable happens along the scope chain or in different
scopes until we get the variable. If the variable is not found in the global scope as well, a
reference error is thrown.
● All modern browsers support running JavaScript in "Strict Mode".
○ In "Strict Mode", undeclared variables are not automatically global.
Javascript Libraries

A JavaScript Library is a collection of pre-written JavaScript code that helps developers perform common
tasks easily without writing code from scratch.

Common JavaScript Libraries :

1. jQuery :
a. Simplifies DOM manipulation
b. Easy event handling
c. AJAX support
2. React :
a. Developed by Facebook
b. Used to build user interfaces
c. Component-based
d. Used in Single Page Applications (SPA)
3. Lodash :

a. Utility library
b. Used for array and object manipulation

4. Axios :

a. Used for HTTP requests

5. [Link]

a. Used for creating charts

A JavaScript framework is a complete structure or platform that provides a predefined way to build web
applications.

Why JavaScript Frameworks are Used

● To build large and complex web applications

1. Angular

● Developed by Google
● Full-fledged framework
● Uses TypeScript
● Follows MVC architecture

2. [Link]

● Progressive framework
● Easy to learn
● Combines features of Angular and React
● Used for dynamic user interfaces
3. [Link]

● Convention over configuration

4. Svelte

● Modern framework
● Compiles code at build time
● Faster runtime performance