Introduction to Variables
A variable is like a container that holds data. In JavaScript, you use variables to store
information that you can use and manipulate later in your code.
Declaring Variables
JavaScript provides three keywords to declare variables:
1. var (old way, function-scoped)
2. let (new way, block-scoped)
3. const (new way, block-scoped, constant value)
Example of var
var name = "Winnie Will"; // String variable
var age = 30; // Number variable
var isStudent = true; // Boolean variable
• name is a string variable holding the value "Winnie Will".
• age is a number variable holding the value 30.
• isStudent is a boolean variable holding the value true.
Example of let
let city = "New York"; // String variable
let temperature = 25.5; // Number variable (can be integer or float)
let isRaining = false; // Boolean variable
• city is a string variable holding the value "New York".
• temperature is a number variable holding the value 25.5.
• isRaining is a boolean variable holding the value false.
1
Example of const
const PI = 3.14159; // Constant number variable
const country = "USA"; // Constant string variable
• PI is a constant number variable holding the value 3.14159. This value cannot be changed.
• country is a constant string variable holding the value "USA". This value cannot be changed.
Data Types in Variables
JavaScript variables can hold different types of data:
1. String - Text enclosed in quotes (" " or ' ').
2. Number - Numeric values.
3. Boolean - true or false.
4. Array - A list of values.
5. Object - A collection of key-value pairs.
Example with Different Data Types
let firstName = "Alice"; // String
let age = 25; // Number
let isMember = true; // Boolean
let hobbies = ["reading", "traveling", "swimming"]; // Array
let address = { // Object
street: "123 Main St",
city: "Wonderland",
zip: "12345"
};
2
Variable Scope
• Global Scope: Variables declared outside any function are in the global scope and can be
accessed anywhere in the code.
• Function Scope: Variables declared with var inside a function are scoped to that function.
• Block Scope: Variables declared with let or const inside a block (e.g., inside {}) are scoped
to that block.
Example of Variable Scope
var globalVar = "I am global";
function testVar() {
var functionScopedVar = "I am function scoped";
console.log(functionScopedVar); // Accessible here
}
if (true) {
let blockScopedVar = "I am block scoped";
console.log(blockScopedVar); // Accessible here
}
console.log(globalVar); // Accessible anywhere
//console.log(functionScopedVar); // Error: functionScopedVar is not defined
//console.log(blockScopedVar); // Error: blockScopedVar is not defined
• globalVar is accessible everywhere.
• functionScopedVar is only accessible within the testVar function.
• blockScopedVar is only accessible within the if block.
3
Reassigning Variables
Variables declared with var and let can be reassigned.
var city = "Paris";
city = "London"; // Reassigning
let temperature = 20;
temperature = 30; // Reassigning
Variables declared with const cannot be reassigned.
const country = "France";
// country = "Germany"; // Error: Assignment to constant variable
Functions
1. Basic Function
A basic function in JavaScript can be defined using the function keyword.
// Function to greet a user
function greet() {
console.log("Hello, world!");
}
// Calling the function
greet(); // Output: Hello, world!
4
2. Function with Parameters
Functions can take parameters, which allow you to pass data into them.
// Function to greet a user with a name
function greetUser(name) {
console.log("Hello, " + name + "!");
}
// Calling the function with a parameter
greetUser("Alice"); // Output: Hello, Alice!
greetUser("Bob"); // Output: Hello, Bob!
3. Function with Return Value
Functions can return values using the return keyword.
// Function to add two numbers
function add(a, b) {
return a + b;
}
// Calling the function and storing the return value
let sum = add(5, 3); // sum will be 8
console.log(sum); // Output: 8
4. Function with Default Parameters
You can set default values for parameters in case they are not provided when the function is
called.
// Function to greet a user with a default name
function greetUser(name = "stranger") {
console.log("Hello, " + name + "!");
}
5
// Calling the function with and without a parameter
greetUser("Alice"); // Output: Hello, Alice!
greetUser(); // Output: Hello, stranger!
5. Anonymous Function and Function Expression
Functions can also be defined without names and assigned to variables.
// Anonymous function assigned to a variable
let greet = function(name) {
console.log("Hello, " + name + "!");
};
// Calling the function
greet("Alice"); // Output: Hello, Alice!
6. Arrow Functions
ES6 (One of the key features introduced in ES6 is arrow functions) introduced arrow functions, which
offer a shorter syntax.
// Arrow function to add two numbers
let add = (a, b) => {
return a + b;
};
// Even shorter for single-expression functions
let addShort = (a, b) => a + b;
// Calling the functions
console.log(add(5, 3)); // Output: 8
console.log(addShort(5, 3)); // Output: 8
6
7. Function Scope
Variables defined inside a function are not accessible outside of it.
function testScope() {
let localVar = "I'm local!";
console.log(localVar); // Output: I'm local!
}
testScope();
// console.log(localVar); // Error: localVar is not defined
8. Practical Example: Simple Calculator
Combining functions to create a simple calculator.
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
function divide(a, b) {
if (b !== 0) {
return a / b;
} else {
7
return "Error: Division by zero";
}
}
// Using the calculator functions
console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5
console.log(multiply(10, 5)); // Output: 50
console.log(divide(10, 5)); // Output: 2
console.log(divide(10, 0)); // Output: Error: Division by zero
