AltSchool Of Engineering Tinyuka’24 Month 5 Week 1

This week's class began with a brief revision of our last session. If you missed it, you can catch up here! Afterwards, we explored Maps and Sets in JavaScript. Ready to dive in? Let’s go!

Maps and Sets in JavaScript

Maps are versatile collections of keyed data items, similar to objects, but they allow keys of any data type. Here’s a breakdown of the key features and methods of Maps:

Map Features:

Unlike objects, which only accept strings and symbols as keys, Maps can use any data type (including objects, functions, and primitive types).

Key Methods and Properties:

1. Creating a Map:

   • Syntax: new Map()

Example:

let myMap = new Map();

2. Storing Values:

   • Method: map.set(key, value)

Example:

myMap.set('name', 'Alice');
myMap.set(1, 'One');

3. Retrieving Values:

   • Method: map.get(key) returns the value associated with the key; returns undefined if the key doesn’t exist.

Example:

console.log(myMap.get('name')); // Output: Alice
console.log(myMap.get(1)); // Output: One

4. Checking for Keys:

   • Method: map.has(key) returns true if the key exists in the map, otherwise false.

Example:

console.log(myMap.has('name')); // Output: true

5. Deleting Elements:

   • Method: map.delete(key) removes the key/value pair associated with the specified key.

Example:

myMap.delete('name'); // Removes the key 'name'

6. Clearing the Map:

   • Method: map.clear() removes all entries from the map.

Example:

myMap.clear(); // Empties the map

7. Size of the Map:

   • Property: map.size returns the number of key/value pairs currently stored in the map.

Example:

console.log(myMap.size); // Output: 0 (after clear)

Working with Dates and Times in JavaScript

JavaScript provides Date Objects that enable developers to manage and manipulate dates and times effectively. These objects store date and time information and come with various methods for date/time management.

Creating Date Objects

You can create a new Date object using the new Date() constructor with different arguments:

1. Current Date and Time:

   • Syntax: new Date()

Example:

let currentDate = new Date();
console.log(currentDate); // Outputs the current date and time

2. Date from a String: This creates a Date object based on a date string, which represents the number of milliseconds since January 1, 1970 (UTC).

   • Syntax: new Date(dateString)

Example:

let specificDate = new Date("2023-06-07T12:00:00Z");
console.log(specificDate); // Outputs: Wed Jun 07 2023 12:00:00 GMT+0000 (UTC)

3. Date with Year and Month: The month is Zero-indexed (0 for January, 1 for February, etc.).

   • Syntax: new Date(year, month)

Example:

let dateWithYearAndMonth = new Date(2023, 5); // June 1, 2023
console.log(dateWithYearAndMonth); // Outputs: Thu Jun 01 2023 00:00:00 GMT+0000 (UTC)

4. Date with Year, Month, and Day:

Syntax: new Date(year, month, day)

Example:

let dateWithYearMonthDay = new Date(2023, 5, 15); // June 15, 2023
console.log(dateWithYearMonthDay); // Outputs: Thu Jun 15 2023 00:00:00 GMT+0000 (UTC)

5. Date with Year, Month, Day, and Hours:

Syntax: new Date(year, month, day, hours)

Example:

let dateWithFullDetails = new Date(2023, 5, 15, 14); // June 15, 2023, 14:00 (2 PM)
console.log(dateWithFullDetails); // Outputs: Thu Jun 15 2023 14:00:00 GMT+0000 (UTC)

Understanding Functions in JavaScript

Functions are a foundational aspect of JavaScript, offering a way to encapsulate reusable code. Here’s a breakdown of key concepts related to functions:

1. Introduction to Functions: Functions are blocks of code designed to perform specific tasks. They can accept parameters and return values.

Example:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // Output: 5

2. Recursion and Stack: Recursion occurs when a function calls itself to solve a problem. Each call adds a layer to the call stack.

Example:

function factorial(n) {
  return n === 0 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5)); // Output: 120

3. Rest Parameters and Spread Syntax:

   • Rest Parameters: Allows functions to accept an indefinite number of arguments as an array.

Example:

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // Output: 6

3. • Spread Syntax: Expands an array into individual elements.

Example:

let nums = [1, 2, 3];
console.log(sum(...nums)); // Output: 6

4. Closure and Variable Scope: A closure is a function that retains access to its lexical scope, even when executed outside that scope.

Example:

function outer() {
  let outerVar = 'I am outside!';
  return function inner() {
    console.log(outerVar); // Accesses outerVar
  };
}
const innerFunc = outer();
innerFunc(); // Output: I am outside!

5. Global Object: In a browser environment, the global object is window. Functions defined globally become properties of this object.

6. Function Object, NFE, and New Function Syntax: Functions in JavaScript are first-class objects, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

   • NFE (Named Function Expression) allows naming function expressions, useful for recursion.

Example:

const factorial = function fact(n) {
return n === 0 ? 1 : n * fact(n - 1);
};

7. Scheduling: Functions can be scheduled for future execution using methods like setTimeout() and setInterval().

Example:

setTimeout(() => console.log("Executed after 1 second"), 1000);

8. Decorators and Forwarding: Decorators are higher-order functions that enhance or modify other functions.

Example:

function decorator(fn) {
  return function(...args) {
    console.log("Before function call");
    fn(...args);
    console.log("After function call");
  };
}
const decoratedFunction = decorator(add);
decoratedFunction(2, 3);

9. Function Binding: call(), apply(), and bind() methods allow you to control the this context within functions.

Example:

function greet() {
  console.log(`Hello, ${this.name}`);
}
const person = { name: "Alice" };
greet.call(person); // Output: Hello, Alice

10. Arrow Functions: Arrow functions provide a concise syntax and lexically bind the this value.

Example:

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // Output: 6

Understanding Objects in JavaScript

1. Basics of Objects: Objects are collections of key-value pairs, where keys are strings (or Symbols) and values can be any data type.

Example:

let person = {
  name: "Alice",
  age: 30
};

2. Referencing and Copying: Objects are reference types, meaning variables hold references to the object rather than the object itself. This affects how they are copied.

Example:

let obj1 = { a: 1 };
let obj2 = obj1; // obj2 references the same object as obj1
obj2.a = 2;
console.log(obj1.a); // Output: 2

3. Object Methods and this Keyword: Objects can have methods, which are functions associated with them. The this keyword refers to the object that the method belongs to.

Example:

let car = {
  brand: "Toyota",
  drive() {
    console.log(`Driving a ${this.brand}`);
  }
};
car.drive(); // Output: Driving a Toyota

4. Constructor Functions and the new Operator: Constructor functions are used to create multiple objects with the same structure. The new operator instantiates a new object.

Example:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let person1 = new Person("Bob", 25);

5. Optional Chaining: Optional chaining (?.) allows you to safely access deeply nested properties without encountering errors if a property is undefined.

Example:

let user = { address: { street: "Main St" } };
console.log(user.address?.street); // Output: Main St

6. Symbol Type and Object to Primitive Conversion: Symbols are unique and immutable identifiers. They can be used as object keys to avoid property name collisions.

Example:

const sym = Symbol("unique");
let obj = {
  [sym]: "value"
};

7. Object Properties Configuration: Object properties can be configured with flags: writable, enumerable, and configurable. These affect how properties can be modified and displayed.

Example:

let obj = {};
Object.defineProperty(obj, "prop", {
  value: 42,
  writable: false,
  enumerable: true,
  configurable: false
});

8. Descriptors: Property descriptors provide detailed information about object properties, including their attributes.

Example:

let desc = Object.getOwnPropertyDescriptor(obj, "prop");
console.log(desc); // Outputs property descriptor details

9. Property Getters and Setters: Getters and setters allow you to define custom behavior for property access and assignment.

Example:

let person = {
  firstName: "John",
  lastName: "Doe",
  get fullName() {
    return ${this.firstName} ${this.lastName};
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
};
console.log(person.fullName); // Output: John Doe

Thank you for taking the time to read this! Remember, the journey to mastering these concepts begins with just a single line of code. I’d love to hear your thoughts, please share them in the comments below!

I’m Ikoh Sylva, a passionate cloud computing enthusiast with hands-on experience in AWS. I'm documenting my cloud journey from a beginner’s perspective, and I hope to inspire others along the way. If you find my content valuable, please like and follow my posts, and consider sharing this article with anyone embarking on their own cloud journey.

Let’s connect on social media, I’d love to engage with you further!

LinkedIn Facebook X