Tutorial 2: Variables, Data Types, and Operators in JavaScript
Understanding Variables in JavaScript
What is a Variable?
A variable in JavaScript acts as a storage container for data that you can retrieve, modify, and use in your code. Think of it as a label for a specific value that you might need later in your program.
Types of Variable Declarations in JavaScript:
- var: Used in older versions of JavaScript. It is function-scoped and can lead to unexpected behavior in modern code.
- let: Block-scoped and used for variables that can be reassigned.
- const: Block-scoped but cannot be reassigned once declared.
Syntax:
let age = 25; // Declares a variable named 'age' and assigns it the value 25
const pi = 3.14; // Declares a constant variable named 'pi'
var name = "Alice"; // Declares a variable named 'name' using var
Example:
let greeting = "Hello, JavaScript!";
console.log(greeting); // Output: Hello, JavaScript!
Questions & Answers:
- Q: What is a variable in JavaScript?
- A: A variable is a container used to store data values that can be retrieved and manipulated.
- Q: What is the difference between let and const ?
A: let allows reassignment, while const does not.
Data Types in JavaScript
JavaScript has several built-in data types, categorized into two groups: primitive and non-primitive.
Primitive Data Types:
- String: Represents text data.
let name = "Alice";
- Number: Represents numerical data, including integers and decimals.
let age = 30;
let price = 19.99;
- Boolean: Represents true or false.
let isStudent = true;
- Undefined: A variable that has been declared but not assigned a value.
let city;
console.log(city); // Output: undefined
- Null: Represents an explicitly empty value.
let car = null;
Non-Primitive Data Types:
- Object: A collection of key-value pairs.
- Array: An ordered list of values.
Example of Data Types:
let isComplete = false; // Boolean
let score = 95.5; // Number
let student = "John"; // String
let task = null; // Null
Questions & Answers:
- Q: What are the two main categories of JavaScript data types?
- A: Primitive and non-primitive.
- Q: What value does an uninitialized variable have?
- A: undefined.
Operators in JavaScript
What Are Operators?
Operators are symbols or keywords used to perform operations on variables and values.
1. Arithmetic Operators:
Used for basic mathematical operations.
- + (Addition): Combines two values.
- - (Subtraction): Subtracts one value from another.
- * (Multiplication): Multiplies two values.
- / (Division): Divides one value by another.
- % (Modulus): Returns the remainder of a division.
Example:
let x = 10;
let y = 3;
console.log(x + y); // Output: 13
console.log(x % y); // Output: 1
Assignment Operators:
Used to assign values to variables.
- = (Assignment): Assigns a value to a variable.
- +=: Adds and assigns.
- -=: Subtracts and assigns.
Example:
Assignment Operators:
Used to assign values to variables.
- =(Assignment): Assigns a value to a variable.
- +=: Adds and assigns.
- -=: Subtracts and assigns.
Example:
let z = 5;
z += 3; // Equivalent to z = z + 3
console.log(z); // Output: 8
Comparison Operators:
Used to compare two values.
- ==: Equal to.
- ===: Strict equal (checks value and type).
- !=: Not equal.
- <, >, <=, >=: Less than, greater than, etc.
Example:
console.log(5 == "5"); // Output: true (value equality)
console.log(5 === "5"); // Output: false (type mismatch)
Logical Operators:
Used to combine multiple conditions.
- && (AND): Returns true if both conditions are true.
- | | (OR): Returns true if at least one condition is true.
- ! (NOT): Negates a condition.
Example:
let isAdult = true;
let hasID = false;
console.log(isAdult && hasID); // Output: false
console.log(isAdult || hasID); // Output: true
Questions & Answers:
- Q: What does the === operator check for?
- A: It checks for strict equality, including both value and type.
- Q: How does the && operator work?
A: It returns true only if both conditions are true.
Practice Challenge: Simple Calculator
Objective:
Build a basic calculator that performs addition, subtraction, multiplication, and division.
Code Example:
function calculator(num1, num2) {
console.log("Addition: " + (num1 + num2));
console.log("Subtraction: " + (num1 - num2));
console.log("Multiplication: " + (num1 * num2));
console.log("Division: " + (num1 / num2));
}
calculator(10, 5);
Output:
Addition: 15
Subtraction: 5
Multiplication: 50
Division: 2
Practice Exercise
Task: Write a program that checks if a number is positive, negative, or zero using comparison operators and a console.log() statement.
Solution:
let number = -5;
if (number > 0) {
console.log("The number is positive.");
} else if (number < 0) {
console.log("The number is negative.");
} else {
console.log("The number is zero.");
}
Questions for Practice:
- Q: How do you check if a number is greater than 10?
- A: Use if (number > 10) { }.
- Q: What operator would you use to find the remainder of a division?
- A: The % (modulus) operator.
Conclusion
Recap:
- Variables store data, and let and const are modern ways to declare variables.
- JavaScript includes several data types such as strings, numbers, booleans, undefined, and null.
- Operators help perform actions on values, such as arithmetic, assignment, and comparison.
Next Steps:
- In the next tutorial, we’ll explore functions and control flow, which will allow you to create more dynamic and flexible programs.
Questions & Answers for Recap:
- Q: What is the purpose of variables in JavaScript?
- A: Variables store data that can be used and manipulated in a program.
- Q: What is the difference between == and === ?
- A: == checks for value equality, while === checks for both value and type equality.