Javascript Object to Array and visa versa

const obj = {"1":"5","2":7,"3":9,"4":155,"6":"189","7":587,"8":"455","9":"89","10":"80","12":"887.6","13":89,"14":9}
const objToArr = Object.keys(obj).map(function(key) {
  return [key, Number(obj[key]) ];
});
console.log(objToArr)
/*
[ [ '1', 5 ],
  [ '2', 7 ],
  [ '3', 9 ],
  [ '4', 155 ],
  [ '6', 189 ],
  [ '7', 587 ],
  [ '8', 455 ],
  [ '9', 89 ],
  [ '10', 80 ],
  [ '12', 887.6 ],
  [ '13', 89 ],
  [ '14', 9 ] ]
*/


let resultObj = objToArr.reduce(function(result, item, index, array) {
   Object.assign(result, { [ item [ 0 ] ]:item[1]} )
  return result;
}, {}) //watch out the empty {}, which is passed as "result"
console.log(resultObj)
/*
{ '1': 5,
  '2': 7,
  '3': 9,
  '4': 155,
  '6': 189,
  '7': 587,
  '8': 455,
  '9': 89,
  '10': 80,
  '12': 887.6,
  '13': 89,
  '14': 9 }
*/

resultObj2 = {...objToArr};
console.log(resultObj2)
/*
{ '0': [ '1', 5 ],
  '1': [ '2', 7 ],
  '2': [ '3', 9 ],
  '3': [ '4', 155 ],
  '4': [ '6', 189 ],
  '5': [ '7', 587 ],
  '6': [ '8', 455 ],
  '7': [ '9', 89 ],
  '8': [ '10', 80 ],
  '9': [ '12', 887.6 ],
  '10': [ '13', 89 ],
  '11': [ '14', 9 ] }
*/





ES6 Arrow functions and correct using of bind(this)

function Desciples(firstname, attributes) {
  this.firstname = firstname;
  this.attributes = attributes;
  this.listAttributes = function() {
    return this.attributes.map(function (attrib)  {
      console.log(this.firstname + " did " + attrib);
    });
  };
}

let desciple1 = new Desciples("John", [
  "Author of Gospel of John ",
  "Author of Reveleations",
  "Desicple that Jesus loved"
]);

desciple1.listAttributes();

retuns

"undefined did Author of Gospel of John "
"undefined did Author of Reveleations"
"undefined did Desicple that Jesus loved"

But if we change it to

this.listAttributes = function() {
    return this.attributes.map(attrib => {
      console.log(this.firstname + " did " + attrib);
    });


"John did Author of Gospel of John "
"John did Author of Reveleations"
"John did Desicple that Jesus loved"

We can also create local variable to the function and assign this to it

 this.listAttributes = function() {
    self = this;
    return this.attributes.map(function (attrib)  {
      console.log(self.firstname + " did " + attrib);
    });
  };

We can also use the BIND on the function like:

  this.listAttributes = function() {
    return this.attributes.map(function (attrib)  {
      console.log(this.firstname + " did " + attrib);
    }.bind(this));
  };

Or the MAP has a second paramenter and we can pass this there that will also work

  this.listAttributes = function() {
    return this.attributes.map(function (attrib)  {
      console.log(this.firstname + " did " + attrib);
    },this);
  };

Javascript Essentials ES6

Object to String Array of the object keys

 const strArrKeys = Object.keys(jsObjectVariable); 

Object to Array with Key Value pairs

let theobj = { key1: "value1", key2: "value2" }
Object.entries(theobj).forEach(eachKeyVal =>
   { console.log("Key is " + eachKeyVal[0] + " and value is " + eachKeyVal[1]) }); 

Array from object values

 jsObjectVariable = { one : 1, two: 2, three: { temp1: "t1", temp2: "t2" } } const strArr = Object.keys(jsObjectVariable) // Returns ARRAY of the keys .map(k => jsObjectVariable[k] ); // Retruns an Array of values console.log(strArr); const strArr2 = Object.keys(jsObjectVariable) // Returns ARRAY of the keys .map(k => { return jsObjectVariable[k] } ); // Retruns an Array of values console.log(strArr2); jsARRVariable = [(one => 1),(two => 2)]; const strArr3 = jsARRVariable.map((k,v) => {return v;} ); // Returns array of values console.log(strArr3); 

Make a copy of the object.

cont newObject = {...oldObject};

Make a copy of the array.

cont newArray = [...oldArray];

Add values to an Array immutably.
Dont use push use concat, it will make a copy of the array.
Add an integer called counter to an array called results:

cont newObject = {
    ...oldObject,
    results: oldObject.results.concat(oldObject.counter)
};

Delete values from an Array immutably.

const idToDelete = 4;
const newArray = [...oldArray];
newArray.splice(idToDelete,1);

OR

newArray = oldArray.filter((result,index) => index !== idToDelete);

You can also create dynamic object keys (Object Names based on variables) and use them

var example = {one : 'something', two: 'somethingElse'};
var test = {
    [example.one]: true,
    [example.two]: function () { console.log('This is SomethingElse function Result');},
};

console.log(test.something);
test.somethingElse();

IN ES5 we used to:

var key = 'dynamicKey';
var o = {};
o[key] = 'value';

But in ES6, when creating an object literal, you can do this:

Continue reading “Javascript Essentials ES6”