JavaScript Syntax - Part 2

Md Touhidul Islam

What You'll Learn

🎯 Objects

Creating and manipulating data structures

📦 Arrays

forEach, map, filter, every, some

⚡ ES6 Features

arrow functions, classes

JavaScript Objects

Key-Value Pairs

Objects store data as key-value pairs
Create empty objects: {}
Or with initial properties (literals)

PLAYGROUND: Create Objects

// Create an empty object
let obj = {};
console.log("Empty object:", obj);

// Create object with properties
let student = {
    name: "Sam",
    age: 20,
    grade: 99.8,
    isEnrolled: true
};

console.log("Student object:", student);
console.log("Student name:", student.name);
console.log("Student age:", student.age);

// Try creating your own object!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Objects - Manipulate Properties

Access Properties

Dot syntax: obj.key
Bracket syntax: obj["key"]

Add/Update Properties

Use either syntax to add or update

Delete Properties

Use delete keyword

EXPERIMENT: Object Operations

let student = {
    name: "Sam",
    age: 20,
    grade: 99.8
};

// Access properties
console.log("Access with dot:", student.name);
console.log("Access with bracket:", student["age"]);

// Add new property
student.gender = "female";
student["major"] = "Computer Science";
console.log("After adding:", student);

// Update property
student.age = 21;
student["grade"] = 98.5;
console.log("After updating:", student);

// Delete property
delete student.grade;
console.log("After deleting grade:", student);

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

JavaScript Arrays

Array Basics

Arrays are ordered collections of values
Create with square brackets: []
Arrays are a type of object
Elements can be different data types
Access elements by index (starting at 0)
Get length with arr.length

EXPLORE: Array Basics

// Empty array
let arr1 = [];
console.log("Empty array:", arr1);

// Array with mixed types
let arr2 = [100, "hello world", true, {name: "Sam"}];
console.log("Mixed array:", arr2);

// Access elements (zero-indexed!)
console.log("First element:", arr2[0]);
console.log("Second element:", arr2[1]);

// Array length
let arr3 = [100, 200, 300];
console.log("Array:", arr3);
console.log("Length:", arr3.length);

// Update element
arr3[1] = "new value";
console.log("After update:", arr3);

// Change length
arr3.length = 5;
console.log("After length change:", arr3);

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Array Methods - Part 1

Common Array Methods

push() - Add to end, return new length
pop() - Remove from end, return removed element
unshift() - Add to beginning, return new length
shift() - Remove from beginning, return removed element

TRY IT: Array Methods

let fruits = ["apple", "banana"];
console.log("Original:", fruits);

// push - add to end
let newLength = fruits.push("orange");
console.log("After push:", fruits);
console.log("New length:", newLength);

// pop - remove from end
let removed = fruits.pop();
console.log("After pop:", fruits);
console.log("Removed:", removed);

// unshift - add to beginning
fruits.unshift("mango");
console.log("After unshift:", fruits);

// shift - remove from beginning
removed = fruits.shift();
console.log("After shift:", fruits);
console.log("Removed:", removed);

// Try adding more methods!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Array Method: forEach()

forEach() - Iterate through each element and execute a function

Does NOT return anything
Parameters: element value, element index, entire array (all optional)

EXPERIMENT: forEach()

let arr = [100, 200, 300, 400, 500];
console.log("Original array:", arr);

// forEach with just element value
console.log("\nUsing element only:");
arr.forEach(function(item) {
    console.log(item);
});

// forEach with element and index
console.log("\nUsing element and index:");
arr.forEach(function(item, index) {
    console.log(`Index ${index}: ${item}`);
});

// forEach with all parameters
console.log("\nUsing all parameters:");
arr.forEach(function(item, index, array) {
    console.log(`Item: ${item}, Index: ${index}, Array length: ${array.length}`);
});

// Try your own forEach loops!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Array Method: map()

map() - Create a new array by transforming each element

RETURNS a new array
Must use return keyword
Original array is NOT modified

TRANSFORM: map()

let arr = [100, 200, 300, 400, 500];
console.log("Original array:", arr);

// Multiply each element by 10
let result = arr.map(function(item) {
    return item * 10;
});
console.log("Multiplied by 10:", result);
console.log("Original unchanged:", arr);

// Create array of squared values
let squares = arr.map(function(item) {
    return item * item;
});
console.log("Squared values:", squares);

// With index parameter
let withIndex = arr.map(function(item, index) {
    return `${index}: ${item}`;
});
console.log("With index:", withIndex);

// Try your own transformations!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Array Method: filter()

filter() - Create a new array with elements that pass a condition

RETURNS a new array with filtered elements
Must use return with a conditional statement
Only elements that return true are included

FILTER: Find Elements

let arr = [100, 200, 300, 400, 500];
console.log("Original array:", arr);

// Filter values greater than 200
let filterResult = arr.filter(function(item) {
    return item > 200;
});
console.log("Values > 200:", filterResult);

// Filter even numbers
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evens = numbers.filter(function(item) {
    return item % 2 === 0;
});
console.log("Even numbers:", evens);

// Filter by index (get odd-indexed elements)
let oddIndexed = arr.filter(function(item, index) {
    return index % 2 === 1;
});
console.log("Odd-indexed elements:", oddIndexed);

// Try filtering with your own conditions!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Array Method: every()

every() - Check if ALL elements satisfy a condition

RETURNS true only if ALL elements pass
Returns false if ANY element fails
Must use return with a conditional statement

CHECK: Test All Elements

let arr = [100, 200, 300, 400, 500];
console.log("Array:", arr);

// Check if all elements >= 100
let everyResult = arr.every(function(item) {
    return item >= 100;
});
console.log("All >= 100?", everyResult);  // true

// Check if all elements >= 200
let result2 = arr.every(function(item) {
    return item >= 200;
});
console.log("All >= 200?", result2);  // false (100 fails)

// Test with all positive numbers
let mixed = [-5, 10, 20, 30];
let allPositive = mixed.every(function(item) {
    return item > 0;
});
console.log("All positive?", allPositive);  // false

// Try your own every() checks!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Array Method: some()

some() - Check if AT LEAST ONE element satisfies a condition

RETURNS true if ANY element passes
Returns false only if ALL elements fail
Must use return with a conditional statement

CHECK: Test Any Element

let arr = [100, 200, 300, 400, 500];
console.log("Array:", arr);

// Check if any element > 500
let someResult = arr.some(function(item) {
    return item > 500;
});
console.log("Any > 500?", someResult);  // false

// Check if any element > 400
let result2 = arr.some(function(item) {
    return item > 400;
});
console.log("Any > 400?", result2);  // true (500 passes)

// Test for even numbers
let odds = [1, 3, 5, 7, 9];
let hasEven = odds.some(function(item) {
    return item % 2 === 0;
});
console.log("Has even number?", hasEven);  // false

// Try your own some() checks!

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

ES6 - Classes

ES6 introduced class syntax for object-oriented programming

Create blueprints for objects
Use extends for inheritance
Much cleaner than prototype-based approach

BUILD: Create Classes

// Define a class
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    eat() {
        console.log(`${this.name} is eating`);
    }
}

// Extend a class (inheritance)
class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // Call parent constructor
        this.breed = breed;
    }
    
    bark() {
        console.log(`${this.name} the ${this.breed} is barking`);
    }
}

// Create instance
const myDog = new Dog("Buddy", "Golden Retriever");
myDog.eat();   // Inherited from Animal
myDog.bark();  // Dog's own method

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

ES6 - Arrow Functions

Shorter Function Syntax

Remove function keyword, use =>
Single expression: can omit {} and return
Do not have their own this

TRANSFORM: Arrow Functions

// Regular function
function add(v1, v2) {
    return v1 + v2;
}
console.log("Regular:", add(5, 3));

// Arrow function - full syntax
const addArrow = (v1, v2) => {
    return v1 + v2;
};
console.log("Arrow (full):", addArrow(5, 3));

// Arrow function - short syntax (implicit return)
const addShort = (v1, v2) => v1 + v2;
console.log("Arrow (short):", addShort(5, 3));

// Single parameter (parentheses optional - but recommended)
const square = (num) => num * num;
console.log("Square of 5:", square(5));

// With array methods
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled);

let evens = numbers.filter(n => n % 2 === 0);
console.log("Evens:", evens);

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Practice Problem 1: Arrow Function Converter

🎯 Your Challenge:
Convert traditional functions to arrow functions and use them with array methods.

Instructions:

Create an array of numbers: [5, 10, 15, 20, 25, 30]
Use map() with an arrow function to triple each number
Use filter() with an arrow function to keep only numbers > 15
Use forEach() with an arrow function to log each result

💡 Example Output:
Tripled: [15, 30, 45, 60, 75, 90]
Filtered: [20, 25, 30]
20
25
30

YOUR CODE: Arrow Functions Practice

// Write your solution here

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Practice Problem 2: Object & Array Manipulation

🎯 Your Challenge:
Create an array of student objects and use array methods to manipulate the data.

Instructions:

Create an array of at least 3 student objects (each with name, age, and grade)
Use filter() to find students with grade above 80
Use map() to create an array of just the student names
Use every() to check if all students are passing (grade >= 60)

💡 Example Output:
High achievers: [{name: "Alice", ...}]
Names: ["Alice", "Bob", "Carol"]
All passing: true

YOUR CODE: Work with Student Data

// Write your solution here

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Practice Problem 3: ES6 Class Challenge

🎯 Your Challenge:
Create a class hierarchy for a simple game with characters.

Instructions:

Create a Character class with name and health properties
Add a describe() method that logs character info
Create a Warrior class that extends Character
Add a weapon property and an attack() method to Warrior

💡 Hint: Use super() in the child class constructor to call the parent constructor.

YOUR CODE: Build Character Classes

// Write your solution here

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output: