MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

MASTERING JAVASCRIPT
WITH SURAJ YADAV FROM
BASICS TO BRILLIANCE
“A Step-by-Step Guide to Becoming a JavaScript Expert"

Author: - Suraj Yadav

Manual Version: 01.00

January 24,2025

PAGE 1 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

DISCLAIMER
© HWS Institute of open-source university
All Rights Reserved

On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers, footers,
lists, cover pages, and other document building blocks. When you create pictures, charts, or
diagrams, they also coordinate with your current document look. You can easily change the
formatting of selected text in the document text by choosing a look for the selected text
from the Quick Styles gallery on the Home tab.

You can also format text directly by using the other controls on the Home tab. Most controls
offer a choice of using the look from the current theme or using a format that you specify
directly. To change the overall look of your document, choose new Theme elements on the
Page Layout tab. To change the looks available in the Quick Style gallery, use the Change
Current Quick Style Set command.

Both the Themes gallery and the Quick Styles gallery provide reset commands so that you
can always restore the look of your document to the original contained in your current
template. On the Insert tab, the galleries include items that are designed to coordinate with
the overall look of your document. You can use these galleries to insert tables, headers,
footers, lists, cover pages, and other document building blocks. When you create pictures,
charts, or diagrams, they also coordinate with your current document look.

HWS Institute of open-source university

A free template by Used to Tech (https://usedtotech.com)

0000 Some Example Street

Karachi, Sindh 0000, Pakistan
+92-000-1234567
https://usedtotech.com
admin@usedtotech.com

PAGE 2 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

ABOUT BOOK
© HWS Institute of open-source university
All Rights Reserved

In our book, we take you on a journey through the world of JavaScript: its core principles
and advanced concepts that let us unleash its true power. Many developers do not even
know the true nature of JavaScript and its benefits because it gets misinterpreted or
oversimplified. That will offer a comprehensive analysis of the history and future direction of
JavaScript, establishing it as one pillar upon which modern web development is built. In
addition to the syntax and features, we will touch on best practices and design patterns that
lead to clean, effective, and scalable code.
For you, that means no developer sets out to write poor code as much as how one refuses
the delight of programming. Yet, without the proper understanding of JavaScript, most
developers dig a hole leading to unsustainable codebases. This book is designed to help you
navigate through the complexities in a manner that will allow you to not only avoid these
pitfalls but also learn and master this language with greater satisfaction and
accomplishment on your coding adventure.
Think of this book as a guide that will help you on your journey to master JavaScript, with
the tools and insights that we need to overcome any obstacles lying ahead and make all the
goodness coding in JavaScript has. Whether you are working on a new project, solving tough
algorithms, or just trying to optimize your web applications, the insights shared in this book
provide valuable tips that will help both advance your skills as well as empower all of your
projects.

HWS Institute of open-source university

A free template by Used to Tech (https://usedtotech.com)

0000 Some Example Street

Karachi, Sindh 0000, Pakistan
+92-000-1234567
https://usedtotech.com
admin@usedtotech.com

PAGE 3 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

ABOUT WRITER
© HWS Institute of open-source university
All Rights Reserved

Suraj Yadav is a passionate self-taught software engineer and an explorer of JavaScript's

depths, dedicated to unearthing the truths that empower developers to achieve greatness in
their craft. He embarked on his coding journey at the young age of 10 and has since become
a master-builder of intuitive, powerful web applications. His teachings are grounded in
practical experience, offering insights that go beyond the basics to touch on the nuances
and intricacies of the language.

Suraj understands that the pursuit of programming excellence is not without its challenges
—much like the pursuit of happiness in life. He knows that true mastery requires navigating
through the complexities, understanding the consequences of poor practices, and learning
to harness the power of JavaScript effectively. His goal is to help others avoid the pain of
common mistakes while maximizing the pleasure that comes from writing clean, efficient
code

Suraj understands that the pursuit of programming excellence is not without its challenges
—much like the pursuit of happiness in life. He knows that true mastery requires navigating
through the complexities, understanding the consequences of poor practices, and learning
to harness the power of JavaScript effectively. His goal is to help others avoid the pain of
common mistakes while maximizing the pleasure that comes from writing clean, efficient
code.

HWS Institute of open-source university

A free template by Used to Tech (https://usedtotech.com)

0000 Some Example Street

Karachi, Sindh 0000, Pakistan
+92-000-1234567
https://usedtotech.com
admin@usedtotech.com

PAGE 4 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

TABLE OF CONTENTS

Chapter 1: INTRODUCTION.....................................................................

1.1 The History and Evolution of JavaScript.................................................6

1.2 How Important is JavaScript in Web.....................................................10
1.3 Setting up your environment (browsers, editors, and tools)................11

Chapter 2: Basic Syntax and Language Fundamentals..........................13

2.1 Words and keywords.............................................................................13

2.2 Introduction to Variables in JavaScript.................................................14
2.3 Introduction to Data Types in JavaScript..............................................16
2.4 Non-Primitive Data Types in JavaScript................................................18
Ordered list example...................................................................................33
Table data example.....................................................................................38

PAGE 5 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

CHAPTER 1: INTRODUCTION

If you also think that I can complete this book of 600 pages in just 6 to 7
days by covering 100 pages per day and then instantly create amazing
projects like encryption systems, libraries like React, or runtime
environments like NodeJS, then just understand that JS is not an easy task
like making pudding, you can easily complete it and create top 1% projects,
of course, you can create projects like NodeJS or React by watching tutorials
on YouTube or reading any other article but you cannot understand what is
happening in your project, you cannot understand how your project works,
so if you also want to become a top 1% JavaScript developer, then stop
cramming and take time to learn and make proper notes, understand
properly

1.1 The History and Evolution of JavaScript

JavaScript was built at Netscape by Brendan Eich and arrived on the scene
in 1995. Initially, it was known as Mocha (Mocha refers to a type of high-
quality coffee made from a specific coffee bean—perhaps Brendan Eich liked
Mocha coffee!) and then LiveScript before finally being renamed JavaScript
to capitalize on the popularity of the Java programming language at the time.

The Birth of ECMAScript: JavaScript was submitted to ECMA International

by its inventor. ECMA International is a non-profit organization that develops
global standards for information and communication technology (ICT) and
consumer electronics. This submission led to the formation of Technical
Committee 39 (TC39), a group responsible for maintaining and updating the
standard for JavaScript, known as ECMAScript.

ECMAScript is designed to manipulate and automate tasks within a host

environment, such as web browsers and servers. It also supports key
concepts of object-oriented programming (OOP), including objects, classes,
inheritance, and encapsulation. Additionally, ECMAScript is a specification
for a general-purpose programming language, and JavaScript, which is an
implementation of ECMAScript, is capable of performing computations,
manipulating data, and handling various programming tasks.

PAGE 6 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

The committee worked for years to standardize JavaScript, leading to the

release of the first version of ECMAScript in June 1997. This played a crucial
role in ensuring consistent JavaScript practices across web browsers.

Key Versions and Features:

Note: - No need to learn this version, just stay
updated
ECMAScript 1(1997) and 2 (1998):
Initial release and some minor changes introduced in this version

ECMAScript 3 (1999):
This version introduced various features like try/catch error handling and
Regular Expressions. It also paved

the way for AJAX, allowing web pages to load data in the background without
needing a refresh.

(Don’t worry if you don’t understand these terms now; we’ll cover them in
detail later.)

Libraries and Frameworks:

Over time, libraries like jQuery (2006) made JavaScript easier to work with,
while frameworks like AngularJS

(2010) and React (2013) helped developers create even more complex
applications with ease.

ECMAScript 5 (2009):
In ECMAScript 5, strict mode was introduced, which helps in writing safer
code.

ECMAScript 6 (2015):
brought essential features like let and const for block-scoped variables,
arrow functions for concise Syntax, Template literals for string formatting,
classes to simplify object-oriented programming, and modules to
import/export code.

It also introduced promises, which are useful for handling asynchronous

operations, and Destructuring, which allows easy extraction of data from
objects and arrays.

PAGE 7 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

ES7 (2016)
was a smaller update, adding two key features: the exponentiation operator
(**), which simplifies math operations, and Array.prototype.includes(),
making it easier to check if an array contains a specific element.

ES8 (2017)
expanded the language further with async/await, which made handling
promises more readable and easier to manage. It also added object features
like Object.entries() and Object.values() to work with object data

more effectively.

ES9 (2018)
introduced rest and spread properties for objects, allowing you to extract
and merge object properties easily. It also improved asynchronous code
handling with asynchronous iteration, letting developers loop over async
data streams.

ES10 (2019)
added features like Array.prototype.flat() and flatMap() to work with nested
arrays and simplified the transformation of arrays. The Optional catch
binding allowed catching errors without explicitly defining the error
parameter, making the code cleaner.

ES11 (2020)
introduced features like BigInt to handle large integers beyond the Number
type limit. The nullish coalescing operator (??) and optional chaining (?.)
provided more concise ways to handle null or undefined values without
throwing errors.

ES12 (2021)
brought improvements like logical assignment operators, which combine
logical operations and assignments. It also introduced numeric separators
(underscores in numbers) to improve readability, and Promise.any(), which
resolves the first fulfilled promise in a list.

ES13 (2022)
included Top-level await, which allowed using await in the global context,
making asynchronous code simpler in modules.

PAGE 8 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

ES14 (2023)
expanded array methods with new ways to find indices and made it easier to
work with arrays. It also added enhanced error handling, making debugging
smoother.

ES2024 continues the trend of refining JavaScript, focusing on better

performance and more user-friendly features. Some anticipated
improvements are around enhancing functional programming tools,
improving developer experience, and more efficient memory management,
but exact features will become clear once

finalized.

Where It Is Now:
Today, JavaScript runs on clients across the globe, making it one of the most
popular programming and scripting languages, with around 95% of websites
using it. JavaScript continues to evolve, with new features being added every
year, securing its top spot in web development trends. In other words,
JavaScript has far outgrown its origins as a basic scripting language and is
now an essential tool for creating dynamic, modern web applications—a
promising sign for its future.

PAGE 9 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

1.2 How Important is JavaScript in Web

Development?
JavaScript is a vital and comprehensive tool that plays essential roles in a
website, including making it interactive, data-driven, and capable of loading
specific content quickly.

Interactivity:
Imagine a contact form on a website. Without JavaScript, when a user
submits the form, the entire page would need to reload to confirm if the form
was submitted successfully. JavaScript allows for form validation, where the
user receives instant feedback if they haven't filled out all required fields,
preventing unnecessary reloads. It also enables features like real-time chat
applications and dynamic content updates like search results appearing as
you type.

Dynamic Content:
Dynamic content refers to content on a webpage that can change without
reloading the entire page. For instance, JavaScript can be used to display a
random product recommendation on a homepage or update a shopping cart
total as items are added or removed. This creates a more engaging and
responsive user experience.

Accessibility:
JavaScript plays a crucial role in making websites accessible to everyone. By
supporting screen readers and keyboard navigation, developers can ensure
that users with disabilities can interact with their website effectively.
Performance: While well-written JavaScript can enhance a website's
interactivity, it's important to consider performance. Techniques like code
minification and asynchronous loading can help optimize JavaScript code to
ensure it doesn't slow down page load times.

PAGE 10 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

1.3 Setting up your environment (browsers, editors,

and tools)
To start developing with JavaScript, you need a few key ingredients: A Web
Browser: Any modern desktop, laptop, virtual machine, or even mobile
device will do. You can use Google Chrome, Mozilla Firefox, or Microsoft
Edge. These browsers are widely used and have excellent built-in developer
tools, making them ideal for debugging JavaScript.

IDE (Integrated Development Environment):

You can use any IDE or code editor that supports JavaScript. A popular
choice is Visual Studio Code, a free, open-source, cross-platform code editor
with excellent JavaScript support and a vast ecosystem of plugins.

Node.js:
While Node.js isn’t specific to client-side JavaScript, it’s essential if you want
to install libraries and tools (node packages) from the npm package
manager. Node.js also allows you to execute JavaScript on the server side.

Step-by-Step Tutorial:
How to Set Up Your JavaScript Development Environment Install a Web
Browser:

If you don’t have one, you’ll need to download and install a modern web
browser like Google Chrome or Mozilla Firefox.

Install an IDE:

Visual Studio Code: Download and install VS Code from

https://code.visualstudio.com/. It’s free, open-source, and multi-platform.

Install Node.js (Optional):

Windows: Download the Node.js installer from

https://nodejs.org/en/download/ and run it.

macOS: Download the Node.js installer from https://nodejs.org/en/download/

and execute it.

Linux: You can install Node.js using your package manager. For example, on
Ubuntu, you can run sudo

apt-get install nodejs.

PAGE 11 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

With these in place, you’re ready to start writing your JavaScript code.
Happy coding!

Note: If you find any of these steps unclear, you can refer to tutorials on
YouTube.

PAGE 12 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

CHAPTER 2: BASIC SYNTAX AND

LANGUAGE FUNDAMENTALS

2.1 Words and keywords

Words: -
Words in JavaScript are the identifiers, variables, function names, and other
symbols that you, the programmer, create or use in your code. These words
are essential for writing meaningful and functional code, and they must
adhere to specific naming rules to be valid in JavaScript. (In simpler terms,
words are any terms you create that do not have predefined meanings in
JavaScript.)

Keyword: -
Keywords are reserved words in JavaScript that have special meanings and
purposes within the language. They are part of the language's syntax and
cannot be used as identifiers (variable names, function names, etc.). (In
simpler terms, keywords are words that have built-in meanings in
JavaScript.)

PAGE 13 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

2.2 Introduction to Variables in JavaScript

What are Variables?
Think of variables as containers that store data. In JavaScript, you use
variables to hold different kinds of information, such as numbers, text
(strings), true or false values (Booleans), and more.

Declaring Variables
To create a variable in JavaScript, you use the let or const keyword. This is
called declaring the variable.

let: Used for variables whose values might change later.

const: Used for variables whose values should not change once they're set.

Example:

let name = "Alice"; // Declares a variable named 'name'

and assigns it the value "Alice"
const age = 30; // Declares a constant named 'age' and
assigns it the value

Assigning Values
Once you've declared a variable, you can assign a value to it using the
assignment operator (=).

Example:

let favoriteColor = "blue";

Accessing Variable Values

To use the value stored in a variable, you simply refer to its name.

Example:

console.log(name);

When to use which:

PAGE 14 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

var: Avoid using var in modern JavaScript. let: Use let for variables that
might change within a block. const: Use const for variables that should not
change.

Example:

// Using var

var x = 10;

x = 20; // Valid

// Using let

let y = 30;

y = 40; // Valid

// Using const

const z = 50;

z = 60; // Error: Cannot assign to constant variable

In summary:
Var is generally discouraged due to its potential for unexpected behavior.
Let is flexible and allows for reassigning values. Const is used for values that
should remain constant throughout the program.

PAGE 15 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

2.3 Introduction to Data Types in JavaScript

What are Data Types?
In JavaScript, data types define the kind of values a variable can hold.
Knowing about data types is essential for understanding how to work with
different types of data in your code.

Primitive (common or basic) Data Types in

JavaScript:
Numbers:

 Represent numerical values.

 Can be integers or floating-point numbers.

 Example: 10, 3.14

Strings:

 Represent text or sequences of characters.

 Enclosed in quotes (single or double).

 Example: "Hello, world!", ‘ JavaScript is fun ’, ` Hello JavaScript `

Booleans:

 Represent true or false values.

 Used for logical operations.

 Example: true, false

Null:

 Represents an empty value.

 Often used to indicate the absence of a value.

 Example: null

Undefined:

 Represents a variable that has been declared but not yet assigned a
value.

 Example:

let myVariable; // myVariable is undefined

PAGE 16 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Symbols:

We understand this after some time

How to Determine a Data Type:

You can use the typeof operator to find the data type of a variable.

Example: -

let number = 10;

let text = "Hello";

let isTrue = true;

let person = {name: "Bob"};

let numbersArray = [1, 2, 3];

let emptyValue = null;

let uninitializedVariable;

console.log(typeof number); // Output: "number"

console.log(typeof text); // Output: "string"

console.log(typeof isTrue); // Output: "boolean"

console.log(typeof person); // Output: "object"

console.log(typeof numbersArray); // Output: "object"

console.log(typeof emptyValue); // Output: "object"

console.log(typeof uninitializedVariable); // Output: "undefined"

console.log(typeof Variable); // Output: "not defined"

The difference between undefined and not-defined

You know that the variable that is declared but not assigned any value yet is
called undefined, but the variables that are not declared and we are trying to
access their value are called "undefined", we are providing the example of
undefined and "not undefined" in the above code.

2.4 Non-Primitive Data Types in JavaScript

PAGE 17 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Before understanding data types in JavaScript just

understand this term and its meaning.
a. Data Structure: - Data Structure is a way of organizing,
managing, and storing data in a data format that can be
accessed efficiently. Objects and arrays in JavaScript are a
kind of data structure that is designed for storing groups of
data.
b. Complex data structures: - Complex data structures are
ways to organize Complex Data and store data in a more
effective way than simple data types like numbers, strings,
or Booleans. They allow us to represent complex
relationships and hierarchical structures within data.
(There are examples of data structures and complex data
structures which will be discussed a little later)
c. Reference types: - reference types are data types that store
a reference to a memory location where the actual data is
stored. This means that multiple variables can refer to the
same underlying data. (If you have questions like what is
the key of reference type and how do reference types work
then don't worry, just understand it. If you can't
understand then try to understand non-primitive data
types. Worry later Don't do it can be easily understood)

Understanding Non-Primitive Data Types

Non-primitive data types in JavaScript are complex data structures that can
hold multiple values. Non-primitive data types are reference types. This
means that variables holding non-primitive values don't store the values
directly but rather store references to them.

Common Non-Primitive Data Types:

Common Non-Primitive Data Types are objects and arrays.

1. Objects:

Understanding Objects
Objects in JavaScript are collections of key-value pairs, where the keys are
properties and the values can be of any data type. They are used to
represent real-world entities or abstract concepts.

Creating Objects
There are two primary ways to create objects in JavaScript:

PAGE 18 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

1. Object Literal Syntax:

let person = {

firstName: "John",

lastName: "Doe",

age: 30,

city: "New York"

};

2. Using the new Object() Constructor:

let person = new Object()

person.firstName = "John",

person.lastName = "Doe",

person.age = 30,

person.city = "New York"

Accessing Object Properties

You can access object properties using dot notation or bracket notation.

1. Dot Notation:
console.log(person.firstName); // Output: John

2. Bracket Notation:
console.log(person["lastName"]); // Output: Doe

Adding and Removing Properties

You can add new properties to an object and remove existing ones.

1.Adding Properties:

PAGE 19 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

person.occupation = "Developer";

2. Removing Properties:
Delete person.city;

Modifying Object Properties

You can modify the values of existing properties.

person.age = 31;

Nested Objects
Objects can contain other objects as properties.

let address = {
street: "123 Main St",
city: "Anytown",
state: "CA"
};
person.address = address;

Practice Questions:

1. Create an object representing a book, with properties like title, author,

and publication year.

2. Create an object representing a car, with properties like make, model,

year, and color.

3. Create an object representing a person, with properties like name, age,

and hobbies.

4. Nest an object representing the person's address within the person object.

PAGE 20 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Answers:
1. Create an object representing a book, with properties like title, author,
and publication year.

const book = {

title: "The Lord of the Rings",

author: "J.R.R. Tolkien",

publicationYear: 1954

};

2. Create an object representing a car, with properties like make, model,

year, and color.

const car = {

make: "Toyota",

model: "Camry",

year: 2020,

color: "Silver"

};

3. Create an object representing a person, with properties like name, age,

and hobbies.

const person = {

name: "Alice Johnson",

age: 30,

hobbies: ["reading", "coding", "hiking"],

};

4. Nest an object representing the person's address within the person

object.

const person = {

name: "Alice Johnson",

age: 30,

hobbies: ["reading", "coding", "hiking"],

PAGE 21 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

address: {

street: "123 Main St",

city: "Anytown",

state: "CA",

zip: "12345"

By following these approaches, you can create well-structured and efficient

JavaScript objects to represent real-world entities and their relationships.

PAGE 22 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

2. Arrays
Understanding Arrays
An array is a data structure that can store a collection of items in a
single list, in order.

This is why we use arrays: You can store more than one value under a
single variable name, which helps you manage the data better.

Creating Arrays
There are two primary ways to create arrays in JavaScript:

1. Using square brackets:

let fruits = ["apple", "banana", "orange"];

2. Using the new Array() constructor:

let fruits = new Array("apple", "banana", "orange");

Accessing Array Elements

Now you know how to create an array, but do you know how to access the
elements of that array? You can access individual elements of an array by
using its index. Array indices start from 0.

let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // Output: apple

console.log(fruits[1]); // Output: banana

console.log(fruits[1]); // Output: orange

Modifying Array Elements

Now you know how to create an array and access the array elements, but
what if in some situation you need to modify a particular element of that
array? Then how can you do this? You can modify the value of an
element by assigning a new value to its index:

fruits[1] = "grape";

console.log(fruits); // Output: ["apple", "grape", "orange"]

Array Length

PAGE 23 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

If you want to find The length property of an array indicates the number of
elements it contains:

console.log(fruits.length); // Output: 3

Adding and Removing Elements

Arrays provide methods for adding and removing elements at different
positions.

If you want to Add elements at the start of the array then you can Use
unshift() to add elements to the start of an array:

fruits.unshift("kiwi"); // Adds "kiwi" to the beginning

Adding elements to the end of the array

But If you want to Add elements at the End of the array then you can Use
push() to add elements to the end of an array:

fruits.push("mango"); // Adds "mango" to the end

Adding elements in between two elements

Now you know how to add elements at the start and end of the array but if
someone says to add "mango" between "banana" and "orange" then what you
can do you can Use splice() to insert elements at a specific position in the
array.

let fruits = ["apple", "banana", "orange"];

fruits.splice(2, 0, "mango"); // Inserts "mango" at index 2

console.log(fruits); // Output: ["apple", "banana", "mango",

"orange"]

Removing Elements
Now you know how to add elements in an array but now let's understand
how You can remove elements from an array:

If you want to remove elements at the start of the array then you can Use
shift() to remove elements at the start of an array:

fruits.shift(); // Removes the first element

But If you want to remove elements at the End of the array then you can Use
pop() to remove elements to the end of an array:

fruits.pop(); // Removes the last element

PAGE 24 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Removing elements from a specific position

Now you know how to remove an element at the start and end of the array
but if someone says that remove "mango" then what you can do you can Use
splice() to remove elements at a specific position in the array.

let fruits = ["apple", "banana", "mango", "orange"];

fruits.splice(2, 1); // Removes "mango" at index 2

PAGE 25 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Understanding Data structures and Complex Data

structures in JavaScript with Code Examples
As I say that There are examples of complex data structures which will be
discussed a little later now it time to see examples of complex data
structures

1. Simple Data Structures

Using an Object: - A simple object can represent a single entity with
straightforward properties.

const person = {

name: "Alice",

age: 25,

isStudent: true

};

console.log(person.name); // Output: "Alice"

console.log(person.age); // Output: 25

In this example: person is an object with three properties (name, age, and
isStudent), storing information about a single person.

Using an Array: - A simple array can represent a list of items, such as a list
of fruits.

const fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]); // Output: "apple"

console.log(fruits[1]); // Output: "banana"

In this example:

fruits are an array containing three string elements, each representing a

type of fruit.

PAGE 26 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

2. Complex Data Structures

Nested Objects : - In a more complex structure, an object might contain

other objects as properties, creating a nested structure.

const company = {

name: "Tech Corp",

address: {

street: "123 Innovation Drive",

city: "Techville",

postalCode: "12345"

},

employees: {

manager: {

name: "John Doe",

age: 45,

position: "Manager"

},

engineer: {

name: "Jane Smith",

age: 30,

position: "Software Engineer"

};

console.log(company.address.city); // Output: "Techville"

console.log(company.employees.engineer.name); // Output: "Jane

Smith"

PAGE 27 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

In this example:

 company is an object with nested objects: address and employees.

 address contains details about the company's location.

 employees contains objects representing individual employees with

their own properties.

Array of Objects

An array can contain multiple objects, each representing a distinct entity.

This is often used to represent lists of items, like a list of users.

const users = [

{ id: 1, name: "Alice", age: 25 },

{ id: 2, name: "Bob", age: 30 },

{ id: 3, name: "Charlie", age: 35 }

];

console.log(users[0].name); // Output: "Alice"

console.log(users[1].age); // Output: 30

In this example:

 users are an array where each element is an object representing a

user.

 Each user object contains id, name, and age properties.

PAGE 28 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Complex Data Structure: Array of Objects with Nested Arrays and

Objects

In a more advanced structure, arrays and objects are combined, with objects
containing arrays or other objects, creating a multi-level data structure.

const library = {

name: "City Library",

location: "Downtown",

books: [

title: "JavaScript: The Good Parts",

author: "Douglas Crockford",

genres: ["Programming", "JavaScript"],

available: true

},

title: "Eloquent JavaScript",

author: "Marijn Haverbeke",

genres: ["Programming", "JavaScript"],

available: false

],

staff: [

{ name: "Sarah", role: "Librarian" },

{ name: "Tom", role: "Assistant" }

};

console.log(library.books[0].title); // Output: "JavaScript: The

Good Parts"

console.log(library.books[1].genres[0]); // Output
"Programming"

PAGE 29 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

console.log(library.staff[1].role); // Output:
"Assistant"

In this example:

 library is an object representing a library with properties name,

location, books, and staff.

 books are an array of objects, each representing a book with nested

arrays for genres.

 staff is an array of objects, each representing a staff member with their

name and role.

Summary

 Simple data structures: Use objects for entities with straightforward

properties and arrays for lists of values.

 Complex data structures: Combine objects and arrays to represent

nested data, lists of entities, or more structured information (e.g., a
library with books and staff members).

PAGE 30 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Reference types in JavaScript

are essential for understanding how complex data structures work. Reference types differ from
primitive types in that they don’t store actual values directly; instead, they store references (or
addresses) pointing to the actual location in memory where the value is stored
.
Key Reference Types in JavaScript
1. Objects
 Definition: Objects in JavaScript are collections of key-value
pairs, where the keys are properties and the values can be of any
data type. They are used to represent real-world entities or
abstract concepts.
 Characteristics:

 Unordered collection: The properties in an object are

unordered, and each property has a unique key.
 Dynamic: You can add, update, or remove properties from
an object at any time.
 Reference-based: When an object is assigned to a
variable, the variable holds a reference to the object, not
the object itself.
 Example:

const person = { name: "Alice", age: 25 };

const another person = person; // another person
references the same object

Modifying another person also affects the person, as both reference the
same object in memory.

2. Arrays
 Definition: An array is a data structure that can store a
collection of items in a single list, in order.
 Characteristics:
 Ordered collection: Each element in an array has an
index, starting from 0.
 Mutable: Arrays can be modified by adding, removing,
or updating elements.
 Reference-based: Like objects, arrays are reference
types, meaning assigning an array to a new variable
only copies the reference, not the actual data.

PAGE 31 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

 Example:
const fruits = ["apple", "banana"];
const More_Fruits = fruits; // Both variables
reference the same array
More_Fruits.push("cherry");
console.log(fruits); // Output: ["apple", "banana",
"cherry"]

Here we have more Key Reference Types in JavaScript like Functions,

Date, Maps, and Sets (Introduced in ES6), WeakMap, and WeakSet (for
special cases) but for now, just understand these two Key Reference
Types in JavaScript.

PAGE 32 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

2.5 Introduction to Operators in JavaScript

In JavaScript, operators are symbols or keywords used to perform
operations on values and variables. They allow us to manipulate data,
perform calculations, compare values, and control the flow of logic.
Operators are a fundamental part of JavaScript programming and are used
extensively to create functionality within code.

Types of Operators in JavaScript

1. Arithmetic Operators

 Arithmetic operators are used for performing basic mathematical

calculations.

 Common Arithmetic Operators:

 Addition (+): Adds two values.

 Subtraction (-): Subtracts one value from another.

 Multiplication (*): Multiplies two values.

 Division (/): Divides one value by another.

 Modulus (%): Returns the remainder of a division

operation.

 Exponentiation (**): Raises a number to the power of

another.

 Example:

let a = 10;

let b = 3;

console.log(a + b); // 13 (Addition)

console.log(a - b); // 7 (Subtraction)

console.log(a * b); // 30 (Multiplication)

console.log(a / b); // 3.3333... (Division)

console.log(a % b); // 1 (Modulus)

console.log(a ** b); // 1000 (Exponentiation, 10^3)

2. Assignment Operators
 Assignment operators are used to assign values to variables.

PAGE 33 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

 Common Assignment Operators:

 Assignment (=): Assigns a value to a variable.
 Add and Assign (+=): Adds a value to a variable and
assigns the result.
 Subtract and Assign (-=): Subtracts a value from a
variable and assigns the result.
 Multiply and Assign (*=): Multiplies a variable by a
value and assigns the result.
 Divide and Assign (/=): Divides a variable by a value and
assigns the result.
 Modulus and Assign (%=): Takes the modulus of a
variable and assigns the result.
 Example:
let x = 5;
x += 3; // x = x + 3; x is now 8
x -= 2; // x = x - 2; x is now 6
x *= 4; // x = x * 4; x is now 24
x /= 3; // x = x / 3; x is now 8
x %= 5; // x = x % 5; x is now 3

3. Comparison Operators
 Comparison operators are used to compare two values and
return a boolean (true or false) based on the comparison result.
 Common Comparison Operators:
 Equal to (==): Checks if two values are equal (type
conversion occurs).
 Strict Equal to (===): Checks if two values are equal and
of the same type.
 Not Equal to (!=): Checks if two values are not equal
(type conversion occurs).
 Strict Not Equal to (!==): Checks if two values are not
equal and of different types.
 Greater than (>): Checks if the left value is greater than
the right value.
 Less than (<): Checks if the left value is less than the
right value.
 Greater than or equal to (>=): Checks if the left value is
greater than or equal to the right value.
 Less than or equal to (<=): Checks if the left value is
less than or equal to the right value.
 Example:

let age = 18;

console.log(age == "18"); // true (type conversion)

PAGE 34 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

console.log(age === "18"); // false (different types)

console.log(age > 16); // true

console.log(age < 21); // true

console.log(age >= 18); // true

console.log(age <= 18); // true

4. Logical Operators

 Logical operators are used to combine multiple boolean

expressions or values and return a boolean result.

 Common Logical Operators:

 AND (&&): Returns true if both conditions are true.

 OR (||): Returns true if at least one of the conditions is

true.

 NOT (!): Reverses the boolean value of an expression.

 Example:

let isAdult = true;

let hasPermission = false;

console.log(isAdult && hasPermission); // false (both

conditions are not true)

console.log(isAdult || hasPermission); // true (at

least one condition is true)

console.log(!isAdult); // false (NOT operator)

5. Bitwise Operators

 Bitwise operators perform operations on the binary

representations of numbers.

 Common Bitwise Operators:

 AND (&): Returns a 1 in each bit position for which the

corresponding bits of both operands are 1.

 OR (|): Returns a 1 in each bit position for which the

corresponding bits of either operand are 1.

 XOR (^): Returns a 1 in each bit position for which the

corresponding bits of the operands are different.

PAGE 35 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

 NOT (~): Inverts all the bits.

 Example:

let a = 5; // 0101 in binary

let b = 3; // 0011 in binary

console.log(a & b); // 1 (0001 in binary)

console.log(a | b); // 7 (0111 in binary)

console.log(a ^ b); // 6 (0110 in binary)

console.log(~a); // -6 (two's complement of 0101 is 1010)

6. Ternary (Conditional) Operator

 The ternary operator (? :) provides a shorthand way to write

conditional expressions. It takes three operands and returns a
value based on a condition.

 Syntax: condition? expressionIfTrue: expressionIfFalse

 Example:

let age = 20;

let canVote = (age >= 18) ? "Yes": "No";

console.log(can_Vote); // Output: "Yes"

7. Type Operators

 Type operators are used to get the type of a value or convert

types.

 Common Type Operators:

 typeof: Returns the data type of a value.

 Instance of: Checks if an object is an instance of a specific

class or constructor.

 Example:

console.log(typeof 42); // "number"

console.log(typeof "Hello"); // "string"

console.log([] instanceof Array); // true

8. Nullish Coalescing Operator (??) (ES2020)

PAGE 36 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

 The nullish coalescing operator returns the right-hand operand

when the left-hand operand is null or undefined; otherwise, it
returns the left-hand operand.

 Example:

 javascript

 Copy code

 let userInput = null;

 let defaultText = "Default";

 console.log(userInput ?? default text); // Output: "Default"

Summary

 Operators in JavaScript enable you to perform a variety of operations,

from basic arithmetic and assignments to more complex logical and
bitwise operations.

 Understanding each operator and its usage is essential to writing

effective and efficient JavaScript code.

 Each type of operator serves a specific purpose and is integral in

manipulating data and controlling program flow.

PAGE 37 OF 38
Copyright © 2025 – HWSIOSU
 MASTERING JAVASCRIPT WITH SURAJ YADAV FROM BASICS TO BRILLIANCE

Ordered list example

1. You can easily change the formatting of selected text in the document
text by choosing a look for the selected text from the Quick Styles
gallery on the Home tab.
2. You can also format text directly by using the other controls on the
Home tab. Most controls offer a choice of using the look from the
current theme or using a format that you specify directly.
3. To change the overall look of your document, choose new Theme
elements on the Page Layout tab. To change the looks available in the
Quick Style gallery, use the Change Current Quick Style Set
command.
4. Both the Themes gallery and the Quick Styles gallery provide reset
commands so that you can always restore the look of your document
to the original contained in your current template.

Table data example

Data Set 01 Data Set 02 Data Set 03
Text goes here… Text goes here… Text goes here…
Text goes here… Text goes here… Text goes here…
Text goes here… Text goes here… Text goes here…
Text goes here… Text goes here… Text goes here…

PAGE 38 OF 38
Copyright © 2025 – HWSIOSU