Learning my way around Javascript

I can’t begin to say how much I had to review and review again in vanilla Javascript.

At the time of writing this, I think one of the biggest challenges of Javascript was how “loosey-goosey” it was. Previously in my experience with Ruby, Sinatra, Java, C#, and Rails. There was no real set structure. It’s something I continue to struggle with.

I think understanding scopes is key. Scopes can provide a sense of structure and allow you to move past some of the culture shocks in comparison to the other languages. Adding a class structure also helps, however, I have not implemented that at the time of writing this, but I will do my best to implement it going forward.

I think my initial hardship was just…what to do I do and where do I start. Creating simple form and input apps of yesteryear was not necessarily easy, but familiar. Javascript ripped me out of my comfort zone and really made me sit down and learn to plan. However, I keep changing things on the fly as I didn’t like previous ideas. I finally stuck to an idea but can definitely be improved upon.

UPDATE: I had to make some edits to this blog and updates after studying more and more and learning to understand Javascript a bit better. Scopes were key, but once I felt like I started understand hoisting, and scope chaining in Javascript. I think that helped nail it down.

const name = 'Austin';
function greeting() {
  const greeting = 'Hello';
  {
    const lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}
greeting();

const name starts in the the global scope.

function greeting() {
}

The function block starts the block scope and everything inside contains other scopes inside the nested scope. const greeting an not be accessed outside of the function greeting() because it was created with in the function scope and not outside the function scope. This is why it can be good to set querySelector or getElementID hoisted variables or to the top of the Javascript document since it can be used in the global variable an not have to be “reassign” or “recreated” in certain scenarios.

Learning how to use scopes transitions into using ES6 classes and ensures when you create classes and their functions that they are either within the scope of the class and/or can be access in other Javascript documents throughout the application.