Storing the information you need — Variables

After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.

What is a variable?

A variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence.

Variable example

Html

<button id="button_A">Press me</button>
<h3 id="heading_A"></h3>

JavaScript

const buttonA = document.querySelector("#button_A");
  const headingA = document.querySelector("#heading_A"); 
  buttonA.onclick = () => {
  const name = prompt("What is your name?");  
  alert("Hello" +name +", nice to see you!");
  headingA.textContent = `welcome${name}`;
  };

Declaring a variable

To use a variable, you've first got to create it — more accurately, we call this declaring the variable. To do this, we type the keyword let followed by the name you want to call your variable:

JavaScript

let myName;
let myAge;

Here we're creating two variables called myName and myAge. Try typing these lines into your web browser's console. After that, try creating a variable (or two) with your own name choices.

Initializing a variable

Once you've declared a variable, you can initialize it with a value. You do this by typing the variable name, followed by an equals sign (=), followed by the value you want to give it. For example:

myName = "Chris";
myAge = 37;

const a  = 10
  const b = 20

Try going back to the console now and typing in these lines. You should see the value you've assigned to the variable returned in the console to confirm it, in each case. Again, you can return your variable values by typing their name into the console — try these again:

myName;
myAge;

You can declare and initialize a variable at the same time, like this:

let myDog = "Rover";

This is probably what you'll do most of the time, as it is quicker than doing the two actions on two separate lines.

Updating a variable

Once a variable has been initialized with a value, you can change (or update) that value by giving it a different value. Try entering the following lines into your console:

myName = "Bob";
myAge = 40;

An aside on variable naming rules

Good name example

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

This is good because the names are descriptive and easy to understand.

Bad name example

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

Variable types

There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.

Numbers

You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:

let myAge = 20

Strings

Strings are pieces of text. You can use single or double quotes to define them:

let dolphinGoodbye = "So long and thanks for all the fish";

Booleans

Booleans are true/false values. They can be used to store values like yes/no, on/off, true/false, etc.:

let iAmAlive = true;

Arrays

An array is a single object that contains multiple values enclosed in square brackets and separated by commas:

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

Accessing array items

Array items are accessed using square brackets, with the index number of the item you want to access inside:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

Try typing these lines into your console, and see what you get back. You should see the values you expect.

Objects

In programming, an object is a structure of code that models a real-life object. You can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

Try entering the following line into your console:

let dog = { name: "Spot", breed: "Dalmatian" };

To retrieve the information stored in the object, you can use the following syntax:

dog.name; // Spot
dog["breed"] // Dalmatian

Dynamic typing

JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (numbers, strings, arrays, etc.).

For example, if you declare a variable and give it a value enclosed in quotes, the browser treats the variable as a string:

let myString = "Hello";

When to use const and when to use let