Full Stack Web Development — MERN — Part 7

Introduction to JavaScript:

What is JavaScript?

JavaScript is a high-level, interpreted programming language primarily used to make web pages interactive. Think of it as the “behavior layer” of a website: while HTML structures content and CSS styles it, JavaScript adds interactivity, logic, and dynamic behavior.

Key Features:

1. Client-Side Scripting:

· Runs in the browser, directly on the user’s device.

· Can respond to user actions (clicks, typing, scrolling, etc.) without refreshing the page.

2. Interpreted Language:

· No need to compile. The browser reads and executes JS directly.

3. Dynamic & Flexible:

· You can change HTML content, CSS styles, and even add or remove elements dynamically.

4. Versatile:

· Can be used for frontend (web pages), backend (Node.js), mobile apps, and even game development.

5. Event-Driven & Asynchronous:

· Can handle events like clicks, API responses, timers, and more.

Security Note:

· JS runs on the client, so never trust it for critical security (like authentication or access control).

· Always validate and sanitize user input on the server side.

A basic example of integrating the JavaScript:

Code: using <script> tag in the same .html file

Output:

Example: adding the JavaScript from the .js file

[embed]List: MERN-Full Stack Web Development | Curated by Aditya Kumar | Medium MERN-Full Stack Web Development · 15 stories on Mediummedium.com

Code:

Output:

Example: introducing console.log()

Code:

Output:

Console:

Variables in JavaScript:

What is a Variable?

A variable is like a container that stores data. You can store values like numbers, text, or objects, and use them later in your program.

In JavaScript, we declare variables using three keywords:

· var // old way (avoid)

· let // modern and recommended

· const // for constants (unchangeable)

Difference between var, let and const:

A basic code showing the declaration of variable in JS, and also adding them:

Example: use of typeof() to know the variable type

We can write like this as well: (typeof b); and (typeof b) without semicolon

Example: use of const keyword

We can’t edit the value we had given in the const variable:

Example: using the let keyword

So, what’s the issue with var that we needed let? Var scope is global while let scope is local

See, in above example, we can clearly see that num = 20, be in block and hence be 20.

While in below example when we used var:

Also,

Data Types in JavaScript:

What are Data Types?

Data types define the kind of value a variable can hold — like numbers, text, true/false, objects, etc. JavaScript is a dynamically typed language → you don’t need to declare the type; JS figures it out automatically.

Example:

· let age = 20; // number

· let name = “Aditya”; // string

· let isOnline = true; // Boolean

**Two main Categories of data types:

1. Primitive data types:**

These store single immutable values (copied by value).

2. Non-Primitive (Reference) Data Types:

These store collections or complex structures (copied by reference).

A very basic example:

Note: Data type of null is object.

Example: object in JS

Example: another way to create object, also accessing the stored value.

Example: another way to write.

Example: adding a new key-value pair

JavaScript Conditionals:

What Are Conditionals?

Conditionals let your program make decisions — they allow your code to run different blocks based on whether something is true or false.

Basic Conditional Types in JavaScript

1. If statement

2. If..else statement

3. If..else if..else statement

4. Temporary operator (short if..else)

5. Switch statement

Example:if..else: Used when you want either one block or another to run.

Example: if..else if..else

Example: shortcut way

Example: switch statements

JavaScript Comments:

What Are Comments in JavaScript?

Comments are pieces of text in your code that the JavaScript engine completely ignores when running. They are used to:

· Explain code logic

· Make notes for future reference

· Temporarily disable parts of code (for debugging)

· Help others understand your code

JavaScript Functions:

What Is a Function in JavaScript?

A function is a block of code designed to perform a specific task. You can define it once and reuse it as many times as you want.

Basic syntax:

function functionName(parameter1, parameter2, …) {

// code to execute

return result; // optional

}

A very basic function:

Another basic sum function:

Another way to write the sum function: using the return keyword

Adding more than one set of numbers:

Example: three parameters in the function

Example: arrow functions

JavaScript Strings:

What Is a String in JavaScript?

A string is a sequence of characters enclosed in quotes — used to represent text.

Ways to declare strings:

A very basic example using the index:

Example: to get the string length

Example: template literals

Example: escape sequences

Example: strings are immutable

JavaScript Arrays:

What Is an Array?

An array is a list-like object used to store multiple values in a single variable.

Example:

let fruits = [“Apple”, “Banana”, “Mango”];

console.log(fruits); // [“Apple”, “Banana”, “Mango”]

-> Arrays can hold any data type: numbers, strings, objects, other arrays, even functions.

Declaring arrays:

1. // Using literal syntax (recommended)

let numbers = [1, 2, 3, 4, 5];

2. // Using Array constructor

let colors = new Array(“Red”, “Green”, “Blue”);

3. // Empty array

let emptyArr = [];

A very basic array:

Code:

Output:

Now, to print the length of the array:

Code:

Output:

Example: arrays are mutable

Code:

Output:

Example: printing the specific element of array using its index

Code:

Output:

Example: type of array is object

Code:

Output:

Example: changing array to string

Code:

Output:

Example: use of join() to join all the arrays elements using a separator

Code:

Output:

Example: of pop(), it removes the last element of the array

Code:

Output:

Example: use of push(), it will push the element as the last element of the array

Code:

Output:

Example: shift() it removes the first element and return it

Code:

Output:

Example: use of unshift() to push the element from the front

Code:

Output:

Example: use of delete, when we do so the memory of the deleted value of array be present but the value be absent.

Code:

Output:

Example: use of concat operator in order to join two arrays

Code:

Output:

Also,

Example: use of sort()

Code:

Output:

Example: use of reverse()

Code:

Output:

Example: use of splice()

Code:

Output:

Example: inserting the elements using the splice()

Code:

Output:

Example: use of slice()

Code:

Output:

Example: printing the element of array

Code:

Output:

Example: printing the element of array using the for each and arrow

Code:

Output:

Example: printing the element of array using the for of loop

Code:

Output:

Example: use of for in loop

Code:

Output:

Contact Me: 📧 Email: adii.utsav@gmail.com 🔗 LinkedIn: https://www.linkedin.com/in/aditya-kumar-3241b6286/ 💻 GitHub: https://github.com/Rememberful