Variables in JavaScript

Taught by Aria, Cason, and Ethan

What are variables in JavaScript?

Variables in JavaScript are used to store data that can be referenced and manipulated in a program. They act as containers for values and can hold different types of data, such as numbers, strings, objects, and more.

  • Variables are used to simplify code

The three types of keywords for a variable declaration in JavaScript are var, let, and const.

NOTE: Var is an outdated keyword in Javascript.

Creating variables

Variables can be created and assigned values by using the assignment operator “=”

Variable naming

  • Camel Case (camelCase): Commonly used in JavaScript, Java, and C#. Example: myVariableName

  • Pascal Case (PascalCase): Often used in C#, and for class names in many languages. Example: MyVariableName

  • Snake Case (snake_case): Frequently used in Python and Ruby. Example: my_variable_name

Example:

%%javascript

const userName = "Mario"; 
let favFood = "spaghetti";
const favSport = "kart racing";

console.log("Hello! You can call me " + userName); //This will print "Hello! You can call me Mario"
console.log("I LOVE eating " + favFood); //This will print "I LOVE eating Spaghetti"
console.log("My favorite sport is " + favSport); //This will print "My favorite sport is kart racing"

<IPython.core.display.Javascript object>

  • As you can see, because this is in javascript, camelCase is being used

  • Once a variable is created, it may be used throughout the entire program

Here it is in use, open your console to see the output!

Variable Types

Data Types in JavaScript:

  • Primitive Data Types:
    • Number
    • String
    • Boolean
    • Null
    • Undefined
    • Symbol
  • Non-primitive Data Types:
    • Object
    • Array
    • Function

Integer Variables in JavaScript

Integer variables in JavaScript are used to store whole numbers without any decimal points. They can be positive, negative, or zero. In JavaScript, integers are typically represented using the number data type.

Example:

%%js

const a = 25; //This is a number variable
let b = 10; //This is a number variable
let sum = a + b; //This is a number variable

console.log(a); //This will print 25
console.log(b); //This will print 10
console.log(sum); //This will print 35
console.log(a * b); //This will print 250

<IPython.core.display.Javascript object>

Strings

When phrases or sentences are assigned a variable name, they can be referenced later.

Example:

%%js


let question = "How much do you like this lesson?"; //This is a string variable
let answer = "a lot!"; //This is a string variable

console.log(question); //This will print "How much do you like this lesson?"
console.log(answer); //This will print "a lot!"

Popcorn Hack #1

Open the notebook with the Hacks in it, “2024-10-29-variables_popcorn_hax.ipynb”, and complete the first popcorn hack

Booleans

Booleans in JavaScript are a fundamental data type that can hold one of two values: true or false. They are often used in conditional statements to control the flow of a program.

Example:

%%js

const isCoder = true; //This is a boolean variable
const isDesigner = false; //This is a boolean variable

console.log(isCoder); //This will print true
console.log(isDesigner); //This will print false

<IPython.core.display.Javascript object>

Nulls

The null value signifies the deliberate absence of any object value. It is commonly used to indicate that a variable should not hold any value.

Example:

%%js 

let myBankBalance = null; //This is a null variable

console.log(myBankBalance); //This will print null 

<IPython.core.display.Javascript object>

Undefined

A variable in JavaScript that has been declared but not assigned a value will have the value undefined.

Example:

%%js

let myHeight; //This is an undefined variable

console.log(myHeight); //This will print undefined

<IPython.core.display.Javascript object>

Symbol

Symbols are unique and immutable data types primarily used as object property keys.

Example:

%%js 

let myRPG = Symbol("Pokemon"); //This is a symbol variable

console.log(myRPG); //This will print Symbol(Pokemon)

<IPython.core.display.Javascript object>

Popcorn Hack #2

Open the notebook with the Hacks in it, “2024-10-29-variables_popcorn_hax.ipynb”, and complete the second popcorn hack

Arrays and Objects

Arrays

Arrays are data structures that allow you to store multiple values in a single variable. Each value in an array is called an element, and arrays can hold values of any data type.

Objects

Objects are collections of key-value pairs, where each key (also known as a property) is associated with a value. Objects are a fundamental data type in JavaScript and are similar to dictionaries in Python. They are also referred to as JSON Objects.

Functions

a block of code designed to perform a particular task. Functions are fundamental building blocks in JavaScript and allow you to encapsulate code for reuse, modularity, and organization

Example:

%%js 
//This is an array variable
let characterPosition = ["1 fish", "2 fish", "red fish", "blue fish"]; //This is an array variable
 console.log(characterPosition); //This will print ["1 fish", "2 fish", "red fish", "blue fish"]

 //This is an object variable
 let character = 
    {name: "Mario", 
        age: 35, 
        height: 1.55, 
        weight: 70
    }; //This is an object variable
    console.log(character); //This will print {name: "Mario", age: 35, height: 1.55, weight: 70}

    //This is a function variable
    function request(song) {
        return "Now playing " + songName + " by " + artistName;
    }

let songName = "She"; //This is a string variable
let artistName = "Tyler the Creator and Frank Ocean"; //This is a string variable

    console.log(request("Despacito")); //This will print "Now playing Despacito by Luis Fonsi"

<IPython.core.display.Javascript object>