INTRODUCTION
As HTML provides the structure and CSS offers aesthetic value, JavaScript functions as the nervous system of a website. JavaScript complements HTML and CSS bringing dynamic elements to websites such as changing elements of a website with a simple mouse click. JavaScript is constantly evolving. It competes with Python as a recommended first programming language to learn for self-taught and beginner developers. Concepts such as variables, primitive types, objects, arrays, and functions are foundational towards JavaScript mastery.
ECMA
Following the ECMAScript standard, JavaScript is constantly being updated by Ecma International. Since 2015, there have been yearly additions to the JavaScript language. The most recent changes occurred in June 2022. While the information is difficult to parse for new developers, experienced developers are always willing to share their knowledge.
CONSOLE
One reason that JavaScript is recommended as a first language when learning to code is because of the console. As JavaScript is the programming language of the world wide web, many web browsers have built in environments for developers to test their code. Using the Chrome browser as an example, the console is shown below. It is accessed by pressing ‘F12’ or right clicking anywhere on the page and clicking ‘Inspect’.
Another helpful feature for developers contained in some browsers is the ‘Snippets’ tab. Developers can store JavaScript code in various ‘Snippets’ and run the code on the console. Below is an example of a calculator function. Snippets are accessed in the same way as the console by pressing ‘F12’ or right clicking anywhere on the screen.
VAR
A fundamental concept in JavaScript is the idea of a variable. Below is an example where two variables are declared.
Using the keyword ‘var’, variable ‘a’ is assigned the value 7, while b is assigned 3. ‘Var’, among other words, is a reserved word that cannot be used as a variable. Once a variable has been declared with the ‘var’ keyword, the variable can be assigned a new value without calling the var keyword as shown below.
LET/CONST
ES2015 introduced two key words to be used in place of var. The key words ‘let’ and ‘const’ replaced ‘var’ as the standard for declaring variables. The let keyword is very similar to ‘var’ in that once a variable is declared, it can be reassigned to a different value. On the other hand, a variable declared with the ‘const’ keyword cannot change its assignment.
Another key difference from ‘var’ and ‘let/const’ is exemplified through the concept of scope. Variables exist within scopes which can be global or within a function. ES2015 introduced the idea of block scope. When a variable is declared with ‘let’ within a block, it remains inside the block. ‘Var’ on the other hand is not bound by those rules.
Variables declared with ‘let’ are more confined as long as they are not declared globally and are considered safer to use than variables declared with ‘var’.
PRIMITIVE DATA TYPES
In the previous examples, variables have been numbers. However; this is only one data type that can be stored in a variable.
Primitive data types are immutable and passed by value. Being immutable, primitive data types cannot be changed. However, values can be reassigned. Passed by value means each individual variable is stored in memory.
OBJECTS
An object is a data type that is not primitive. Objects are defined by curly braces that contain {key: value} pair properties.
Objects are mutable and passed by reference. Data types that are passed by reference are stored in shared memory.
ARRAYS
Arrays are considered objects which means they are data types that are not primitive. Arrays are defined by brackets and can contain multiple data types.
Arrays are mutable and passed by reference.
FUNCTIONS
Functions are pieces of code that perform actions. Going back to the analogy of the nervous system, functions are the neurotransmitters of the web. Functions carry messages that can have a variety of effects from manipulating HTML and CSS to communicating with APIs.
As mentioned, an important concept is the idea of scope which is demonstrated well with functions using ‘const’.
CONCLUSION
JavaScript mastery allows for a developer to manipulate HTML and CSS in the way the nervous system commands the body. Understanding the building blocks of JavaScript is the key to mastery. Web developers must remain vigilante as JavaScript constantly goes through changes. Some web browsers have built in environments for developers to test JavaScript code. Utilizing various data types and functions, web developers mold HTML and CSS into modern web applications.