Road from Ruby to JavaScript

I've spent the first six months learning Ruby and becoming a Rails developer at Flatiron. The next challenge was to dive into JavaScript. The past two months of JavaScript has been a struggle for me. Manipulating the DOM and eventListeners were all new to me. Entering JavaScript, I definitely see why it's great for building a web application compared to what I have been doing with Rails. Honestly, I'm still learning a lot and need to work harder to become a better JavaScript developer. While working on my first project, building a JavaScript single-page application with a Rails API, I learned a lot of tips and tricks that hopefully will help some other beginners, like me, getting into JavaScript.

for...in vs for...of

For...in and for...of are two useful iterators that you need to know. For...in is used for objects, while for...of is used for arrays.

for (variable in object) {
  statement
}

The for...in statement iterates a specified variable over all the enumerable properties of an object. The statement will execute for every property in the object.

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

In the example above, we are iterating through the object and console logging the property and its name. This is a great iterator to use if you want to grab properties from an object.

for (variable in object) {
  statement
}

The for...of statement iterates through iterable objects, mainly arrays. The statement will execute for each element of an array. On each iteration a value of a different property is assigned to variable. Variable may be declared with const or let.

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

innerText vs innerHTML

While building my project, I had to clear and add things to divs or elements. In order to do that, I had to access the innerHTML or innerText of an element. It's important to know the difference between these two methods.

<div id='example'>
   <strong>This sentence is bold!</strong>
</div>

The sample code, when rendered on a page will be displayed like this:
This sentence is bold!

Using element.innerText and element.innerHTML, we can see what we get from the example code.

const sentence = document.getElementById('example')
sentence.innerText

// => "This sentence is bold!"

innerText retrieves and sets the content of the tag as plain text. It returns the string inside the div with no HTML formatting. Use innerText when you want to see what's inside an element with no formatting.

const sentence = document.getElementById('example')
sentence.innerHTML

// => <strong>This sentence is bold!</strong>

innerHTML retrieves and sets the same content in HTML format. This returns the string inside the div with the HTML markup, including any spacings or line breaks. When you want to see the HTML markup and what exactly is in our element.

== vs ===

Ruby being my first language, I used == all the time to compare things. I have to say I was weirded out by === in Javascript. It's just so unnecessarily long-looking and I have to do an additional key stroke. JavaScript has both == and ===, but it's better to use ===. The double equals operator is an abstract comparison and the triple equals operator is a strict comparison.

const a = 2
const b = 2

a == b
// => true

a === b
// => true

In this case, both comparison operators return true, so what is the difference?

The double equals operator converts the variable values to the same type before comparing, while the triple equals operator has no type conversion and returns true only if both values AND types are identical.

const a = 2
const b = 2
const c = "2"

a == b
// => true

a === b
// => true

a == c
// => true

a === c
// => false

Using the same example from before, but adding a new variable that is 2 similar to a and b, but it's a string instead of an integer. a == c returns true because both variables contain the same value even though they have different types. The double equals operator is converting the two variables to the same data type and then comparing the value. a === c returns false because the types of variables are different even though the value are the same. Overall, the triple equals operator is often used more than the double equals operator due to it's strict comparison of datatype and value making it a better and more accurate comparison.

Still a JavaScript Noob

The transition from Ruby to JavaScript has been difficult. I've learned a lot and there's still so much to learn. I'll be honest, the Flatiron curriculum was tough and I didn't understand a lot, but once I started my project, I started understanding the material. For those of you struggling like me, building a JavaScript project will help you immensely.