DEV Community: vidhya murali

JavaScript Array Search

vidhya murali — Wed, 24 Jun 2026 17:31:44 +0000

JavaScript Array indexOf()

The indexOf() method searches an array for an element value and returns its position.

JavaScript Array lastIndexOf()

Array.lastIndexOf() is the same as Array.indexOf(), but returns the position of the last occurrence of the specified element.

JavaScript Array includes()

ECMAScript 2016 introduced Array.includes() to arrays. This allows us to check if an element is present in an array (including NaN, unlike indexOf).

JavaScript Array find()

The find() method returns the value of the first array element that passes a test function.

This example finds (returns the value of) the first element that is larger than 18:

Note that the function takes 3 arguments:

The item value
The item index
The array itself

JavaScript Array findIndex()

The findIndex() method returns the index of the first array element that passes a test function.

This example finds the index of the first element that is larger than 18:

Note that the function takes 3 arguments:

The item value
The item index
The array itself

JavaScript Array findLast() Method

ES2023 added the findLast() method that will start from the end of an array and return the value of the first element that satisfies a condition.

JavaScript Array findLastIndex() Method

The findLastIndex() method finds the index of the last element that satisfies a condition.

Array Methods in JavaScript

vidhya murali — Wed, 24 Jun 2026 17:18:46 +0000

JavaScript Array Methods

JavaScript Array length

The length property returns the length (size) of an array:

The length property can also be used to set the length of an array:

     const fruits = ["Banana", "Orange", "Apple", "Mango"];

     fruits.length = 2;

JavaScript Array toString()

The toString() method returns the elements of an array as a comma separated string.

   const fruits = ["Banana", "Orange", "Apple", "Mango"];

   let myList = fruits.toString();

Every JavaScript object has a toString() method.

The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.

JavaScript Array at()

ES2022 introduced the array method at()

 const fruits = ["Banana", "Orange", "Apple", "Mango"];
 let fruit = fruits.at(2);

(or)
let fruit = fruits[2];

The at() method returns an indexed element from an array.

The at() method returns the same as []

at() is an ECMAScript 2022 feature.

JavaScript 2022 is supported in all modern browsers since March 2022

Many languages allow negative bracket indexing like [-1] to access elements from the end of an object / array / string.

This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.

The at() method was introduced in ES2022 to solve this problem.

JavaScript Array join()

The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

JavaScript Array pop()

The pop() method removes the last element from an array:

 const fruits = ["Banana", "Orange", "Apple", "Mango"];
 fruits.pop();

The pop() method returns the value that was "popped out":

   const fruits = ["Banana", "Orange", "Apple", "Mango"];
   let fruit = fruits.pop();

JavaScript Array push()

The push() method adds a new element to an array (at the end):

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

The push() method returns the new array length:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.

JavaScript Array shift()

The shift() method removes the first array element and "shifts" all other elements to a lower index.

The shift() method returns the value that was "shifted out".

JavaScript Array unshift()

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

The unshift() method returns the new array length:

Changing Elements

Array elements are accessed using their index number

Array indexes start with 0:

[0] is the first array element
[1] is the second
[2] is the third ..

JavaScript Array length

The length property provides an easy way to append a new element to an array:

Array.isArray()

ECMAScript 5 (JavaScript 2009) added the new method Array.isArray() to JavaScript:

      Array.isArray(fruits);

JavaScript Array delete()

Warning !

Using delete() leaves undefined holes in the array.

Use pop() or shift() instead.

Merging Arrays (Concatenating)

In programming languages, concatenation means joining strings end-to-end.

Concatenation "snow" and "ball" gives "snowball".

Concatenating arrays means joining arrays end-to-end.

JavaScript Array concat()

The concat() method creates a new array by merging (concatenating) existing arrays:

The concat() method does not change the existing arrays. It always returns a new array.

The concat() method can take any number of array arguments.

The concat() method can also take strings as arguments:

Array copyWithin()

The copyWithin() method copies array elements to another position in an array:

Flattening an Array

Flattening an array is the process of reducing the dimensionality of an array.

Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array

JavaScript Array flat()

ES2019 Introduced the Array flat() method.

The flat() method creates a new array with sub-array elements concatenated to a specified depth

JavaScript Array flatMap()

ES2019 added the Array flatMap() method to JavaScript.

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

Splicing and Slicing Arrays

The splice() method adds new items to an array.

The slice() method slices out a piece of an array.

JavaScript Array splice()

The splice() method can be used to add new items to an array:

The first parameter (2) defines the position where new elements should be added (spliced in).

The second parameter (0) defines how many elements should be removed.

The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.

The splice() method returns an array with the deleted items:

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:

The first parameter (0) defines the position where new elements should be added (spliced in).

The second parameter (1) defines how many elements should be removed.

The rest of the parameters are omitted. No new elements will be added.

JavaScript Array toSpliced()

ES2023 added the Array toSpliced() method as a safe way to splice an array without altering the original array.

The difference between the new toSpliced() method and the old splice() method is that the new method creates a new array, keeping the original array unchanged, while the old method altered the original array

JavaScript Array slice()

The slice() method slices out a piece of an array into a new array:

The slice() method can take two arguments like slice(1, 3).

The method then selects elements from the start argument, and up to (but not including) the end argument

  const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  const citrus = fruits.slice(1, 3);

Array in JavaScript

vidhya murali — Wed, 24 Jun 2026 16:26:24 +0000

An Array is an object type designed for storing data collections.

Key characteristics of JavaScript arrays are:

Elements: An array is a list of values, known as elements.
Ordered: Array elements are ordered based on their index.
Zero indexed: The first element is at index 0, the second at index 1, and so on.
Dynamic size: Arrays can grow or shrink as elements are added or removed.
Heterogeneous: Arrays can store elements of different data types (numbers, strings, objects and other arrays).

Why Use Arrays?

If you have a list of items (a list of car names, for example), storing the names in single variables could look like this:

           let car1 = "Saab";
           let car2 = "Volvo";
           let car3 = "BMW";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

Syntax:

const array_name = [item1, item2, ...];

It is a common practice to declare arrays with the const keyword.

You can also create an empty array, and provide elements later:

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

The two examples above do exactly the same.

There is no need to use new Array().

For simplicity, readability and execution speed, use the array literal method.

Accessing Array Elements

You access an array element by referring to the index number:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Changing an Array Element

This statement changes the value of the first element in cars:

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Objects in JavaScript

vidhya murali — Tue, 16 Jun 2026 08:08:28 +0000

An object is a dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value.

The values of properties can be primitives, objects, or functions (known as methods when defined inside an object).
Objects are mutable and dynamic properties can be added, modified, or deleted at any time.
Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

Object Literal

An object literal "literally" describes an object using a concise syntax with zero or more key:value pairs inside curly braces to describe all the object properties:

  {  firstName:"John",
     lastName:"Doe", 
     age:50,
     eyeColor:"blue"}

Note : You should declare objects with the const keyword.

There are two primary ways to create an object in JavaScript:

1.Creation Using Object Literal

The object literal syntax allows you to define and initialize an object with curly braces {}, setting properties as key-value pairs.

      let obj = {
         name: "vidhya",
         age: 23,
         job: "Developer"
      };
     console.log(obj);

2.Creation Using new Object() Constructor

     let obj = new Object();
     obj.name= "Alex",
     obj.age= 4,
     obj.job= "WatchMan"

     console.log(obj);

Basic Operations on JavaScript Objects

Accessing Object Properties

You can access an object’s properties using either dot notation or bracket notation

    // Using Dot Notation
     console.log(obj.name);

    // Using Bracket Notation
     console.log(obj["age"]);

Modifying Object Properties

Properties in an object can be modified by reassigning their values.

 let obj = { name: "vidhya", age: 23 };
 console.log(obj);

 obj.age = 25;
 console.log(obj);

Adding Properties to an Object

You can dynamically add new properties to an object using dot or bracket notation

Removing Properties from an Object

The delete operator removes properties from an object.

Checking if a Property Exists

You can check if an object has a property using the in operator or hasOwnProperty() method.

Iterating Through Object Properties

Use for...in loop to iterate through the properties of an object.

Merging Objects

Objects can be merged using Object.assign() or the spread syntax { ...obj1, ...obj2 }.

Object Length

You can find the number of properties in an object using Object.keys().

Reference :

Objects in JavaScript - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

geeksforgeeks.org

w3schools.com

Synchronous and Asynchronous in JavaScript

vidhya murali — Mon, 15 Jun 2026 07:05:25 +0000

JavaScript is a single threaded programming language used for web development. It supports synchronous and asynchronous execution. In synchronous execution, statements run one after another, and each task waits for the previous one to finish. In asynchronous execution, some tasks run in the background without stopping the execution of other code.

Synchronous JavaScript

Synchronous programming executes code in sequence, where each statement waits for the previous one to complete before running. This makes the flow simple and predictable.

In the above code, “Hi” is logged first, then “Geek”, and finally “How are you”. Each statement executes only after the previous one completes.

Asynchronous JavaScript

Asynchronous programming, on the other hand, allows multiple tasks to run independently of each other. In asynchronous code, a task can be initiated, and while waiting for it to complete, other tasks can proceed. This non-blocking nature helps improve performance and responsiveness, especially in web applications.

Call Stack: Functions are executed in the order they are called. Each function is added to the stack and completed before the next one runs.
Web APIs: Functions like setTimeout, HTTP requests, and event listeners are handled by browser Web APIs without blocking the call stack.
Callback Queue: After a Web API completes its task, the callback function is moved to the callback queue.
Event Loop: The event loop checks the call stack continuously. If it is empty, it moves functions from the callback queue to the stack for execution.

So, what the code does is first it logs in Hi then rather than executing the setTimeout function it logs in End and then it runs the setTimeout function.

At first, as usual, the Hi statement got logged in. As we use browsers to run JavaScript, there are the web APIs that handle these things for users. So, what JavaScript does is, it passes the setTimeout function in such web API and then we keep on running our code as usual. So it does not block the rest of the code from executing and after all the code its execution, it gets pushed to the call stack and then finally gets executed. This is what happens in asynchronous JavaScript.

Difference between Synchronous and Asynchronous JavaScript

Process vs Thread

Modern operating systems are designed to handle multiple tasks efficiently while maintaining good performance and responsiveness. These are mainly achieved through processes and threads.

Process is the Independent program with its own memory
Thread is small unit of a process sharing same memory

Process

Process is a program that is currently in execution within an operating system. It operates in an independent environment and is managed by the OS for proper scheduling and execution. Processes form the basis of program execution in a multitasking system. Its Properties are:

Each process has a unique Process ID (PID) for identification.
Every process moves through different states such as new, ready, running, waiting, and terminated.
Processes communicate with each other using Inter-Process Communication (IPC) methods.

Thread

Thread is a smallest unit of execution within a process. It enables a program to perform multiple tasks concurrently while sharing the same memory and resources. Threads improve application performance and responsiveness in multitasking environments. Its properties are:

Each thread has its own Thread ID (TID) for identification.
A thread also moves through states such as new, runnable, running, waiting, and terminated.
Threads within the same process share memory and resources, enabling faster communication.
Context switching can occur between threads to allow multiple tasks to execute efficiently.

Similarities Between Threads and Processes

Units of Execution: Both are execution units within an operating system and are part of process management.

OS Scheduling & Preemption: Both are scheduled by the operating system for fair CPU allocation, and can be preempted for multitasking.

Own Execution Context: Each has its own execution context, including program counter, CPU registers, and stack space.

Creation During Runtime: Both can create child entities during their execution lifecycle.

Communication & Resource Release: Both can communicate using IPC mechanisms, and upon termination, their allocated resources are released back to the operating system

Process vs Thread

Type of Functions in JavaScript

vidhya murali — Mon, 15 Jun 2026 06:27:22 +0000

Here are all the main types of functions in JavaScript:

Named Function

A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

Example :

  function greet() {
     return "Hello!";
  }
  console.log(greet());

2.Anonymous Function

A function that does not have a name. It is usually assigned to a variable or used as a callback. Since it has no name, it cannot be called directly.

    const greet = function() {
        return "Hi there!";
    };
    console.log(greet());

3.Function Expression

When you assign a function (can be named or anonymous) to a variable. The function can then be used by calling that variable.

  const add = function(a, b) {
     return a + b;
   };
  console.log(add(2, 3));

4.Arrow Function (ES6)

A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

    const square = n => n * n;
    console.log(square(4));

Immediately Invoked Function Expression (IIFE)

IIFE functions are executed immediately after their definition. They are often used to create isolated scopes.

 (function () {
    console.log("This runs immediately!");
  })();

6. Callback Functions

A callback function is passed as an argument to another function and is executed after the completion of that function.

   function num(n, callback) {
         return callback(n);
   }

   const double = (n) => n * 2;

   console.log(num(5, double));

Constructor Function

A special type of function used to create multiple objects with the same structure. It’s called with the new keyword

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    const user = new Person("Neha", 22);
    console.log(user.name);

8.Async Function

Functions that handle asynchronous tasks. Declared with async, they return a Promise, and you can use await inside them to pause until another Promise resolves.

  async function fetchData() {
   return "Data fetched!";
   }
   fetchData().then(console.log);

9.Generator Function

Declared with an asterisk *, these functions can pause execution using yield and resume later. Useful for lazy loading values or handling iterators.

10.Recursive Function

A function that calls itself until a condition is met. Very useful for problems like factorial, Fibonacci, or tree traversals.

11.Higher-Order Function

A function that either takes another function as a parameter or returns another function. These are common in JavaScript (e.g., map, filter, reduce).

12.Nested Functions

Functions defined within other functions are called nested functions. They have access to the variables of their parent function.

13.Pure Functions

Pure functions return the same output for the same inputs and do not produce side effects. They do not modify state outside their scope, such as modifying global variables, changing the state of objects passed as arguments, or performing I/O operations

    function pureAdd(a, b) {
       return a + b;
    }

    console.log(pureAdd(2, 3));

14.** Rest Parameter Function**

Uses ... to collect all remaining arguments into an array. Very useful when you don’t know how many arguments will be passed.

Reference : https://www.geeksforgeeks.org/javascript/functions-in-javascript/

Functions in JavaScript

vidhya murali — Mon, 15 Jun 2026 05:57:40 +0000

JavaScript Functions

Functions are Code Blocks

Functions are reusable code blocks designed to perform a particular task.
Functions are executed when they are called or invoked.
Functions are fundamental in all programming languages.

They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.

Why Use Functions?

Functions help you to:

Reuse code (write once, run many times)
Organize code into smaller parts
Make code easier to read and maintain

What Does a Function Look Like?

A function can be created with the function keyword, a name, and parentheses.

The code to run is written inside curly brackets

The function above does not do anything.It has to be called first.

Functions Run When You Call Them

To run a function, you call it by using its name followed by parentheses like sayHello().

Note:() means execute now.

JavaScript Function Syntax

function name( p1, p2, ... ) {
// code to be executed
}

Functions are defined with the function keyword:

followed by the function name
followed by parentheses ( )
followed by brackets { }
The function name follows the naming rules for variables.

Optional parameters are listed inside parentheses: ( p1, p2, ... )

Code to be executed is listed inside curly brackets: { }

Functions can return an optional value back to the caller.

A function definition is not an executable statement.
It is not common to end a function definition with a semicolon.
Semicolons are used to separate executable JavaScript statements.

A Function Can Be Used Many Times

A big benefit is that you can call the same function whenever you need it.

Example :

    function add(a, b) {
     return a + b;
    }

    let sum1 = add(5, 5);
    let sum2 = add(50, 50);

Note : values returned from functions can be stored in variables

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Example :

 // code here can NOT use carName
      function myFunction() {
         let carName = "Volvo";
    // code here CAN use carName
   }

// code here can NOT use carName

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions

Local variables are created when a function starts, and deleted when the function is completed.

Function Input and Output

The most useful functions work like this:

Parameters - some values are sent to the function
Arguments - some values are received by the function
Function Code - some work is done inside the function
Return Output - some value is returned from the function

Reference :https://www.w3schools.com/js/js_function_intro.asp

My First KanchiLUG Weekly Discussion Experience: An Introduction to Linux and Open Source

vidhya murali — Sun, 14 Jun 2026 13:14:39 +0000

Today, I attended my first KanchiLUG (Kanchipuram Linux Users Group) meetup, and it was a memorable experience. As someone who is currently learning programming and exploring the world of technology, I was excited to attend the session and learn more about Linux and open source.

What made the experience even more special was that the entire meetup was conducted in Tamil. Being able to learn technical concepts in my native language made the discussions much easier to understand and more engaging.

Everyone was friendly, approachable, and willing to help. There was no hesitation in answering questions, and the environment encouraged learning and participation. As a beginner, this gave me the confidence to listen, learn, and interact with others.

Before attending the session, I knew Linux mainly as an operating system. During the discussion, I learned much more about its importance in the technology world.

Discovering Free Tamil Learning Resources

One of my favorite parts of the meetup was learning about free Tamil ebooks and educational resources.

The community shared information about resources available in Tamil for:

Linux
Git and Version Control
Programming Languages
Computer Science Concepts

As a Tamil speaker, this was exciting to discover. Many beginners struggle because most technical content is available only in English. Knowing that quality learning resources exist in Tamil makes technology more accessible and helps people learn concepts more comfortably.

I believe these resources can encourage more students and beginners to start their learning journey.

Why Community Matters

One important lesson I learned from this meetup is that learning technology doesn't have to be a solo journey.

Being part of a community allows us to:

Learn from experienced people
Get guidance when we are stuck
Discover useful resources
Stay motivated
Connect with like-minded learners

The KanchiLUG community demonstrated how powerful knowledge sharing can be.

My Takeaways

After attending my first KanchiLUG meetup, here are my biggest takeaways:

Linux is a valuable technology worth learning.
Open source is built on collaboration and community.
There are excellent free learning resources available in Tamil.
Tech communities can significantly accelerate learning.
Asking questions and engaging with others helps us grow.

Looking Forward

Attending this meetup motivated me to explore Linux, Git, and open-source technologies in greater depth. It also inspired me to become more involved in tech communities and continue learning from experienced members.
I am grateful to the KanchiLUG organizers and community members for creating such a welcoming environment and making the session accessible in Tamil.

This was my first KanchiLUG meetup, but definitely not my last. I look forward to attending future sessions, learning new things, and continuing my journey in the world of Linux and open source.

Thank you, KanchiLUG, for a wonderful first experience!

https://kanchilug.wordpress.com/

JavaScript Loops

vidhya murali — Wed, 10 Jun 2026 14:24:48 +0000

Loops in JavaScript

Loops can execute a block of code a number of times

JavaScript For Loop

For Loops can execute a block of code a number of times.
For Loops are fundamental for tasks like performing an action multiple times.

The for statement creates a loop with 3 optional expressions:

for (exp 1; exp 2; exp 3) {
// code block to be executed
}

exp 1 is executed (one time) before the execution of the code block.
exp 2 defines the condition for executing the code block.
exp 3 is executed (every time) after the code block has been executed.

From the example above, you can read:

exp 1 sets a variable before the loop starts (let i = 0).
exp 2 defines the condition for the loop to run (i must be less than 5).
exp 3 increases a value (i++) after the code block has been executed.

How to use exp 1

exp 1 is used to initialize the variable(s) used in the loop (let i = 0).
exp 1 is optional.
You can omit exp 1 if the value is set before the loop starts

How to use exp 2

exp 2 is used to evaluate the condition of the initial variable (i < len).
exp 2 is also optional.
If exp 2 returns false, the loop will end.

How to use exp 3

exp 3 increments the value of the initial variable (i++).
exp 3 is optional.
exp 3 can do anything like negative increment (i--), positive increment (i = i + 15), or anything else.

exp 3 can be omitted (if you increment the value inside the loop):

Loop Scope

Using var in a loop:

Using let in a loop:

In the first example, using var, the variable declared in the loop redeclares the variable outside the loop.

In the second example, using let, the variable declared in the loop does not redeclare the variable outside the loop.

When let is used to declare the i variable in a loop, the i variable will only be visible within the loop.

JavaScript While Loops

While loops execute a block of code as long as a specified condition is true.

JavaScript have two types of while loops:

The while loop
The do while loop

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

while (condition) {
// code block to be executed
}

The Do While Loop

The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

The do while runs at least once, even if the condition is false from the start.This is because the code block is executed before the condition is tested.

Comparing For and While

A while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

note:

If you forget to increase the variable used in the condition, the loop will never end.
This will crash your browser.

Reference :

w3schools.com

Frontend Developer - Mock Interview 1

vidhya murali — Mon, 08 Jun 2026 14:49:27 +0000

Frontend Developer Mock Interview Questions with Answers [HTML, CSS , JavaScript]

Today, I attended a mock interview for a Front-End Developer role. The interview mainly focused on HTML, CSS, and JavaScript. Below are some of the questions that were asked

1,What are Semantic Tags ?

Semantic tags are HTML tags that clearly describe the meaning and purpose of the content they contain. They make the structure of a web page easier for developers, browsers, and search engines to understand.

– Defines the header section of a page.
– Contains navigation links.
– Represents the main content of the page.
– Groups related content together.
– Represents independent content such as a blog post or news article.
– Contains side content related to the main content.
– Defines the footer section of a page.

Benefits of Semantic Tags:

Improve code readability and maintainability.
Help search engines understand page content (SEO).
Improve accessibility for screen readers and assistive technologies.
Provide a clear structure to web pages

SEO

SEO (Search Engine Optimization) is the process of improving a website so that it ranks higher in search engine results like Google and attracts more organic (non-paid) traffic

Search engines can better understand the structure and content of a webpage when semantic tags are used

For example, an

tag tells search engines that the content is a standalone article or blog post, while a tag indicates navigation links.

Why is SEO Important?

Increases website visibility.
Brings more visitors to the website.
Improves user experience.
Helps businesses reach their target audience.

2, Flex vs Grid

display: flex;

Flexbox (Flexible Box Layout) is a one-dimensional layout system used to arrange items in a row or a column.

Why Use Flexbox?

Flexbox makes it easy to:

Align items horizontally or vertically.
Distribute space between items.
Center elements.
Create responsive navigation bars and card layouts.

Common Flexbox Properties

flex-direction → Defines row or column layout.
justify-content → Aligns items along the main axis.
align-items → Aligns items along the cross axis.
flex-wrap → Allows items to wrap to the next line.
gap → Adds space between items.

Real-World Uses of Flex

Navigation bars
Button groups
Centering content
Card layouts

display: grid;

CSS Grid is a two-dimensional layout system used to arrange items in rows and columns.

Why Use Grid?

Grid makes it easy to:

Create complex page layouts.
Control rows and columns simultaneously.
Build dashboards, galleries, and responsive web pages.

Common Grid Properties

grid-template-columns → Defines columns.
grid-template-rows → Defines rows.
gap → Adds space between grid items.
grid-column → Controls column span.
grid-row → Controls row span.

Real-World Uses

Full webpage layouts
Admin dashboards
Product galleries
Magazine-style designs

3, display: none vs visibility: hidden
Both properties hide an element, but they behave differently.

1.** display: none**

When an element has display: none, it is completely removed from the page layout.

The element is not visible.
It does not occupy any space.
Other elements move up and take its place.

visibility: hidden

When an element has visibility: hidden, it becomes invisible but still occupies space in the layout.

The element is not visible.
The space reserved for it remains.
Other elements do not move

4, var, let , const

1. var

var was the original way to declare variables before ES6.

Characteristics

Function-scoped
Can be re-declared
Can be re-assigned
Hoisted and initialized with undefined

2*. let*

Introduced in ES6 to solve some problems with var.

Characteristics

Block-scoped
Cannot be re-declared in the same scope
Can be re-assigned
Hoisted but not initialized

3*. const*

Used for variables whose reference should not change.

Characteristics

Block-scoped
Cannot be re-declared
Cannot be re-assigned
Must be initialized when declared

The object's contents can change, but the variable cannot point to a different object.

4,JavaScript Scopes
A scope determines where a variable can be accessed in your code.

There are 3 main types of scope:

Key Point
Accessible only inside the block (if, for, while, etc.)

5, Primitive and Non-Primitive Data Types in JavaScript

1. Primitive Data Types

Primitive values store a single value and are immutable.

Types of Primitive Data Types

let num = 10; // Number
let name = "Vidhya"; // String
let isActive = true; // Boolean
let value = null; // Null
let data; // Undefined
let id = Symbol(); // Symbol
let bigNum = 123n; // BigInt

Stored In

Stored directly by value.
stored in stack memory.
Immutable Nature

Once a primitive value is created, it cannot be changed. Operations create a new value instead.

Non-Primitive (Reference) Data Types

These store collections of data or more complex entities.

let arr = [1, 2, 3]; // Array
let obj = { name: "Vidhya" }; // Object
let fun = function() {}; // Function

Stored In

The actual data is stored by reference.
stored in heap memory.
Mutable Nature

Objects and arrays can be modified after creation.

6,Type Casting in JavaScript

Type Casting (also called Type Conversion) is the process of converting a value from one data type to another data type.

For example:

String → Number
Number → String
Number → Boolean

Type Casting vs Type Coercion

Type Casting (Explicit Conversion)

You convert the type manually.

let num = Number("10");

Type Coercion (Implicit Conversion)

JavaScript converts the type automatically.

console.log("10" - 5); // 5

7,Ternary Operator in JavaScript

The Ternary Operator (? :) is a shorthand way of writing an if...else statement.

condition ? expressionIfTrue : expressionIfFalse;

If the condition is true, the first expression executes.
If the condition is false, the second expression executes.

Example :

let age = 18;

let result = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

console.log(result);

8,Objects in JavaScript

An Object is a non-primitive data type used to store data in key-value pairs.

Objects help group related data and functionality together.

Deleting Properties

delete person.age;

8,Array vs Objects

Arrays and Objects are not the same, but they are closely related.

Similarities

Both are:

Non-primitive (reference) data types
Mutable
Stored by reference
Technically objects in JavaScript

Example:
let arr = [1, 2, 3];
let obj = { name: "Vidhya" };

console.log(typeof arr); // object
console.log(typeof obj); // object

Array -An array is used to store ordered collections of values.Arrays are a special type of object in JavaScript.

Array → Index-Based Data
Object → Key-Value Data

Functions in Javascipt

vidhya murali — Mon, 08 Jun 2026 05:02:53 +0000

Functions

Functions are reusable code blocks designed for particular tasks
Functions are executed when they are called or invoked
Functions are fundamental in all programming languages.

Why Use Functions?

Functions help you to:

Reuse code (write once, run many times)
Organize code into smaller parts
Make code easier to read and maintain

What Does a Function Look Like?

A function can be created with the function keyword, a name, and parentheses.

The code to run is written inside curly brackets

function sayHello() {
return "Hello World";
}

Functions Run When You Call Them

JavaScript Function Syntax

A function definition is not an executable statement.
It is not common to end a function definition with a semicolon.
Semicolons are used to separate executable JavaScript statements.

A Function Can Be Used Many Times

A big benefit is that you can call the same function whenever you need it.

Note that values returned from functions can be stored in variables.

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.
Local variables are created when a function starts, and deleted when the function is completed.

Functions Used as Variables

Functions can be used as variables, in all types of formulas, assignments, and calculations.

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Function Input and Output

The most useful functions work like this:

Parameters - some values are sent to the function
Arguments - some values are received by the function
Function Code - some work is done inside the function
Return Output - some value is returned from the function

Reference :

w3schools.com

JavaScript Booleans

vidhya murali — Thu, 04 Jun 2026 05:41:01 +0000

The Boolean Data Type

In JavaScript, a Boolean is a primitive data type that can only have one of two values:

true or false

The Boolean value of an expression is the basis for all JavaScript comparisons and conditions.

Key Boolean Characteristics

true and false are boolean data types
true and false are the only possible boolean values
true and false must be written in lowercase
true and false must be written without quotes

Boolean Use Cases

Very often, in programming, you will need a data type that can represent one of two values, like:

yes or no
on or off
true or false

Boolean values are fundamental for logical operations and control flow in JavaScript programming.

Comparisons

All JavaScript comparison operators (like ==, !=, <, >) return true or false from the comparison.

Given that x = 5, the table below explains comparison:

Loops

Booleans are extensively used in loops to determine conditions for looping.

The Boolean() Function

You can use the Boolean() function to find out if an expression (or a variable) is true:

Example : Boolean(10 > 9)

Everything With a "Value" is True

Note

In JavaScript, both an empty array [ ] and an empty object { } are truthy because they are objects.
All objects in JavaScript evaluate to true in a boolean context, regardless of their content.

The Boolean value of "" (empty string) is false:

let x = "";
Boolean(x);

The Boolean value of -0 (minus zero) is false:

let x = -0;
Boolean(x);

The Boolean value of undefined is false:

let x;
Boolean(x);

The Boolean value of null is false:

let x = null;
Boolean(x);

JavaScript Booleans as Objects

Normally JavaScript booleans are primitive values created from literals:

let x = false;

But booleans can also be defined as objects with the keyword new:

let y = new Boolean(false);

In JavaScript, truthy **and **falsy values are concepts related to boolean evaluation. Every value in JavaScript has an inherent boolean "truthiness" or "falsiness," which means they can be implicitly evaluated to true or false in boolean contexts, such as in conditional statements or logical operations.

What Are Truthy Values?

Truthy values are values that are evaluated to be true when used in a Boolean context. Simply put, any value that is not explicitly falsy is considered truthy

Non-zero numbers: 42, -1, 3.14
Non-empty strings: "hello", "0", " "
Objects and arrays: {}, []
Functions: function() {}
Dates: new Date()
Symbols: Symbol()
BigInt values other than 0n: 10n

What Are Falsy Values?

Falsy values are values that evaluate to false when used in a Boolean. JavaScript has a fixed list of falsy values

false
0 (and -0)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN
document.all (used for backward compatibility

Warning

Do not create Boolean objects.

The new keyword complicates the code and slows down execution speed.

Boolean objects can produce unexpected results:

Reference :

w3schools.com