Variables in JavaScript explained like a pro!

Hello, and welcome! In today’s blog, we’re going to take our first step into the world of programming by learning about JavaScript, one of the Whether you’re building websites, creating apps, or working with servers, JavaScript is an essential skill to have in your toolkit.

Today, we’re going to cover the basics of JavaScript, starting with one of the most important concepts: variables. So, let’s dive in!

Oh, just a moment! If you would like to see the video instead of reading here it is! https://www.youtube.com/watch?v=7IrCz0AcjCU

Part 1: Introduction to JavaScript

First things first, JavaScript is a programming language that lets you interact with web pages. It’s what makes websites dynamic and interactive. If you’ve ever seen something like a button click and the page responds immediately, or a form that checks your input in real time, that’s JavaScript at work!

You’ll write JavaScript code in a text editor and run it in a browser. But before we start coding, let’s take a quick look at what makes JavaScript unique.

Unlike static content like HTML or CSS, JavaScript can change the content of a webpage dynamically. It can interact with users, fetch data from servers, and much more.

Part 2: What is a Variable?

Now, let’s talk about variables. A variable in JavaScript is like a storage box where we can keep information. For example, we might want to store someone’s name or a number we’ll use in calculations.

let name = "John";
let age = 25;

In this example, we have two variables: name and age. The variable name stores the string "John", and age stores the number 25. You can think of variables as containers for your data.

You can choose any name for your variable, but there are a few rules you need to follow. Variable names must start with a letter, an underscore, or a dollar sign. They can also contain numbers, but they can’t start with a number. Let’s look at some valid and invalid examples.

let myName = "Sarah";  // valid
let $price = 10;       // valid
let _score = 100;      // valid

let 1stPlace = "Gold";  // invalid
let #color = "blue";    // invalid

Part 3: Different Types of Variables

In JavaScript, there are several different types of values that can be stored in variables. These are called data types. Let’s quickly run through the most common types you’ll encounter.

Strings:

let greeting = "Hello, world!";  // This is a string, which is a sequence of characters.
console.log(greeting)

Numbers:

let age = 30;  // This is a number, and it can be either an integer or a floating-point number.

Booleans:

let isJavaScriptFun = true;  // This is a boolean, which can only be true or false.

Arrays:

let colors = ["red", "green", "blue"];  // An array holds multiple values.

console.log(colors[0])

Objects:

let person = {
    name: "Alice",
    age: 28,
    occupation: "Engineer"
};  // An object is a collection of key-value pairs.

Part 4: Declaring Variables (let, const, var)

Now that you know what variables are and the different types you can use, let’s talk about how to declare them. In JavaScript, we can use three keywords to declare variables: let, const, and var.

let and const are the most commonly used today, while var is an older syntax you might still encounter.

Let’s start with let. let is used when you want to declare a variable whose value might change later on. For example:

let score = 0;
score = 10;  // We can change the value of score.

On the other hand, const is used when you want a variable whose value should not change after it’s been set. If you try to change the value of a const variable, you’ll get an error.

const pi = 3.14;
pi = 3.14159;  // This will cause an error!

And then there’s var. You may still see var in older JavaScript code, but it’s generally recommended to use let or const because they provide more predictable behavior.

var name = "Alice";  // older way of declaring a variable

Part 5: Practical Example – Using Variables

Alright, let’s put all of this into practice! Here’s a small example using variables to store and display information on a webpage.

let userName = "Emma";
let userAge = 22;
let isStudent = true;

console.log("Name: ",  userName + "<br>");
document.write("Age: " + userAge + "<br>");
document.write("Student: " + isStudent + "<br>");

This code declares three variables: userName, userAge, and isStudent. We then use document.write() to display the values on the webpage.

Try running this in your own code editor, and change the values of the variables to see how it affects the output!

Part 6: Wrapping Up

Now you know the basics of JavaScript variables, including how to declare them, the different data types, and when to use let, const, or var. This is just the beginning of your JavaScript journey, but understanding variables is a critical first step.

Thanks for reading and I hope you would join us in our next lesson!