Modern JavaScript -getting started

8 min readSep 13, 2019

You can do a million things with JavaScript. So let’s get started!

Setting up your editor

First, you need an editor. I use the Visual Studio Code, but you can use any other editor you like.

Go to https://code.visualstudio.com/download and download the editor according to your Operational System.

Visual Studio Code has great extensions that make coding a lot easier. The first extension you should install is the Live Server. So open your Visual Studio Code, and click on extensions icon.

Type ‘Live Server’, and click on ‘install’.

Once you have installed it, you need to close your Visual Studio Code, so the changes take effect. When you use the Live Server package, you can see the changes on your web site as you code it. Every time you save your code on your editor, your browser is automatically updated.

Open your Visual Studio Code again and open your project. I created a folder called ‘ModernJavaScript’. And create an ‘index.html’ file. Remember that you can use emmet shortcut ‘!’ and click enter, and you have your HTML template file built for you.

Inside the body tag, you can insert an ‘h1’ tag by typing ‘h1’ and press ‘tab’ to create the tag automatically. This will create the open and close tags.

Save your file. Right-click the screen on the HTML page and select ‘Open with Live Server’.

You can go to your browser now and see your web site on your localhost!

You can go to your browser now and see your web site on your localhost! That’s it! You did it! This is your web site.

JavaScript file

You can write your JavaScript code within the ‘<script>’ tag. Some people place the <script> tag in the ‘<head>’ tag, but more than 90% of the people place the <script> tag at the end of the <body> tag.

This is OK if you write only a few lines of code, but if you are going to write a long JavaScript code, it is better to place your code in a JavaScript file. You can then write a link to that page, just as you do with the CSS file.

Create your JavaScript file. Remember that all JavaScript file has the extension ‘.js’ (e.g. codeJS.js). Then write a link to that file on your HTML file in the <script> tag.

Now you can go to your ‘codeJS.js’ file, and start coding your JavaScript. Remember that in the ‘.js’ file, you don’t need the <script> tag anymore. You can write your JavaScript directly in this file.

Note that at the end of each statement you have to write a semi-colon. This indicates that you finished writing that statement.

‘Console.log’ is a function that allows you to see on the console of your web browser what is loading on your page. This is really useful to test if your code is loading correctly.

You can see the console log on your page by right-clicking your page and clicking on ‘inspect’.

Click on the console panel, and you can see what is loading. In this case, our page loaded the numbers 1 and 2 that we wrote in our ‘.js’ file.

view the console log panel and result on your browser

Variables

A variable lets you store value, like a name or a number and you can use it later in the file. There are a couple of different variables.

You can create a variable using the ‘let’ keyword and give it a name and a value (e.g. let age = 35;). You change the value of this variable as much as you need to (e.g. age = 48;), now the value of the variable age is 48.

create variable age and assign the value 25

view of the console on your browser of the value of the variable age (25)

change the value of the variable age to 48

view of the console on your browser showing the new value of the variable age (48)

If you want to create a variable, but you don’t want anyone to be able to change the value of this variable, you have to use the ‘const’ keyword.

create a variable using the “const” keyword

the value of the const variable will show on your console

If you try to change the value of the ‘const’ variable, you will get an error on your console on your web browser.

There is still the ‘var’ keyword to create a variable, but this is not used anymore. You can come across some old code using it though. Only the ‘let’ and ‘const’ keywords are used in modern JavaScript.

Note that when you create a variable name you cannot use spaces in the name, use ‘camelCase’ instead. You can also use numbers in the name, but a variable name cannot start with a number (e.g. age_2019). You can also use underscore. It is really important to create a name that is meaningful to your code, so if another developer looks into your code, he or she will understand what this variable refers to.

When you write your code, it is important to write a comment saying what the code is going to do, so if you come back to that code some months later, you can understand exactly what you were doing. You can write comments using ‘//’ for a one-line comment, or ‘/*comment*/’ for a multiple-line comment. Everything written as a comment, will not run as code.

Modern JavaScript data types

Variables can have different data types and you saw the data type ‘number’ in the example above. You can also use string (e.g. “Syllinda”), boolean (true/false), null (variable with no value assigned to it), undefined (variables not defined), object (arrays, date), and symbol (used with objects).

Loops and conditionals

Loops are used to run the code over and over with a different value each time. Conditionals are statements that are used to perform different actions according to the condition used.

The ‘for’ loop, loops through a block of code as many times as needed until it finds the code that is not true anymore, and it stops.

The ‘while loop’ loops through a block of code while the condition is true. When the condition is false, it stops the loop.

The ‘do while’ loop, loops through a block of code while the condition is true.

Use the ‘if’ statement to specify a block of code that you want to execute if the condition is true.

Use the ‘if / else’ statement to check if a block of code is true or false. If the condition in the ‘if’ statement is true, it runs the code in its block of code, but if the condition is false, it runs the block of code in the ‘else’ statement.

Functions

A function is a block of code designed to perform a particular task and it is executed whenever you call it. You can write a function declaration or a function expression, the latter is the most used one.

You can still see if your function is working on your console on your browser.

You can pass a parameter to a function (e.g. function name(parameter1, parameter2) ). And when you call that function, you need to give a value or an argument to each parameter (e.g. name(“Syllinda”, “Missy”);). Note that the arguments have to be in the same order as the parameters.

There is a simpler way to write a function, and that is ‘the arrow function’. Note that they are the same function and they work exactly the same, but the arrow function is a bit shorter. You don’t need to write the word ‘function’, you just need the parameters.