JS Variables

1. Introduction

Variables in JavaScript are like labeled containers that hold data. Instead of storing numbers directly, you store a name (the variable name) and a value (the data itself). This allows you to change the value of a variable later in your code, making it much more flexible and powerful. Understanding variables is fundamental to writing any JavaScript program, as they are the building blocks for almost everything you do.

2. Declaring Variables

To declare a variable, you use the let keyword. let is a modern keyword that allows you to declare variables that can be reassigned. var is an older keyword that is still supported but is generally discouraged in new code due to its scoping issues. For this tutorial, we'll focus on let because it's the preferred way to declare variables in modern JavaScript.

let name = "Alice";
let age = 30;
let isStudent = true;

In this example:

• let name declares a variable named name and assigns it the string value "Alice".
• let age declares a variable named age and assigns it the number 30.
• let isStudent declares a variable named isStudent and assigns it the boolean value true.

3. Assigning Values

You can assign values to variables using the assignment operator (=).

let score = 85;
console.log(score); // Output: 85

This line assigns the value 85 to the variable score. The console.log() function then displays the value of score in the browser's developer console.

4. Accessing Variables

Once a variable has been declared and assigned a value, you can access its value using the variable name followed by the dot (.) and the variable name.

let message = "Hello, world!";
console.log(message); // Output: Hello, world!
console.log(message.length); // Output: 13

Here, message is accessed using the dot notation, and message.length accesses the length of the string.

5. Variable Types

JavaScript has several data types, each with its own characteristics:

• String: Text enclosed in single quotes ('...') or double quotes ("..."). Example: "My name is..."
• Number: Represents numeric values (integers or decimals). Example: 10, 3.14
• Boolean: Represents truth values: true or false.
• Object: A collection of key-value pairs. Example: { name: "Bob", age: 25 }

let age = 25;
let isAdult = true;
let isStudent = false;

6. Variable Scope

Variables have scope, which determines where they can be accessed in your code.

• Global Scope: Variables declared outside of any function or block have global scope. They are accessible from anywhere in your code.
• Function Scope: Variables declared inside a function have function scope. They are only accessible within that function.

let globalVar = "This is global";

function myFunction() {
  let localVar = "This is local";
  console.log(globalVar); // Accessing globalVar
  console.log(localVar); // Accessing localVar
}

myFunction();
console.log(localVar); // Accessing localVar (outside the function)

7. Variable Renaming

You can rename a variable using the let keyword.

let originalName = "Charlie";
let newName = originalName;
console.log(newName); // Output: Charlie

8. Variable Interpolation

You can embed variables within strings using interpolation.

let name = "David";
let greeting = "Hello, " + name + "!";
console.log(greeting); // Output: Hello, David!

9. Variable Reassignment

You can change the value of a variable after it has been declared.

let x = 10;
x = x + 5;
console.log(x); // Output: 15

10. Tip: Use meaningful variable names. Choose names that clearly indicate what the variable represents. This makes your code easier to understand and maintain.

11. Summary

This tutorial has covered the basics of JavaScript variables. Understanding how to declare, assign, access, and manipulate variables is crucial for writing effective JavaScript code. Remember to use let for modern variable declarations and prioritize clear and descriptive variable names. Experiment with different variable types and scope to solidify your understanding.

12. Practice Exercises

1. Create a variable named favoriteColor and assign it the value "blue".
2. Create a variable named totalPrice and assign it the value 25.
3. Create a variable named isHappy and assign it the value true.
4. Write a function that takes a number as input and returns its square.
5. Create an object with a name property and a age property.