Code Example
var name = "John";
console.log(name);
let age = 25;
console.log(age);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
var and let are used to create variables in JavaScript.- A variable is like a labeled box where we store information, such as a name or age.
var works inside the whole function where it is created.let only works inside the block with curly braces { } where it is written.- Both examples use
console.log() to show the value on the screen.
In programming, scope refers to the range or limit where a variable can be accessed or used. It determines where in the code a variable is visible and available. Function scope means a variable is accessible anywhere inside the function where it was declared. Block scope means a variable is only accessible inside a specific block of code, such as within curly braces used in loops or conditional statements.
- Scope in programming is the range or limit where a variable can be accessed.
- It controls where in the code a variable is visible and usable.
- Function-scoped variables are accessible anywhere inside the function where they are declared.
- Block-scoped variables are only accessible inside the specific block surrounded by curly braces { }.
- Understanding scope helps prevent errors and keeps variables organized in a program.
In JavaScript, var, let, and const are used to declare variables, but they behave differently. The var keyword is function-scoped, meaning it is accessible throughout the function in which it is declared, and it can also be redeclared. The let keyword is block-scoped, so it only exists within the block (such as inside an if statement or loop) where it is defined. Unlike var, let cannot be redeclared in the same scope, but it can be reassigned. The const keyword is also block-scoped, but it cannot be reassigned after its initial value is set. Because of these differences, modern JavaScript developers typically prefer let and const over var for clearer and more predictable code behavior.
var, let, and const are used to declare variables in JavaScript.var is function-scoped and can be redeclared and reassigned.let is block-scoped and can be reassigned but not redeclared in the same scope.const is block-scoped and cannot be reassigned after it is declared.- Modern JavaScript commonly uses
let and const instead of var for safer and clearer code.
Code Example
const country = "USA";
console.log(country);
let price = 19.99;
console.log(price);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
const is used to create a variable that cannot be changed later.- In this example,
country will always stay "USA" and cannot be given a new value. let is used for values that are allowed to change, like price.- Both
const and let only work inside the block with curly braces { } where they are created. console.log() shows the value of each variable on the screen.
Code Example
let greeting = "Hello, world!";
console.log(greeting);
let output = "The garage door is open";
console.log(output);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
- Use
let when you want to give a nickname to a piece of information. - It is like putting a label on a box so you can find your stuff easily.
- You can use the name you picked to show your message on the computer screen.
- If you want to change the message later,
let allows you to swap it for something new. - The computer reads the name and remembers exactly what you stored inside that box.
- Always put your words inside quotation marks so the computer knows it is a message.
- What is camel case?
- Camel case refers to how variables are named in JavaScript.
- JavaScript was made to look like an older language called Java, which already used camelCase.
- In the early days of the internet, the creators wanted JavaScript to feel familiar to other coders.
- Since we can't use spaces in names, the big letters help our eyes see where a new word begins.
- It is like a "pinky promise" between coders to use the same style so everyone can read the code easily.
- Most of the built-in tools in JavaScript already use camelCase, so it's best to follow along.
- Using the "hump" style makes your code look like it was written by a pro JavaScript developer.
- In camel case, words are capitalized starting with the second word.
- Camel case examples look like
myPetCat, playerScore, and isGameStarted. - JavaScript usually uses camel case for variable names.
- Snake case is a common alternative that uses underscores between words instead, like
my_pet_cat or player_score. - Python usually uses snake case for variable names.
- Pascal case is another style where every single word starts with a capital, like
MyPetCat. - Kebab case uses small dashes to connect words like a snack on a stick, like
my-pet-cat. - We use these different styles because the computer is not allowed to have empty spaces inside a name.
- Even though there are many choices, JavaScript usually sticks to the "humps" style to keep things neat.
Code Example
let isLoggedIn = true;
console.log(isLoggedIn);
let ovenIsOn = false;
console.log(ovenIsOn);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
let is used to create a variable that can change later if needed.- In this example, the variables store true or false values, which are called booleans.
- Unlike
var, let only works inside the block with curly braces { } where it is created. - Unlike
const, let allows you to give the variable a new value later.
Code Example
let colors = ["red", "green", "blue"];
console.log(colors);
let scores = [90, 85, 78, 92];
console.log(scores);
let mixedData = ["Alice", 25, true, null];
console.log(mixedData);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
- An array is like a list that can hold many values inside square brackets [ ].
- Arrays can store words, numbers, or even a mix of different types like text, numbers, true/false, or null.
- In the example,
colors stores words, scores stores numbers, and mixedData stores different types together. - We use
let to create these arrays because their values can change later if needed. - Unlike
var, let only works inside the block with curly braces { }, and unlike const, it allows changes.
Code Example
let person = {
firstName: "Alice",
lastName: "Smith",
age: 30
};
console.log(person);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
- An object is like a storage folder that holds different facts about one thing, like a person.
- It works just like a Python dictionary, where you give a label to every bit of information you save.
- You can mix different things inside, like using words for a name and numbers for an age.
- We use curly braces
{ } to wrap the info together so the computer knows they belong in one group. - Using
let to name your object means you can update the information inside the folder later on. - It is a handy way to keep your code organized by keeping related details together in one spot.
- The colon is like an "is" (FirstName is Alice)
- The comma is just there to separate the items and rows
Code Example
let product = {
name: "Laptop",
price: 999.99,
inStock: true,
brand: "TechPro"
};
console.log(product);
let student = {
id: 101,
name: "Michael",
grades: [85, 92, 78],
graduated: false
};
console.log(student);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
- An object in JavaScript stores information using keys and values inside curly braces { }.
- It is very similar to a Python dictionary because both use key and value pairs to organize data.
- An object can hold different types of data, like text, numbers, true/false values, or even an array.
- In the example,
product and student each store several related pieces of information together. - We use
let to create these objects because their values can be changed later if needed. - Unlike
var, let only works inside the block with curly braces { }, and unlike const, it allows changes. - The colon is like an "is" (FirstName is Alice)
- The comma is just there to separate the items and rows
Code Example
let score;
console.log(score);
let username;
console.log(username);
var city;
console.log(city);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
- You can create a named box without putting any information inside it right away.
- When a box is empty, the computer gives it a special name called "undefined."
- Both
let and var allow you to make these empty boxes so you can use them later. - If you ask the computer to show you what is in an empty box, it will just say it is "undefined."
- You cannot leave a
const box empty; it always needs a value the moment you create it.
Code Example
let count = 5;
console.log(count);
count = 10;
console.log(count);
var response = "Yes";
console.log(response);
response = "Maybe";
console.log(response);
Instructions
▲ ← Click the triangle to hide or reveal instructions.- The code editor is below.
- The left side of the code editor is where you type your input code.
- The right side of the code editor is where you see the output of your code.
- Practice by typing the code example above, in the left side of the code editor below.
- Then click the "Run Code" button, to run the code.
- You will see the output of your code in the output section.
JavaScript Code Editor
Task Incomplete
Click "Run Code" to see the output here
var was the first way to create variables in JavaScript many years ago.- Later,
let and const were added to make coding safer and easier to understand. - Today, most developers prefer using
let and const instead of var. - Both
let and var allow you to change the value later, like changing count from 5 to 10. - You can also change a
var value, like changing response from "Yes" to "Maybe". const is different because once you give it a value, you cannot change it later.- This helps prevent mistakes when you have a value that should always stay the same.
- It is a good habit to use
const when the value should not change, and let when it might change.