This article will serve as a comprehensive guide on how to come up with meaningful names for class names, variables, and functions with examples and best practices.

Why Does Naming Matter?

• Readability: Good names make your code intuitive and reduce the learning curve for others.

• Maintainability: It is easier to refactor or debug well-named code.

• Collaboration: Clear names improve team communication and productivity.

• Scalability: Meaningful names help keep large projects manageable.

Different Naming Convention Styles

Different naming convention styles are crucial in improving code readability and maintainability across various programming languages.

Styles like camelCase, PascalCase, snake_case, and kebab-case are tailored to specific contexts and practices.

camelCase is widely used for variables and functions, while PascalCase is preferred for classes. snake_case is a favorite in Python for its clarity, and kebab-case dominates CSS for HTML element styling.

Each style ensures consistency, making code intuitive for teams and future developers. Here’s a quick summary table of some popular naming conventions along with their use cases and examples:

How to Choose the Right Style

1. Language-Specific: Follow the conventions of your programming language or framework. For example:

   • JavaScript: camelCase for variables and functions, PascalCase for components.

   • Python: snake_case for variables and functions.

   • CSS/HTML: kebab-case for class names and IDs.

2. Team or Project Standards: Consistency is key. Use the agreed style for your team/project.

3. Purpose-Specific: Use naming styles that best represent the entity being named (for example, constants in SCREAMING_SNAKE_CASE).

General Naming Guidelines

Before diving into specific naming conventions for class names, variables, and functions, let’s explore some universal principles:

1. Be descriptive and concise: Names should convey the purpose or role of the variable/function/etc:

    // Bad
    let x = 10;
   
    // Good
    let maxUsersAllowed = 10;
   

2. Avoid cryptic abbreviations that might be hard for other devs to understand (or even your future self):

    // Bad
    let usrNm = "John";
   
    // Good
    let userName = "John";
   

3. Use consistent naming conventions: Choose a naming style (camelCase, PascalCase, kebab-case, snake_case) and stick with it throughout your project.

4. Avoid reserved keywords or confusing names:

    // Bad
    let let = 5;
   
    // Good
    let variableName = 5;
   

Alright, now that we’ve covered the basis, lets dig deeper into some helpful naming conventions.

How to Create Good Class Names

Class names define the visual or structural behavior of elements in your application. Writing clear class names ensures your HTML and CSS are easy to understand and maintain.

1. Use Descriptive Names

Class names should describe the purpose of the element, not its appearance.

<!-- Bad -->
<div class="red-button"></div>

<!-- Good -->
<div class="primary-button"></div>

2. Follow the BEM (Block-Element-Modifier) Methodology

BEM is a popular convention for writing scalable and maintainable CSS. It separates components into:

• Block: Represents the component (for example, card).

• Element: Represents child elements of the block (for example, card__title).

• Modifier: Represents variations of the block or element (for example, card__title--highlighted).

Example:

<div class="card">
  <h1 class="card__title card__title--highlighted">Welcome</h1>
  <p class="card__description">This is a card component.</p>
</div>

3. Use kebab-case

CSS class names are traditionally written in kebab-case for better readability.

<!-- Bad -->
<div class="primaryButton"></div>

<!-- Good -->
<div class="primary-button"></div>

How to Create Good Variable Names

Variables hold data and should have meaningful names that describe what they represent.

1. Use Nouns for Variables

Variables are typically nouns because they represent entities or data.

// Bad
let a = "John";

// Good
let userName = "John";

2. Use Prefixes to Add Context

Adding prefixes helps clarify the type or purpose of a variable:

• Boolean: is, has, can

• Numbers: max, min, total

• Arrays: Use plural forms (for example, users, items).

Example:

let isUserLoggedIn = true;
const maxUploadLimit = 5; // MB
const usersList = ["John", "Jane"];

3. Avoid Generic Names

Avoid names like data, value, or item unless they’re necessary.

// Bad
let data = 42;

// Good
let userAge = 42;

How to Create Good Function Names

Functions perform actions, so their names should reflect the operation or process they execute.

1. Use Verbs for Functions

Functions are action-oriented, so their names should begin with a verb:

// Bad
function userData() {
  // ...
}

// Good
function fetchUserData() {
  // ...
}

2. Be Specific About Functionality

Function names should indicate what they do.

// Bad
function handle() {
  // ...
}

// Good
function handleFormSubmit() {
  // ...
}

3. Use Prefixes for Intent

• For event handlers: handle, on

• For utilities: calculate, convert, format

• For fetch operations: fetch, get, load

• For setters and getters: set, get

Example:

function handleButtonClick() {
  console.log("Button clicked!");
}

function calculateDiscount(price, discountPercentage) {
  return price * (discountPercentage / 100);
}

How to Know if a Name is Good for a Variable, Function, or Class

To understand if a name is good for a variable, function, or class, evaluating it using several key principles is important. Here’s a guide to help you decide whether a name is appropriate and meaningful in your programming context:

1. Does It Represent the Purpose?

Purpose-driven names are the most important characteristic of good naming. A name should immediately tell you what the variable, function, or class represents or does without needing to read additional comments or documentation.

How to Assess:

Ask yourself: "When I read this name, can I immediately understand its purpose?"

Example:

• userAge is better than a because userAge tells you what the variable represents, whereas a is too ambiguous.

2. Is It Specific Enough?

The name should be specific enough to reflect the exact role of the entity in your code. Overly generic names like data or temp can be confusing because they don’t provide enough context.

How to Assess:

Ask: "Is this name specific to what this variable, function, or class represents in my application?"

Example:

• calculateTaxAmount() is better than calculate() because it’s clear what the function is calculating.

3. Does It Follow a Consistent Naming Convention?

Consistency in naming conventions is vital. When all team members follow the same conventions, the code is easier to understand and navigate.

How to Assess:

Ask: "Is this name consistent with the naming conventions used in the rest of the project?" Follow project guidelines such as:

• camelCase for variables and functions (e.g., userAge)

• PascalCase for classes (e.g., UserProfile)

• UPPERCASE_SNAKE_CASE for constants (e.g., MAX_USERS)

Example:

• If your team follows camelCase, userData is better than UserData.

4. Does it Avoid Ambiguity?

A good name eliminates ambiguity. It should not be open to multiple interpretations. If it can mean different things in different contexts, it will lead to confusion.

How to Assess:

Ask: "Could someone unfamiliar with the codebase misinterpret what this name refers to?"

Example:

• Instead of naming a boolean isValid, use isUserLoggedIn or isEmailVerified to make it clearer what is being checked.

5. Is It Easy to Read and Pronounce?

While not strictly necessary, ease of reading and pronunciation can improve the overall readability and maintainability of your code.

How to Assess:

Ask: "Is this name easy to read aloud, and can I understand it at a glance?"

Avoid long names, and use common abbreviations only when they are widely accepted.

Example:

• maxRetries is better than maximumNumberOfAttemptsToReconnect.

6. Does It Avoid Redundancy?

Avoid redundancy in names. Don’t repeat information that is already implied or described by the context.

How to Assess:

Ask: "Am I repeating information that is already clear from the surrounding context?"

Example:

• If you have a class named User, naming a method userGetData() is redundant. Instead, use getData().

7. Is It Self-Documenting?

The best names document themselves. Good names reduce the need for additional comments or explanations.

How to Assess:

Ask: "Does this name fully describe the variable, function, or class without requiring a comment to explain what it does?"

Example:

• calculateTotalPrice is self-explanatory, so there’s no need for an additional comment like “This function calculates the total price after discount.”

8. Is It Contextual and Relevant to the Domain?

The name should fit within the context of your project and its domain. For example, naming conventions for a web application may differ from those for a mobile app or a machine learning model.

How to Assess:

Ask: "Is this name aligned with the domain and context of my project?"

If you’re working in a specific domain (for example, finance, health, gaming), use domain-specific terms that are easily recognizable.

Example:

• In a gaming app, healthPoints is more appropriate than hp, as it reflects its meaning.

9. Is It Future-Proof?

Think about how your code will evolve. Names should be flexible enough to accommodate future changes without requiring refactoring.

How to Assess:

Ask: "Will this name still make sense if the functionality changes or the project grows?"

Example:

• userInfo could become outdated if the data structure changes. It’s better to use userProfile if you expect more fields to be added.

10. Does It Avoid Magic Numbers and Hard-Coded Values?

Magic numbers (numbers with unclear meaning) should be avoided in favor of named constants.

How to Assess:

Ask: "Does this name represent a meaningful constant, or is it just a raw number?"

Example:

• Instead of using 1000, use a constant like MAX_FILE_SIZE to explain the meaning behind the number.

Practical Examples

CSS Example

The following CSS example demonstrates how to apply BEM (Block-Element-Modifier) naming conventions to maintain a structured and scalable class hierarchy in your stylesheet:

<!-- HTML -->
<div class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</div>

/* CSS */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar__list {
  list-style: none;
}

.navbar__item {
  display: inline-block;
  padding: 10px;
}

.navbar__item--active {
  color: orange;
}

Here’s what’s going on in this code:

• BEM Naming: navbar is the Block, representing the main navigation component.

• navbar__list is the Element, a child of the block, representing the list of navigation items.

• navbar__item is another Element representing individual list items.

• navbar__item--active is a Modifier, used to highlight the active menu item.
  This approach makes it easy to understand relationships and roles within the HTML and CSS, supporting modular and reusable styles.

JavaScript Example

This JavaScript example shows how to use meaningful and consistent naming conventions for variables and functions to make the code self-explanatory:

// Variables
let isUserLoggedIn = false;
const maxAllowedItems = 10;

// Functions
function fetchUserDetails(userId) {
  // Fetch user data from the API
}

function calculateTotalPrice(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

Here’s what’s going on in the code:

• Variables:

  • isUserLoggedIn: A boolean variable named to clearly indicate its purpose. Prefixing with is helps identify it as a boolean.

  • maxAllowedItems: A constant with an uppercase max prefix shows it's a limit, making its intent clear.

• Functions:

  • fetchUserDetails(userId): The name reflects the purpose of the function, that is retrieving user details. The parameter userId is descriptive and avoids ambiguity.

  • calculateTotalPrice(cartItems): The function name explicitly states the action performed. The cartItems parameter is contextually relevant to the e-commerce domain.

Why It’s Good: These conventions ensure the code is readable and intuitive, reducing the cognitive load for other developers working on the same project.

Conclusion

Meaningful naming is both an important convention and an art form that significantly impacts your code's readability and maintainability.

Try to follow these basic principles:

• Use descriptive, concise names.

• Adhere to consistent conventions like BEM for class names and camelCase for variables and functions.

• Use prefixes to add context and clarity.

These and the other tips we’ve discussed here will make your code a joy to work with, whether you revisit it months later or collaborate with a team. Start applying these tips today, and watch your code quality soar.

In this article, you will learn how to create and use variables. You'll also learn about the different data types in JavaScript and how to use them.

Let's get started!

Table of Contents

• What is a Variable? Example #1

• What is a Variable? Example #2

• What is a Variable? Example #3

• How to Declare a Variable

• Variable Assignment and Initialization

• How to Call a Variable

• How to Name Variables

  • Reserved Words in JavaScript

  • Rules for Naming Variables in JavaScript

  • Popular Variable Naming Conventions

• Variable Data Types

  • Primitive Data Types

  • Reference types in JavaScript

• Summary

What is a Variable? Example #1

When a child is born, they are given a name and throughout their life, they'll be referred to by that name (unless the name gets changed at some point).

Have you seen anyone without a name? How were you able to call them?
In an ideal world, everyone should have a name or a unique way we can refer to them. In JavaScript, every variable has a name.

Everyone must have a name or a way by which we can refer to them.

What is a Variable? Example #2

In a math equation, when we say x = 1 it means, "anywhere you see x, you should replace it with 1". In this case, x is a variable, while 1 is the value of it. That is: x points to 1.

This means that without x, there will be no reference to 1. There could be other occurrences of 1 in the equation but those will be different than the 1 which x was referring to. For example:

/* The code below means x is 1 
 * So during execution, anywhere x appears after the line below, 
 * the complier replace x with 1.
 */
let x = 1;
let y = 1; // the value which y refers to is different from that of x
console.log(x); // This line will log 1 to the console.

In the code snippet above, x refers to the value 1, and y It also refers to another value 1, but note that both values are distinct, just like you can have two different brands of bottled water even though they both contain water.

So, when we mention the variable name x, we get the value assigned to that variable.

What is a Variable? Example #3

A variable can be conceptualized as a container. The variable's name serves as its identifier, its value represents the container's contents, and its type specifies the nature of those contents.

A popular water brand here in Nigeria is known as "Eva".

Let's say you bought Eva water, took it home, and placed it amongst other water brands. You can easily say to someone, "Please get me the Eva water over there" and because of the name, it becomes easy for the person to identify and get exactly what you need.

Just as you can easily distinguish your Eva water from other water brands by its name, a variable is uniquely identified by its name within a program. While there may be multiple variables storing data, the specific name of a variable allows you to reference its contents precisely.

In JavaScript, values are assigned a name and anytime we need that value, we simply mention the name to which it was assigned. When the code executes, the name of that variable is replaced by the value it refers to.

In the case of the analogy above, the content of the bottle is water and the type is a liquid. But assuming we have a variable x which refers to the value 1, the type of the variable is number.

// Add the line of code below to the previous code snippet to
// find out the data type of x;
console.log(typeof x)

In the code snippet above, number is printed to the console because variable x holds the value 1 which is a number.

Variables exist in our program to help us hold values and be able to refer to them whenever we need to. Anywhere a variable is mentioned, the value of that variable is what's being used for the computation at the time.

How to Declare a Variable

let score;

The program above declares/creates a variable called score.

In JavaScript, creating variables is that simple. The type of the variable is the type of the value stored in it. That is, if the variable score holds a value of 1, the type for the score variable is number. So we can say, score is a number variable.

To create a variable, we have to do the following;

1. Declare the variable using one of these keywords: let, const or var.

2. Determine a name to call the variable and write it on the same line as the keyword used in step 1.

let score; // creates variable 'score'

Notice that this time, we did not give it a value. We just simply created a container that will store something. For now, it is empty. Although it has no content at the moment, we'll surely provide content for it.

Variable Assignment and Initialization

We can assign a value to a variable by using the assignment (=) operator—the variable name to the left of it, and the value to the right.

score = 1;

The code snipped above assigns 1 as the value of score (this is called variable assignment).

When we combine variable declaration and assignment in one operation, it is called variable initialization.

let score = 1;

As seen above, we declare the variable score, and immediately on the same line, assign the value 1 to it.

This means that we provided an initial value for the variable when it was created.

How to Call a Variable

If you want to use a variable for an operation at any time in your program, you can simply just "call" it. To call a variable is the same as mentioning or using it.

console.log(score + 1) // 2

In the code snippet above, the variable score was used in the line of code. Therefore, It will be replaced with its actual value 1 during the code execution. This means we'd have 1 + 1 executed, resulting in 2.

In the next section, let's learn how to properly name our variables in other to ensure our codes are neat and readable.

How to Name Variables

Just like naming a human or pet or labeling an object, we always put in much thought to ensure that the name tells a story and gives an idea of how we feel about the role of that pet, human, or object.

JavaScript is somewhat liberal when it comes to how variable naming can be done and also how long it could be.

For example, pneumonoultramicroscopicsilicovolcanoconiosis is a valid variable name in JavaScript even though it is long.

It is generally a good practice to give meaningful names to variables and they should be of a reasonable length.

Let your variables be simple and contextual. For example: author, publishedDate, readTime, shouldCompress, and so on.

It should be self-explanatory. Just avoid cryptic names where possible.

Reserved Words in JavaScript

Even though we can create variables as we wish, some names are already being used within JavaScript to mean something specific. These names cannot be used by a developer to identify a variable. They are called reserved words.

For instance, the keyword catch is used to properly handle an error and prevent it from crashing an application. Hence, you cannot call a variable catch in your program.

Below are all the reserved words in JavaScript:

arguments await break case catch class const continue debugger default delete do else enum eval export extends false finally for function if implements import in Infinity instanceof interface let NaN new null package private protected public return static super switch this throw true try typeof undefined var void while with yield

NOTE: You do not need to memorize these keywords. If you try to use them, you'll get an error and you'll learn to recognize and know them with experience.

Also, JavaScript has some rules that you must follow when naming variables as well as generally accepted conventions (best practices) that you should know about. Let's talk about them in the next section.

Rules for Naming Variables in JavaScript

• Reserved words cannot be used as variable names.

• The first letter of your variable name should be an alphabet, underscore (_), or a dollar sign ($). You cannot use a number as the first character of your variable name. Even though other kinds of special characters are allowed to start a variable name, as a way of good practice and avoiding complexities at the start, you should just always start with a letter. Using an underscore or dollar sign is symbolic by convention and we'll learn what they mean in the future.

• The rest of the variable name may contain anything but symbols, punctuations, and reserved characters (+, -, *, and so on).

• Variable names are case-sensitive. This means Boy and boy will be treated as different variables in your program.

• A variable name can be as long as is necessary for it to make sense. There is no limit imposed by the language.

• Spaces are not allowed in variable names.

Popular Variable Naming Conventions

• Variable names with multiple words should use camel casing. That is, the first word has to be all lowercase while the first letter of subsequent words should be uppercase: studentRegistrationNumber

• Use uppercase letters for constant variables: const PI = 3.1432

• If a constant variable is composed of multiple words, use snake casing (separation of words with an underscore): const PROGRAM_NAME = "Vacation planner"

• If a variable is meant to be private, prefix its name with an underscore: let _memorySize = 2042.
  Note: This is just to let the team (others working on the project) know that the author intends to use it as private. It doesn't prevent the value of the variable from being accessed (there are other ways to ensure this).

• It is common practice to prefix Boolean variables with is or has: let isMarked = true.

In the next section, we'll learn about different data types and how to work with them.

Variable Data Types

Data type simply means "type of data" 😉.

The word "data" in this context means a piece of information. We'll use the word "value" sometimes to mean data and vice versa.

In JavaScript, we store values of different types in variables. These values have different attributes/properties and the type of data a variable holds will determine the operations you can perform with that variable.

For example, if you have water (value) stored in a container (variable), you can use the water (value) to wash or drink, but if what is stored in the container are candies, you can eat them but you won't be able to use them for washing.

If you have a variable that holds numbers, you can use them to perform arithmetic operations. If the variable holds a Boolean, you cannot use it for arithmetic operations but it can be used for logical operations.

The data types in JavaScript are categorized into two primary groups, namely;

• Primitive: Number, String, Boolean, Undefined, Null, BigInt, Symbol

• Reference: Object, Array, Function

In this article, we will not talk about Symbols and BigInt to avoid complexities. The goal is to do our best to explain fundamental concepts to beginners in the most simple way possible.

Let's consider primitive data types.

Primitive Data Types

Variables having these type of data are called primitives because they hold simple values. The word primitive can be translated to mean non-complex.

Primitive values are usually a single unit like 1, "cup", null, undefined, true, and so on. Let's briefly consider how these data types are used and what kind of operations you can perform with them.

• NUMBER: In JavaScript, all numbers are floating-point values. Whether they are numbers without decimal points like a whole number that can be negative, positive, zero, or values with a decimal point like 0.2, -0.5, 1, -2, 0. They are all of the number type.

This type of value can be used in arithmetic operations like multiplication, division, subtraction, addition, modulus, and so on.

let score1 = 2;
let score2 = 5;
let averageScore = (score1 + score2) // 2
console.log(averageScore) // 3.5

To check the data type of a variable's value, use the typeof operator like this: typeof variableName. That is: typeof score1

In the code snippet above, score1 is a variable which holds a value of 2, score2 holds a value of 5, while the averageScore variable stores the result from dividing the sum of score1 and score2 by 2, which evaluates to 3.5.

Using the typeof operator on the score1 variable will return number.

Exercise: Copy the code in the snippet above and run it in your code editor to see how it works for you. You can play around with the values and use the typeof operator to check the variables' data type.

When performing arithmetic operations, you may run into other Number types like Infinity, -Infinity and NaN.

Infinity means something without any limit. One way to reach infinity is to divide a number by 0.

let result = 12 / 0;

console.log(result) // Infinity

In the code above, we divided 12 by 0 and logged the result to the console which prints out Infinity.

Negative Infinity is used to denote a number that is less than any natural number. To arrive at negative infinity, copy the code in the snippet below and run it in your coding environment.

console.log(Number.NEGATIVE_INFINITY) // -Infinity

NaN means Not a Number. This will occur when you try to carry out an impossible mathematical operation as shown below:

const result = "Ella" / 2; // Trying to divide a string with a number
console.log(result) // NaN

The first line in the code above tries to divide a string by a number and the result is NaN.

You will not often reach infinity or -Infinity as a beginner doing basic/intermediate stuff, but it is something you should be aware of so that you do not get worked up when you see it occur in your code (this is something you do not want to cram in your head). NaN is will occur more often than the others. When you see it, just know something is wrong with the operation you are trying to perform.

• STRING: In JavaScript, a string is a collection of characters enclosed in quotes: "Cathy".

The snippet below shows how a string can be used in a JavaScript program:

let author = "Sleekcodes";
let publishedDate = "14 August 2023";

console.log("Written by: " + author); // Written by: Sleekcodes
console.log("Published on: " + publishedDate); // Published on: 14 August 2023"

I am sure you noticed the + operator used with strings. When this occurs, the result is that the string on the right and that on the left will be joined together to become one. This is called string concatenation.

The code above is simply saying, "Create a variable called author and store the text "sleekCodes" as its value, create another variable publishedDate and store the text "14 August 2023" in it."

Then in line 4, we tell the JavaScript engine to log (print) the string "Written by: Sleekcodes" to the console. Line 5 also says log "Published on: 14 August 2023" to the console.

Notice that in the code above, during execution, author gets replaced with the value "Sleekcodes" and publishedDate gets replaced with "14 August 2023" where used.

Strings are used to depict or convey data in text/alphabetic format. A string can be made up of zero or more characters. A string that has no character in it is called an empty string. For example: "".

• BOOLEAN: When we need to represent data in two possible states only like true/false, on/of, or yes/no, we use Boolean values. The value of a Boolean variable is either true or false.

let isQualified = true

if (isQualified) {
    console.log("Tola is qualified"); // Tola is qualified
}

The code above will print the statement "Tola is qualified", because the value of the variable isQualified is true. That operation is a type of conditional operation. This is where Boolean values shine.

Exercise: Change the value of isQualified to be false and observe what happens.

• UNDEFINED: This is both a value and a data type. undefined is used to indicate that a variable has no defined value. For instance, when a variable is declared (let age), and you try to access its value, the result would be undefined.

let age; // note that there is no value assigned to the variable here

console.log(age); // undefined

In the code snippet above, because age isn't given any explicit value, the compiler assigns the value undefined to the variable by default.

Exercise: Use the typeof operator on the variable age and see what you get. Also, assign the value undefined to age and use the typeof operator on it again to see the result.

• NULL: Null is a value we can assign to a variable to indicate that it has no value. It is used to represent "empty" or "unknown".

let age = null;

console.log(age); // null

As seen in the code snippet above, instead of letting the compiler assign undefined for us, we explicitly indicate that the variable has no value by assigning the value null to it.

This means age is empty or unknown.

People often get confused about the difference between undefined and null. One is the default value assigned to a variable without an explicit value, while the other (null) is a value assigned to a variable by the programmer deliberately to indicate that the variable is empty. As a rule of thumb, do not assign undefined to a variable, instead use null (the compiler auto-assigns undefined where needed).

Primitive data types have no complexity. They are plain and simple (a single value). This statement will make more sense when you read about how reference types work in the next section.

Consider the image below.

Part A above is the code you write, while Part B is what happens when the code runs. For primitive data types, the value is simply assigned to the variable (it is straightforward).

Primitive values are passed by value (they generate no reference). Do not worry about what this means yet because we'll explain in the next section.

Reference Types in JavaScript

Reference data types are data passed by "reference". A thorough understanding of this statement is crucial throughout your career as a JavaScript developer, so do well to pay close attention to the concept we are about to learn.

Consider the image below carefully.

In the image above, part A is the code you write, while part B is what happens "behind the scenes".

When you create a variable whose data type is in the reference category (objects, functions, arrays), instead of the value being directly assigned to the variable, a reference is generated for the value and that reference is what gets assigned to the variable.

The reference gets assigned to the variable, but it points to the actual value.

This means that when you try to use the variable anywhere, you are working with the reference to the actual value and anything done to the reference affects the actual value.

Think of it like a middleman between the actual value and the variable name.

Consider the example below:

let studentInfo = {
    name: "John Doe",
    age: 205
}

let staffInfo = studentInfo //6. This means; assign the ref of studentInfo to staffInfo

staffInfo.name = "Lorry Sante" //8. Change the value of name key in the reference which staffInfo holds.

console.log(studentInfo.name) //9. Lorry Sante

You should notice that, changing name in staffInfo object (line 8), causes the name in studentInfo object to change too (as seen in the output of line 9).

In fact, both variables are pointing to the same value technically (see image below);

When we say that a variable is passed by reference, it means that anywhere that variable is used, you are interacting with a reference (that points) to its actual value.

So in the code snippet above, when studentInfo was assigned to staffInfo, we just made staffInfo to store the reference of the studentInfo variable, effectively saying that both staffInfo and studentInfo variables are pointing to the same value.

Therefore, if the reference generated for studentInfo is 000xx2 and it is true that during execution, variables are replaced by whatever they hold, then staffInfo = studentInfo would become staffInfo = 000xx2 during execution, while staffInfo.name would become 000xx2.name.

If we had written studentInfo.name, then during execution, it becomes 000xx2.name, it should be clear now that both studentInfo and staffInfo holds references to one value. They are like different roads to one destination.

There are three main reference data types that you'll mostly come across in your journey as a JavaScript developer: Object, Array, and Function. Let's look into them one after the other.

• OBJECT: An object is a data structure used to store complex data in key/value pairs. The variable created in the previous session has an object type like this:

let studentInfo = {
    name: "John Doe",
    age: 205
}

You can see that it isn't primitive (simple). Unlike primitive types with just simple values, an object can be used to store different information which can be made up of even primitive and reference types.

Objects store data in key/value pairs like so: {key: value}

In the code snippet above, name is key, while "John Doe" is its value. Also, age is key, while 205 is its value.

If you notice, both name and age have primitive values (string and number).

To access the value of an object, we use the object name, dot (.) notation, and the key whose value we want to access. For example: objectName.key.

Objects can also contain nested objects like so:

let studentInfo = {
    name: "John Doe",
    age: 205,
    beneficiary: {
       name: "Tira Doe",
       age: 200,
       relationship: "Wife"
    }
}

In the above example, the studentInfo object has a nested object called beneficiary. beneficiary is a key whose value is an object (reference type). Objects can still hold arrays and functions too.

Accessing the value associated with a key in an object within another object (nested object) is natural. We simply use dot notation. Like so: parentObjectName.nestedObjectName.key

For example, to access the name of the beneficiary in studentInfo object above, we simply write studentInfo.beneficiary.name.

This is not all that you need to know about objects but it is a very sound way to start.

• ARRAY: An array is a kind of object but stores data using automatically assigned indexes instead of keys.

An array is created by writing a comma-separated list of values enclosed with square brackets: [0, 1, 2, 3, "Tosin", "Mike", {name: "Abel Joe", age: 250}]

If you pay close attention to the values used in the array above, you'll notice that they are of different data types. Yes, arrays also allow you to store values of different types in one place but this is strongly discouraged (you shouldn't do it at all). The values in an array should all be of the same type.

Example of a proper array: let scores = [1, 3, 5, 6, 9, 12]

To access a value in an array, we simply specify the array name, followed by a square bracket [] without any space between the name and the bracket. Then inside the square bracket, provide the index of the value you wish to access. That is: arrayName[index].

What's an index and how do we know what index refers to the value we want to access?

An index is simply a number automatically assigned to an array value. You can think of it as an address for values in the array. Arrays are 0 indexed (meaning they start counting from zero).

To determine the index of the value you wish to access, start counting from the start of the array and your count should start from 0.

Consider the image below;

To access the value 80 in the scores array depicted in the image above, we simply write scores[3]

There is a lot you can do with arrays as a JavaScript developer. For now, this is a simple introduction to the array data type.

• FUNCTION: A function is a different kind of variable and it's declared differently (using the function keyword instead of let, const or var). It is a construct used to carry out a specific task.

For example, if you need to add two numbers together multiple times within your code, it's best practice to create a dedicated function for this task. By reusing this function, you avoid redundant code and improve code maintainability compared to repeatedly writing the addition logic. Wait!!! You are not lost. The example below will confirm this 😊

Scenario 1 (without function):

let num1 = 2;
let num2 = 3;
let result = num1 + num2;

console.log(result) // 5

let num3 = 3;
let num4 = 8;
let result2 = num3 + num4;

console.log(result2) // 11

Scenario 2 (with function):

// function declaration.
function addNumbers (num1, num2) {
    return num1 + num2;
}

console.log(addNumbers(2, 3)); // 5
console.log(addNumbers(3, 8)); // 11

You will agree that, scenario 2 contains less code, looks neater, and even feels more natural.

Functions allow us write helpers that we can call to get a specific job done for us any time we want. We just have to tell it how to do the job once and call it anytime we need it to do that job (passing in any information required for the task as arguments) and it delivers.

Function Syntax:

To write a function, we use the function keyword, followed by the name of the function: functionName, a pair of brackets (), and a pair of curly braces {}.

function functionName () {}

There are a few things/conventions you should have in mind when writing functions:

• Function names should follow the same naming rules as variables.

• Function names should be verbs (to depict an action).

• The code logic for the actual task should be written between the opening { and closing } curly braces.

• If there are values required to carry out the task, they should be passed into the function as arguments. In this case, during the function declaration, parameters should be stated between the opening ( and closing ) brackets in a comma-separated fashion. That is: function addNumbers(num1, num2)....

• If no data is required to carry out the task, then the opening ( and closing ) brackets should be left empty: function sayHi()....

A parameter is a variable defined between the opening ( and closing ) of a function during its declaration: function doSomething (param1, param2) {...}.

An argument is the value passed into the function during its invocation/call: doSomething(1, 2)

As seen above, to call/invoke a function, write the function name, followed by an opening and a closing bracket (without any whitespace). Required arguments should be provided between the opening and closing brackets (if any).

To drive this concept home, let's create a function to multiply two digits:

//        functionName   param1 param2
function multiplyNumbers (num1, num2) {
    return num1 * num2; // task to carry out.
}

It's as simple as that.

Having done that, let's call/invoke the function.

multiplyNumbers(2, 3) // 6

Notice that while creating the function, we declared two parameters: num1 and num2. When calling the function, we assigned values to the two arguments: 1 and 2.

return keyword

Functions may return values or not.

If a function contains a return statement, like the multiplyNumbers function, then it will return a value if everything goes well. If there is no return statement for the function, it will return undefined.

function sayHi () {
    console.log("Hi");
}

If we invoke sayHi, it would log the text Hi to the console and it will also return undefined.

Remember that functions are like helpers, when you send a helper to carry out an assignment, you may require them to give you feedback (the result of the task they carried out) or you may not need feedback.

If you need feedback, add a return statement about what feedback you need. Otherwise, do not add a return statement to the function.

There is still a lot to learn about every data type we have highlighted in this article so take your time to practice these basics and when you feel comfortable enough using them, you'll see the need to dive deeper.

Summary

Variables are "pointers" to values. When you mention (use) a variable anywhere in your code, the variable identifier (name) is replaced with the value it points to. It's just like calling someone's name. The name doesn't respond, the person (value) behind the name is what you hope to get as a response.

By way of retention, do not try to cram all these rules and conventions. Feel free to refer back to this article when programming and in a short amount of time, you'll be used to all of them and you won't need to refer to any article ever again to name your variables properly.

If you should have anything in mind, remember to start variables with a lowercase letter if the variable is made of multiple words, subsequent words should start with uppercase letters. That is: age, dateOfBirth.

To create a variable, use the keyword let, const, or var, followed by the variable name. If you wish to initialize the variable, then on the same line before the semi-colon, input the assignment operator and variable value after it.

For example: let score; or let score = 3; (if you wish to initialize during declaration).

If you wish to use a variable, just mention its name and the value will be used during the execution of your code.

let a = 2;
let b = 3;
console.log(a + b) // 4

This article also showed you the different data types in JavaScript and how to use them.

Did this post help? Let’s keep the conversation going. Feel free to share your thoughts or questions on Twitter (x) or LinkedIn. You can find me on Twitter (x) @asoluka_tee and Tochukwu Austin Asoluka on LinkedIn.

That's why you should learn how to use CSS variables to reduce the amount of CSS code you write and take your styling to a new level.

The most successful web apps have spectacular designs. Unfortunately, to reach the desired effects, web developers need to prepare large amounts of styles. This forces us to repeat values, such as colors, in many different elements.

Fortunately, modern stylesheets support CSS variables, which lets you reduce repetition in your codebase. You don't need external tools such CSS modules, Less or SASS to take advantage of it.

In this comprehensive guide, I'm going to show you how to effectively use CSS variables, covering basic examples in plain HTML and CSS to more advanced frameworks like React and Next.js.

Prerequisites

This guide is dedicated to beginners so you don't need any special knowledge to benefit from it.

I included a few examples in React and Next.js and they are dedicated to beginner React developers. Only those examples will require basic React knowledge to understand them. Feel free to skip them if you don't work with React.

What are CSS Variables?

CSS variables (officially called CSS custom properties) allow developers to manage and reuse values in CSS stylesheets. Web developers can define reusable variables that can use be used across many CSS files, making code easier to update. CSS variables make it super easy to implement features such as dark mode.

Modern websites require large amounts of styles and this results in repeated CSS values in many different stylesheets. The ecosystem was working hard to address this issue by inventing tools such as SASS, Less and CSS modules but all of those tools have a flaw – they need to be compiled to CSS files in the end.

Fortunately, thanks to CSS variables, we can simplify our stylesheets without sophisticated tools and build processes.

How To Create CSS Variables

Defining a CSS variable is quite simple. You can define a CSS variable using the -- prefix followed by a name of your choice, then assigning it a value using the var() function.

Here's how you do it:

:root {
  /* Backgrounds */
  --primary-background: #faf8ef;
  /* Colors */
  --primary-text-color: #776e65;
}

As you can see, I defined CSS variables inside the :root pseudo-class to make them globally available.

Each variable started with --, followed by a name: --primary-background or --primary-text-color. Lastly, I assigned values to those variables.

Using this, I'll be able to change website colors just by modifying the values of those variables.

How To Use CSS Variables

Now let me show you how to use CSS variables to define global background and text color for your website:

body {
  margin: 0;
  background: var(--primary-background);
  color: var(--primary-text-color);
}

To use a variable, you need to refer to them by using the var() function and passing the variable name as an argument.

That's it! Now your website is using CSS variables to render styles.

Note: var() helper is a built-in CSS function so you don't need any libraries to use it.

How To Use CSS Variables in React?

Many web developers build their web apps in React so I will show you how you can get values and update CSS variables in React. Many modern web apps support dark mode and this feature can become one of a React developer's nightmares.

Next, I'll show you an easy method to add a dark mode in React apps just by using CSS variables.

How To Set the Value of CSS Variable in React?

Changing the value of CSS variables in React might be tricky since React doesn't offer any tools to directly interact with the DOM tree. That's why we'll use plain JavaScript to read and set CSS variables.

Here's how you can set a CSS Variable in React:

import { useEffect } from 'react';

export default function Example() {
  useEffect(() => {
    document.documentElement.style.setProperty('--primary-background', `black`);
    document.documentElement.style.setProperty('--primary-text-color', `white`);
  }, [])

  return <div style={{color: "var(--primary-text-color"}}>Hello World</div>
};

As you can see, I took advantage of the global document variable to get into the DOM tree and modify style properties. I used setProperty method that requires two arguments:

• CSS custom property (CSS variable) name.
• The value of the variable.

Note: It doesn't matter if you work in React or plain JavaScript, you can always call document.documentElement.style.setProperty to modify CSS variable values. It's a JavaScript built-in function.

How To Get the Value of CSS Variables in React?

Sometimes you might need to read the value of a CSS variable and store it in React. In this case, I would suggest utilizing useState and useEffect hooks.

Here's how I would approach this issue:

import { useEffect, setState } from 'react';

export default function Example() {
  const [color, setColor] = useState('black');

  useEffect(() => {
    const cssColor = document.documentElement.style.getPropertyValue('--primary-text-color');
    setColor(cssColor);
  }, [])

  return <div style={{color: color}}>Hello World</div>
};

As you can see, I retrieved the value of a --primary-text-color variable to the cssColor constant. In the next line, I updated component's state by using setColor helper created by useState hook. Using the method, my CSS variable can be used easily in React Components.

That's it. Now you can use this variable in your React app.

Conclusion

CSS variables can be used in different kinds of websites and no JavaScript is needed to take advantage of them. Everybody can benefit of them – no matter their level of experience in web development. Understanding CSS variables can greatly improve your styling experience and make you more efficient.

I hope you liked this article. It would mean the world to me if you share it on your social media.

If you have any questions or just want to hear updates from me, you can find me on Twitter.

Learn React

If you are still learning React or you want to learn more tricks like this one, you should join my course on Next.js. Next.js is the most popular React framework that powers the most of React app these days. I will teach you how to use it by building an awesome 2048 game with animations. No fluff. Tactics only.

🚀 Join my Next.js Crash Course.

This course includes:

• 🎥 5.5 hours on-demand video
• 📱 Access on mobile and TV
• 🗓️ Full lifetime access
• 🎓 Certificate of completion

Click to get started

Through this article, you will learn how to declare and mutate variables using var, let, and const, and you'll get a better understanding of the differences between them.

I will explain each concept in two parts:

• Before ES6 (var statement)
• After ES6 (let and const statements)

Let's dive into these different ways of declaring variables in JavaScript so you know how they work and when to use each one.

How to Declare Variables in JavaScript

When you declare variables in your app, the interpreter moves them to the top of their scope and allocates places in the memory before the execution starts. This process is called Hoisting.

1. How to declare variables with var in JavaScript:

When you declare a variable with var, it is hoisted and initialized in the memory as undefined before the code execution. So, you can access the variable before declaring it, but it returns undefined. This is sometimes called Declaration hoisting.

When the execution starts and reaches the line where the variable is declared, it replaces the value in memory with the value of the variable.

console.log(strawberry); // undefined

var strawberry = '🍓';

console.log(strawberry); // 🍓

Under the hood, the code above behaves like this:

var strawberry;

console.log(strawberry); // undefined

strawberry = '🍓';

console.log(strawberry); // 🍓

So we can use the strawberry variable before the declaration, but it returns undefined.

With this behavior, the program runs without errors. But in some cases, this can lead to unexpected results. We are only human, and on a busy day you might try to access a variable before declaring it. In a complex program, it can be hard to figure out where a strange undefined comes from.

2. How to declare variables with let and const in JavaScript:

When you declare a variable with let or const, it is also hoisted but it's allocated in the memory as uninitialized in the temporal dead zone. You cannot access variables in the temporal dead zone before you've declared them. So, if you try to access a variable before declaring it, the program throws a ReferenceError.

When the program reaches the line where the variable is declared, it initializes it with that value.

console.log(cherry); // ReferenceError

const cherry = "🍒";

console.log(cherry); // 🍒

If you try to run this code snippet, you will see an error similar to the following one because we tried to access a variable in the temporal dead zone.

"ReferenceError: Cannot access 'cherry' before initialization"

This is a more predictable behavior than the behavior of the var statement.

So what do var, let, and const have in common?

In the previous two sections, you learned the process for declaring var, let, and const. In this section, we will look at the common concepts.

• You can declare a variable with let and var without a value. In this case, the default value will be undefined.

var tomato;
let potato;

console.log(tomato); // undefined
console.log(potato); // undefined

This behavior is not valid for const because an initial value is required for it. If there is no initial value, the program throws a SyntaxError.

const avocado; // SyntaxError

For the code above, an error gets thrown like this one:

SyntaxError: Missing initializer in const declaration

• You can declare a chain of variables using the same statement. Put the statement at the beginning and separate each variable with a comma. This is valid for var, let, and const.

let number1 = 2, number2 = 23, number3 = 99;

console.log(number1); // 2
console.log(number2); // 23
console.log(number3); // 99

Nowadays, to declare variables, you'll want to use the ES6 statements let and const. You can think of var as the legacy method of doing this.

My recommendation is:

• Use const as the default.
• Use let if the variable will change in the future.
• Don't use var if there is no particular use case.

JavaScript Variables and Scope

According to MDN:

The scope is the current context of execution in which values and expressions are "visible" or can be referenced.

In terms of variables, the scope is where certain variables are available. We can access variables that have been declared in a parent scope in a child scope, but it doesn't work the other way around.

Global Scope

Global Scope is the main scope that covers all the scopes in a script. Variables declared in the global scope are available in all scopes.

// Global Scope

const grapes = "🍇";

// Functional Scope
function logGrapes() {
  console.log(grapes); // 🍇

  // Block Scope in a Functional Scope
  {
    console.log(grapes); // 🍇
  }
}

// Block Scope
{
  console.log(grapes); // 🍇
}

In the example above, we can access the grapes variable from all child scopes because it is declared in the global scope.

Functional Scope

Functional scope is the scope created with a function declaration. Variables declared in a functional scope are only available in that scope and cannot be accessed outside of it. The behavior of var, let, and const are the same in this case.

Here's an example:

// Global Scope

// Functional Scope
function createVariables() {
  var apple = "🍎";
  const cherry = "🍒";
  let strawberry = "🍓";
}

console.log(apple); // ReferenceError
console.log(cherry); // ReferenceError
console.log(strawberry); // ReferenceError

In the example above, all three variables are only accessible in the functional scope of the createVariables function. If you try to access them outside of the functional scope the program throws a ReferenceError.

Block Scope

Block scope is the scope that is created with a pair of curly braces. Block scope is only valid for let and const, not var. When you declare a variable with var it is moved to the global scope or the nearest functional scope if it exists.

// Block Scope
{
  const banana = "🍌";

  // Block Scope in a Block Scope
  {
    console.log(banana); // 🍌

    var carrot = "🥕";
    let lemon = "🍋";
  }

  console.log(carrot); // 🥕
  console.log(lemon); // ReferenceError
}

In the example above:

• We can access the banana variable that we declared with const in the parent scope in the child scope.
• We can access the carrot variable declared with var in the child scope in the parent scope because the program moves it to the global scope.
• We can't access the lemon variable declared with let in the child scope in the parent scope because it cannot be accessed outside of the scope in which it's declared. If try to do that, the program throws a ReferenceError.

How to Mutate Variables in JavaScript

In this section, we'll talk about the var and let statements together, and then discuss how the const statement behaves. This is because the variables declared with var and let are mutable (that is, they can be changed), while variables declared with const are immutable.

1. Mutation in var and let statements

As I said, the variables declared with var and let are mutable, which means that you can assign new values to them. Here's what I mean:

var pepper = "🌶️";
let apple = "🍏";

pepper = "🫑";
apple = "🍎";

console.log(pepper); // 🫑
console.log(apple); // 🍎

In the example above, we mutated the pepper and apple variables, and they were assigned new values.

2. Mutation in const statement

Variables declared with const are immutable. So you cannot assign new values to them once you've declared them.

const strawberry = "🍓";

strawberry = "🍉"; // TypeError

If you try to run the code snippet above, the program throws an error like this:

"TypeError: Assignment to constant variable."

Objects are an exception for the immutability of the const statement because they have properties and methods, unlike primitives.

You cannot mutate them via assignment but can mutate them via their methods and property assignment. Here's an example:

const fruits = ["🍎", "🍐"];
const fruitEmojiMap = {
  apple: "🍎",
  pear: "🍐",
};

fruits[2] = "🍒"; // [ '🍎', '🍐', '🍒' ]
fruits.push("🍌"); // [ '🍎', '🍐', '🍒', '🍌' ]

fruitEmojiMap.cherry = "🍒"; // { apple: '🍎', pear: '🍐', cherry: '🍒' }

In the code example above,

• We added two new fruits to the fruits array via property assignment, and used the push method of the Array object.
• We added a new fruit to the fruitEmojiMap object via property assignment.

A little note: you can use the [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) method to achieve complete immutability for objects.

How to Redeclare Variables in JavaScript

Redeclaring a variable with the same name in the same scope is likely something you don't want to do intentionally, and I've never found a real use case for it.

But strangely, we can redeclare variables declared with var using the same name in the same scope. This is another error-prone characteristic of the var statement. Fortunately, this behavior was changed with the let and const statements.

1. How to redeclare variables with var

You can redeclare a variable declared with var in the same scope or child-parent scopes. The variable will be affected in the global scope, or functional scope if it is declared in a function.

So even if you redeclare a variable in the child scope, the variable will change in all scopes where that variable is available.

// Global Scope
var pepper = "🌶️";

console.log(pepper); // 🌶️

// Block Scope
{
  var pepper = "🥦";

  console.log(pepper); // 🥦
}

console.log(pepper); // 🥦

In the example above, we declared a new pepper variable in the block scope and assigned it a different value. This affects the variable in the global scope and we lose access to the previous variable.

This behavior tends to cause big problems. Because someone working in the same codebase may unintentionally declare a variable using the same name used before.

The process is a bit different if you make the redeclaration in a function. The variable outside of the function remains the same and the variable inside the function cannot affect it. As I said, variables declared with var in a function are in functional scope and don't affect the outside.

// Global Scope
var onion = "🧅";

// Functional Scope
function redeclareOnion() {
  var onion = "🧄";

  console.log(onion); // 🧄
}

console.log(onion); // 🧅

In the example above, even though we declared a new variable using the same name as the onion variable inside a function, the onion variable declared in the global scope remained the same.

2. How to redeclare variables with let and const

You cannot redeclare variables declared with let or const in the same scope. If you try to do so, the program throws a SyntaxError.

let eggplant = "🍆";

let eggplant = "🥔"; // SyntaxError

In the example above, we tried to redeclare the eggplant variable in the same scope, and the program threw the following error:

"SyntaxError: Identifier 'eggplant' has already been declared"

But you can redeclare variables using let and const in child scopes. Because the variables declared with let and const are block scope and don't affect the parent scopes.

// Global Scope
const carrot = "🥕";

// Block Scope
{
  const carrot = "🍒";

  console.log(carrot); // 🍒
}

console.log(carrot); // 🥕

In the example above, we declared two carrot variables. The first one is in the global scope and the second one is in the block scope with a different value. The variable in the global scope remains the same and the variable in the block scope is a standalone new variable.

The downside is that we lost access to the carrot variable declared in the global scope, in the block scope. If we need this variable in the future we can't access the variable.

So, most of the time, it is better to declare a variable with a unique name.

3. How to Redeclare Variables by Mixing Statements

Briefly, you shouldn't mix statements. This section is intended to give you information rather than really show you how the process is done.

You cannot create variables by mixing statements using the same name in the same scope. If you try it, the program throws a SyntaxError.

const banana = "🍌";

var banana = "🍋"; // SyntaxError

In the example above, we tried to redeclare the banana variable declared with const with var, but the program threw an error similar to the one below:

"SyntaxError: Identifier 'banana' has already been declared"

Also, you cannot declare a variable with var using the same name as one already declared in a parent scope using let or const. As I said, var is global scope and affects the variable declared in parent scopes unless it is inside a function.

// Global Scope
let pineapple = "🍍";

// Functional Scope
function declarePineapple() {
  var pineapple = "🍏"; // This is okay
}

// Block Scope
{
  var pineapple = "🍎"; // SyntaxError
}

In the example above, we tried to redeclare the pineapple variable in two places:

• In the function, which we did successfully.
• But in the child block scope, the program threw the following error:

"SyntaxError: Identifier 'pineapple' has already been declared"

Conclusion

These days, let and const are the default choice for variable declaration in JavaScript. But you might still encounter the var statement, especially in older apps. So you'll need to know how to handle it.

In this guide, you have learned the differences between var, let, and const. We also talked about hoisting and scope in variable declaration.

See you in the next one!

Stay in Touch

You can connect with me on Twitter, and you can read more tutorials like this one on my blog here.

This article will give you all the understanding of Python variables you need to use them effectively in your projects.

If you want the most convenient way to review all the topics covered here, I've put together a helpful cheatsheet for you right here:

Download the Python variables cheatsheet (it takes 5 seconds).

What is a Variable in Python?

So what are variables and why do we need them?

Variables are essential for holding onto and referencing values throughout our application. By storing a value into a variable, you can reuse it as many times and in whatever way you like throughout your project.

You can think of variables as boxes with labels, where the label represents the variable name and the content of the box is the value that the variable holds.

In Python, variables are created the moment you give or assign a value to them.

How Do I Assign a Value to a Variable?

Assigning a value to a variable in Python is an easy process.

You simply use the equal sign = as an assignment operator, followed by the value you want to assign to the variable. Here's an example:

country = "United States"
year_founded = 1776

In this example, we've created two variables: country and year_founded. We've assigned the string value "United States" to the country variable and integer value 1776 to the year_founded variable.

There are two things to note in this example:

1. Variables in Python are case-sensitive. In other words, watch your casing when creating variables, because Year_Founded will be a different variable than year_founded even though they include the same letters
2. Variable names that use multiple words in Python should be separated with an underscore _. For example, a variable named "site name" should be written as "sitename"._ This convention is called snake case (very fitting for the "Python" language).

How Should I Name My Python Variables?

There are some rules to follow when naming Python variables.

Some of these are hard rules that must be followed, otherwise your program will not work, while others are known as conventions. This means, they are more like suggestions.

Variable naming rules

1. Variable names must start with a letter or an underscore _ character.
2. Variable names can only contain letters, numbers, and underscores.
3. Variable names cannot contain spaces or special characters.

user_age = 20 # valid

website = 'https://freecodecamp.org' # valid

1password = True # invalid

Variable naming conventions

1. Variable names should be descriptive and not too short or too long.
2. Use lowercase letters and underscores to separate words in variable names (known as "snake_case").

What Data Types Can Python Variables Hold?

One of the best features of Python is its flexibility when it comes to handling various data types.

Python variables can hold various data types, including integers, floats, strings, booleans, tuples and lists:

Integers are whole numbers, both positive and negative.

answer = 42

Floats are real numbers or numbers with a decimal point.

weight = 34.592

Strings are sequences of characters, namely words or sentences.

message = "Hello Python"

Booleans are True or False values.

is_authenticated = True

Lists are ordered, mutable collections of values.

fruits = ['apple', 'banana', 'cherry']

Tuples are ordered, immutable collections of values.

point = (3, 4)

There are more data types in Python, but these are the most common ones you will encounter while working with Python variables.

Python is Dynamically Typed

Python is what is known as a dynamically-typed language. This means that the type of a variable can change during the execution of a program.

Another feature of dynamic typing is that it is not necessary to manually declare the type of each variable, unlike other programming languages such as Java.

You can use the type() function to determine the type of a variable. For instance:

print(type(answer))  # Output: <class 'int'>
print(type(message))  # Output: <class 'str'>

What Operations Can Be Performed?

Variables can be used in various operations, which allows us to transform them mathematically (if they are numbers), change their string values through operations like concatenation, and compare values using equality operators.

Mathematic Operations

It's possible to perform basic mathematic operations with variables, such as addition, subtraction, multiplication, and division:

# Arithmetic operations
a = 10
b = 5

sum = a + b
difference = a - b
product = a * b
quotient = a / b

print(sum, difference, product, quotient)  # Output: 15 5 50 2.0

It's also possible to find the remainder of a division operation by using the modulus % operator as well as create exponents using the ** syntax:

# Modulus operation
remainder = a % b
print(remainder)  # Output: 0

# Exponentiation
power = a ** b
print(power)  # Output: 100000

String operators

Strings can be added to one another or concatenated using the + operator.

# String concatenation
first_name = "Guido"
last_name = "van Rossum"
full_name = first_name + " " + last_name
print(full_name)  # Output: Guido van Rossum

Equality comparisons

Values can also be compared in Python using the <, >, ==, and != operators.

These operators, respectively, compare whether values are less than, greater than, equal to, or not equal to each other.

# Comparison operations
x = 15
y = 20

print(x < y)  # Output: True
print(x > y)  # Output: False
print(x == y)  # Output: False
print(x != y)  # Output: True

Finally, note that when performing operations with variables, you need to ensure that the types of the variables are compatible with each other.

For example, you cannot directly add a string and an integer. You would need to convert one of the variables to a compatible type using a function like str() or [int()](https://www.freecodecamp.org/news/python-string-to-int-convert-a-string-example/).

Variable Scope

The scope of a variable refers to the parts of a program where the variable can be accessed and modified. In Python, there are two main types of variable scope:

Global scope: Variables defined outside of any function or class have a global scope. They can be accessed and modified throughout the program, including within functions and classes.

global_var = "I am a global variable"

def access_global_var():
    print(global_var)

access_global_var()  # Output: I am a global variable

Local scope: Variables defined within a function or class have a local scope. They can only be accessed and modified within that function or class.

def function_with_local_var():
    local_var = "I am a local variable"
    print(local_var)

function_with_local_var()  # Output: I am a local variable
print(local_var)  # Error: NameError: name 'local_var' is not defined

In this example, attempting to access local_var outside of the function_with_local_var function results in a NameError, as the variable is not defined in the global scope.

Conclusion

Don't be afraid to experiment with different types of variables, operations, and scopes to truly grasp their importance and functionality. The more you work with Python variables, the more confident you'll become in applying these concepts.

Finally, if you want to fully learn all of these concepts, I've put together for you a super helpful cheatsheet that summarizes everything we've covered here.

Just click the link below to grab it for free. Enjoy!

Download the Python variables cheatsheet

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Walking into a hardware store, it's not enough to say: "I need a tool". You need to be specific about the type of tool you need.

Each tool type has its particular purpose: A hammer to drive a nail into wood, a paint brush to paint, and a wrench tightens or loosens nuts and bolts.

The same goes for the variables we use to hold data in our code. Regardless of the programming language you use, when building a website or app you'll want to use the appropriate type of variable for a particular purpose. We'll look at basic types and more complex types such as arrays (lists) and objects.

You can also watch the associated video here which walks through the key variable data types.

Basic Data Types

The most common basic data types available in most programming languages include:

numbers: we use this for any data that is numeric or should be worked with as a number for addition or other math operations.

In some programming languages, there are multiple data types for numbers, depending on whether the number is an integer, decimal, or currency, for example.

If we were building a number guessing game, we would hold the guessed number in a numeric data type, like this:

usersGuess = 3

string: we use this for any data that is text. For example, a name or address or message. In most programming languages, strings require quotes. Notice that the text inside of the quotes can include spaces and other special characters.

usersName = "Jack Harkness"

date: we use this for data that is a date or time, such as a birthday.

usersBirthday = April 14, 2001

Boolean: we use this for data that only has the value true or false. In a number guessing game, the user's guess was either correct or it wasn't. There is no other value.

correctGuess = true

For programming languages that are considered to be "strongly typed", such as C# and TypeScript, the data type defines the kind of data that can be assigned to that variable. You'll see an error if you try to put the wrong type of data into a variable.

pageTitle = 'Pet List';    // Variable is a string.

pageTitle = 42;            // Error
                        // Can't put a number into a string variable

With "dynamically typed" languages such as JavaScript and Python, the data type defines the kind of data currently assigned to that variable. That type can change if you put a different type of data into that variable. So the type dynamically changes based on the currently assigned value.

pageTitle = 'Pet List';            // Variable type is a string

pageTitle = 42;                    // Variable type is now a number

Array (List) Data Type

Another important data type in programming is an array, which in some programming languages is called a list.

Let's say we add a feature to our website or app so the user can provide the name of each of their pets. We could hold each name in a separate variable like shown in Figure 1.

Figure 1. Using separate string variables to hold multiple items.

But we'd then have to limit how many pets we could allow based on how many variables we'd defined.

Arrays solve this problem. An array is a collection or set of data items. You can think of an array as a list of items.

The data items in an array are often of the same type, so you may have an array of numbers, of strings, or of dates.

In some programming languages, including C#, TypeScript, JavaScript, and Python, arrays are defined with square brackets: [ ] and each value in the array is separated with commas.

petNames = ["Yoyo", "Vanny", "Cali"]

Here we define an array of strings. Recall that strings must be enclosed in quotation marks.

Figure 2. Using an array to hold multiple items.

With arrays, the user can have an almost limitless number of items, such as names, because we can keep appending to the array.

petNames = ["Yoyo", "Vanny", "Cali", "Ben", "Maki"]

Object Data Type (Custom Data Type)

What about data that represent things in our application? Things like those shown in Figure 3:

• A pet
• A customer
• A product
• Or post, and I actually mean a social media post here, but close enough.

Figure 3. Custom data type (object) examples.

We can hold detailed information about a thing, such as a pet or customer or blog post, in a set of string, number, and date variables. But to keep that set of variables for a particular thing together as one variable, we want a custom data type that describes that thing.

Think of an object as a custom data type that groups a set of related variables for a particular thing.

Let's walk through how to define an object as a custom data type.

Step 1: Identify Properties (Characteristics)

To define an object data type, we first identify the data we want to hold for the object. These are often characteristics of the object, like a pet's name, type, and age. In programming, we call each of these characteristics a property of the object.

Let's look at some examples.

Figure 4. Identify the data to store (or hold) for each object.

For a customer, the properties might be the customer's name, shipping address, and default payment method.

A product may have a product name, description, and a Boolean value defining whether the product is currently in stock.

And for a blog post, we may want to hold the user's name, the post text, and the date.

Each of these are properties of our object.

At this point, we have the list of properties for the object. We want to hold data for each of these properties.

Step 2: Assign a Property Name

Once we have the properties defined, we assign a name to each property as shown in Figure 5.

Figure 5. Define a variable name for each object property.

The names follow the conventions for the programming language you are using. In general, property names cannot have spaces or special characters in them. They are often defined using camel case, with the first letter lower case and each additional word capitalized.

Each property also has a basic data type. petName, customerName, productName, and userName are strings. age is a number, inStock is a Boolean value (true or false), and postDate is a date.

We could keep track of separate variables for each of these pet properties and each of these customer properties and each of these post properties. But we'd end up with lots of unorganized variables.

Let's instead group each set of related properties into an object.

Step 3: Group the Properties for the Object

We group the properties of an object together using object literal syntax. This keeps the data for an object together and makes it easier to work with it as a set.

The syntax used to group the properties depends on the programming language you use. In languages such as JavaScript, TypeScript, and C#, object properties are grouped within curly braces ({ }).

pet = {
    petName: "Yoyo",
    petType: "cat",
    age: 11
}

Figure 6. Group the properties for each object

For each object, the variable on the left of the equal sign is the object variable and represents a specific pet, customer, product, or post. On the right of the equal sign, inside the curly braces, we list each property name, a colon, and the data (often called a value). We separate properties with a comma.

To say that another way, you can think of an object as a collection of name and value pairs. The name is the property name and the value is the data you want to store for that property.

In Figure 6, we defined a pet object with a specific set of properties, and a value for each property. Same with the customer, and so on.

Try It Yourself!

Let's stop here for a moment and think about objects. What's your favorite hobby? If you built a website or an app to support that hobby, what objects might you define?

Maybe you like to bake, so you'd build a recipe app with your favorite recipes. You work with the data for each recipe using an object with properties such as ingredients, recipe steps, baking temperature, and time.

Or say you like sports. You'd track the data for each player using an object with properties such as name, position, and stats. And you'd track the data for each game using another object with properties such as teams and score.

What objects did you define for your hobby?

Wrapping Up

A variable has a data type such as number, string (for text), date, and Boolean (for true or false).

An array stores a set of data items, often of the same type.

An object represents something in the website or app, like a pet, a customer, or a blog post. The object groups related properties holding the data for the object.

Now that you know all about data types, you can create variables of the appropriate type to hold any data you need for your website or app.

If you are self-taught or new to programming and want more information about general programming concepts, check out this course:

In JavaScript, you can declare variables with the var, let, and const keywords. But what are the differences between them? That's what I'll explain in this tutorial.

I have a video version of this topic you can check out as well. 😇

If you're just starting out using JavaScript, a few things you may hear about these keywords are:

• var and let create variables that can be reassigned another value.
• const creates "constant" variables that cannot be reassigned another value.
• developers shouldn't use var anymore. They should use let or const instead.
• if you're not going to change the value of a variable, it is good practice to use const.

The first two points are likely pretty self-explanatory. But what about why we shouldn't use var, or when to use let vs const? As we go through this tutorial, hopefully this will all make sense to you.

var vs let vs const – What's the Difference?

To analyze the differences between these keywords, I'll be using three factors:

• Scope of variables
• Redeclaration and reassignment
• Hoisting

I'm also writing separate tutorials about variable scope, variable hoisting, and variable redeclaration and reassignment – so you can learn more about them as well. They'll be out soon. :)

Let's start by looking at how these factors apply to variables declared with var.

How to Declare Variables with var in JavaScript

The scope of variables declared with var

Variables declared with var can have a global or local scope. Global scope is for variables declared outside functions, while local scope is for variables declared inside functions.

Let's see some examples, starting from global scope:

var number = 50

function print() {
  var square = number * number
  console.log(square)
}

console.log(number) // 50

print() // 2500

The number variable has a global scope – it's declared outside functions in the global space – so you can access it everywhere (inside and outside functions).

Let's see an example of local scope:

function print() {
  var number = 50
  var square = number * number
  console.log(square)
}

print() // 2500

console.log(number)
// ReferenceError: number is not defined

Here, we declared the number variable in the function print, so it has a local scope. This means that the variable can only be accessed inside that function. Any attempt to access the variable outside the function where it was declared will result in a variable is not defined reference error.

How to redeclare and reassign variables declared with var

Variables declared with var can be redeclared and reassigned. I'll explain what I mean with examples.

Here's how to declare a variable with var:

var number = 50

You have the var keyword, the name of the variable number, and an initial value 50. If an initial value is not provided, the default value will be undefined:

var number

console.log(number)
// undefined

The var keyword allows for redeclaration. Here's an example:

var number = 50
console.log(number) // 50

var number = 100
console.log(number) // 100

As you can see, we have redeclared the variable number using the var keyword and an initial value of 100.

The var keyword also allows for reassignment. In the code var number = 50, we assigned the 50 value to number. We can reassign another value anywhere in the code since it was declared with var. Here's what I mean:

var number = 50
console.log(number) // 50

number = 100
console.log(number) // 100

number = 200
console.log(number) // 200

Here, we're not redeclaring – rather, we're reassigning. After declaring the first time with an initial value of 50, we reassign a new value of 100 and later on with a new value of 200.

How to hoist variables declared with var

Variables declared with var are hoisted to the top of their global or local scope, which makes them accessible before the line they are declared. Here's an example:

console.log(number) // undefined

var number = 50

console.log(number) // 50

The number variable here has a global scope. Since it is declared with var, the variable is hoisted. This means that we can access the variable before the line where it was declared without errors.

But the variable is hoisted with a default value of undefined. So that's the value returned from the variable (until the line where the variable is declared with an initial value gets executed).

Let's see a local scope example:

function print() {
  var square1 = number * number
  console.log(square1)

  var number = 50

  var square2 = number * number
  console.log(square2)
}

print()
// NaN
// 2500

In the print function, number has a local scope. Due to hoisting, we can access the number variable before the line of declaration.

As we see in square1, we assign number * number. Since number is hoisted with a default value of undefined, square1 will be undefined * undefined which results in NaN.

After the line of declaration with an initial value is executed, number will have a value of 50. So in square2, number * number will be 50 * 50 which results in 2500.

There are some problems with var, which we'll discuss at the end. Just know that it's generally not advisable to use it in your modern JavaScript projects.

How to Declare Variables with let in JavaScript

The scope of variables declared with let

Variables declared with let can have a global, local, or block scope. Block scope is for variables declared in a block. A block in JavaScript involves opening and closing curly braces:

{
  // a block
}

You can find blocks in if, loop, switch, and a couple of other statements. Any variables declared in such blocks with the let keyword will have a block scope. Also, you can't access these variables outside the block. Here's an example showing a global, local, and block scope:

let number = 50

function print() {
  let square = number * number

  if (number < 60) {
    var largerNumber = 80
    let anotherLargerNumber = 100

    console.log(square)
  }

  console.log(largerNumber)
  console.log(anotherLargerNumber)
}

print()
// 2500
// 80
// ReferenceError: anotherLargerNumber is not defined

In this example, we have a global scope variable number and a local scope variable square. There's also block scope variable anotherLargerNumber because it is declared with let in a block.

largerNumber, on the other hand – though declared in a block – does not have a block scope because it is declared with var. So largerNumber has a local scope as it is declared in the function print.

We can access number everywhere. We can only access square and largerNumber in the function because they have local scope. But accessing anotherLargerNumber outside the block throws an anotherLargerNumber is not defined error.

How to redeclare and reassign variables declared with let

Just like var, variables declared with let can be reassigned to other values, but they cannot be redeclared. Let's see a reassignment example:

let number = 50
console.log(number) // 50

number = 100
console.log(number) // 100

Here, we reassigned another value 100 after the initial declaration of 50.

But redeclaring a variable with let will throw an error:

let number = 50

let number = 100
// SyntaxError: Identifier 'number' has already been declared

You see we get a syntax error: Identifier 'number' has already been declared.

How to hoist variables declared with let

Variables declared with let are hoisted to the top of their global, local, or block scope, but their hoisting is a little different from the one with var.

var variables are hoisted with a default value of undefined, which makes them accessible before their line of declaration (as we've seen above).

But, let variables are hoisted without a default initialization. So when you try to access such variables, instead of getting undefined, or variable is not defined error, you get cannot access variable before initialization. Let's see an example:

console.log(number)
// ReferenceError: Cannot access 'number' before initialization

let number = 50

Here, we have a global variable, number declared with let. By trying to access this variable before the line of declaration, we get ReferenceError: Cannot access 'number' before initialization.

Here's another example with a local scope variable:

function print() {
  let square = number * number

  let number = 50
}

print()
// ReferenceError: Cannot access 'number' before initialization

Here we have a local scope variable, number, declared with let. By accessing it before the line of declaration again, we get the cannot access 'number' before initialization reference error

How to Declare Variables with const in JavaScript

The scope of variables declared with const

Variables declared with const are similar to let in regards to scope. Such variables can have a global, local, or block scope.

Here is an example:

const number = 50

function print() {
  const square = number * number

  if (number < 60) {
    var largerNumber = 80
    const anotherLargerNumber = 100

    console.log(square)
  }

  console.log(largerNumber)
  console.log(anotherLargerNumber)
}

print()
// 2500
// 80
// ReferenceError: anotherLargerNumber is not defined

This is from our previous example, but I've replaced let with const. As you can see here, the number variable has a global scope, square has a local scope (declared in the print function), and anotherLargeNumber has a block scope (declared with const).

There's also largeNumber, declared in a block. But because it is with var, the variable only has a local scope. Therefore, it can be accessed outside the block.

Because anotherLargeNumber has a block scope, accessing it outside the block throws an anotherLargerNumber is not defined.

How to redeclare and reassign variables declared with const

In this regard, const is different from var and let. const is used for declaring constant variables – which are variables with values that cannot be changed. So such variables cannot be redeclared, and neither can they be reassigned to other values. Attempting such would throw an error.

Let's see an example with redeclaration:

const number = 50

const number = 100

// SyntaxError: Identifier 'number' has already been declared

Here, you can see the Identifier has already been declared syntax error.

Now, let's see an example with reassignment:

const number = 50

number = 100

// TypeError: Assignment to constant variable

Here, you can see the Assignment to constant variable type error.

How to hoist variables declared with const

Variables declared with const, just like let, are hoisted to the top of their global, local, or block scope – but without a default initialization.

var variables, as you've seen earlier, are hoisted with a default value of undefined so they can be accessed before declaration without errors. Accessing a variable declared with const before the line of declaration will throw a cannot access variable before initialization error.

Let's see an example:

console.log(number)
// ReferenceError: Cannot access 'number' before initialization

const number = 50

Here, number is a globally scoped variable declared with const. By trying to access this variable before the line of declaration, we get ReferenceError: Cannot access 'number' before initialization. The same will occur if it was a locally scoped variable.

Here's an article to learn more about Hoisting in JavaScript with let and const – and How it Differs from var.

Wrap up

Here's a table summary showing the differences between these keywords:

These factors I've explained, play a role in determining how you declare variables in JavaScript.

If you never want a variable to change, const is the keyword to use.

If you want to reassign values:

• and you want the hoisting behavior, var is the keyword to use
• if you don't want it, let is the keyword for you

The hoisting behavior can cause unexpected bugs in your application. That's why developers are generally advised to avoid var and stick to let and cost.

I hope you learned something from this article.

In programming, a variable is a particular piece of data that holds a value. Depending on the configuration, that value can change or remain fixed.

For instance, in JavaScript, you can implement a variable to change over time with the "var" and "let" keywords. But if you want, you can implement a variable so it doesn't change with the "const" keyword.

In this article, the kind of variable we’ll be looking at is not the one in programming but the one you'll deal with in research. Precisely, we’ll look at the differences between the two main types of variables in research – dependent and independent variables.

But before we look at the differences between dependent and independent variables, we need to understand what a variable is first.

What We'll Cover

• What is a Variable in Research?
• What are Dependent and Independent Variables?
• What are the Differences between Dependent and Independent Variables?
• How to Identify a Dependent Variable from an Independent Variable
• Conclusion
• More Readings

What is a Variable in Research?

If you’re conducting research, you’ll be measuring a lot of values. So, in research, a variable is anything you’re trying to measure. It could be age, temperature, length, height, mass, weight, or any other thing that can have a value.

In addition, you’ll be measuring those variables in different units – centimeters (cm), meters (m), grams (g), kilograms (kg), and many more.

These units can’t be neglected, but as far as variables are concerned, whether dependent or independent, the values are what really matter.

What are Dependent and Independent Variables?

Dependent and independent variables depend on whether one variable determines the outcome of the other or not.

A dependent variable is a variable whose changes and its outcome depend on another variable. On almost all occasions, the variable the dependent variable depends on is an independent variable.

Dependent variables are also called the response or outcome variables because they represent the outcome of the values you're measuring. That is, what you record after manipulating the independent variables.

An independent variable is a variable whose outcome or changes do not depend on another variable. It is the exact opposite of the dependent variable, at least according to what the name implies.

Independent variables are also called predictor variables because you can use them to predict the outcome of a dependent variable. That is, when you manipulate independent variables, they can give you the outcome of a dependent variable.

What are the Differences between Dependent and Independent Variables?

How to Identify a Dependent Variable from an Independent Variable

We've taken a look at what variables are, what dependent and independent variables are, and the exact differences between dependent and independent variables.

But how exactly would you differentiate a dependent variable from an independent variable? We are going to look at two experiments or examples:

• how Vitamin A helps mothers produce milk

• the level of light nocturnal insects (insects active at night) are attracted to

For the first experiment, the sources of vitamin A the mother takes in from foods like fish oil and green vegetables are the independent variable. That's because the researcher can change [decrease or increase] the amount given to the mothers. How the body of the mother responds in producing more milk is the dependent variable.

For the second experiment, the level of light is the independent variable because the researcher can change it. How nocturnal insects react to that level of light is the dependent variable.

Conclusion

In this article, you learned about the differences between dependent and independent variables. We looked at:

• what a variable is in research

• the two main types of variables (dependent and independent variables)

• what dependent and independent variables are

• and how to differentiate a dependent variable from an independent variable.

I hope this article gives you a knowledge of what research variables are and how to differentiate a dependent variable from an independent variable.

Thank you for reading.

Further Reading

• Types of Variables in Research and Statistics
• Independent Variables v Dependent Variables

Here's an example of a global variable:

x = 10 

def showX():
    print("The value of x is", x)

showX()
# The value of x is 10

The variable x in the code above was declared outside a function: x = 10.

Using the showX() function, we were still able to access x because it was declared in a global scope.

Let's take a look at another example that shows what happens when we declare a variable inside a function and try to access it elsewhere.

def X():
    x = 10 

X()

def showX():
    print("The value of x is", x)

showX()
NameError: name 'x' is not defined

In the example above, we declared x inside a function and tried to access it in another function. This resulted in a NameError because x was not defined globally.

Variables defined inside functions are called local variables. Their value can only be used within the function where they are declared.

You can change the scope of a local variable using the global keyword – which we'll discuss in the next section.

What is the global Keyword Used for in Python?

The global keyword is mostly used for two reasons:

• To modify the value of a global variable.
• To make a local variable accessible outside the local scope.

Let's look at some examples for each scenario to help you understand better.

Example #1 - Modifying a Global Variable Using the global Keyword

In the last section where we declared a global variable, we did not try to change the value of the variable. All we did was access and print its value in a function.

Let's try and change the value of a global variable and see what happens:

x = 10 

def showX():
    x = x + 2
    print("The value of x is", x)

showX()
# local variable 'x' referenced before assignment

As you can see above, when we tried to add 2 to the value of x, we got an error. This is because we can only access but not modify x.

To fix that, we use the global variable. Here's how:

x = 10 

def showX():
    global x
    x = x + 2
    print("The value of x is", x)

showX()
# The value of x is 12

Using the global keyword in the code above, we were able to modify x and add 2 to its initial value.

Example #2 - How to Make a Local Variable Accessible Outside the Local Scope Using the global Keyword

When we created a variable inside a function, it wasn't possible to use its value inside another function because the compiler did not recognize the variable.

Here's how we can fix that using the global keyword:

def X():
    global x
    x = 10 

X()

def showX():
    print("The value of x is", x)

showX()
# The value of x is 10

To make it possible for x to be accessible outside its local scope, we declared it using the global keyword: global x.

After that, we assigned a value to x. We then called the function we used to declare it: X()

When we called the showX() function, which prints the value of x declared in the X() function, we did not get an error because x has a global scope.

Summary

In this article, we talked about global and local variables in Python.

The examples showed how to declare both global and local variables.

We also talked about the global keyword which lets you modify the value of a global variable or make a local variable accessible outside its scope.

Happy coding!

To begin with, you will learn how to declare variables in Python and what the term 'variable scope' actually means.

Then, you will learn the differences between local and global variables and understand how to define global variables and how to use the global keyword.

Here is what we will cover:

1. An introduction to variables in Python
   1. Variable scope explained
2. How to create variables with local scope
3. How to create variables with global scope
   1. The global keyword

What Are Variables in Python and How Do You Create Them? An Introduction for Beginners

You can think of variables as storage containers.

They are storage containers for holding data, information, and values that you would like to save in the computer's memory. You can then reference or even manipulate them at some point throughout the life of the program.

A variable has a symbolic name, and you can think of that name as the label on the storage container that acts as its identifier.

The variable name will be a reference and pointer to the data stored inside it. So, there is no need to remember the details of your data and information – you only need to reference the variable name that holds that data and information.

When giving a variable a name, make sure that it is descriptive of the data it holds. Variable names need to be clear and easily understandable both for your future self and the other developers you may be working with.

Now, let's see how to actually create a variable in Python.

When declaring variables in Python, you don't need to specify their data type.

For example, in the C programming language, you have to mention explicitly the type of data the variable will hold.

So, if you wanted to store your age which is an integer, or int type, this is what you would have to do in C:

#include <stdio.h>

int main(void)
{
  int age = 28;
  // 'int' is the data type
  // 'age' is the name 
  // 'age' is capable of holding integer values
  // positive/negative whole numbers or 0
  // '=' is the assignment operator
  // '28' is the value
}

However, this is how you would write the above in Python:

age = 28

#'age' is the variable name, or identifier
# '=' is the assignment operator
#'28' is the value assigned to the variable, so '28' is the value of 'age'

The variable name is always on the left-hand side, and the value you want to assign goes on the right-hand side after the assignment operator.

Keep in mind that you can change the values of variables throughout the life of a program:

my_age = 28

print(f"My age in 2022 is {my_age}.")

my_age = 29

print(f"My age in 2023 will be {my_age}.")

#output

#My age in 2022 is 28.
#My age in 2023 will be 29.

You keep the same variable name, my_age, but only change the value from 28 to 29.

What Does Variable Scope in Python Mean?

Variable scope refers to the parts and boundaries of a Python program where a variable is available, accessible, and visible.

There are four types of scope for Python variables, which are also known as the LEGB rule:

• Local,
• Enclosing,
• Global,
• Built-in.

For the rest of this article, you will focus on learning about creating variables with global scope, and you will understand the difference between the local and global variable scopes.

How to Create Variables With Local Scope in Python

Variables defined inside a function's body have local scope, which means they are accessible only within that particular function. In other words, they are 'local' to that function.

You can only access a local variable by calling the function.

def learn_to_code():
    #create local variable
    coding_website = "freeCodeCamp"
    print(f"The best place to learn to code is with {coding_website}!")

#call function
learn_to_code()


#output

#The best place to learn to code is with freeCodeCamp!

Look at what happens when I try to access that variable with a local scope from outside the function's body:

def learn_to_code():
    #create local variable
    coding_website = "freeCodeCamp"
    print(f"The best place to learn to code is with {coding_website}!")

#try to print local variable 'coding_website' from outside the function
print(coding_website)

#output

#NameError: name 'coding_website' is not defined

It raises a NameError because it is not 'visible' in the rest of the program. It is only 'visible' within the function where it was defined.

How to Create Variables With Global Scope in Python

When you define a variable outside a function, like at the top of the file, it has a global scope and it is known as a global variable.

A global variable is accessed from anywhere in the program.

You can use it inside a function's body, as well as access it from outside a function:

#create a global variable
coding_website = "freeCodeCamp"

def learn_to_code():
    #access the variable 'coding_website' inside the function
    print(f"The best place to learn to code is with {coding_website}!")

#call the function
learn_to_code()

#access the variable 'coding_website' from outside the function
print(coding_website)

#output

#The best place to learn to code is with freeCodeCamp!
#freeCodeCamp

What happens when there is a global and local variable, and they both have the same name?

#global variable
city = "Athens"

def travel_plans():
    #local variable with the same name as the global variable
    city = "London"
    print(f"I want to visit {city} next year!")

#call function - this will output the value of local variable
travel_plans()

#reference global variable - this will output the value of global variable
print(f"I want to visit {city} next year!")

#output

#I want to visit London next year!
#I want to visit Athens next year!

In the example above, maybe you were not expecting that specific output.

Maybe you thought that the value of city would change when I assigned it a different value inside the function.

Maybe you expected that when I referenced the global variable with the line print(f" I want to visit {city} next year!"), the output would be #I want to visit London next year! instead of #I want to visit Athens next year!.

However, when the function was called, it printed the value of the local variable.

Then, when I referenced the global variable outside the function, the value assigned to the global variable was printed.

They didn't interfere with one another.

That said, using the same variable name for global and local variables is not considered a best practice. Make sure that your variables don't have the same name, as you may get some confusing results when you run your program.

How to Use the global Keyword in Python

What if you have a global variable but want to change its value inside a function?

Look at what happens when I try to do that:

#global variable
city = "Athens"

def travel_plans():
    #First, this is like when I tried to access the global variable defined outside the function. 
    # This works fine on its own, as you saw earlier on.
    print(f"I want to visit {city} next year!")

    #However, when I then try to re-assign a different value to the global variable 'city' from inside the function,
    #after trying to print it,
    #it will throw an error
    city = "London"
    print(f"I want to visit {city} next year!")

#call function
travel_plans()

#output

#UnboundLocalError: local variable 'city' referenced before assignment

By default Python thinks you want to use a local variable inside a function.

So, when I first try to print the value of the variable and then re-assign a value to the variable I am trying to access, Python gets confused.

The way to change the value of a global variable inside a function is by using the global keyword:

#global variable
city = "Athens"

#print value of global variable
print(f"I want to visit {city} next year!")

def travel_plans():
    global city
    #print initial value of global variable
    print(f"I want to visit {city} next year!")
    #assign a different value to global variable from within function
    city = "London"
    #print new value
    print(f"I want to visit {city} next year!")

#call function
travel_plans()

#print value of global variable
print(f"I want to visit {city} next year!")

Use the global keyword before referencing it in the function, as you will get the following error: SyntaxError: name 'city' is used prior to global declaration.

Earlier, you saw that you couldn't access variables created inside functions since they have local scope.

The global keyword changes the visibility of variables declared inside functions.

def learn_to_code():
   global coding_website
   coding_website = "freeCodeCamp"
   print(f"The best place to learn to code is with {coding_website}!")

#call function
learn_to_code()

#access variable from within the function
print(coding_website)

#output

#The best place to learn to code is with freeCodeCamp!
#freeCodeCamp

Conclusion

And there you have it! You now know the basics of global variables in Python and can tell the differences between local and global variables.

I hope you found this article useful.

To learn more about the Python programming language, check out freeCodeCamp's Scientific Computing with Python Certification.

You'll start from the basics and learn in an interactive and beginner-friendly way. You'll also build five projects at the end to put into practice and help reinforce what you've learned.

Thanks for reading and happy coding!

In this article, I will show you how to create CSS variables on the :root pseudo selector and show you how to access them using the var() function.

How to Create a CSS Custom Variable

Here is the basic syntax for defining a custom CSS variable:

--css-variable-name: css property value;

It is best practice to define all of your variables at the top of your stylesheet. For larger projects, it is common to create a separate file just for your custom color variables so you can reuse them throughout other stylesheets.

If you want to access that variable, then you would use the var() function. Here is the basic syntax.

css property: var(--css-variable-name);

In this example, I want to create custom background and text color variables that I can reuse throughout the stylesheet. I am going to name these variables --main-bg-color and --main-text-color.

  --main-bg-color: #000080;
  --main-text-color: #fff;

I am going to place these variables inside of the :root pseudo selector which represents the root element in my HTML document.

:root {
  --main-bg-color: #000080;
  --main-text-color: #fff;
}

In my body selector, I am going to reference those variables using the var() function.

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

Here is a working example:

If I wanted to add more content to the page then I could reuse those variables throughout the rest of the stylesheet and avoid unnecessary repetition like this:

.example-class-1 {
  background-color: #000080;
  display: flex;
  flex-direction: column;
}

.example-class-2 {
  font-size: 2.1rem;
  color: #fff;
}

.example-class-3 {
  background-color: #000080;
  color: #fff;
  border: 2px solid black;
}

In this second example, I have 6 red, green, and blue boxes on the page. I first created the HTML markup for the boxes.

<div class="box-container">
  <div class="box red-box">Box 1</div>
  <div class="box green-box">Box 2</div>
  <div class="box blue-box">Box 3</div>
</div>
<div class="box-container">
  <div class="box blue-box">Box 4</div>
  <div class="box green-box">Box 5</div>
  <div class="box red-box">Box 6</div>
</div>

I then created a set of custom red, green, and blue variables.

:root {
  --maroon-red: #800000;
  --dark-green: #013220;
  --navy-blue: #000080;
  --white: #fff;
}

Lastly, I applied those variables to my boxes using the var() function.

.red-box {
  background-color: var(--maroon-red);
}

.green-box {
  background-color: var(--dark-green);
}

.blue-box {
  background-color: var(--navy-blue);
}

Here is what the complete code and final result looks like:

How to Name CSS Variables

When it comes to naming variables, you want to choose short descriptive names so other developers know what those variables are.

This would be an example of a bad variable name:

 background-color:var(--color);

What is --color?

Is it some shade of red? Green? Blue? Something else?

Is it a main background color or main text color?

You don't want other developers to have to go back and look at the CSS definition to figure out what it should be.

Another example is if you were creating custom CSS variables for different shades of colors, then you could choose to name them this way:

:root {
  --maroon-red: #800000;
  --light-red: #ff0000;
  --crimson-red: #e32636;
}

Every developer will have their own way of naming variables. The important thing to remember is to provide descriptive names for your variables.

Conclusion

CSS variables are custom variables that you can create and reuse throughout your stylesheet.

Here is the basic syntax for defining a custom CSS variable.

--css-variable-name: css property value;

If you want to access that variable, then you would use the var() function. Here is the basic syntax.

css property: var(--css-variable-name);

Every developer will have their own way of naming variables but it is best practice to create short descriptive names.

I hope you enjoyed this article and best of luck on your CSS journey.

In this article, I'm going to show you how to get the type of various data structures in Python by assigning them to a variable, and then printing the type to the console with the print() function.

How to Print the Type of a Variable in Python

To get the type of a variable in Python, you can use the built-in type() function.

The basic syntax looks like this:

type(variableName)

In Python, everything is an object. So, when you use the type() function to print the type of the value stored in a variable to the console, it returns the class type of the object.

For instance, if the type is a string and you use the type() on it, you'd get <class ‘string‘> as the result.

To show you the type() function in action, I'm going to declare some variables and assign to them the various data types in Python.

name = "freeCodeCamp"

score = 99.99

lessons =  ["RWD", "JavaScript", "Databases", "Python"]

person = {
    "firstName": "John",
    "lastName": "Doe",
    "age": 28
}

langs = ("Python", "JavaScript", "Golang")

basics = {"HTML", "CSS", "JavaScript"}

I will then print the types to the console by wrapping print() around some strings and the type() function.

print("The variable, name is of type:", type(name))
print("The variable, score is of type:", type(score))
print("The variable, lessons is of type:", type(lessons))
print("The variable, person is of type:", type(person))
print("The variable, langs is of type:", type(langs))
print("The variable, basics is of type:", type(basics))

Here are the outputs:

# Outputs:
# The variable, name is of type:  <class 'str'>
# The variable, score is of type: <class 'float'>  
# The variable, lessons is of type:  <class 'list'>
# The variable, person is of type:  <class 'dict'> 
# The variable, langs is of type:  <class 'tuple'> 
# The variable, basics is of type:  <class 'set'>

Final Thoughts

The type() function is a valuable built-in function of Python with which you can get the data type of a variable.

If you're a beginner, you should save yourself the hassle of cramming data types by using the type() function to print the type of a variable to the console. This will save you some time.

You can also use the type() function for debugging because in Python, variables are not declared with data types. So, the type() function was built into the language for you to check for data types of variables.

Thank you for reading.

A common practice in software projects is to keep certain information separated but accessible from the codebase which uses it. Developers usually do this with secrets such as passwords or private keys, or with user or context-specific info pieces.

But managing environment variables can be a pain. There are a number of solutions to ease that pain, and there are even built-in ones such as bash_profile.

One solution I've discovered recently and found particularly convenient is direnv. It's a shell extension which lets you define environment variables scoped by directory.

After installing and hooking the extension to your shell, direnv will execute every time you change directories, looking for an .envrc file in the same or in a superior directory tree level. It will then load the defined variables to the current environment, and unload them if it ceases to detect the same .envrc.

Note that direnv will load the first detected .envrc file, which means that the environment will not inherit values from a .envrc in a parent directory.

It is also important to keep in mind that the environment variables will only be loaded to your shell session once you move to a directory affected by a .envrc file. So if you try something like running a script which loads an environment defined in a directory below your current level, the variables won't be accessible.

How to Install direnv

Here's a list of supported systems. It is very likely that your UNIX-based system's main open source package manager has it available.

Suppose we are on Debian, we can install direnv by running the standard external package install command in the terminal:

sudo apt-get install direnv

How to Setup direnv

After you install it, you need to hook direnv to your shell. If you're using bash, you can do this by appending this line to the end of your shell startup config file:

echo 'eval "$(direnv hook bash)"' >> ~/.bashrc

It's almost the same for ZShell:

echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc

Direnv also supports FISH, TCSH, and Elvish. Here are the hooking instructions for each supported shell.

How to Use direnv

Now we must create an .envrc file for the directory we would like to scope the environment variables to.

Say we create it for the directory ~/project.

echo export FOO='I love Linux!' >> ~/project/.envrc

You will then receive a warning that the current .envrc wasn't read. direnv will block loading .envrc every time it detects changes which were not explicitly allowed. So now run:

direnv allow ~/project

and voilà!, you now have a directory-scoped environment.

Remember when I told you that 'direnv will block loading .envrc every time it detects changes which were not explicitly allowed'? This isn't limited to newly introduced changes – the whole file will be unauthorized. So when you do this:

echo export BAR='It is actually called GNU/Linux!' >> ~/project/.envrc

you will have to run direnv allow ~/project again, even to access $FOO. Kinda boring, but biased towards safety.

Every time an .envrc is loaded, direnv will output a message with the file path and also the names of the variables loaded, so you don't need to worry about forgetting your setup. It will also tell you whenever an environment was unloaded.

Thanks for reading!

That's it! It's pretty straightforward, and I hope you find it as convenient as I did.

In this tutorial, you'll learn about variable scope in the C programming language. You'll see some code examples to help you understand the differences between local and global variables.

What is the Scope of a Variable?

Before going ahead to learn about local and global variable scope, let's understand what scope means.

In simple terms, scope of a variable is its lifetime in the program.

This means that the scope of a variable is the block of code in the entire program where the variable is declared, used, and can be modified.

In the next section, you'll learn about local scope of variables

Local Scope of Variables in C – Nested Blocks

In this section, you'll learn how local variables work in C. You'll first code a couple of examples, and then you'll generalize the scoping principle.

▶ Here's the first example:

#include <stdio.h>

int main() 
{
    int my_num = 7;
    {
        //add 10 my_num
        my_num = my_num +10;
        //or my_num +=10 - more succinctly
        printf("my_num is %d",my_num);
    }

    return 0;
}

Let's understand what the above program does.

In C, you delimit a block of code by {} . The opening and closing curly braces indicate the beginning and the end of a block, respectively.

• The main() function has an integer variable my_num that's initialized to 7 in the outer block.
• There's an inner block that tries to add 10 to the variable my_num.

Now, compile and run the above program. Here's the output:

//Output

my_num is 17

You can see the following:

• The inner block is able to access the value of my_num that's declared in the outer block, and modify it by adding 7 to it.
• The value of my_num is now 17, as indicated in the output.

Local Scope of Variables in C – Nested Blocks Example 2

▶ Here's another related example:

#include <stdio.h>

int main() 
{
    int my_num = 7;
    {
        int new_num = 10;
    } 
    printf("new_num is %d",new_num); //this is line 9
    return 0;
}

• In this program, the main() function has an integer variable my_num in the outer block.
• Another variable new_num is initialized in the inner block. The inner block is nested inside the outer block.
• We're trying to access and print the value of inner block's new_num in the outer block.

If you try compiling the above code, you'll notice that it doesn't compile successfully. And you'll get the following error message:

Line   Message
9      error: 'new_num' undeclared (first use in this function)

This is because the variable new_num is declared in the inner block and its scope is limited to the inner block. In other words, it is local to the inner block and cannot be accessed from the outer block.

Based on the above observations, let's write down the following generic principle for local scoping of variables:

{
    /*OUTER BLOCK*/

      {


        //contents of the outer block just before the start of this block
        //CAN be accessed here

        /*INNER BLOCK*/


      }

       //contents of the inner block are NOT accessible here
 }

Local Scope of Variables in C – Different Blocks

In the previous example, you learned how variables inside the nested inner block cannot be accessed from outside the block.

In this section, you'll understand the local scope of variables declared in different blocks.

#include <stdio.h>

int main()
{
    int my_num = 7;
    printf("%d",my_num);
    my_func();
    return 0;
}

void my_func()
{
    printf("%d",my_num);
}

In the above example,

• The integer variable my_num is declared inside the main() function.
• Inside the main() function, the value of my_num is printed out.
• There's another function my_func() that tries to access and print the value of my_num.
• As program execution starts with the main() function, there's a call to my_func() inside the main() function.

▶ Now compile and run the above program. You'll get the following error message:

Line   Message
13     error: 'my_num' undeclared (first use in this function)

If you notice, on line 13, the function my_func() tried accessing the my_num variable that was declared and initialized inside the main() function.

Therefore, the scope of the variable my_num is confined to the main() function, and is said to be local to the main() function.

We can represent this notion of local scope generically as follows:

{

    /*BLOCK 1*/
    // contents of BLOCK 2 cannot be accessed here

}


{

    /*BLOCK 2*/
    // contents of BLOCK 1 cannot be accessed here

}

Global Scope of Variables in C

So far, you've learned about local scope of C variables. In this section, you'll learn how you can declare global variables in C.

▶ Let's start with an example.

#include <stdio.h>
int my_num = 7;

int main()
{
    printf("my_num can be accessed from main() and its value is %d\n",my_num);
    //call my_func
    my_func();
    return 0;
}

void my_func()
{
  printf("my_num can be accessed from my_func() as well and its value is %d\n",my_num);
}

In the above example,

• The variable my_num is declared outside the functions main() and my_func().
• We try to access my_num inside the main() function, and print its value.
• We call the function my_func() inside the main() function.
• The function my_func() also tries to access the value of my_num, and print it out.

This program compiles without any error, and the output is shown below:

//Output
my_num can be accessed from main() and its value is 7
my_num can be accessed from my_func() as well and its value is 7

In this example, there are two functions – the main() and my_func().

However, the variable my_num is not local to any function in the program. Such a variable that is not local to any function is said to have global scope and is called a global variable.

This principle of global scope of variables can be summarized as shown below:

//all global variables are declared here
function1()
    {

    // all global variables can be accessed inside function1

    }
function2()
    {

    // all global variables can be accessed inside function2

    }

Wrapping Up

In this tutorial, you've learned the differences between local and global scope. This is an introductory tutorial on variable scope in C.

In C, there are certain access modifiers to control the level of access that the variables have. You can change access by using the corresponding keywords when you declare variables.

See you all in the next tutorial. Until then, happy coding!

Variables are a fundamental concept in any programming language. In JavaScript, you can declare variables by using the keywords var, const, or let.

In this article, you’ll learn why we use variables, how to use them, and the differences between const, let and var.

What are variables used for in JavaScript?

In the context of coding, data is information that we use in our computer programs. For example, your Twitter username is a piece of data.

Much of programming is about manipulating or displaying data. In order to do this, programmers need a way of storing and keeping track of data. Let's demonstrate this with an example.

First we’ll open up our JavaScript console. To launch your JavaScript console on Chrome, you can use the shortcut Ctrl + Shift + J on Windows and Linux. For Mac, use Cmd + Option + J.

Once the console has launched, think of your dog or cat’s current age (or any similar number if you don't have pets) and enter it into the console.

4

Now what if we want to refer to that number again? We’ll have to type it out for a second time.

We need a way to refer to this piece of data so we can reuse it throughout our program.

Introducing variables in JavaScript

A helpful analogy is to think of variables as labels for our values. Think of a container of blueberries with a label on it marked blueberries. In this example, the variable, blueberries, points to a value, which is the blueberries themselves.

Let's declare a variable, age, and use the assignment operator (the equals sign) to assign our value, 4, to this variable. We’ll use the var keyword.

var age = 4

Variables are how programmers give a name to a value so that we can reuse it, update it, or simply keep track of it. Variables can be used to store any JavaScript type.

Now that we’ve assigned this value to the variable age, we can refer back to this value later. If you now type in the variable age in your console, you’ll have the value of 4 returned back to you.

How to use the var keyword in JavaScript

Keywords in JavaScript are reserved words. When you use the var keyword, you’re telling JavaScript you’ll be declaring a variable.

When using the var keyword, variables can be reassigned. We’ll demonstrate this by first declaring a new variable, name, and assigning it to the value of Madison.

var name = 'Madison'

Next, we’ll reassign this variable to point to the value of a different name, Ben.

name = 'Ben'

Now if you run console.log(name) you’ll get the output of Ben.

When using the var keyword, variables can also be declared with no initial value.

var year

Here, we’ve declared a variable year but it does not point to any value. Later on if we want it to point to a value, we can use the assignment operator to do so.

year = 2020

Now our variable year will point to the value of 2020.

When JavaScript was first created, the only way to declare a variable was with the var keyword.

In recent updates to JavaScript (ECMAScript2015), const and let were created as other keywords to declared variables.

To explain why they were needed, we’ll look at problems with the var keyword. In order to look at these problems, we’ll learn about what scope is.

What is scope?

Scope refers to where in our code variables are available for use. When a variable is globally scoped, that means it is available anywhere in your program. Let’s look at an example.

Take the following code and enter it into your console.

var name = ‘Bob’
function printName() {
    console.log(name)
}
printName()

Here we’ve created and called a function, printName, that will print the value of the name var, Madison. You’ll see this printed in your console.

Because our var was created outside of the function, it is globally scoped. This means that it is available anywhere in your code, including inside of any function. This is why our function, printName, has access to the name var.

Let’s now create a variable that is function-scoped. This means that the variable is only accessible inside the function it was created in. This next example will be very similar to the code above, but with a different placement of the variable.

function printYear() {
 var year = 2020
}
console.log(year)

Now in our console we’ll get an error: year is not defined. This is because the var year is function-scoped. That is, it only exists inside of the function it was created in. We don’t have access to it outside of the function, which is where we’re trying to access it when we run our console.log.

Function-scoped variables are helpful to programmers because we often want to create variables that are only useful or needed inside a certain function. Creating global variables can also lead to errors or mistakes.

Now that we have a basic understanding of scope, we can return to our discussion of problems with the var keyword.

Problems with the var keyword in JavaScript

Let's look at another example.

We'll create a variable, age. Next we’ll write an if statement that checks if age has a value, and if it does, returns a console.log of the number that is double that age.

This is a simplified example, but we’ll first check if age has a value because we want to make sure we are adding to a valid value.

var age = 27
If (age) {
 var doubleAge = age + age
 console.log(`Double your current age is ${yearPlusTwenty}`)
}

Now in our console, you’ll see Double your current age is 47.

Our variable, doubleAge, is now a global variable. If you enter doubleAge into your console, you’ll see that you have access to it.

doubleAge
47

As previously discussed, variables created with the var keyword are function-scoped. Function-scoped variables only exist inside of the function they were created in.

But since the doubleAge variable is not inside a function, that means it has been scoped globally. That is, the doubleAge variable is now available anywhere in our code.

The problem is, doubleAge is just a variable we used once inside of our if statement, and we don’t necessarily need it available everywhere in our code. It has “leaked” outside of the if statement it was created in, even though we didn’t need it to.

var age = 27
if (age) {
 //We need our doubleAge var only in this block of code in between our curley brackets. 
    var doubleAge = age + age
    console.log(`Double your current age is ${yearPlusTwenty}`)

}

doubleAge
47
//our doubleAge var is available outside of these curly brackets, on the global sbope.

It would be great if we had a way of creating a variable that only existed inside the if statement it was created in. In other words, the block of code that exists in between the curly brackets.

var age = 27
If (age) {
 //We want our variable to only exist here, where we will use it
 var doubleAge = age + age
 console.log(`Double your current age is ${yearPlusTwenty}`)
}

To help fix this problem, the const and let keywords were introduced in JavaScript.

How to use the const keyword in JavaScript

const works similarly to var, but with a few big differences.

First, const is block-scoped, whereas var is function-scoped.

What is a block?

A block refers to any space between an opening and closing bracket. This might seem confusing at first. Let's write out our previous example, but this time using const instead of let when declaring our doubleAge variable.

var age = 27
If (age) {
 const doubleAge = age + age
 console.log(`Double your current age is ${yearPlusTwenty}`)
}

Now, type doubleAge into your console and hit enter. You should get an error, doubleAge is not defined. This is because const is block-scoped: it only exists in the block it was defined.

The doubleAge variable is ‘trapped’ inside the two curly brackets it was defined in. Code that is also inside those brackets can access doubleAge, but no code outside of it can.

By using const instead of var, our previous problem is fixed. Our doubleAge var is no longer “leaking” into our global scope unnecessarily. Instead, it only exists inside of the block it was created in.

How do block-scoped variables work within the context of functions? To learn about this, let's create and then call a function, returnX.

function returnX() {
 const x = 1
 return x
}
returnX()

By calling this function returnX, we can see that our function returns the value of x, which is 1.

If we next type in x, we’ll get back referenceError: x is not defined. This is because functions are also considered blocks, so our const x will exist only within the function.

The next thing to know about const is that it can only ever be declared once. Type this code into your console:

const y = 1
const y = 2

You should see an error, Identifier 'x' has already been declared.

This is a difference between var and const. While const will give you an error, letting you know that you’ve already declared this variable, the var keyword won’t.

var x = 1
var x = 2

The variable x will point to the value of 2 without an error. This can cause bugs for you as a programmer, as perhaps you did not mean to reassign your value to a new variable. Thus, using const can help you as you’ll receive an error if you accidentally try to reassign a variable.

This is a strength of the const keyword that was introduced as an updated and better way of creating variables in JavaScript. However, what about the times when you do want to update your variable?

Let's look at an example that shows why we would want to do this.

Let's declare a variable, adult, and set it to false. We’ll also create an age variable and set it to 20.

const adult = false

const age = 20.

Say we want to check a user’s age, and set our adult variable to false if age is over 18. We can write an if statement to do this.

if (age > 18) {
 adult = true   
}

What happens when we run this code?

Here we’ll see Error: Assignment to constant variable.

This is because, in accordance with the rules of const, we cannot redeclare this variable. That is, our variable age is already pointing to the value of true, and we cannot now point it to something else.

If we print out adult again, we can see that it has stayed the same and still holds the value of false.

We cannot reassign our age variable, and const is working as expected. However, what if we do want to reassign this variable?

Often times programmers will want to be able to redeclare their variables.

This is where our third keyword, let, comes in.

How to use the let keyword in JavaScript

First let’s go over how let is similar to const.

Let, like const, is block-scoped. If you replaced const with let in our above doubleAge example, it would work the same.

However, let differs from const in a fundament way. Variables declared with the let keyword can be redeclared, while variables created with the const keyword cannot. Let’s go over an example.

Using our same example above, replace const with let. We’ll keep our age variable as a const with the value of 20.

let adult = false
const age = 20
if (age > 18) {
    adult = true
}

Now if we type out adult, instead of getting an error as we previously did, we’ll see the output of true.

By using the let keyword, we’ve updated our variable to point to the value of true as we wanted to. Sometimes in programming we’ll want to update our variable depending on certain data that we receive. We can use let to do this.

Wrapping up

In summary, we’ve learned that variables are used to keep track of and reuse data in our computer programs. Scope refers to where in our code variables are available for use.

Variables can be declared using var, const, or let. Var is function-scoped, while const and let are block-scoped. Const variables cannot be reassigned, while let variables can be.

Var, const, and let can be confusing at first. It can help to read different tutorials on them, as well as test out your own code in different ways to solidify your understanding.

Having a strong foundation of var, const, and let will help you not just at the start of your JavaScript career but throughout its entirety.

Thank you for reading!

If you enjoyed this post, sign up for my email list where I send out my latest articles and announce meetings for my coding book club.

If you have feedback or questions on this post, feel free to Tweet me @madisonkanna.