DEV Community

Cover image for JavaScript Objects Iterable Methods
Bello Osagie
Bello Osagie

Posted on β€’ Edited on

1

JavaScript Objects Iterable Methods

Visual Composer Website Builder


In JavaScript, provided a data structure can be instantiated (with the new keyword), it's an object - Map Set Array etc.

const map = new Map();
const set = new Set('Bello');
const array = new Array(3, 5, 'Bello');

const checkMap = typeof map;
const checkSet = typeof set;
const checkArray = typeof array;

console.log(checkMap, checkSet, checkArray); // object object object
Enter fullscreen mode Exit fullscreen mode

A primitive data structure can become a non-primitive data structure also.

Primitive data structures are the fundamental data structures like numbers, strings, etc.

Non-primitive data structure contains one or more primitive data (stored in a variable).

See the example below:

const numb = new Number(3)
const str = new String('Bello');

const checkNum = typeof numb;
const checkStr = typeof str;

console.log(numb, str); // [Number: 3] [String: 'Bello']
console.log(checkNum, checkStr); // object object
Enter fullscreen mode Exit fullscreen mode

It is not a good practice to convert primitive data types to an object because they can lead to slow execution.

Instantiation should be avoided on primitive data types.

See the example above:

const numb = new Number(3)
const str = new String('Bello');

const checkNum = typeof numb;
const checkStr = typeof str;

console.log(numb, str); // [Number: 3] [String: 'Bello']
console.log(checkNum, checkStr); // object object

// numbers has no iterable keys and values
const iterNum = Object.keys(numb);

// strings has no iterable keys and values
const iterStr = Object.keys(str);

console.log(iterNum); // []
console.log(iterStr); // [ '0', '1', '2', '3', '4' ]
Enter fullscreen mode Exit fullscreen mode

In the example above, the string to object conversion returned iterable ordered keys (indexes).

The above example shows that strings are iterable while numbers aren't.

Syntax used above is:

Object.keys(obj)
Enter fullscreen mode Exit fullscreen mode

The example above is the same as below:

const str = {
  0: 'B',
  1: 'e',
  2: 'l',
  3: 'l',
  4: 'o'
}

Object.keys(str); // [ '0', '1', '2', '3', '4' ]
/* Object.values(str) // [ 'B', 'e', 'l', 'l', 'o' ] */
Enter fullscreen mode Exit fullscreen mode

Primitive data like string and number are convertible to objects, but not all object is iterable. For example, the number to object conversion returned an empty array, []; while a string to object conversion returned iterable ordered keys with their respective values.

The syntax above doesn't always work - like on a map and set.

See another example below:

const map = new Map();
const set = new Set('Bello');
const array = new Array(3, 5, 'Bello');

console.log( Object.keys(set) ); // [] => doesn't work on set
console.log( Object.keys(array) ); // [ '0', '1', '2' ] => works on array
console.log( Object.keys(map) ); // [] => doesn't work on map
Enter fullscreen mode Exit fullscreen mode

The Object.* doesn't allow Map and Set iterable - they are iterable but in a different syntax.

The map or set objects iterable syntax is re-constructed below:

map.keys()
set.keys()
Enter fullscreen mode Exit fullscreen mode

The same example above is modified. See below:

const map = new Map();
const set = new Set('Bello');
const array = new Array(3, 5, 'Bello');

console.log( set.keys() ); // { 'B', 'e', 'l', 'o' }
console.log( Object.keys(array) ); // [ '0', '1', '2' ]
console.log(map.keys()); // [Map Iterator] {  }
Enter fullscreen mode Exit fullscreen mode

The former syntax doesn't return an array, but the latter syntax Object.* returns a real array

The keys method is not the only method used on an object for iteration. There are other methods like values and entries used on an object.

See the example below:

const user = {
  name: "Bello",
  age: 27
};

// loop over keys
console.log( Object.keys(user) ); // [ 'name', 'age' ]
// loop over values;
console.log( Object.values(user) ); // [ 'Bello', 27 ]
// loop over key-value pairs;
console.log( Object.entries(user) ); // [ [ 'name', 'Bello' ], [ 'age', 27 ] ]
Enter fullscreen mode Exit fullscreen mode

Since Object.* returns real arrays, we can access items from it.

console.log( Object.keys(user)[0] ); // name
console.log( Object.values(user)[0] ); // Bello
console.log( Object.entries(user)[0][1] ); // Bello
Enter fullscreen mode Exit fullscreen mode

The example above is the same as below:

const user = {
  name: "Bello",
  age: 27
};

for (let key of Object.keys(user)) {
  console.log(key); 
  /*
  name
  age
  */
}

for (let value of Object.values(user)) {
  console.log(value); 

  /*
  Bello
  27
  */
}

for (let entry of Object.entries(user)) {
  console.log(entry); 

  /*
  [ 'name', 'Bello' ]
  [ 'age', 27 ]
  */ 
}
Enter fullscreen mode Exit fullscreen mode

The key value entry are random variable names.


Transforming objects

The methods, keys values entries transform an object into an array.

The method fromEntries converts an array to an object.

See the example below:

const user = {
  name: "Bello",
  age: 27
};

console.log( Object.entries(user) ); 
// [ [ 'name', 'Bello' ], [ 'age', 27 ] ]

const arr = Object.entries(user);
const toObj = Object.fromEntries(arr);

console.log(toObj); // { name: 'Bello', age: 27 }
Enter fullscreen mode Exit fullscreen mode

Buy me a Coffee


Visual Composer Website Builder


Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay