An Introduction to JavaScript

MD. AL-AMIN
Table of Contents

1. Variables
2. Data Types
3. Arrays
4. Functions
5. Control Flow
6. Classes & Objects
7. Operators
8. Template Literals
9. Asynchronous JavaScript
10. Destructure
11. Concept of Modules
12. Closures and Scope
Variables

Variables are used to store data in a program. JavaScript has three types of
variable declarations: var, let, and const.
Variables
● var: Variables declared with var are function-scoped,
meaning they are limited to the function in which they
are declared. If declared outside any function, they
become globally scoped. var can be reassigned and
updated.

● let: Variables declared with let have block scope. let

can be reassigned, but they cannot be redeclared in
the same scope.

● const: Variables declared with const also have

block scope. const cannot be reassigned after they are
assigned a value. They are constants.
Data Types

Data types include primitive types like strings, numbers, booleans, null, and undefined, as well as
objects.
String: Represents a sequence of
characters.

Number: Represents numeric values. Can

be integers or floating-point numbers.

Boolean: Represents true or false values.

Data Types

Null: Represents the absence of any

value.

Undefined: Represents an uninitialized

variable.

NaN: It is a special value in JavaScript

that represents "Not a Number." It is a
result of an operation that cannot produce
a meaningful numeric result. For example,
dividing zero by zero, or attempting to
parse a non-numeric string as a number
will result in NaN.
Arrays

Collections of elements can be stored and managed using arrays in JavaScript. Square brackets are used to
form arrays, which can hold a variety of data types, such as objects, strings, numbers, and other arrays.
Arrays

Adding and Removing Elements:

push(): Adds elements to the end of an array.

pop(): Removes the last element from an array.

unshift(): Adds elements to the beginning of an

array.

shift(): Removes the first element from an

array.
Arrays

Array Iteration:

forEach(): Performs a given function once for every element in the array.

Cod Outp
e ut
Arrays

map(): Calls a function on each element, creating a new array containing the results.

Cod Outp
e ut
Arrays

filter(): The filter() method is used to create a new array with elements that pass a
specific test provided by a function. It does not modify the original array but returns a new
array containing only the elements that satisfy the specified condition.
Functions

Functions are reusable code blocks that are created to carry out particular tasks.
Functions
Function Return: JavaScript will "return"
to run the code after the invoking
statement if the function was called from a
statement.

Arrow Functions: These are especially

helpful for short, anonymous functions and
those that don't depend on this context on
their own.
Functions
Anonymous Functions: Anonymous functions are those without a name. It may be more
convenient to utilise an anonymous function in situations where a function is used as a
callback and is only used once.
Functions
Passing a Function as a Parameter: Functions can be passed to other functions as
parameters in JavaScript.
Control Flow
Conditional Statements:

if, else if, else:

Control Flow
switch:
Cod Outp
e ut
Control Flow
Loops: If you want to run the same code repeatedly with a different value, loops come in
handy.
for loop: Iterating over a sequence which
could be an object, string, or array - is done
with the for loop.

while loop: A block of code is kept running

by the while loop as long as the given
condition is met.
Control Flow

do-while loop: Similar to the while loop,

but it always executes the block of code at
least once, even if the condition is false.

Difference between while and do-while loop: The body of a while loop will never be
executed if the condition is originally false. Regardless of the starting condition, the body
of the loop is run at least once in a do-while loop.
Control Flow

for…in loop: It is often used for iterating

over the keys of an object.

for…of loop: Loops through an iterable

object's values (such as arrays or strings).
Control Flow

Difference between for...in and for...of

loop:

for…in for…of

To iterate over an object's properties. To iterate over the values of iterable

objects.

The order of iterations may differ and is not It ensures that the iteration order is well-
guaranteed. defined and consistent, taking into account
the internal structure of the iterable.

When working with objects when it is When working with iterable objects—arrays,
needed to repeatedly access their keys or strings, maps, sets, etc.—and needing to
properties loop through their values.
Classes & Objects

Classes in JavaScript offer a more streamlined and grammatical method for defining object-oriented
programming structures.

Class Declaration: The “class” keyword and the class name are used to declare a class. When an object is instantiated
from a class, a particular method called the constructor method is invoked. It is applied to initialise properties of objects.
Classes & Objects

Class Methods: Class methods are functions that are defined within a class.

Objects: Objects (instances) of a class are created using the new keyword.
Classes & Objects

Inheritance: Classes can inherit properties and methods from other classes using the extends keyword.
Classes & Objects

Object Methods: Object.keys, Object.values, Object.entries - these methods allow you to work
with object keys, values, and entries.
Operators

JavaScript includes a variety of operators, which are symbols or keywords that perform
operations on operands.

Conditional Operator: condition ? expr1 : expr2

Cod Outp
e ut
Operators

Spread Operator (...): The spread operator is used to expand elements of an array or object.
Operators

Rest Parameter (...): The rest parameter is used to collect the remaining arguments of a function into a single
array.
Template Literal

Template Literal is also known as “String Templates” and “Template Strings”. Template
literals offer a more practical and adaptable method of working with strings. Template
Strings use backticks (``) rather than the quotes ("") to define a string.
Template Literal

Multiline Strings: Template Strings allow multiline strings.

Cod Outp
e ut
Template Literal

String Interpolation: Interpolating variables and expressions into strings is made simple with the
help of Template Strings.
Asynchronous JavaScript

Asynchronous JavaScript is a programming paradigm that allows code execution to continue while
waiting for specific operations to complete, rather than stopping execution until those operations
are completed. Asynchronous operations are critical in situations when processes such as
retrieving data from a server, reading a file, or waiting for user input may take some time.
Asynchronous JavaScript

Callbacks: Callbacks are functions that serve as parameters to other functions.

This example demonstrates the non-blocking nature of

asynchronous operations in JavaScript. The program does
not wait for the fetchData operation to complete before
proceeding to the following statements. Instead, it continues
to execute, and when the asynchronous operation is
completed, the given callback (process in this case) is
called.
Asynchronous JavaScript

Promises: Promises are objects that reflect the eventual success or failure of an
asynchronous action.

● The fetchData function returns a new Promise. The Promise

takes a callback function with two parameters: resolve and
reject.
● Inside the callback, we simulate an asynchronous operation
with setTimeout. In this case, the operation is considered
successful.
● If the operation is successful, the resolve function is called
with the fetched data. If there's an error, the reject function
is called with an error message.
● The fetchData Promise is used with the then and catch
methods to handle the resolved and rejected states,
Asynchronous JavaScript

Async/Await: Async and await make promises easier to write. Async causes a
function to return a promise. Await causes a function to wait for a promise.

● The fetchData function returns a Promise, simulating

an asynchronous operation.
● The fetchDataAndProcess function is declared as
async, allowing the use of await inside it to pause the
execution until the Promise is resolved.
● Inside the fetchDataAndProcess function, await
fetchData() is used to pause the execution until the
asynchronous operation completes, and the result is
stored in the data variable.
Destructure

Destructuring is a JavaScript feature that extracts values from arrays or properties

from objects and assigns them to variables in a simple manner.

Destructuring
Array
Destructure

Destructuring is a JavaScript feature that extracts values from arrays or properties

from objects and assigns them to variables in a simple manner.

Destructuring
Objects
Destructure

Destructuring is a JavaScript feature that extracts values from arrays or properties

from objects and assigns them to variables in a simple manner.

Destructuring function
parameters
Concept of Modules

In JavaScript, modules are used to split code into independent files

or components, making it more modular, maintainable, and
scalable. The import and export keywords are used to share and
receive functionalities respectively across different modules.

The export keyword is used to make a variable, function, class or

object accessible to other modules. In other words, it becomes a
public code.

The import keyword is used to bring in public code from another

module.
 Closures and Scope

Closures and scope are basic notions in JavaScript that determine how variables and
functions are defined, accessed, and preserved throughout the code.

Scopes: Scope refers to the context in which variables and functions are declared, which
determines their accessibility.

Global Scope:

● Global scope refers to variables defined outside

of any block or function.
● They are accessible from within functions as
well as from anyplace else in the code.
Closures and Scope
Local Scope:

● Declared variables have a local scope

and are only available inside the
function in which they are declared.

Closures:

● Closures occur when one function is defined within

another and has access to the outer function's
variables. A closure enables a function to retain access
to both its own scope and the scope of the outer
(enclosing) function.
References

1. https://www.w3schools.com/js/
2. https://devdocs.io/javascript/

Some Helpful and Recommended VS Code extensions for JavaScript:

3. ESLint
4. Prettier - Code Formatter
5. GitLens
6. npm Intellisense
7. Live Server
Thank You