Core JavaScript Concepts
Objective: Build a foundational understanding of variables, data types,
operators, and control flow to prepare for more advanced JavaScript concepts.
Designed for interns with no prior programming experience.
Variables and Data Types
Objective: Teach the purpose of variables and how they store and manage
different types of data.
a. Variables: var, let, and const
● What are variables?
o Variables are containers for storing data that can be used and
manipulated in a program.
● Three ways to declare variables in JavaScript:
o var: The older way to declare variables. Has global or function
scope, and prone to errors due to hoisting.
o let: Introduced in ES6, allows block-level scoping (only accessible
within the block where defined).
o const: Also introduced in ES6, used for variables that shouldn’t
change (constant values).
Example:
javascript
var x = 5; // Variable declared using var
let y = 10; // Variable declared using let
const z = 15; // Variable declared using const
console.log(x, y, z); // Outputs: 5 10 15
b. Data Types
● What are data types?
o Data types define the kind of data a variable can hold.
Primary Data Types:
1. String: Textual data, enclosed in quotes (' ', " ", or `).
javascript
let name = "Alice";
console.log(name); // Outputs: Alice
2. Number: Numeric values (integers or decimals).
javascript
let age = 25;
console.log(age); // Outputs: 25
3. Boolean: Logical values, either true or false.
javascript
let isStudent = true;
console.log(isStudent); // Outputs: true
4. Object: A collection of key-value pairs.
javascript
let person = { name: "Bob", age: 30 };
console.log(person.name); // Outputs: Bob
5. Array: A list-like structure for storing multiple values.
javascript
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // Outputs: banana
c. Demo: Declaring Variables and Logging Them to the Console
Scenario: Declare variables of different data types and print their values.
javascript
let firstName = "John"; // String
let age = 20; // Number
let isEnrolled = true; // Boolean
let student = { name: "John", grade: "A" }; // Object
let subjects = ["Math", "Science", "History"]; // Array
console.log(firstName, age, isEnrolled, student, subjects);
// Outputs: John 20 true { name: "John", grade: "A" } ["Math", "Science",
"History"]
Basic Operators
Objective: Introduce operators used for calculations, comparisons, and logical
decisions.
a. Arithmetic Operators
Used for basic calculations.
● + (Addition), - (Subtraction), * (Multiplication), / (Division), %
(Remainder).
Example:
javascript
let a = 10, b = 3;
console.log(a + b); // Outputs: 13
console.log(a % b); // Outputs: 1 (remainder)
b. Comparison Operators
Used to compare values.
● == (equal to), === (strict equal to), != (not equal), <, >, <=, >=.
Example:
javascript
console.log(5 == "5"); // Outputs: true (loose comparison)
console.log(5 === "5"); // Outputs: false (strict comparison)
c. Logical Operators
Used for combining conditions.
● && (AND), || (OR), ! (NOT).
Example:
javascript
let isAdult = true, isStudent = false;
console.log(isAdult && isStudent); // Outputs: false
console.log(isAdult || isStudent); // Outputs: true
console.log(!isStudent); // Outputs: true
d. Demo: Simple Calculations and Logical Checks
Scenario: Check if a number is even and if it lies within a range.
javascript
let num = 12;
console.log(num % 2 === 0 && num > 10 && num < 20); //
Outputs: true
Control Flow
Objective: Understand decision-making in programs using conditional
statements.
a. If-Else Statements
● Used for decision-making based on conditions.
Example:
javascript
let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 75) {
console.log("Grade: B");
} else {
console.log("Grade: C");
}
b. Switch-Case for Multiple Conditions
● Used when there are many specific cases to handle.
Example:
javascript
let day = 3;
switch (day) {
case 1: console.log("Monday"); break;
case 2: console.log("Tuesday"); break;
case 3: console.log("Wednesday"); break;
default: console.log("Invalid day");
}
c. Demo: Writing a Simple Program Using If-Else
Scenario: Categorize a person’s age group.
javascript
let age = 25;
if (age < 13) {
console.log("Child");
} else if (age >= 13 && age < 20) {
console.log("Teenager");
} else {
console.log("Adult");
}
Looping Structures
Objective: Introduce loops for executing repetitive tasks.
a. Loop Types
1. For Loop: Runs for a specific number of times.
javascript
for (let i = 0; i < 5; i++) {
console.log(i); // Outputs: 0, 1, 2, 3, 4
}
2. While Loop: Runs as long as a condition is true.
javascript
let i = 0;
while (i < 5) {
console.log(i); // Outputs: 0, 1, 2, 3, 4
i++;
}
3. For…Of Loop: Iterates over arrays.
javascript
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
console.log(fruit); // Outputs: apple, banana, cherry
}
4. For…In Loop: Iterates over object properties.
javascript
let person = { name: "Alice", age: 25 };
for (let key in person) {
console.log(key, person[key]); // Outputs: name Alice, age 25
}
b. Demo: Loop Through an Array Using For…Of
Scenario: Print all elements in an array.
javascript
let colors = ["red", "blue", "green"];
for (let color of colors) {
console.log(color); // Outputs: red, blue, green
}