Array in Javascript

Client side Java script Server side Java script Data types  variables Operators  Expressions  Functions  Objects  Array  Date and math related objects Document objectmodel Event handling

Array

In JavaScript, an array is a special type of object used to store an ordered collection of multiple values under a single variable name. These values, known as elements, can be of any data type (numbers, strings, booleans, objects, or even other arrays).

Key Characteristics of JavaScript Arrays:

Ordered: 

Elements are stored in a specific order, and their position is determined by a numerical index.

Zero-indexed: 

The first element is at index 0, the second at index 1, and so on. The last element is at array.length - 1. 

Resizable: 

Arrays can dynamically grow or shrink in size as elements are added or removed. 

Heterogeneous: 

Arrays can store elements of different data types within the same array.

Creating Arrays:

The most common way to create an array is using an array literal:

JavaScript

const myArray = ["apple", "banana", "cherry"];
const numbers = [1, 2, 3, 4, 5];
const mixedData = ["hello", 123, true, { name: "John" }];

You can also create an empty array and add elements later:

JavaScript

const emptyArray = [];
emptyArray.push("first element");

Accessing Array Elements:

Elements are accessed using their index within square brackets:

JavaScript

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Output: "apple"
console.log(fruits[1]); // Output: "banana"

Common Array Methods:

JavaScript provides numerous built-in methods for manipulating arrays, including:

push(): Adds one or more elements to the end of an array.

pop(): Removes the last element from an array.

unshift(): Adds one or more elements to the beginning of an array.

shift(): Removes the first element from an array.

splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements.

forEach(): Executes a provided function once for each array element.

map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.

filter(): Creates a new array with all elements that pass the test implemented by the provided function.

reduce(): Executes a reducer function on each element of the array, resulting in a single output value.

length: A property that returns the number of elements in an array.

3. Function: Represents reusable blocks of code.

Function: Functions are blocks of code designed to perform a particular task. In JavaScript, functions are also considered objects because they can have properties and methods, and can be assigned to variables, passed as arguments, and returned from other functions. 

Syntax:

function functionName(parameter1, parameter2) {
  // Code to be executed
  return result; // Optional: return a value
}

Example

function myFunction(p1, p2) {
  return p1 * p2;
}

console.log Syntax

console.log(message)

Example

    function greet(name) {
        console.log(`Hello, ${name}!`);     }

output

// Output: Hello, Ali!

(the dollar sign $ is used in conjunction with curly braces {} within a template literal)
    const sayHello = greet; // Assigning the function to a variable

Example

function fun() {
    console.log("SGRCM GCMC");
}

4. Date Object

JavaScript Date Output

By default, JavaScript will use the browser's time zone and display a date as a full text string:

Sun Nov 16 2025 09:48:48 GMT+0530 (India Standard Time) (Greenwich Mean Time (GMT) to India Standard Time (IST))

Creating Date Objects

Date objects are created with the new Date() constructor.

There are 9 ways to create a new date object:

Sytax

new Date()

JavaScript new Date()

new Date() creates a date object with the current date and time:

Example

const now = new Date();

console.log(now);

Output

2025-01-16T04:25:58.204Z

Example

const d = new Date();

Sytax

new Date(date string)
new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)
new Date(milliseconds)

new Date(date string)

new Date(date string) creates a date object from a date string:

Examples

const d = new Date("October 13, 2014 11:13:00");

5. Regular Expressions

Regular Expressions

A Regular Expression is a sequence of characters that forms a search pattern.

Regex is a common shorthand for a regular expression.

JavaScript RexExp is an Object for handling Regular Expressions.

RegExp are used for:

Text searching

Text replacing

Text validation

Regular Expression Syntax

/pattern/modifier flags;

Example

Do a case-insensitive search for "w3schools" in a string:

let text = "Visit W3Schools";
let n = text.search(/w3schools/i);

Example explained:

/w3schools/i  is a regular expression.

w3schools  is a pattern (to be used in a search).

i  is a modifier (modifies the search to be case-insensitive).

Using String Methods

Regular expressions are often used with the string methods:

Method	Description
match(regex)	Returns an Array of results
replace(regex)	Returns a new String
search(regex)	Returns the index of the first match

Using String match()

Search for "W3schools" in a string:

let text = "Visit W3Schools";
let n = text.match(/W3schools/);

Output

W3Schools

Using String replace()

Replace Microsoft with W3Schools in a string:

let text = "Visit Microsoft!";
let result = text.replace(/Microsoft/i, "W3Schools");

Output

Please visit W3Schools!

Using String search()

Search for "W3Schools" in a string and display the position of the match:

let text = "Visit W3Schools";
let n = text.search(/W3Schools/);

Output

6

RexExp Alteration (OR)

In a regular expression an alteration is denoted with a vertical line character |.

An alteration matches any of the alternatives separated with |.

Example

A global search for the alternatives (red|green|blue):

let text = "Black, white, red, green, blue, yellow.";
let result = text.match(/red|green|blue/g);

Output

red,green,blue

JavaScript Regex Flags

Syntax

/pattern/flags

Regular expression flags are parameters that can modify how a pattern is used, such as making it case-insensitive or global.

These are the most common:

Flag	Description
/g	Performs a global match (find all)
/i	Performs case-insensitive matching
/u	Enables Unicode support (new 2015)

 

The /g Flag (Global)

The /g flag matches all occurrences of the pattern, rather than just the first one.

Example

A global search for "is" in a string:

let text = "Is this all there is?";
const pattern = /is/g;
let result = text.match(pattern);

Output

is,is
The /i Flag (Insensitive)

The /i flag makes a match case-insensitive: /abc/i matches "abc", "AbC", "ABC".

Example

A case-insensitive search for "w3schools" in a string:

let text = "Visit W3Schools";
const pattern = /w3schools/i;
let result = text.match(pattern);

Output

W3Schools

 

RexExp Metacharacters

// Match words
const pattern = /\w/;

Metacharacters are characters with a special meaning.

They can be used to match digts, words, spaces, and more.

These are the most common:

Meta	Description
\d	Matches Digits
\w	Matches Words
\s	Matches Spaces

RegExp \d (digits) Metacharacter

The \d metacharacter matches digits.

Example

A global search for digits in a string:

let text = "Give 100%!";
const pattern = /\d/g;
let result = text.match(pattern);

Output

1,0,0

RegExp \w (word) Metacharacter

The \w metacharacter matches word characters.

A word character is a character a-z, A-Z, 0-9, including _ (underscore).

Example

A global search for word characters:

let text = "Give 100%!";
const pattern = /\w/g;
let result = text.match(pattern);

Output

G,i,v,e,1,0,0

JavaScript RegExp Quantifiers

// Match at least one zero
const pattern = /0+/;

Quantifiers define the numbers of characters or expressions to match.

These are the most common:

Code	Description
x*	Matches zero or more occurrences of x
x?	Matches zero or one occurrences of x
x{n}	Matches n occurences of x

X is element, is a preceding pattern

The n? Quantifier

x? matches zero or one occurrences of x.

Example

A global search for "1", followed by zero or more "0" characters:

let text = "1, 100 or 1000?";
const pattern = /10?/g;
let result = text.match(pattern);

 

Output

1,10,10

Regular Expression Assertions

// Match beginning of string
const pattern = /^W3Schools/;
// Match end of string
const pattern = /W3Schools$/;

Assertions matches Boundaries and Lookarounds:

String Boundaries and Word Boundaries.

Lookarounds: Lookaheads and Lookbehinds.

These are the most common:

Syntax	Name	Description
^	String boundary	Matches the beginning of a string
$	String boundary	Matches the end of a string
\b	Word boundary	Matches the beginning or end of a word
(?=...)	Lookahead	Matches the subsequent string
(?<=...)	Lookbehind	Matches the previous string

RegExp ^ Metacharacter

The ^ metacharacter matches the beginning of a string.

Examples

Test if a string starts with W3Schools:

const pattern = /^W3Schools/;
let text = "W3Schools Tutorial";
let result = pattern.test(text); // true

Output

true
const pattern = /^W3Schools/;
let text = "Hello W3Schools";
let result = pattern.test(text); // false

Output

false
RegExp $ Metacharacter

The $ metacharacter matches the end of a string.

Test if a string ends with W3Schools:

const pattern = /W3Schools$/;
let text = "Hello W3Schools";
let result = pattern.test(text); // true

Output

true
const pattern = /W3Schools$/;
let text = "W3Schools tutorial";
let result = pattern.test(text); // false

Output
false
JavaScript RegExp Character Classes

// Match Digits
const pattern = /[0-9]/;

Character Classes are characters enclosed in square brackets [].

A character class matches any character from a set within brackets.

These are the most common:

Class	Description
[a]	Matches the character between the brackets
[abc]	Matches all characters between the brackets
[a-z]	Matches all characters in the range from a to z
[0-9]	Matches all characters in the range from 0 to 9

Example [0-9]

A global search for the characters "0" to "9" in a string:

let text = "More than 1000 times";
const pattern = /[0-9]/g;
let result = text.match(pattern);

Output

1,0,0,0

Key characteristics of non-primitive data types:

Mutable: 

Their values can be changed after creation. For example, elements in an array can be modified, and properties of an object can be added, removed, or updated.

Stored by Reference: 

When you assign a non-primitive value to a new variable, both variables will point to the same location in memory. Changes made through one variable will be reflected when accessing the data through the other.

Comparison by Reference: 

When comparing two non-primitive variables using == or ===, JavaScript checks if they refer to the exact same object in memory, not if their content is identical. To compare content, you need to manually compare their properties or elements.

Operators

JavaScript operators are symbols or keywords that perform operations on values and variables. They are fundamental for manipulating data and controlling program flow.