Array keys() & values() Method

-

Introduction

The `keys()` and `values()` methods are built-in JavaScript array methods that allow you to extract the keys and values of the elements in an array. These methods work in a similar way to the `Object.keys()` and `Object.values()` methods, but operate specifically on arrays.

The `keys()` Method

  • The `keys()` method returns an iterator object that contains the keys(indices) of the elements in the array.
  • This iterator object can be looped through using the `for...of` loop or converted to an array using the `Array.from()` method.

  • Syntax: array.keys()
  • Mutable: No (Arrays are not mutable due to this method)

Here's an example:

const fruits = ['apple', 'banana', 'orange'];
 
const keys = fruits.keys();
 
for (const key of keys) {
  console.log(key);
}

Output:

0
1
2

In the above example, the `keys()` method returns an iterator object containing the keys of the `fruits` array. The `for...of` loop is then used to iterate over the keys and log each key to the console. In this case, the keys are the indices of the elements in the array.

Applications of Array.keys():

  • It is useful when you specifically need to work with the indices of array elements in a loop or when you want to do something with the array elements based on their index.
  • It can be combined with other array methods like Array.values() or Array.entries() to get the indices, values, or key-value pairs of the array elements and perform different operations.

The `values()` Method

  • The `values()` method returns an iterator object that contains the values of the elements in the array.
  • This iterator object can be looped through using the `for...of` loop or converted to an array using the `Array.from()` method.

  • Syntax: array.values()
  • Mutable: No (Arrays are not mutable due to this method)

Here's an example:

Example 1:

const values = fruits.values();
 
for (const value of values) {
  console.log(value);
}
// Output:
// apple
// banana
// orange

In the above example, the `values()` method returns an iterator object containing the values of the `fruits` array. The `for...of` loop is then used to iterate over the values and log each value to the console.

Example 2:

// Input array contain some elements
let A = ['A', 'Z', 'k', 'B'];
 
// Here array.values() method is called.
let valuesIterator = A.values();
 
// All the elements of the array the array
// is being printed.
console.log(valuesIterator.next().value);
console.log(valuesIterator.next().value);
console.log(valuesIterator.next().value);
console.log(valuesIterator.next().value);
 
// Output:
// A
// z
// k
// B

valuesIterator.next().value meaning

In JavaScript, valuesIterator.next().value is a sequence of method calls used to retrieve the next value from an iterator object. The valuesIterator is an iterator returned by the Array.values() method (or any other method that returns an iterator).

Let's break down the meaning of each part of valuesIterator.next().value:

  1. valuesIterator: It is an iterator object obtained by calling the Array.values() method on an array. The valuesIterator is capable of iterating through the values of the array elements one by one.
  2. next(): It is a method called on the iterator object valuesIterator. The next() method is used to move the iterator to the next element in the iteration sequence. When called, it returns an object with two properties: value and done.
  3. value: It is a property of the object returned by valuesIterator.next(). It represents the current value of the iterator after moving to the next element in the array. This is the value of the current array element in the iteration sequence.

Here's an example to illustrate the usage of valuesIterator.next().value:

const fruits = ['apple', 'banana', 'orange'];
 
const valuesIterator = fruits.values();
 
const firstValue = valuesIterator.next().value;
console.log(firstValue); // Output: 'apple'
 
const secondValue = valuesIterator.next().value;
console.log(secondValue); // Output: 'banana'
 
const thirdValue = valuesIterator.next().value;
console.log(thirdValue); // Output: 'orange'

Applications of Array.values():

  • It is useful when you specifically need to work with the values of array elements in a loop or when you want to perform operations based on the values of the array elements.
  • It can be combined with other array methods like Array.keys() or Array.entries() to get the indices, values, or key-value pairs of the array elements and perform different operations.

Key Takeaways

  • The `keys()` method returns an iterator object containing the keys of the elements in an array.

  • The `values()` method returns an iterator object containing the values of the elements in an array.

  • These methods can be useful when you specifically need to work with the keys or values of the elements in an array.

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