JavaScript Objects Iterable Methods

---

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

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

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' ]

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)

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' ] */

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

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()

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] {  }

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 ] ]

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

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 ]
  */ 
}

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 }

---

---

---