Fall 2024 - P5
Big Idea 3 | .1 | .2 | .3 | .4 | .5 | .6 | .7 | .8 | .10 |
3.1 JavaScript Variables
Learning how to use variables in JavaScript
What is a Variable
A variable is a named container that stores data or values that can change. We use variables in programming a lot!
In JavaScript, variable names must follow this criteria:
- Starts with a letter, underscore, or dollar sign
- Contains only letters, underscores, dollar signs, or numbers
For example, these are valid variable names:
Angry_bird
badP1GG13
_thing
$Another_thing
And these are invalid variable names:
1foo
b@r
!@#$%
"hello"
Naming Conventions
There are many naming conventions for variables in programming.
snake_case
In snake case, words in variables are all lowercase and are separated by a comma. These are some examples:
foo_bar
one_two
peppa_pig
camelCase
In camel case, the first word is lowercase, and the first letter of the remaining words are uppercase. These are some examples:
fooBar
oneTwo
peppaPig
PascalCase
In pascal case, The first letter of each word is uppercase. These are some examples:
FooBar
OneTwo
PeppaPig
In JavaScript, we mainly use camel case for variables.
Assigning Variables
To assign variables to values, we can use let
. For example:
let fooBar = "random string";
Data Types
Variables can be of several different data types. Each data type behaves differently.
These are the most common data types:
String
A string is a chain of text. You can use any letters, numbers, and special characters. We keep this text inside quotation marks.
let myName = "Aadi Bhat";
let random = "!! asoasd 1-20123";
Integer
An integer is… An integer! In other words, a whole number. We don’t use any decimals or commas to represent these.
let myAge = 15;
let bigNumber = 16777216;
Float
A float is a non-whole number. We use decimals to help us represent these.
let myExactAge = 15.2164;
let pie = 8.53973422267;
Boolean
A boolean is either true or false. Nothing in between!
let isHungry = true;
let isStanding = false;
Array
An array is a list of elements. These elements can be any data type, including another array! An array is not limited to having just one data type. We put these comma-separated elements inside brackets.
let friends = ["Aadi", "Aaditya", "Aditya", "Kanhay"];
let mix = ["abcde", 12345, 3.14, false, friends];
Object
Similar to an array, but the elements are stored in key-value pairs. Once again, these values can be any data type. We separate keys and values with a colon, and everything goes inside curly braces.
A “key-value pair” is like a label and its description. Imagine you have a list of labeled items, where each label (key) is matched with a specific piece of information (value). For example, if you have a list that says:
let person = {
name: "Aadi",
age: 15,
ipAddress: "256.256.256.256" // very good ip address
};
In this case, “Name” is the key, and “Aadi” is the value. Every key has a matching value, and you can use the key to find the right piece of information.
Logging
You can log outputs to the JavaScript console! This is similar to printing in other languages, like Python.
This is an example of logging a variable:
let favoriteClass = "CSP";
console.log(favoriteClass);
This will log CSP
to the console.
To see this on your website, you can do Ctrl+Shift+i
or Cmd+Shift+i
to inspect element, and then go to the Console
tab.
1. Which of these is NOT a valid variable name?
asd1231_2_3_4
$mon3ysss
2. Which of these creates an empty string variable called fred?
fred = "";let fred = "";
fred == "";
3. Which of these variables don't make sense?
An int named age with a value of 15.1A string named color with a value of "blue"
A boolean named isStanding with a value of false