JavaScript, A Few Main Concepts
By: Claudia Borghini
Tags: Javascript Scope, JavaScript, Software Engineering, Hoisting, Datatypes In Javascript

During my Software Engineering Bootcamp at Flatiron School, I familiarized with Ruby, Rails, JavaScript, React, and everything in between. I had a lot of fun building projects with my peers, using the agile methodology, and, as a recent graduate, I’m now continuing to code to create web-applications on my own.

While I agree that the only way to learn a language is by coding, coding and coding, I also believe it is important to know its fundamentals and core concepts definitions. So here are a few that I hope can be helpful for anyone approaching JavaScript.

JavaScript

JavaScript is an object-oriented scripting language that adds dynamism, animation, and interactivity to a web page on a browser.

JavaScript is an interpreted language, it reads code line-by-line and it executes it line-by-line (interpreted vs compiled).

For this reason, and despite its asynchronous nature, JavaScript is considered a single-threaded language, which differs by multi-threaded in that it executes code in order and it must finish executing a chunk of code before moving on to the next.

Hoisting

When the JavaScript code is run in the browser, the JS engine reads it twice:

1. Compilation Phase → the engine reads the code line-by-line.

2. Execution Phase → the engine steps through the code line-by-line and this time it runs it.

Hoisting: prior to the execution phase, variables and function declarations are moved to the top of their scope. The hoisting mechanism, however, only moves the declaration, but the assignments are left in place. This is why we are able to call functions that are defined later on in our code.

Data Types

Dynamic typing → Variables in JavaScript can point to any value of any data type. Variables can also be re-assigned values of a different data type.

typeof → returns the data type of a variable or value

let myVariable = ‘Hello’

typeof myVariable // string //reassigning myVariable to a new value of a different data type myVariable = 12

typeof myVariable // number

Primitive data types: undefined, string, number, boolean, bigint, symbol;

Structural data types: object (and arrays), functions;

Structural Root: null (typeof will return ‘object’)

DOM — Document Object Model

The DOM is a programming interface for HTML files. It represents the DNA of a web-page so that programs can change its structure, style, and content using JavaScript.

The DOM is created when the browser loads the HTML file. The browser, then, uses the DOM to render the page, which can be modified with JavaScript.

In other words, the DOM is a tree structure that represents the HTML elements, or nodes, of the page and JavaScript allows to listen to events and manipulate the DOM accordingly.

Scope

Scope refers to the accessibility of variables and functions in specific parts of the code, during the execution phase. Scope is determined by the location, in your code, where the function or variable is declared, not where it’s invoked.

Global scope: variables and functions accessible everywhere in the code. When a variable or function is not declared inside a function or block, then it’s in the global scope.

Function scope: variables and functions declared in the body of a function. They are only accessible inside that function, and not from the outside code.

Block scope: variables and functions written inside if statements or loops are only accessible from within such blocks.

I hope this was helpful, thanks for reading, and stay tuned for more content!