DEV Community: Mark Tony

JS - Array Methods

Mark Tony — Fri, 18 Sep 2026 05:21:12 +0000

An array method is simply a function that:

Is called on an array (using dot notation: array.methodName())
Does something with the array's elements
Returns a result — either a new array, a single value, or undefined

JavaScript Array Methods:

1. Adding / Removing Elements (mutate the array):

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. push - Actors.push("Brad Fitt"); 

// add to the End -[ 'Surya', 'Vikram', 'Karthi', 'Chillian', 'Leo', 'Brad Fitt' ]

2.pop -  Actors.pop()  

// removes the last element - [ 'Surya', 'Vikram', 'Karthi', 'Chillian' ]

3.shift - Actors.shift() 

// removes the first element - [ 'Vikram', 'Karthi', 'Chillian', 'Leo' ]

4. unshift - Actors.unshift("Surya") 

// adds element at the beginning - ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

5. splice - Actors.splice(1,1,"Rio") 

// removes one element index and adds Rio - [ 'Surya', 'Rio', 'Karthi', 'Chillian', 'Leo' ]

2. Copying / Extracting (do NOT mutate)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. slice- const sliced = Actors.slice(1,3); 

// portion copy [ 'Vikram', 'Karthi' ]

2. concat - const add =Actors.concat(["Chadwik", "Jordan"]); 

// joins array 

[
  'Surya',  'Vikram',
  'Karthi', 'Chillian',
  'Leo',    'Chadwik',
  'Jordan'
]

3. Searching / Checking

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. indexof - console.log(Actors.indexOf("Leo")); 

// finds the position/index of value - 4

2.includes - console.log(Actors.find(x=> x = "Leo")); 

// checks whether the particular element is in the array - true

3.find - Actors.find(x => x.startsWith("K")) 

// The first match as a value (not index) -  Karthi

4. Looping / Transforming (very important, used constantly)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. forEach - Actors.forEach(Actors => console.log(Actors));

// Just to loop and do something (no new array)
Surya
Vikram
Karthi
Chillian
Leo

2.map - It runs a function on every element, and returns a new array with the results (same length as original).

const upper = Actors.map(Actors => Actors.toUpperCase());
console.log(upper);

[ 'SURYA', 'VIKRAM', 'KARTHI', 'CHILLIAN', 'LEO' ]

3. filter - filter() goes through every element and keeps only the ones where your function returns true. It builds a new array with just the matches — the original array stays unchanged, same rule as slice(), map(), and concat().

const longNames= Actors.filter(x=> x.length >3);
console.log(longNames);

[ 'Surya', 'Vikram', 'Karthi', 'Chillian' ]

const endwith = Actors.filter(x=> x.endsWith("o"))
console.log(endwith);

[ 'Leo' ]


4. reduce - reduce() goes through every element and combines them all into a single value (not an array). You control what that final value looks like. 

const joined = Actors.reduce((acc,ce) => acc + " " + ce, "")
console.log(joined);

 Surya Vikram Karthi Chillian Leo

5. Sorting / Reversing (mutate the array)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. Sort: (default: sorts as strings!)
Actors.sort()
console.log(Actors);

[ 'Chillian', 'Karthi', 'Leo', 'Surya', 'Vikram' ]

let arr = [3, 1, 2];
arr.sort((a,b) => a - b);  // → [1,2,3]  (correct numeric sort)

2. reverse - reversing the index of the array.
Actors.reverse()
console.log(Actors);

[ 'Leo', 'Chillian', 'Karthi', 'Vikram', 'Surya' ]

6. Joining / Converting

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1.join - const join = Actors.join("-")
console.log(join);

Surya-Vikram-Karthi-Chillian-Leo

2.tostring - console.log(Actors.toString());

"Surya,Vikram,Karthi,Chillian,Leo"

JS - Closures

Mark Tony — Thu, 10 Sep 2026 05:50:59 +0000

Closures in JavaScript is when a function "remembers" the variable from the place where it was created, even after that outer scope has finished running.

function outer() {
  let count = 0; // variable in outer's scope

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const counter = outer();
counter(); // 1
counter(); // 2
counter(); // 3

Here's what's happening:

outer() runs, creates a variable count, and defines inner().
outer() returns inner, and its execution finishes.
Normally, you'd expect count to be gone once outer returns — its scope is done.
But inner still has access to count, because it "closed over" that variable when it was created.

Each call to counter() doesn't reset count to 0 — it keeps incrementing the same count variable, tucked away inside the closure.

Why this happens

JavaScript functions retain a reference to the lexical scope (the scope where they were textually defined), not just at creation but for their entire lifetime. So inner carries a link back to outer's variable environment wherever it goes.

JS - Promise

Mark Tony — Wed, 09 Sep 2026 05:31:59 +0000

Promise Object

Promise is an object that holds an eventual result of an asynchronous operation.
Promises used to avoid nested callbacks (Callback Hell).
It makes readablilty and debuging easy.

Promise is like a promise statement made to a person that someone will fulfill what they have promised

const result = new Promise((resolve, reject) => {
  // async work happens here
});

Promise has three states

Pending (Initial Stage)
Fulfilled
Rejected

Pending (Initial Stage)
It is the initial stage indicating that the operation is being done.

Fulfilled:
It represents the success of the operation.

Rejected:
It indicates the error in the input or gives the failure output.

Example

if (age >= 18) {
  resolve("You are eligible to vote");   // Fulfilled path
} else {
  reject("You are not eligible to vote"); // Rejected path
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> Promises</h1>
    <p id="para"> </p>
    <p id="error" style="color: red;"></p>
    <script>
 const result = new  Promise ((resolve, reject) => {
    const age = 28;
    setTimeout (() => {
     if (age >= 18) {
        resolve ("You are eligible to vote");
        } else {
            reject ("You are not eligible to vote");
        }
    },2000 )
 } )
  .then((data) => {
    console.log(data);
    document.getElementById("para").textContent = data;

 })
 .catch ( (error) => {
    console.error(error);
    document.getElementById("error").textContent = error;


 } );
  </script>
</body>
</html>

The promise takes a function called executor. It runs immediately once the promise created.This executor receives two functions, resolve and reject.

resolve() and reject()

resolve(value) — marks the Promise as fulfilled, and value gets passed to .then().
reject(reason) — marks the Promise as rejected, and reason gets passed to .catch().

.then() and .catch()

Once a Promise settles, you get the outcome:

.then(callback) — runs if the Promise resolved; callback receives the resolved value.
.catch(callback) — runs if the Promise rejected; callback receives the rejection reason.

Promise chaining

.then() and .catch() are methods called on the Promise object, and each returns a new Promise, so you can chain more .then()s after it if needed.

JS - Callback Function

Mark Tony — Mon, 07 Sep 2026 14:27:06 +0000

1. First, what is a function?

A function is simply a block of code that we can call when we need it.

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

greet();

Output:
Hello Tony

2. So what is a callback?

A callback function is a function that we give to another function as an argument, so that the other function can call it later. A callback function is intended to be executed later.

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

function execute(callback) {
    callback();
}

execute(greet);

We are passing the greet function into execute.

Inside execute:

function execute(callback) {
    callback();
}

callback now contains the greet function. so the callback runs the greet function.

Output:
"Hello"

There are two types of callback functions:

Synchronized Task Callback
Asynchronized Task Callback

In Synchronized Task, The function executes the code line by line in an order.

const hotel = (serveOrder) => {
    console.log("vegetable cutting");
    console.log("vessel washing");
    console.log("cooking");
    console.log("Serve food");
    serveOrder();
    console.log("Clean Table");

};

const eatBriyani = () => {
 console.log("Eating");
};

hotel(eatBriyani);

Output:
vegetable cutting
vessel washing
cooking
Serve food
Eating
Clean Table

In the case of Asynchronized Task, the Particular assigned task will be processed parallelly with the other synchronized task.

const hotel = (serveOrder) => {
  console.log("Vegitable cutting");
  console.log("Vessel washing");
  console.log("Cooking");
  console.log("serve food");

  setTimeout(() => {
    console.log("Timer");
  }, 2000);
  serveOrder();
};

const eatBriyani = () => {
  console.log("Eating");
};

hotel(eatBriyani);

Output:
Vegitable cutting
Vessel washing
Cooking
serve food
Eating
(The below output is executed after 2seconds)
Timer

Asynchronous Operations:
Callbacks are essential for handling non-blocking tasks like fetching data from an API, reading files, or using setTimeout timers, ensuring subsequent code runs only after the background task finishes

JS - Functions

Mark Tony — Mon, 07 Sep 2026 06:03:20 +0000

Function
Functions are reuseable code blocks that are used for particular task. It is executed when the particular function is called. Functions are fundamental in all programming languages.

A function can be created with the function keyword, a name, and parentheses.
The code to run is written inside curly brackets.

  <script>         
     function sayHello() {
    return "Hello World";

}
let greeting = sayHello();   

console.log(sayHello());


      </script>

A function can be used many times,

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

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

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.

// code here can NOT use ActorName

function myFunction() {
  let ActorName = "Surya";
  // code here CAN use ActorName
}

// code here can NOT use ActorName

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

Function Input and Output

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

The working flow of the Function:

1
The function returns the value "Hello world". But it will not run the code.

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

2
The code below will call the function; but it will not use the result.

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

sayHello();

3
When a function returns a value, you can store the value in a variable.

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

let greeting = sayHello();

4
Display the result

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

console.log(sayHello());

JS - Arrays

Mark Tony — Thu, 03 Sep 2026 09:50:36 +0000

Array

An Array is an object type designed for storing data collections. It contains list of values, known as elements.
Array elements are ordered based on their index.
The first element is at index 0, the second at index 1, and so on.
An Array can store any kind of data type (String, Number, Boolean, Objects, Null, Function)

Why Use Arrays?
An array can store multiple values under a single name,and you can access the values by referring to an index number.

Creating an array:

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

Accessing Array Elements:

You access an array element by referring to the index number

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

The output will be Saab

JS - Loops

Mark Tony — Tue, 01 Sep 2026 04:51:44 +0000

What is loop?
JavaScript loops are control structures that are used for executing a block of code repeatedly as long as the specified condition evaluates true.

Various types of loops

1.for loop
The most common loop, used when the number of iterations is known. It initializes a variable, checks a condition, and updates the variable in a single line.

 let star= "";
for (let count = 0; count< 5; count++) {
 star = star + "1 "
 console.log(star);
 }

2. while loop
It executes a block of code as long as a condition is true, checking the condition before each iteration. It is ideal when the number of iterations is unknown.

 let count = 0 
 while (count<5){
    console.log(3);

    count = count +1;

 }

3. do...while loop
It is similar to the while loop, but it guarantees that the code block executes at least once before checking the condition.

do {
    console.log(3);
    count = count + 1;    

 } while (6 < 5);

JS - If, else and else if Statements

Mark Tony — Thu, 27 Aug 2026 09:51:34 +0000

Conditional Statements

JavaScript uses the conditional Statements (if,else and else if) to decide the flow of the code based on the validation of statements. The statements are the boolean values (True/False).

1. if Statement:
The if statement executes the block of code when the condition is true. Otherwise it skips it.

function calculate (){
  const leftOperand = Number (previousValue);
  const rightOperand = Number (currentValue);
  if(operator == "+") {
    currentValue = leftOperand + rightOperand;
      }

This if statement will execute the block of code, when the operator is + addition.

2. if else Statement:
The else statement will be executed when the if statement is false and the block of code of the else statement takes up the flow.

    <script>
let mark = 80

if(mark > 90 && mark <= 100){
  console.log("Grade O");

}</script>

When the condition is true, the output will be

you are eligible to vote

when the conditon is false, the output will be

you are not eligible to vote

3. else if statement:

The else if statement is used to check more than one conditions. It executes the different block of code in a chain pattern.

let mark = 91

if(mark > 90 && mark <= 100){
  console.log("Grade O");

} else if (mark > 80) {
  console.log("Grade A");
} else if (mark > 70) {
  console.log("Grade B");
} else if ( mark < 40) {
  console.log("you are fail");  
} else {
  console.log("Invalid mark Entered, Please enter the mark within 100"); 
}

Here the else if statement is used to test the different block of code for a grade validation function. The flow of code is decided based on the input.

CSS Selectors

Mark Tony — Wed, 26 Aug 2026 05:40:40 +0000

CSS selectors are patterns used to select HTML elements so we can apply CSS styles to them.
CSS selectors are patterns used to select HTML elements so that CSS styles can be applied to them.

1. Element Selector

An element selector selects all HTML elements of a particular type.

p {
  color: blue;
}

This selects all <p> elements.

2. Class Selector

A class selector selects elements using their class attribute.

.box {
  color: red;
}

It starts with a dot (.).

3. ID Selector

An ID selector selects an element using its id attribute.

#header {
  background-color: blue;
}

It starts with a hash (#)An ID is normally unique on a page.

4. Attribute Selector

An attribute selector selects elements based on their attributes or attribute values.

input[type="text"] {
  border: 1px solid black;
}

This selects text input elements.

5. Universal Selector

The universal selector (*) selects all elements on the page.

* {
  margin: 0;
  padding: 0;
}

6. Group Selector

A group selector allows you to apply the same style to multiple selectors.

h1, h2, p {
  color: green;
}

7. Descendant Selector

A descendant selector selects elements that are inside another element.

div p {
  color: red;
}

This selects all <p>elements inside a <div>.

8. Child Selector

A child selector (>) selects only the direct children of an element.

div > p {
  color: blue;
}

9. Adjacent Sibling Selector

The adjacent sibling selector (+) selects the element immediately following another element.

h1 + p {
  color: red;
}

10. General Sibling Selector

The general sibling selector (~) selects all matching siblings that come after an element.

h1 ~ p {
  color: green;
}

11. Nesting Selector

The nesting selector (&) is used to show a relationship between a parent selector and its nested rules.

.box {
  color: black;

  & p {
    color: red;
  }
}

12. Pseudo-class Selector

A pseudo-class selects an element based on its state or position.

button:hover {
  background-color: blue;
}

Common Examples:
:hover
:focus
:first-child
:last-child
:nth-child()

13. Pseudo-element Selector

A pseudo-element styles a specific part of an element.

p::first-letter {
  font-size: 30px;
}

Common Examples:
::before
::after
::first-letter
::first-line

Data Types in JavaScript

Mark Tony — Tue, 25 Aug 2026 09:59:40 +0000

A data type tells the computer what kind of data a variable stores and what operations can be done with it.

For example:

10 → number
"Hello" → text
true → boolean

In simple words, a data type defines what kind of value a variable can hold.

There are Two types of Data types used in JavaScript:

Primitive Data Type
Non- Primitive Data Type

Primitive Data Type:
It can hold only single value. For example:
let Name= "Tony"

A memory will be created on the key "Name" and the value "Tony" will be stored. The Primitive Data Types are immutable.

If I give another value in the same key "Name" and give the value "Parthipan"

Name="Parthipan"

A new memory will be created and the value "Parthipan" will be stored.

Non- Primitive Data Type
Unlike Primitive,It can Store multiple values. It is called an Object. The object contains the Arrays and Functions.

  let userDetails = {
      name: "Mark Tony",
      email: "tony@gmail.com",
      location: "chennai",
      welcome: function (a,b){
        return a+b;
      },
    };

Various Primitive data types:

String: A string is a sequence of text or characters written inside single quotes (' ') or double quotes (" ").
Number: A number represents both integer and decimal (floating-point) values.
BigInt: BigInt is used to represent very large integers accurately beyond the safe range of the Number type.
Boolean: A Boolean represents a logical value that can be either true or false.
Null: Null represents the intentional absence of a value.
Undefined: Undefined means a variable has been declared but no value has been assigned to it.
Symbol: A Symbol is a unique and immutable primitive value, commonly used to create unique object property keys.

Easy way to remember

String → Text
Number → Numbers
BigInt → Very large integers
Boolean → True/False
Null → Intentional empty value
Undefined → No value assigned
Symbol → Unique value

HTML, CSS - Interview Questions

Mark Tony — Fri, 21 Aug 2026 05:37:11 +0000

1. What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure web pages. HTML defines the different elements on a webpage, such as headings, paragraphs, images, links, buttons, tables, and forms. HTML provides the basic structure of a website, while CSS is used for styling and JavaScript is used for functionality.

2. What is CSS?

CSS stands for Cascading Style Sheets. It is used to style and design HTML elements on a webpage. With CSS, we can change colors, fonts, sizes, spacing, borders, backgrounds, and layouts. CSS also helps us make websites responsive, so they can work properly on different screen sizes like desktops, tablets, and mobile phones. We can use CSS with layouts such as Flexbox and Grid to arrange elements.

3. What are HTML Attributes?

HTML attributes provide additional information about HTML elements. They are written inside the opening tag and usually have a name and value. For example, in an image tag, src specifies the image location and alt provides alternative text. Other common attributes are id, class, href, style, and title. Attributes help us control or provide additional information about how an HTML element behaves or is identified.

4.What is CSS Grid?

CSS Grid is a two-dimensional layout system in CSS. It allows us to arrange elements using rows and columns. It is especially useful when creating complex webpage layouts. For example, we can create a layout with a header, sidebar, main content, and footer using Grid. We can define columns and rows using properties like grid-template-columns and grid-template-rows. Grid is useful when we need precise control over both horizontal and vertical layouts.

5.What is Flexbox?

Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange elements in one direction at a time, either horizontally or vertically. It makes it easy to align, distribute, and resize elements within a container. Some commonly used properties are display: flex, justify-content, align-items, flex-direction, and gap. Flexbox is commonly used for navigation bars, buttons, cards, and other simple layouts.

6.What are Ordered and Unordered Lists?

HTML provides two common types of lists: ordered lists and unordered lists. An ordered list uses the <ol> tag, and its items are displayed with numbers or letters. An unordered list uses the <ul> tag, and its items are normally displayed using bullet points. In both cases, individual items are written using the<li> tag. Ordered lists are useful when the order is important, while unordered lists are useful when the order doesn't matter.

7.What are Main Axis and Cross Axis in Flexbox?

In Flexbox, there are two important directions called the main axis and cross axis. The main axis is the direction in which the flex items are arranged. The cross axis is perpendicular to the main axis. By default, Flexbox uses flex-direction: row, so the main axis is horizontal and the cross axis is vertical. justify-content generally controls alignment along the main axis, while align-items controls alignment along the cross axis.

8. What is Box Sizing?

box-sizing is a CSS property that determines how the width and height of an element are calculated. There are two common values: content-box and border-box. By default, the value is content-box, where padding and border are added to the specified width and height. With border-box, the specified width and height include the content, padding, and border. Many developers use box-sizing: border-box because it makes sizing elements easier and more predictable.

Variables in JavaScript

Mark Tony — Sat, 15 Aug 2026 06:55:27 +0000

Variables are containers that store data. In JavaScript a variable can be declared in three ways:

let
Const
Var

The variable method was used earlier. The other two were added to simplify the coding.The Variable and let method are almost similar.

1.let:

let is a block-scoped variable that can be reassigned.
let prevents scope leakage and accidental redeclaration within the same scope.
Temporal Dead Zone (TDZ): Accessing a let variable before its declaration results in a ReferenceError, unlike var which hoists and initializes as undefined.
Global Scope Behavior: At the top level, let does not create a property on the global object.

Declaring the variable with value:

<body>
    <script>
        let a = 10
        console.log(a);
        </script>
</body>

Reassigning the value:

<body>
    <script>
        let a = 10
        a = a+ 20
        console.log(a);
        </script>
</body>

2. Const:

Const is a block-scoped variable that cannot be neither reassigned nor redeclared.
Like let, const is limited to the block in which it is defined, avoiding the hoisting and scoping issues associated with var.
A value must be provided at the time of declaration; attempting to declare const without initialization throws a syntax error.

<body>
    <script>
        const a = 10
        a = a+ 20
        console.log(a);
        </script>
</body>

3. Var:

var is the original method used for declaring variables.
The same variables can be redeclared in Var.
Variables are scoped to the entire function they are declared in, or globally if declared outside any function, ignoring block boundaries like if statements or for loops.

Note

Prefer const: Use const for all variables that are not intended to be reassigned, as it signals intent and helps prevent accidental bugs.
Use let: Only use let for variables that require reassignment, such as loop counters or values that change based on user interaction.
Avoid var: The var keyword is no longer in use due to its function scope and hoisting behavior, which can lead to unexpected bugs.