JavaScript Objects Iterable Methods
Tags: javascript, codenewbie, webdev, tutorial
Published: 2021-03-13 23:13:27

<a href="https://affiliates.visualcomposer.io/t.php?id=964_1_1_69" target="_blank"><img style="border:0px" src="https://affiliates.visualcomposer.io/media/banners/vcwb-728x90-01.png" width="728" height="90" alt="Visual Composer Website Builder"></a>

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

```js
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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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.

```js
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:

```js
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:

```js
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 }
```

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
<a href="https://affiliates.visualcomposer.io/t.php?id=964_1_1_73" target="_blank"><img style="border:0px" src="https://affiliates.visualcomposer.io/media/banners/vcwb-728x90-05.png" width="728" height="90" alt="Visual Composer Website Builder"></a>

---