DEV Community: Sajin Joe J

Array in JavaScript

Sajin Joe J — Fri, 09 Oct 2026 05:19:22 +0000

In JavaScript, an array is a special variable used to store multiple values in a single variable.

1. How to create an array

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

console.log(fruits);

Output:

["Apple", "Mango", "Orange", "Banana"]

2. Access array elements

Array indexing starts from 0, not 1.
l

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Mango
console.log(fruits[2]); // Orange
console.log(fruits[3]); // Banana

3. Important array properties and methods

let fruits = ["Apple", "Mango", "Orange"];

console.log(fruits.length);

Output: 3
push() — add an element at the end

let fruits = ["Apple", "Mango"];

fruits.push("Orange");

console.log(fruits);

Output: ["Apple", "Mango", "Orange"]

pop() — remove the last element

let fruits = ["Apple", "Mango", "Orange"];

fruits.pop();

console.log(fruits);

Output: ["Apple", "Mango"]

unshift() — add an element at the beginning

let fruits = ["Mango", "Orange"];

fruits.unshift("Apple");

console.log(fruits);

Output: ["Apple", "Mango", "Orange"]

shift() — remove the first element

let fruits = ["Apple", "Mango", "Orange"];

fruits.shift();

console.log(fruits);

Output: ["Mango", "Orange"]

4. Update an array element

let fruits = ["Apple", "Mango", "Orange"];

fruits[1] = "Banana";

console.log(fruits);

Output:["Apple", "Banana", "Orange"]
The element at index 1 changes from "Mango" to "Banana".

5. Loop through an array
Use a for loop to access every element.

let fruits = ["Apple", "Mango", "Orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Output :
Apple Mango Orange

forEach() — execute code for each element

let fruits = ["Apple", "Mango", "Orange"];

fruits.forEach(function(fruit) {
    console.log(fruit);
});

This prints every fruit without manually managing the index.

map()— create a new array A JavaScript Map is an object that can store collections of key-values

let numbers = [10, 20, 30, 40];

let result = numbers.map(function(num) {
    return num * 2;
});

console.log(result);

plaintext
Output : [20, 40, 60, 80]

filter() — select elements that match a condition

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(function(num) {
    return num >= 20;
});

console.log(result);

plaintext
Output : [20, 25, 30]

9. Array of objects
This is especially useful for your JavaScript product management practice.

let products = [
    { brand: "Samsung", price: 25000 },
    { brand: "Apple", price: 50000 },
    { brand: "Vivo", price: 18000 }
];

console.log(products[0].brand); // Samsung
console.log(products[1].price); // 50000

Each array element is an object containing product information.

JavaScript Object

Sajin Joe J — Wed, 30 Sep 2026 14:56:29 +0000

An object in JavaScript is used to store related data and functionality together using key-value pairs.

1. Basic Object

const product = {
    brand: "Samsung",
    price: 25000,
    model: "MHV"
};

console.log(product);

brand, price, model → properties
"Samsung", 25000, "MHV" → values 2. Change a Property

product.price = 30000;

console.log(product.price);

Output :

3. Add a Property

product.color = "Black";

console.log(product);

Now the object has

{
    brand: "Samsung",
    price: 30000,
    model: "MHV",
    color: "Black"
}

4. Delete a Property

delete product.color;

5. Nested Object
An object can contain another object.

const product = {
    brand: "Samsung",
    price: 25000,

    port: {
        port1: "HDMI",
        port2: "AUX"
    }
};

Access nested values:

console.log(product.port.port1);
console.log(product.port.port2);

Hoisting in javascript

Sajin Joe J — Tue, 29 Sep 2026 05:09:30 +0000

Hoisting is the default behaviour of javascript where all the variable and function declarations are moved on top.

1. Function Hoisting

greet();

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

Output:

Hello Sajin

This works because function declarations are hoisted.

2. var Hoisting

console.log(name);

var name = "Sajin";

Output:

undefined

JavaScript behaves roughly like:

var name;

console.log(name);

name = "Sajin";

The declaration is hoisted, but the value assignment is not.

3. let and const

let and const are also hoisted internally, but they cannot be accessed before their declaration.

console.log(name);

let name = "Sajin";

This gives:

ReferenceError

The same applies to const:

console.log(age);

const age = 25;

4. Why is Hoisting useful?
The most practical example is function declarations:

calculate();

function calculate() {
    let a = 10;
    let b = 20;

    console.log(a + b);
}

Output:

It allows you to organize code so that the main logic appears before the detailed function implementations.

Hoisting is JavaScript's behavior of moving declarations to the top of their scope during the creation phase, before code execution.

Conditional statements in JavaScript

Sajin Joe J — Mon, 28 Sep 2026 16:47:23 +0000

Conditional statements in JavaScript allow you to perform different actions based on different conditions.

1. if, else if, and else

Executes a block of code if a condition is true.

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B"); // Executes this block
} else {
  console.log("Grade: F");
}

2. Ternary Operator (? :)
A concise shortcut for simple if...else assignments.

let age = 20;
let status = (age >= 18) ? "Adult" : "Minor";

console.log(status); // "Adult"

3. switch Statement
Evaluates an expression against multiple potential case matches using strict equality (===). Best when checking a single value against fixed options.

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the work week!");
    break; // Stops execution from falling through to the next case
  case "Friday":
    console.log("Weekend is near!");
    break;
  default:
    console.log("Midweek day");
}

4. Logical Operators in Conditions
Combine multiple conditions using logical operators:

&& (AND): true only if both conditions are true.
|| (OR): true if at least one condition is true.
! (NOT): Inverts the boolean value.

let isAdult = true;
let hasTicket = false;

if (isAdult && hasTicket) {
  console.log("Allowed entry.");
} else {
  console.log("Entry denied."); // Executes this
}

Javascript - Project 1 :Marks with Grade

Sajin Joe J — Sat, 26 Sep 2026 05:47:36 +0000

        let tamil = 50;
        let english = 55;
        let maths = 50;
        let science = 50;
        let socialScience = 50;

        function add() {
            let total = tamil + english + maths + science + socialScience;
            return total;

        }
        let total = add();
        console.log(total);

        function avg(total) {
            return total / 5;
        }
        let average = avg(total);
        console.log(average);

        function grade(avrg) {
            if (avrg >= 90) {
                console.log("A");
            }
            else if (avrg >= 70) {
                console.log("B");
            }
            else if (avrg >= 50) {
                console.log("E");
            }
            else {
                console.log("Failed")
            }
        }
        grade(average);

Output :

255
51
E

Function in javascript

Sajin Joe J — Fri, 25 Sep 2026 15:45:07 +0000

In JavaScript, a function is a reusable block of code that performs a task. You define it once and can call it whenever you need it.

1. Basic function

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

greet();

Here, greet is the function name, and greet() calls the function.

2. Function with parameters
Parameters let you pass information into a function:

function greet(name) {
  console.log("Hello, " + name);
}

greet("John");
greet("Sara");

Output :

Hello, John
Hello, Sara

3. Returning a value
A function can calculate something and return the result:

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

let result = add(10, 20);

console.log(result); // 30

a and b are parameters, while 10 and 20 are arguments.

4. Function expression
A function can also be stored in a variable:

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

console.log(add(5, 3)); // 8

5. Arrow function
Modern JavaScript commonly uses arrow functions:

const add = (a, b) => {
  return a + b;
};

For a simple return, you can shorten it:

const add = (a, b) => a + b;

console.log(add(5, 3)); // 8

So the core idea is:

function functionName(parameters) {
  // code
  return result;
}

functionName(arguments);

JavaScript Data Types

Sajin Joe J — Thu, 24 Sep 2026 05:14:17 +0000

JavaScript has 8 main data types. They are divided into Primitive and Non-Primitive.

Primitive Types :

Primitive data types can store only a single value.

1. String - Used to store text.

let name = "Sajin";
let city = 'Chennai';

console.log(name);

2. Number - Used for integers and decimal numbers.

let age = 25;
let price = 99.50;

console.log(age);
console.log(price);

3. BigInt - Used for very large integers.

let bigNumber = 12345678901234567890n;

console.log(bigNumber);

4. Boolean - Has only two values: true or false

let isLoggedIn = true;
let isAdmin = false;
if (isLoggedIn) {
    console.log("Welcome!");
}

5. Undefined - A variable that has been declared but doesn't have a value.

let username;

console.log(username);
// undefined

6. Null - Represents an intentionally empty value.

let selectedUser = null;

console.log(selectedUser);
// null

7. Symbol - Used to create unique identifiers.

let id = Symbol("id");

console.log(id);

Non-primitive types

Primitive data types can store only a single value. To store multiple and complex values, non-primitive data types are used.
Object : Used to store collection of data.

1. Object - Objects store data as key-value pairs.

let person = {
    name: "Sajin",
    age: 25,
    city: "Chennai"
};

console.log(person.name);

2. Array - An array stores multiple values in a single variable.

let fruits = ["Apple", "Mango", "Orange"];

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Mango

VS Code - shortcut keys

Sajin Joe J — Wed, 23 Sep 2026 04:27:22 +0000

Visual Studio Code (VS Code), here are the most useful shortcut keys for web development

Essential VS Code shortcuts
------------------------------

Ctrl + S - Save file Ctrl + Shift + S - Save As Ctrl + Z - Undo Ctrl + Y - Redo Ctrl + X - Cut line Ctrl + C - Copy line Ctrl + V - Paste Ctrl + A - Select all Ctrl + F - Find Ctrl + H - Find & Replace Ctrl + P - Quickly open a file Ctrl + Shift + P - Command PaletteCtrl + `- Open/close terminal Ctrl + B - Show/hide sidebar

Stand-alone Tags in HTML

Sajin Joe J — Tue, 22 Sep 2026 03:48:45 +0000

Stand-alone tags are HTML elements that don't need a closing tag. They are also called:

Void elements
Empty elements
Self-closing elements (commonly used term, though HTML technically calls them void elements)

Common stand-alone tags
<br> <hr> <img> <input> <meta> <link> <source> <area> <base> <col> <embed> <param> <track> <wbr>

CSS Position Property

Sajin Joe J — Fri, 18 Sep 2026 04:44:33 +0000

The CSS position property controls how an element is positioned on a webpage.

There are 5 types of Position in CSS:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

1. position: static :
This is the default position of every HTML element.
.box { position: static; }

2. position: relative :
The element stays in the normal document flow, but you can move it relative to its original position.
.box { position: relative; top: 20px; left: 30px; }

3. position: absolute :
An absolute element is positioned relative to its nearest positioned ancestor.
.parent { position: relative; } .child { position: absolute; top: 20px; right: 20px; }

4. position: fixed :
A fixed element is positioned relative to the browser viewport.
It stays in the same place even when you scroll.
.button { position: fixed; bottom: 20px; right: 20px; }

5. position: sticky
sticky behaves like relative initially, but when you scroll to a specified position, it sticks there.
.navbar { position: sticky; top: 0; }

Git and GitLab: A Beginner's Guide for Web Developers

Sajin Joe J — Thu, 17 Sep 2026 05:13:42 +0000

As a web developer, managing your source code is an important part of the development process. When working on a project, you may create many files, make changes, fix bugs, and work with other developers.

Git and GitLab help developers manage code, track changes, collaborate with teams, and maintain different versions of a project.

Although Git and GitLab are often mentioned together, they are not the same thing.

What is Git?

Git is a distributed version control system that helps developers track changes in their source code.

With Git, you can:

Track changes in files
Create different versions of your project
Revert unwanted changes
Create branches for new features
Work with other developers
Maintain a history of your project

For example, if you are developing a React application and accidentally delete some important code, Git can help you go back to an earlier version.

What is GitLab?

GitLab is a platform for hosting Git repositories and managing software development projects.

It provides features such as:

*Git repository hosting
Branch management
Merge requests
Issue tracking
Code reviews
CI/CD
Project management
Team collaboration
*
For example, your React project can be stored in a GitLab repository so that you and your team can access and manage the code.

Git and GitLab are valuable tools for every web developer.

You don't need to learn every Git command immediately. Start with the core workflow:

git init
git status
git add .
git commit -m "message"
git branch
git switch
git pull
git push

HTML Tables

Sajin Joe J — Wed, 16 Sep 2026 13:57:40 +0000

HTML tables allow web developers to arrange data into rows and columns.

Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
<thead>-> Groups the header content in a table
<tbody> -> Groups the body content in a table
<tfoot> -> Groups the footer content in a table