Fall 2024 - P2
Big Idea 3 | .1 | .2 | .3 | .4 | .5 | .6 | .7 | .8 | .10 |
Javascript Variables
Creating a lesson by using Javascript.
- JavaScript Variables and Data Types
- Naming convention in JavaScript
- Strings in JavaScript
- Numbers in JavaScript
- Booleans in JavaScript
- Undefined in JavaScript
- Null in JavaScript
- Symbol
- Arrays and Objects in JavaScript
JavaScript Variables and Data Types
In this notebook, we will explore different types of variables and data types used in JavaScript. JavaScript is a dynamically typed language, which means that variables do not need to be explicitly declared with a type. The type of the variable is determined by the value assigned to it.
Types of Variables in JavaScript:
var
: Declares a variable, optionally initializing it to a value.let
: Declares a block-scoped local variable, optionally initializing it to a value.const
: Declares a block-scoped, read-only constant.
Data Types in JavaScript:
- Primitive Data Types:
String
Number
Boolean
Null
Undefined
Symbol
- Non-primitive Data Types:
Object
Array
Function
Naming convention in JavaScript
The convention in JavaScript is different in Python on its use of camelCase for variables, functions, and mehods; verus Python usage of snake_case.
- camelCase is used for variables, functions, and methods.
- PascalCase is used for class names and constructor functions.
- UPPER_SNAKE_CASE is used for constants.
Strings in JavaScript
A string in JavaScript is used to represent textual data. Strings are created by enclosing characters within quotes (single or double quotes).
Example:
In this example, we will declare a string variable and print it to the console.
%%js
// 1. Strings
let name = "Arhaan";
console.log("String: ", name);
element.append("String: " + name + "<br>");
<IPython.core.display.Javascript object>
Numbers in JavaScript
JavaScript has only one type of number. Numbers can be written with or without decimals. They can be integers or floating-point numbers.
Example:
In this example, we will declare a number variable and print it to the console.
%%js
let age = 25;
let height = 5.9;
console.log(age); // Output: 25
console.log(height); // Output: 5.9
<IPython.core.display.Javascript object>
Booleans in JavaScript
A boolean represents one of two values: true
or false
. Booleans are typically used for logical operations.
Example:
In this example, we will declare a boolean variable and print it to the console.
%%js
let isStudent = true;
let isGraduate = false;
console.log(isStudent); // Output: true
console.log(isGraduate); // Output: false
<IPython.core.display.Javascript object>
Undefined in JavaScript
A variable in JavaScript that has been declared but not assigned a value has the value undefined
.
Example:
In this example, we will declare an undefined variable and print its value.
%%js
// 4. Undefined
let uninitialized;
console.log(uninitialized); // Output: undefined
<IPython.core.display.Javascript object>
Null in JavaScript
The null
value represents the intentional absence of any object value. It is often used to indicate that a variable should not contain any value.
Example:
In this example, we will declare a null variable and print its value.
%%js
let emptyValue = null;
console.log(emptyValue); // Output: null
<IPython.core.display.Javascript object>
Symbol
A unique and immutable data type used primarily as object property keys.
%%js
// Creating a unique Symbol
let uniqueId = Symbol('id');
// Outputting the Symbol
console.log(uniqueId); // Output: Symbol(id)
<IPython.core.display.Javascript object>
Arrays and Objects in JavaScript
Arrays:
Arrays are used to store multiple values in a single variable. Each value is called an element, and arrays can store values of any type.
Objects:
Objects are collections of key-value pairs where each key (also called a property) is associated with a value. Objects are the most important data type in JavaScript. They are also called JSON Objects and are similart to Python dictionaries.
Example:
In this example, we will declare an array and an object and print them to the console.
%%js
//Arrays
let colors = ["red", "green", "blue"];
console.log(colors); // Output: ['red', 'green', 'blue']
//objects
let person = {
name: "John Doe",
age: 25,
isStudent: true
};
console.log(person); // Output: { name: 'John Doe', age: 25, isStudent: true }
//fumction
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!
<IPython.core.display.Javascript object>