30 Days of JavaScript — Day 1 — Setup and Variables

A day by day learning project to get you up and running with JavaScript.

JavaScript Logo

Welcome to my 30 days of Javascript Day 1. Look here at the top of each article for updates and links to resources, the previous and next articles as they come out and more!

Note: I will follow the ES6 standards of JavaScript as often as I can think to. I was raised on ES5; but this is a learning experience for us all!

Introduction

The beautiful thing with JavaScript is that you don’t have to have a lot of tech to get started. JavaScript is supported by every browser that you have access to. There are a lot of libraries and frameworks that you can learn, but without the foundations of just plain old vanilla Javascript (JS), you won’t be able to get very far.

Don’t get me wrong libraries are great, they speed up development time tremendously, but if you run without “learning to walk” you’ll stumble a lot. With that said the goal of this series is to get you primed for entry level JavaScript development in 30 days!

Setup Part 1 — A file

To get started with JavaScript you’ll need one of two things. A file ending with “.js” or an HTML file (ends with .html). These files are easily created in Windows by navigating to a folder that you want to store these files in and clicking into the empty space, in that context menu go down to new, then to text file.

I know, I know. A text file? You can rename the file to have .js or .html at the end of it and that will work just fine!

Creating a new file in Windows 10.

I chose to go with an index.html file so we can build upon that in future parts of the series.

Setup Part 2 — An Editor

Another very helpful tool that you should get and familiarize yourself with is an editor. There are several kinds that suit different needs. My editor of choice is Visual Studio Code. Visual studio code is available on Windows, Mac, and Linux.

An editor, as its name implies is for editing the file that we just created! Let’s go ahead an open that bad boy in visual studio code. You’ll be greeted with a big old empty file that isn’t very exciting or pretty; but we will get there!

Visual Studio Code with an empty file open.

Your Bit First JavasScript Code

Inside this nice file that we have opened, let’s type in the following:

 <script>
    //hello world
    alert('hello world');
</script>

If you open the html file we created earlier, you should see something like this!

Hello World alert box.

Congratulations! You’ve just written your first line(s) of code!! But all in all this isn’t all that cool. You just have a message that pops up when you open the page. (pro tip: hit F5 to refresh the page and see it again!)

Alright, so I promised this lesson was about variables so let’s get into that!
A variable is a reference to some bit of data that you need to keep track of. It can be a number (100), a string (“this is a string”), an object (we will cover this later don’t worry), and much more! For now let’s keep it simple and change our nifty alert message to use a variable.

Replace the existing code with the following:

<script>
    let message = 'hello from the variables!';
    alert(message);
</script>

Once again you’ll be presented with a neat message on the screen that shows what data was in our variable called ‘message’. We declared the variable with the ‘let’ keyword. This tells the browser to keep a little bit of memory available for our variable called message, and keep the string ‘hello from the variables!’ stored there. We end our line of code with the “;”, this tells the JavaScript compiler that we are done with this line and everything is good to go. Finally we call the nifty alert() function again with our variable passed into it, you don’t know about functions if you’re just starting out (or maybe you do) but they’re coming up as well.

Let vs Const vs Var

Var declarations are globally scoped or function scoped while let and const are block scoped. Var variables can be updated and re-declared within its scope. Let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.

Let and const were introduced in ES6 and are a bit safer IMO than declaring everything as a var.

Let’s see this in action! Go ahead and update your code to this:

let name = 'my name';
let age = 30;
let job = 'developer';
let job = 'programmer';
alert(name);
alert(age);
alert(job);

Save this and open / refresh your html file in your browser. If you open your developer tools by hitting F12 and navigating to the console tab, you’ll see there is a red error.

Using let variables you cannot declare the same variable twice in the same scope.

Now try the same thing but declare your variables with var instead of let. Not only will you not get an error, but your job will be programmer and not developer.

Last but not least! Lets see the const variable in action.

let name = 'my name';
let age = 30;
let job = 'developer';
let job = 'programmer';
alert(name);
alert(age);
alert(job);
const car = 'Honda';
alert(car);
car = 'Mazda';

This should also throw an error. You cannot override or update the value of a constant. It will always be constant!

This is a brief introduction to variables on Day 1 of 30 Days of JavaScript! I hope you’ve enjoyed yourself and learned a little something along the way. Stay tuned for Day 2 and beyond.