Written by Samuel Agbana, Backend Software Development Engineer at Atop Web Technologies
JavaScript is a programming language for interacting with elements of web page – these elements includes html tags consisting of paragraph, image, text which are displayed in the browser. It is a dynamically typed language and compiled just in time (JIT). This means JavaScript does not enforce data type declarations and the code is compiled when it is run. Why learn JavaScript? it is everywhere: client side, server side and native applications. According to a survey on Stack Overflow JavaScript is the most popular programming language.
JavaScript on the client refers to JavaScript code being executed in the web browser. It has access to the html dom of a webpage and can manipulate it to create beautiful and interactive UI. Its functionality is included through the html script tag.
When JavaScript is server side, it relies on Nodejs for its functionality. Nodejs is a JavaScript runtime engine. It executes JavaScript code off the browser. When it’s run server side, it has no access to the browser dom but offers powerful third party libraries from npm or yarn package managers to extend its functionality. It can access filesystem, databases and much more not possible in the browser client.
To get started there are basic tools to setup. This includes text editor, and Nodejs runtime engine. You can choose from a plethora of editor but VS code is my go to editor. It is easy to setup and offers useful plugins called extensions to ease and figure out potential bugs and error during the code writing. Most useful extensions are Prettier (format code syntax), ESlint (highlight errors) and JS ES6 snippets. These sure increases productivity by speeding up code writing.
To get started, node can be installed by going to its official website, download the LTS version – downloading the LTS version is advised as it is a stable release compared to the alternative “Current” version. Similarly VS code – my choice of code editor can be installed from its website, based on your operating system, install accordingly. After setting up necessary tools, let’s get started.
Write your first JavaScript Application
Create a file called index.js. in the file write
// Outputs the text Hello World to the terminal
console.log("Hello World");in your terminal opened in the folder path where your file is, run
node ./index.jsthis will output the text Hello World to the terminal.
But what is this console.log ? It is a built in function in JavaScript that outputs textual elements to the command terminal or browser console. It is a useful debugging function.
Comments
In our first code, we wrote two lines but only one got executed, why is that ? The first line is a comment. JavaScript skips it’s execution at runtime. JavaScript has a syntax it uses in identifying a comment. Looking back at the first line in our code, it starts with //, this is instructing the runtime engine to skip over this line. Now comment the console.log line as below then run your command again.
// Outputs the text Hello World to the terminal
// console.log("Hello World");when you run the command, no output is shown in the terminal because JavaScript will skip over it during execution.
What happens when there are multiple lines we want JavaScript to skip during execution runtime, do we comment each out line by line, we sure can do that but what if it’s 100 lines of code, that becomes a hassle. JavaScript already handles this for us by providing an alternate way of commenting called the multi line comment. The commenting style we have seen so far is the single line comment. These are the two types of comment in JavaScript – single-line comment and multi-line comment.
While the single line comment uses the //, the multi line comment uses /* */. It wraps all the code lines that needs commenting into /* code lines to comment */. In your already created index.js file, add the following
/*
console.log("Line one");
console.log("Line two");
console.log("Line three");
console.log("Line four");
console.log("Line five");
*/when you run it, it will output nothing, remove the multi line comments and re-run, you will see the Line one text through to Line five printed in your terminal.
Since comments are skipped during code execution, it can be used to document our code for readability.
Variables
In programming, there’s always a need for variables. This is found in all programming languages. Why do we need them. Variables are placeholders for storing pieces of information. They allow values to be manipulated and changed during code execution. In JavaScript, there are three ways of declaring variables. It uses the keywords var, let and const. Later on we will see more on what keywords are in JavaScript. Using the different keywords gives the variable declared different scope and properties.
var – it is function scoped and mutable
let – block scoped and mutable
const – block scoped and immutable
We will come back to the variable scope. Let’s see what variable declaration looks like
var x; // Valid
var x = 4; // Valid
let y; // Valid
y = 5; // Valid
const z = 3; // Valid
const z; // Invalid
z = 4; //InvalidIn the code block above x, y, z are all variable of var, let and const. On the last two lines, we commented that the syntax is invalid, it will give an error, this is because a const data has to be assigned a value during it initialization because it is immutable and cannot be reassigned.
variable scope
Earlier we have seen that when const is not assigned at initialization, JavaScript gives an error, let’s get more into their scope to really understand them.
In JavaScript, a block of code is delimited by curly braces { }. Earlier I said let and const are block scoped while var is function scoped. What does this mean. Lets see some code.
let x = 2; // Valid
{
let x = 3; // Valid
}
{
let x = 4; // Valid
}since let is block scoped, it can be redeclared across block of codes – i.e. delimited by curly braces as opposed to the below code which is invalid for redeclaring a let variable in a block.
{
let x = 2; //Allowed
let x = 3; //Not allowed
}Now what is the difference between a function scoped and block scoped variable
var x = 3;
let y = 4;
// Here x = 3, y =4
console.log("x = " + x + ",y = " + y);
// code block
var x = 5;
let y = 9;
//Here x = 5, y = 9
console.log("x = " + x + ",y = " + y);
}
//Here x = 5, y = 4
//var x = 5 in the block overwrites var x = 3
console.log("x = " + x + ",y = " + y);You would see that the var variable when redeclared in a block, the new value overwrites it’s previous value and is accessible outside the block, that means it is function scoped whereas the let variable retains the previous value declared outside of the scope.
variable names
Variable names are unique identifiers. In JavaScript, there is a general rule on how to specify a variable name
- Names can begin with a letter, dollar ($) or underscore (_).
- Names can contain letters, numbers, $, _.
- Names are case sensitive (a is different from A).
- Reserved keywords are not valid variable name.
Possessing this elementary knowledge of JavaScript, in the next post, we will be looking into the different datatypes in JavaScript.