String to Object in JavaScript

Programming languages are languages hybridized with math. Take JavaScript, for example. All you want to say and do with JavaScript, you have to do it using objects and arrays. I never liked math when I was in high school. I was good at it, but it was never my thing. I liked Physics and Chemistry more, those classes had numbers but they also had scientific theories in which those numbers made sense.

I learned JavaScript over the summer, and I really like it, it resembles those high school classes. JavaScript’s math seems to deal less with calculations and computations and more with my logic behind the calculations and computations. As I improve my knowledge of JavaScript’s vocabulary, grammar and syntax, I can feel the left side of my brain expanding. I tell my family that I’m becoming a scientist more and more everyday. I just need 10,000 hours more of JavaScript practice to become an excellent scientist. But so far, my coding journey as been fun and everyday I learn something valuable that I can put to use. I am a great scientist, soon to be an excellent one.

The other day I did a code challenge in which I learned how to scan all the properties in an object without implementing for loops inside said object. This was particularly helpful to me, because I’m good at iterating, splicing and doing about anything to arrays, but no so with objects. Objects are very important in JavaScript. In fact, almost everything in JavaScript is an object (arrays are objects too and even objects are objects!).

So this was the challenge:

Given a string, create a function that returns an object. The object must have each letter of the string as keys, and how many times those letter appear in the string as corresponding integer values.

Here’s an example:

Given this string:

‘pneumonoultramicroscopicsilicovolcanoconiosis’

Create a function:

function getObjectFromStr(str) {
}

That returns this:

{
p: 2,
n: 4,
e: 1,
u: 2,
m: 2,
o: 9,
l: 3,
t: 1,
r: 2,
a: 2,
i: 6,
c: 6,
s: 4,
v: 1
}

One of the firsts things you learn about JavaScript (and any programming language) is how to use for and while loops. Repetition is super helpful!

So the first thing we can do is to break apart each letter in this string and turn them all into elements inside a single array in which we can iterate over with a for loop. We can do all of this by using the split() method and assign that array as the value of a new variable.

const myArray = str.split("")

If we console.log(myArray), we see this:

[
'p', 'n', 'e', 'u', 'm', 'o', 'n', 'o',
'u', 'l', 't', 'r', 'a', 'm', 'i', 'c',
'r', 'o', 's', 'c', 'o', 'p', 'i', 'c',
's', 'i', 'l', 'i', 'c', 'o', 'v', 'o',
'l', 'c', 'a', 'n', 'o', 'c', 'o', 'n',
'i', 'o', 's', 'i', 's'
]

Now would be a good time to create our empty object, in which we are going to store the letters from myArray.

let myObj = new Object();

And now we create a for loop to scan myArray.

for (let i = 0; i < myArray.length; i++) {
}

What we want to do now is to scan the first element in myArray and check if that element is a key in myObj. If it is, the value of that key needs to go up by 1. If that element is not a key in myObj, we need to make it one with a corresponding value of 1.

But how do we check all the keys in myObj? At first you may think that we need to do some kind of loop inside of myObj, but we don’t!

We can use the in operator. The in operator returns true if a property exists in an object. If a property does not exist in the object, it returns false. So our loop ends up looking like this:

for (let i = 0; i < myArray.length; i++) {
 if (myArray[i] in myObj) {
  myObj[myArray[i]] += 1
  } else {
  myObj[myArray[i]] = 1
 }
}

Alright, the last step is to return myObj and our function will be complete!

function getObjectFromStr(str) {
 const myArray = str.split("");
 let myObj = new Object();
 for (let i = 0; i < myArray.length; i++) {
  if (myArray[i] in myObj) {
  myObj[myArray[i]] += 1
  } else {
  myObj[myArray[i]] = 1
  }
 }
 return myObj
}

I always humor myself by saying I want to turn data into art. I say it jokingly, but maybe deep down in my heart that statement is truth, and the more I learn coding, the more it seems to be possible. Nevertheless, in order to “turn data into art”, I need get good at repeatedly scanning and repeatedly manipulating data.

You need to scan your data to know what you have. Once you know what you are working with, you need to manipulate your data if you want to do something with it (even if you just want to print your data — that’s still accessing and manipulating your data).

The possibilities of what you can do are endless if you are witty enough to come up with the right commands and conditionals when scanning and manipulating your data.

Photo by Markus Spiske on Unsplash