3. Thur - OOP & ES6 (1)

CSPrep Overview

Day 3

Focus on the "new" keyword & classes

Topics Covered:

• Functions

• Arguments vs. Parameters

• Arguments Object

• Spread Syntax

• Rest Parameters

Review/Q&A

• Review Units 1 and 2 challenges to reinforce understanding of foundational concepts.

• Engage in Pair Programming to enhance collaborative problem-solving skills.

The "new" Keyword

Purpose:

The "new" keyword in JavaScript plays a crucial role in object-oriented programming by automating the creation of new objects. When invoked, it performs the following operations:

• Create an Object: It initializes a new, empty object.

• Establish the [[Prototype]] Link: This links the new object to the prototype of the constructor function, allowing it to inherit properties and methods.

• Return the Created Object: Finally, it returns the newly created object, making it accessible to the code that invoked the constructor.

Functions in JavaScript

Functions in JavaScript serve a dual-purpose: they function both as callable blocks of code and as objects themselves. As objects, they can have properties and methods assigned to them.

Example Code:

function multiplyByTwo(num) {
    return num * 2;
}
multiplyByTwo.stored = 5;
console.log(multiplyByTwo(3)); // Output: 6
console.log(multiplyByTwo.stored); // Output: 5
console.log(multiplyByTwo.prototype);

In this example, multiplyByTwo is a function that takes a number, doubles it, and demonstrates how functions can store additional information externally.

Creating Users with Constructor Functions

User Creator Function

The constructor function is a common pattern for creating user objects in JavaScript.

Example:

function userCreator(name, score) {
    this.name = name;
    this.score = score;
}
userCreator.prototype.increment = function() { this.score++; };
userCreator.prototype.login = function() { console.log('logged in'); };
const user1 = new userCreator('Rajeeb', 5);
user1.increment(); // Incrementing the user’s score

In this example, userCreator defines the properties of name and score, and provides methods for functionality related to user objects, highlighting principles of encapsulation and reusability.

Class Syntax in JavaScript

Class Definition:

Class syntax is a modern way to define constructor functions and create objects in JavaScript. It simplifies the process of defining classes and their methods.

Example:

class UserCreator {
    constructor(name, score) {
        this.name = name;
        this.score = score;
    }
    increment() {
        this.score++;
    }
    login() {
        console.log('logged in');
    }
}
const user1 = new UserCreator('Edward', 5);
user1.increment(); // Incrementing the score

This example elucidates the elegance and clarity of class syntax in defining user properties and methods, showing how it encapsulates related functionalities neatly.

Function Parameters and Arguments

Definitions:

• Parameters: Variables listed in a function definition that act as placeholders for the values that will be passed.

• Arguments: Actual values provided to the function when it is invoked, which are mapped to the corresponding parameters.

Mismatched Arguments and Parameters:

Functions can be invoked with a different number of arguments than parameters defined; JavaScript does not enforce a strict match between them.

Handling Unknown Number of Arguments

Arguments Object

The arguments object is an array-like entity that contains the values of the arguments passed to a function. It offers the following characteristics:

• Not a true array but can still be accessed using indices (e.g., arguments[0], arguments[1], etc.)

• It possesses a length property to determine how many arguments were supplied.

• Available only in traditional function expressions (non-arrow functions).

Example:

def sumNums() {
    console.log(arguments);
}
sumNums(1, 2); // Output: Arguments object with 2 properties
sumNums(1, 2, 3);

This illustrates how we can manage functions that need to accept varying numbers of arguments seamlessly.

ES6+ Syntax Features

Spread Syntax

The spread syntax uses three dots (...) to extract and expand iterable elements (like arrays or objects) in various contexts, making it a powerful tool in JavaScript.

Example with Coupons:

const coupons = {"4THO JULY": 2, "NEWCUSTOMER": 5, "BESTFRIEND": 7};
function getMax() {
    return Math.max(...Object.values(coupons));
}

Here, Math.max() is leveraged with spread syntax to find the maximum value in the coupons object efficiently.

Rest Parameters

Rest parameters enable the representation of an indefinite number of arguments as an array by prefacing the final parameter in a function signature with three dots (...). This promotes more flexible function definitions.

CS Prep Office Hour

Event Details

The optional office hour held on Thursdays is a dedicated time for students to seek additional guidance and clarification on course materials.

• Session Timings Based on Time Zones:

  • Eastern Time Zone cohorts: 12:00 PM ET / 9:00 AM PT

  • Pacific Time Zone cohorts: 12:00 PM PT / 3:00 PM ET

Led by the Program Coordinator, the session focuses on:

• The Codesmith Immersive admissions process

• Preparation strategies and effective study tips

• Encouraging students to bring non-technical questions to discuss.

Review / Q&A / Pairing

Engaging with peers through collaborative learning opportunities and problem-solving workshops fosters a deeper understanding of the material and builds a supportive learning community.