JavaScript fundamentals
JavaScript is a dynamic programming language used for creating websites, online apps, video games, and many other things. You can use it to add dynamic features to websites that you couldn’t achieve with only HTML and CSS.
It is a programming language widely used by browsers to create dynamic online content. You may witness the results of JavaScript whenever you see a dropdown menu that you can click to display, more content being added to a website, or dynamically changing element colors on a page, to mention a few features. (Megida, 2021)
Every browser has an engine that can compile JavaScript code. For Firefox it's ‘Spidermonkey’, Google Chrome it's ‘v8’ and for Microsoft Edge, it’s ‘Chakra’, and so on. The JavaScript engine of Google Chrome ‘v8’, was taken by American software engineer Ryan Dahl and integrated into a C++ application, which ultimately evolved into the computer language known as ‘Node’.
Now that we know what JavaScript is, lets dive into some basics. I’m sure most of you have at least heard of this programming language. But if not don’t worry about it. Let’s check out some basics of JavaScript.
As you all know, JavaScript code can be written inside of an HTML document with the use of a ‘script’ element. But most of the time, some programmers use an external script to include all the code in one place and link it to the HTML document. This is also called ‘Separation of concerns’. But keep in mind, Separation of concerns does not imply the exact idea. It simply means reducing the code complexity by reducing the number of lines
Now then let’s start off with variable declaration. Variables as you know is an empty memory allocation with a name referenced to it. To declare a variable, we must give a certain data type. If you have used JavaScript before, you must be familiar with the data type, ‘var’. This was mostly used prior to the ES6 version release. However, it had a number of shortcomings, therefore ECMA introduced new data types, ‘let’ and ‘const’ in the ES6 version. The word ‘const’ isn’t really a data type. It is an acronym for constant. Constants are only used when the value is fixed and does not change. Don’t worry about the terms ES6 and ECMA; I’ll cover them in my upcoming article, ‘Modern JavaScript.’
The primary distinction between let and var is that a variable declared with ‘let’ has a scope that is restricted to the block in which it is declared, whereas a variable created with ‘var’ has a scope that is global. Thus, ‘var’ can be considered a keyword that defines a variable globally, independent of block scope.
Since ‘lastName’ is declared inside a function with a type ‘let’, it won’t compile. But if you remove that line, it will execute successfully.
Next let’s go into Objects. Objects in JavaScript are containers which holds values known as properties in key-value pairs. For ex: think of a Dog. It can have a name, age, color, height etc. which means the Dog object consists of the given properties. And if you want to print the entire the Object, you can simply call the Object itself. But if you only want a property inside the Object, you can use the ‘.’ Dot operator. This operator is used to move one level into the information chain.
Let’s move on to Arrays. Array is a data structure which is used to represent a list of data. In JavaScript, arrays are dynamic. Thus, multiple types of data can be stored in a single array. We can utilize the index, which is supplied in square brackets (‘[]’), to read each element inside it. Additionally, we frequently need to look for an array’s length. We may then use the ‘.length’ function.
Functions. One of the key components of JavaScript are functions. It is utilized in practically all projects. The primary benefit of a function is that it lessens duplication, which is the practice of repeatedly using the same line of code. The keyword “function” must be used when declaring a function in order to notify the script that we are doing so. Afterwards, we must, as usual, give it a meaningful name, with an open and closed parenthesis. The area inside the curly brackets is known as the body of the function, and it is where we specify its purpose.
As you can see there are two words inside the parenthesis next to the function name. Those are called ‘Parameters’. These are variables are valid only inside the function. Which means the scope of the parameters is the function. These parameters receive data from the ‘Arguments’. Arguments can differ and it’s sent data at run time. But the number of Arguments should match the number of parameters. Which means according to the above example the value of ‘name’ and ‘weather’ parameters change to ‘Shehara’ and ‘30’ at runtime. The function in this example performs a task. Which means it’s meant to print something on the console. But look at the following example.
This function calculates the square of a given number. Here we return the value to whoever is calling the function. So that when we pass a number to it as an argument, it will return the square. If you look closely, there are 2 function calls. Did you find it? One is the main function call ‘calculateSquare’ where we pass the number 9. But if you remove that part, you’ll notice that ‘console.log()’ is also a function call. Which means the ‘log()’ function takes an argument and prints it in the console.
Now that you know, some of the basic concepts of JavaScript, you will be able to understand the changes and the modifications done in the ES6 version which I will discuss in the upcoming article ‘Modern JavaScript’
(Hamedani, 2018)
References
Hamedani, M. (2018). JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour. Retrieved June 24, 2022, from https://www.youtube.com/watch?v=W6NZfCO5SIk
Megida, D. (2021). freecodecamp. Retrieved June 22, 2022, from https://www.freecodecamp.org/news/what-is-javascript-definition-of-js/