Array Basic Methods

-

Array Methods

Array methods are built-in functions in JavaScript that allow us to manipulate and perform operations on arrays. These methods can be incredibly useful for tasks such as adding or removing elements, searching for values, or transforming arrays into new structures. In this guide, we will explore some commonly used array methods and their functionalities.

1. push()

  • The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
  • Syntax: array.push(element1, element2, ..., elementN)
  • Mutable: Yes, meaning it modifies the original array.

Example:

let fruits = ['apple', 'banana', 'grape'];
fruits.push('orange', 'mango');
console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange', 'mango']

2. pop()

  • The `pop()` method removes the last element from an array and returns that element.
  • Syntax: array.pop()
  • Mutable: Yes

Example:

let fruits = ['apple', 'banana', 'grape'];
let removedFruit = fruits.pop();
console.log(fruits); // Output: ['apple', 'banana']
console.log(removedFruit); // Output: 'grape'

3. unshift()

  • The `unshift()` method adds one or more elements to the beginning of an array and returns the new length of the array.
  • Syntax: array.unshift(element1, element2, ..., elementN)
  • Mutable: Yes

Example:

let fruits = ['apple', 'banana', 'grape'];
fruits.unshift('orange', 'mango');
console.log(fruits); // Output: ['orange', 'mango', 'apple', 'banana', 'grape']

4. shift()

  • The `shift()` method removes the first element from an array and returns that element.
  • Syntax: array.shift()
  • Mutable: Yes

Example:

let fruits = ['apple', 'banana', 'grape'];
let removedFruit = fruits.shift();
console.log(fruits); // Output: ['banana', 'grape']
console.log(removedFruit); // Output: 'apple'

5. concat()

  • Combines two or more arrays, creating a new array with the elements of all the arrays.
  • Syntax: array.concat(array2, array3, ..., arrayN)
  • Mutable: No, it does not modify the original array.

Example:

let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'mango'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ['apple', 'banana', 'orange', 'mango']

6. slice()

  • Creates a new array containing elements from the original array, optionally specified by start and end indices.
  • Syntax: array.slice(startIndex, endIndex)
  • Mutable: No, the original array is not modified.

Example:

let fruits = ['apple', 'banana', 'grape', 'orange', 'mango'];
let selectedFruits = fruits.slice(1, 4);
console.log(selectedFruits); // Output: ['banana', 'grape', 'orange']

7. splice()

  • The `splice()` method changes the contents of an array by removing or replacing existing elements or adding new elements in place.
  • Mutable: Yes, This method mutates the array.
  • Syntax: array.splice(startIndex, deleteCount, element1, element2, ..., elementN)
  • The second argument represents the number of elements to remove, and the optional third argument represents the new elements to add.

Example:

let fruits = ['apple', 'banana', 'grape', 'orange', 'mango'];
fruits.splice(2, 1); // Remove 'grape'
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'mango']
fruits.splice(1, 0, 'kiwi', 'watermelon'); // Add 'kiwi' and 'watermelon' after 'apple'
console.log(fruits); // Output: ['apple', 'kiwi', 'watermelon', 'banana', 'orange', 'mango']

8. indexOf()

  • Searches for an element in an array and returns its first occurance index, or -1 if not found.
  • Syntax: array.indexOf(element, startIndex)
  • Mutable: No, the original array is not modified.

Example:

const colors = ['red', 'green', 'blue', 'green'];
const index = colors.indexOf('green');
console.log(index); // Output: 1

9. lastIndexOf():

  • Searches for an element in an array from the end and returns its last index, or -1 if not found.
  • Syntax: array.lastIndexOf(element, startIndex)
  • Mutable: No, the original array is not modified.

Example:

const colors = ['red', 'green', 'blue', 'green'];
const lastIndex = colors.lastIndexOf('green');
console.log(lastIndex); // Output: 3

10. includes():

  • Checks if an element is present in an array and returns a boolean value.
  • Syntax: array.includes(element, startIndex)
  • Mutable: No, the original array is not modified.

Example:

const numbers = [1, 2, 3, 4, 5];
const hasThree = numbers.includes(3);
console.log(hasThree); // Output: true

11. join():

  • Joins all elements of an array into a string using a specified separator.
  • Syntax: array.join(separator)
  • Mutable: No, the original array is not modified.

Example:

const fruits = ['apple', 'banana', 'orange'];
const fruitString = fruits.join(', ');
console.log(fruitString); // Output: 'apple, banana, orange'

12. reverse():

  • Reverses the order of elements in an array.
  • Syntax: array.reverse()
  • Mutable: Yes, the original array is modified.

Example:

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 2, 1]

13. sort():

  • Sorts the elements of an array in place (by default, it converts elements to strings and sorts lexicographically).
  • Syntax: array.sort(compareFunction)
  • Mutable: Yes, original array is modiied.

Example:

const fruits = ['banana', 'orange', 'apple', 'grape'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange']

Key Takeaways

  • Array methods allow us to manipulate and perform operations on arrays in JavaScript.

  • Some common array methods include `push()`, `pop()`, `unshift()`, `shift()`, `concat()`, `slice()`, `splice()`, `forEach()`, `map()`, and `filter()`.

  • Mutative methods modify the original array, while non-mutative methods do not.

  • Some methods return a new array, while others do not.

Comments

Post a Comment

Popular posts from this blog

Limitations of JavaScript

-
Introduction to Limitations of JavaScript JavaScript is a widely used programming language that runs on all major web browsers. It is known for its versatility and ability to create dynamic and interactive web pages. However, like any programming language, JavaScript has its limitations. In this learning guide, we will explore the limitations of JavaScript to help you better understand its strengths and weaknesses. 1. Performance Limitations JavaScript is an interpreted language , which means that it is executed line by line at run-time. This can result in slower performance compared to compiled languages like C++ or Java. Additionally, JavaScript is a single-threaded language , meaning that it can only execute one operation at a time. This can lead to performance bottlenecks when dealing with computationally intensive tasks or handling large amounts of data. // Example of slow performance in JavaScript for ( var i = 0 ; i < 1000000000 ; i ++ ) { // Perform some computati...
Read more

'for in' Loop

-
Introduction to JavaScript 'for in' Loop The `for in` loop is a type of loop in JavaScript that is used to iterate over the properties of an object. It is often used when you need to loop through the keys or properties of an object and perform some action on each one. Unlike other loops like `for` and `while`, the `for in` loop is specifically designed to work with objects. Syntax The syntax for the `for in` loop is as follows: for   ( variable  in  object )   {    // code to be executed } The `variable` represents a temporary variable that will hold the key of each property in the object. The `object` is the object that you want to iterate over. Example Let's take a look at an example to understand how the `for in` loop works: const  person  =   {   name :   'John' ,   age :   30 ,   gender :   'male' } ;   for ...
Read more

in Operator

-
JavaScript in Operator The `in` operator in JavaScript is used to check if a specified property exists in an object or an element exists in an array. It returns `true` if the property/element exists and `false` otherwise. Syntax The syntax of the `in` operator is as follows: property_name  in  object_name or element_value  in  array_name Examples Let's look at some examples to understand how the `in` operator works: 1. Checking if a property exists in an object: const  person  =   {     name :   'John' ,     age :   30 ,     city :   'New York'   } ;   console. log ( 'name'   in  person ) ;   // Output: true   console. log ( 'address'   in  person ) ;   // Output: false In this example, `'name' in person` returns `true` because the `person` object has a property named `name`. However, `'address' in person` returns `false` be...
Read more