JavaScript Arrays, Strings, Numbers

Welcome to the fourth part of our JavaScript series! In the previous blog, we explored JavaScript’s fundamental building blocks, including variables, operators, functions, and objects. Now, we’re moving forward to cover essential data types and structures that make JavaScript incredibly versatile and powerful for handling data: Strings, Numbers, and Arrays.

In this blog, we’ll get into working with JavaScript Strings and methods for text manipulation, explore JavaScript Number types and properties, and cover Arrays in-depth for managing collections of data. Alongside these topics, we’ll discuss various string and array methods, searching, sorting, and iteration techniques, as well as unique tools like template literals, BigInt, and array constants.

This introduction sets the stage for mastering data manipulation, preparing you to take on more dynamic and data-intensive tasks in JavaScript. Let’s learn and enhance your toolkit with these fundamental JavaScript features!

JavaScript Strings

In JavaScript, Strings are sequences of characters used to represent text. They can be created using single (‘ ‘), double (” “), or backticks (“`) for template literals.

let singleQuoteString = ‘Hello’;

let doubleQuoteString = “World”;

let templateString = `Hello, ${singleQuoteString}!`;

Strings in JavaScript are immutable, meaning their values cannot be changed once created. You can, however, create a new string from existing ones.

JavaScript String Methods

JavaScript provides numerous built-in methods to manipulate strings: length – Returns the length of the string.

let greeting = “Hello”;

console.log(greeting.length); // Outputs: 5

1. toUpperCase() – Converts the string to uppercase.

console.log(greeting.toUpperCase()); // Outputs: HELLO

2. toLowerCase() – Converts the string to lowercase.

console.log(greeting.toLowerCase()); // Outputs: hello

3. slice(start, end) – Extracts a part of the string from start to end.

let sliced = greeting.slice(0, 2); // Outputs: He

4. replace(search, replaceWith) – Replaces a specified string with another.

console.log(greeting.replace(“Hello”, “Hi”)); // Outputs: Hi

5. concat() – Concatenates multiple strings.

let world = “World”;

console.log(greeting.concat(” “, world)); // Outputs: Hello World

6. trim() – Removes whitespace from both ends.

let spacedString = ” Hi “;

console.log(spacedString.trim()); // Outputs: Hi

JavaScript String Search

JavaScript provides methods to search within strings:

1. indexOf() – Returns the index of the first occurrence of a specified text.

console.log(greeting.indexOf(“e”)); // Outputs: 1

2. lastIndexOf() – Returns the last occurrence.

console.log(greeting.lastIndexOf(“l”)); // Outputs: 3

3. search() – Similar to indexOf but can take regular expressions.

console.log(greeting.search(“e”)); // Outputs: 1

4. includes() – Checks if a string contains a specified value.

console.log(greeting.includes(“H”)); // Outputs: true

5. startsWith() and endsWith() – Checks if the string starts or ends with a specified text.

console.log(greeting.startsWith(“H”)); // Outputs: true

console.log(greeting.endsWith(“o”)); // Outputs: true

JavaScript Template Strings

Template strings allow embedding expressions within strings using ${expression} syntax:

let name = “Jane”;

let message = `Hello, ${name}!`; // Outputs: Hello, Jane!

They’re especially useful for multiline strings:

let text = `This is a

multiline string.`;

JavaScript Numbers

JavaScript represents numbers as floating-point values, which can be integers or decimals.

let intNum = 5;

let floatNum = 3.14;

JavaScript BigInt

BigInt is a data type that handles very large integers beyond the Number range. Use an n at the end to create a BigInt:

let bigNum = 123456789012345678901234567890n;

JavaScript Number Methods

JavaScript provides several methods to manipulate numbers:

1. toString() – Converts the number to a string.

let num = 123;

console.log(num.toString()); // Outputs: “123”

2. toFixed() – Rounds the number to a fixed number of decimals.

console.log(floatNum.toFixed(2)); // Outputs: “3.14”

3. toExponential() – Returns the number in exponential notation.

console.log(num.toExponential(2)); // Outputs: “1.23e+2”

4. toPrecision() – Rounds the number to a specified length.

console.log(num.toPrecision(3)); // Outputs: “123”

JavaScript Number Properties

JavaScript has specific properties for numbers:

1. MAX_VALUE – Returns the largest possible value in JavaScript.

console.log(Number.MAX_VALUE); // Outputs:

1.7976931348623157e+308

2. MIN_VALUE – Returns the smallest positive value.

console.log(Number.MIN_VALUE); // Outputs: 5e-324

3. POSITIVE_INFINITY and NEGATIVE_INFINITY – Represent positive and negative infinity.

console.log(Number.POSITIVE_INFINITY); // Outputs: Infinity

console.log(Number.NEGATIVE_INFINITY); // Outputs: -Infinity

4. NaN – Represents a “Not-a-Number” value.

console.log(isNaN(“Hello” * 3)); // Outputs: true

JavaScript Arrays

An Array in JavaScript is a special variable that holds multiple values in a single reference. Arrays are useful for storing lists of data, and each element in the array has an index, starting from 0.

Declaring Arrays

You can declare an array using square brackets [] or the Array constructor:

let fruits = [“Apple”, “Banana”, “Mango”]; let numbers = new Array(1, 2, 3, 4, 5);

JavaScript Array Methods

JavaScript provides several methods to manipulate arrays:

1. push() – Adds an item to the end of an array.

fruits.push(“Orange”); // Adds “Orange” to the fruits array

2. pop() – Removes the last item of an array.

fruits.pop(); // Removes “Orange”

3. shift() – Removes the first item of an array.

fruits.shift(); // Removes “Apple”

4. unshift() – Adds an item to the beginning of an array.

fruits.unshift(“Strawberry”); // Adds “Strawberry” to the start

5. concat() – Joins two or more arrays and returns a new array.

let tropicalFruits = [“Pineapple”, “Papaya”];

let allFruits = fruits.concat(tropicalFruits);

6. slice() – Returns selected elements in an array as a new array.

let slicedFruits = fruits.slice(1, 3); // Slices from index 1 to 2

7. splice() – Adds/removes items to/from an array at a specified index.

fruits.splice(1, 1, “Kiwi”, “Peach”); // Replaces at index 1

8. join() – Joins all array elements into a string.

let fruitString = fruits.join(“, “);

JavaScript Array Search

There are several methods for searching arrays:

1. indexOf() – Finds the first occurrence of an element.

let position = fruits.indexOf(“Banana”); // Returns index of “Banana”

2. lastIndexOf() – Finds the last occurrence of an element.

position = fruits.lastIndexOf(“Banana”); // Finds last occurrence

3. includes() – Checks if an element exists in the array.

let exists = fruits.includes(“Mango”); // Returns true or false

4. find() – Returns the first element that matches a test function.

let foundFruit = fruits.find(fruit => fruit.length > 5);

5. findIndex() – Returns the index of the first matching element.

let index = fruits.findIndex(fruit => fruit.length > 5);

JavaScript Sorting Arrays

Sorting arrays can be done in ascending or descending order.

1. sort() – Sorts an array alphabetically.

fruits.sort();

2. reverse() – Reverses the elements of an array.

fruits.reverse();

3. Sorting Numbers – Use a compare function with sort() for numeric sorting.

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

numbers.sort((a, b) => a – b); // Sorts in ascending order

JavaScript Array Iteration

Iteration methods allow you to loop through elements of an array:

1. forEach() – Calls a function for each element in the array.

fruits.forEach(fruit => console.log(fruit));

2. map() – Creates a new array by applying a function to each element.

let fruitLengths = fruits.map(fruit => fruit.length);

3. filter() – Filters the array based on a condition.

let longFruits = fruits.filter(fruit => fruit.length > 5);

4. reduce() – Reduces the array to a single value.

let total = numbers.reduce((sum, value) => sum + value, 0);

5. some() – Checks if some elements meet a condition.

let hasShortFruit = fruits.some(fruit => fruit.length < 5);

6. every() – Checks if all elements meet a condition.

let allLongFruits = fruits.every(fruit => fruit.length > 2);

JavaScript Array Const

Arrays declared with const are still mutable, meaning that you can modify their contents even if the array reference itself is constant:

const cities = [“New York”, “Paris”, “Tokyo”]; cities[0] = “London”; // Allowed cities.push(“Sydney”); // Allowed // However, cities = [“Berlin”, “Madrid”]; // Not allowed

Request more information

JavaScript Arrays, Strings, Numbers