Sprint 8 Flashcards
Advanced OOP and Project Building with Webpack
What is “Destructuring Assignment Syntax” in OOP?
Google AI Overview
In Object-Oriented Programming (OOP), “Destructuring Assignment Syntax” is a feature, primarily used in JavaScript, that allows you to unpack properties from objects or elements from arrays into distinct variables with a concise syntax.
Here’s a breakdown:
What it does:
Destructuring enables you to extract values from objects or arrays and assign them to variables in a single, readable statement.
How it works:
Object Destructuring: You use curly braces {} to specify which properties to extract from an object.
ex.
JavaScript
const person = { name: 'Alice', age: 30 };
const { name, age } = person; // Destructuring
console.log(name, age); // Output: Alice 30 Array Destructuring: You use square brackets [] to specify which elements to extract from an array. JavaScript
const numbers = [10, 20, 30];
const [first, second, third] = numbers; // Destructuring
console.log(first, second, third); // Output: 10 20 30
Benefits:
Readability: Destructuring makes code easier to read and understand, especially when dealing with complex objects or arrays.
Conciseness: It reduces the amount of code needed to extract values, leading to more compact and efficient code.
Flexibility: You can extract only the properties or elements you need, and even rename them during the process.
Examples:
Extracting nested properties.
ex.
JavaScript
const address = {
street: {
name: 'Main St',
number: 123
}
};
const { street: { name, number } } = address;
console.log(name, number); // Output: Main St 123
Renaming variables.
ex.
JavaScript
const product = { name: 'Laptop', price: 1200 };
const { name: productName, price: productPrice } = product;
console.log(productName, productPrice); // Output: Laptop 1200
default values.
ex.
JavaScript
const { city = 'Unknown' } = { country: 'USA' };
console.log(city); // Output: Unknown
What is Object Destructuring in OOP?
Google AI Overview
In Object-Oriented Programming (OOP), object destructuring is a concise way to extract properties from an object and assign them to distinct variables, making code cleaner and easier to read.
Here’s a breakdown:
What it is: Object destructuring is a feature in JavaScript (and some other languages) that allows you to unpack properties from an object into variables.
How it works: You use a syntax with curly braces {} on the left side of an assignment to specify which properties you want to extract.
Example:
JavaScript
const person = {
firstName: "Alice",
lastName: "Smith",
age: 30
};
// Using destructuring
const { firstName, lastName } = person;
// Now firstName is "Alice" and lastName is "Smith"
console.log(firstName); // Output: Alice
console.log(lastName); // Output: Smith
Benefits:
Readability: Destructuring makes code easier to understand, especially when working with objects that have many properties.
Conciseness: You can extract multiple properties with a single line of code instead of multiple assignments.
Flexibility: You can rename the extracted properties during the destructuring process.
Default values: You can provide default values for properties that might be missing in the object.
Nested Objects:
You can also destructure nested objects by matching the structure of the object on the left-hand side of the assignment.
JavaScript
const address = {
street: "123 Main St",
city: {
name: "Anytown",
state: "CA"
}
};
const { city: { name, state } } = address;
console.log(name); // Output: Anytown
console.log(state); // Output: CA
Spread Syntax and Rest Parameters: Destructuring is often used in conjunction with the spread syntax (…) and rest parameters.
Spread Syntax: Copies the properties of an object into a new object.
Rest Parameters: Collects the remaining properties into a new object.
What is Array Destructuring in OOP?
In object-oriented programming (OOP), array destructuring, a feature of JavaScript (ES6 and later), allows you to extract and assign values from an array into distinct variables in a concise way, improving code readability and efficiency.
Here’s a breakdown:
What it is: Array destructuring is a syntax that unpacks values from an array and assigns them to variables.
How it works: You use square brackets [] on the left-hand side of an assignment to match the array elements to variables.
Example:
JavaScript
const myArray = [10, 20, 30]; const [first, second, third] = myArray; // Destructuring console.log(first); // Output: 10 console.log(second); // Output: 20 console.log(third); // Output: 30
Benefits:
Readability: Makes code easier to understand by directly assigning array elements to meaningful variable names.
Conciseness: Reduces boilerplate code compared to accessing array elements by index.
Improved Function Arguments: Useful for passing array elements as arguments to functions.
Beyond Basic Assignment:
Skipping Elements: You can skip elements by using commas without a variable name.
Default Values: You can provide default values for variables if the corresponding array element is missing.
Nested Arrays: You can destructure nested arrays by using nested square brackets.
Rest Parameter: You can use the rest parameter (…) to collect remaining elements into a new array.
What is “tight coupling” in JavaScript?
In JavaScript, coupling refers to the degree of interdependence between different parts of a codebase. Tight coupling signifies a strong dependency, where changes in one module necessitate changes in others. Conversely, loose coupling indicates minimal dependency, allowing modules to function independently.
Tight Coupling
Tight coupling occurs when components are highly dependent on each other. If one component changes, it is likely to affect other components. This can lead to difficulties in maintaining and scaling the application.
JavaScript
// Tightly coupled example
class Engine {
start() {
return “Engine started”;
}
}
class Car {
constructor() {
this.engine = new Engine();
}
start() {
return this.engine.start() + “ Car started”;
}
}
const myCar = new Car();
console.log(myCar.start()); // Output: Engine started Car started
In this example, the Car class is tightly coupled to the Engine class. If the Engine class is modified or replaced, the Car class will also need to be updated.
What is “loose coupling” in JavaScript?
In JavaScript, coupling refers to the degree of interdependence between different parts of a codebase. Tight coupling signifies a strong dependency, where changes in one module necessitate changes in others. Conversely, loose coupling indicates minimal dependency, allowing modules to function independently.
Loose Coupling
Loose coupling aims to reduce dependencies between components. Changes in one module have minimal impact on other modules, promoting flexibility and maintainability.
JavaScript
// Loosely coupled example
class Engine {
start() {
return “Engine started”;
}
}
class ElectricEngine {
start() {
return “Electric engine started”;
}
}
class Car {
constructor(engine) {
this.engine = engine;
}
start() {
return this.engine.start() + " Car started";
} }
const myEngine = new Engine();
const myElectricEngine = new ElectricEngine();
const myCarWithEngine = new Car(myEngine);
const myCarWithElectricEngine = new Car(myElectricEngine);
console.log(myCarWithEngine.start()); // Output: Engine started Car started
console.log(myCarWithElectricEngine.start()); // Output: Electric engine started Car started
In this example, the Car class depends on an interface (in this case, it’s implicitly defined by the start method), rather than a concrete Engine class. This allows for different types of engines to be used without modifying the Car class. This approach enhances flexibility and maintainability.
