INF-250: Web Design and Development — Variables and Data Types

Advising Signups

Click here to sign up!

Javascript Variables

A variable is a name your program uses to remember a value. You can think of it like a labeled box: the label is the variable name, and the value inside can be text, a number, true/false, or other data.

Variables are one of the core ideas in every programming language. They let you store information, reuse it later, and change it as your program runs.

Here's how you set a variable in JavaScript:

let score = 10;
let name = "John";

console.log(score); // this will output 10
console.log(name);  // this will output "John"

The text after // is a comment, which is ignored by JavaScript. Use it to make your code more readable.

// This is a single-line comment

let x = 5; // This comment is after code

/* This is a
long comment
that can span multiple lines */
	 

Giving variables new values

let score = 10;
let name = "John";

console.log(score); // this will output 10
console.log(name);  // this will output "John"

score = 15; // reassigning score to a new value
name = "Alice"; // reassigning name to a new value

console.log(score); // this will output 15
console.log(name);  // this will output "Alice"

Notice you do not need to type let again when reassigning a value. In fact if you do, it will cause an error.

You only need let when first declaring a variable.

Declaring a variable with const

When you declare a variable with const, its value cannot be reassigned. This is useful for values that should remain constant throughout your program.

const className = "INF-250";

console.log(className); // INF-250

className = "INF-270"; // this will throw an error

Older JavaScript and var

Before let and const, JavaScript used var to declare variables. However, var has some quirks that can lead to bugs, so it's generally recommended to use let and const in modern code.

If you see code examples using var, understand that they are using an older style of JavaScript.

Acceptable Variable Names

Variable names can include letters, numbers, _, and $.

Names cannot start with a number, cannot contain spaces or hyphens, and cannot use JavaScript reserved words like class or function.

// Valid variable names
let userName;
let total2;
let _privateValue;
let $price;

// Invalid variable names
// let 2total;      // cannot start with a number
// let class;       // reserved keyword
// let user-name;   // hyphen is treated as minus operator
// let first name;  // spaces are not allowed

Common Naming Conventions

Naming conventions keep code readable for teams. JavaScript projects most often use camelCase for variables and function names.

// camelCase (most common for JavaScript variables)
let firstName = "Ada";
let shoppingCartTotal = 125;

// snake_case (common in other languages and data formats)
let first_name = "Ada";

// PascalCase (usually for class/component names, not regular variables)
class StudentRecord {}

// UPPER_SNAKE_CASE (typically constants that should never change)
const MAX_ATTEMPTS = 3;

Quick Rules to Remember

Javascript Data Types

A data type describes what kind of value a variable holds. Common types are string, number, boolean, null, and undefined.

const courseName = "INF-250";      // string
const students = 24;               // number
const averageGrade = 92.5;         // number
const isOpen = true;               // boolean
const futureValue = null;          // null
let nextTopic;                     // undefined

console.log(typeof courseName);    // "string"
console.log(typeof students);      // "number"
console.log(typeof averageGrade);  // "number"
console.log(typeof isOpen);        // "boolean"
console.log(typeof nextTopic);     // "undefined"

Dynamic Typing in JavaScript

JavaScript is dynamically typed, which means the same variable can hold different kinds of values at different times.

In the example below, value starts as a number, then becomes a string, then a boolean.

let value = 42;
console.log(value, typeof value); // 42 "number"

value = "forty-two";
console.log(value, typeof value); // "forty-two" "string"

value = true;
console.log(value, typeof value); // true "boolean"

Variable Scope

Scope means where a variable can be used in your code.

A variable declared outside any function has global scope and can be accessed from almost anywhere.

A variable declared inside a function has function scope and can only be used inside that function.

let course = "INF-250"; // global scope

function showCourseInfo() {
	let room = "B101"; // function scope
	console.log(course); // works (can access global variable)
	console.log(room);   // works (inside the same function)
}

showCourseInfo();

console.log(course); // works
// console.log(room); // ReferenceError: room is not defined

Choose Your Own Adventure Game

Example: https://padams-msj.github.io/adventure-game/
Code: https://github.com/padams-msj/adventure-game

Copy the code from GitHub into a new project you create in VScode. Work with your group to customize the game and make it your own!