DEV Community

loading...
Cover image for JavaScript Objects Iterable Methods

JavaScript Objects Iterable Methods

bello profile image Bello ・Updated on ・3 min read

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

Visual Composer Website Builder


Discussion (0)

pic
Editor guide