WDD 131: Dynamic Web Fundamentals

JavaScript: Variables

Overview

Variables are used to store values. These values can be primitive like a number, string, Boolean, or null or they can be objects like a function, class, or literal object. The values can be used as input to expressions, used in processing, or used in output to display information.

Prepare

Answer the following questions using these resources or through your own research:

• Storing the information you need — Variables - MDN
• JavaScript data types and data structures - MDN

1. What is the difference between const and let?
   Check Your Understanding

   • const: Declares a variable with a constant value. This means that once you assign a value to a const variable, you cannot reassign it later in your code.

     const currentYear = new Date().getFullYear();

     The currentYear variable is assigned the computer's current year and cannot be reassigned later.

     You can enter lines of code into most AI systems and a breakdown of the purpose of function of each of the pieces of code will be explained.

   • let: Declares a variable that can be reassigned later in your code.

     let isLoggedIn = false;

2. Define the string data type.
   Check Your Understanding

   A string data type is a collection or sequence of characters treated as a single unit. Strings can include letters, numbers, symbols, and even spaces.

3. What is the data type of each of the following?

   Let your mouse rest on each of the bulleted values to reveal the answer.

   • "101"
   • 101
   • true
   • null
   • undefined

   Want to know more about any of these examples?
   Try plugging a prompt into an AI system like: "In JS, what is the null data type"

4. Which should you use to wrap strings, single quotes('), double quotes("), or backticks(`)?
   Check Your Understanding

   In JavaScript you can use single quotes ('), double quotes ("), or backticks (`) to define string literals.

   The most traditional way is to use single quotes.

   'This a string.'

   Double quotes are also commonly used. They can help you avoid escaping single quotes.

   "It's a beautiful day!"

   Since HTML attributes are often enclosed in double quotes, some developers prefer to use single quotes for JavaScript strings to visually distinguish them.

   Template literals use backticks and support multi-line strings naturally. They also allow embedding variables and JS expressions directly.

5. What is a template literal and why is it used to build strings?
   Check Your Understanding

   Template literals are string literals that allow for embedded expressions. They are enclosed by the backtick (`) character instead of single or double quotes. Template literals can contain placeholders, which are indicated by the dollar sign and curly braces (${expression}).

   let name = 'Alicia';
   let age = 25;
   let message2 = `My name is ${name} and I am ${age} years old.`;

6. What are code comments and how are they written in JavaScript?
   Check Your Understanding

   • Code commenting is a way to document your code for yourself and others who may read your code.
   • Code comments example - CodePen: ⚙️ JavaScript Code Comments

Activity Instructions

1. Open up this CodePen ⚙️ JavaScript Variables.

   You might consider creating your own free CodePen account to use to store snippets of code. CodePen provides a web-based code editor where you can write HTML, CSS, and JavaScript code and see the live results in real-time.

2. Read the instructions in the JavaScript panel in the CodePen window.
3. Ponder the given questions as you work through the code examples and review the output.

   Demonstration Video: ▶️ JavaScript Variables Activity [5:50 minutes]