destructuring.js

// Destructuring
const data = {
  first_name: "John",
  age: 30,
  employer: {
    company: "Google",
  },
};

// Object destructuring with renaming
const { first_name: name } = data;

// Nested object destructuring
const {
  employer: { company },
} = data;

console.log(name);
console.log(company);

// Child React component
// The props object includes information from the parent
// That a child would need to properly render
function Capsule({ num, occupant }) {
  return `<div data-attribute="${num}">Capsule #${num}${occupant || "Unoccupied"}</div>`;
}

// Array destructuring
const shoppingList = ["🍕", "🍺", "🍴", "🥕"];

const [pizza, beer] = shoppingList;

console.log(pizza, beer);

function printPerson({
  name,
  age,
  isMarried,
  isSmoker,
  isDogOwner,
  occupation,
}) {
  return `
    The person's name is ${name}.
    The person's age is ${age}.
    The person is ${isMarried ? "married" : "not married"}.
    `;
}

printPerson({
  isMarried: true,
  name: "John",
  isDogOwner: true,
  age: 30,
  occupation: "software engineer",
  isSmoker: false,
});

map-filter.js

// Array literal
const nums = [1, 2, 3, 0, 4, 5];

/**
 * 1. Use a map to apply a function to each element of an array.
 * The new array that is created will ALWAYS be of the same length as the original array.
 *
 * 2. Use a filter to create a new array of only the elements that are true based upon a predicate cb fxn.
 */

const doubledOdds = nums.map(
  // num represents each number in the array
  // We are invoking the callback fxn. for each number in the array
  (num) =>
    // This returns to a new array (not nums)
    num % 2 ? num : num * 2
);

const doubled = nums.map((num) => num * 2);
console.log(doubled);

// TODO: Create a new array with only the odd numbers
const odds = nums.filter((num) => num * 2);
console.log(odds);

const people = [
  {
    name: "John",
    age: 25,
  },
  { name: "Jane", age: 23 },
  { name: "Bob", age: 35 },
  { name: "Chris", age: 29 },
  { name: "Sara", age: 27 },
];

// Filter the array of people by age

// Generate a new array of people with a boolean `canRentCar`
const over25 = people.filter(({ age }) => age > 25);
const carRentalPpl = over25.map((person) => {
  const person2Update = { ...person, canRentCar: true };
  return person2Update;
});

const carRentalPpl2 = over25.map((person) => ({ ...person, canRentCar: true }));

console.log(carRentalPpl2, people);

optional-short.js

// Optional Chaining
const me = {
  name: "John",
  age: 30,
  job: "Coder",
  employer: {
    name: "Google",
  },
};

// Short Circuiting
console.log(me.computer?.brand || "Unknown");

// This short-circuits b/c the left-hand operand is truthy
console.log(me.employer?.name || "Unemployed");

const formInput = "";

const username = formInput || "Anonymous"

shorthand.js

// Object Shorthand
function createUser(fname, lname, age) {
  return {
    fname,
    lname,
    age,
  };
}

spread.js

const myCar = {
  make: "Honda",
  model: "Accord",
  year: "2010",
  color: "Black"
};

const yourCar = { ...myCar };

// This assigns the `myCar` REFERENCE to `yourCar`
// const yourCar = myCar;

yourCar.make = "Mercedes";

console.log(yourCar.make);
console.log(myCar.make);

// STATE MUST NOT BE MUTATED IN A COMPONENT!

// Array spread operator
const groceries = ["milk", "eggs", "bread", "cheese"];
const toys = ["ball", "lego", "train", "car"];

const shoppingList = [...groceries, ...toys]; 

switch.js

const choice = "Delete";

// switch-case is useful when we are doing `===` checks on a value.
// For example comparing strings and looking for a specific...case!

switch (choice) {
  // choice === "Delete"
  case "Create":
    console.log("Creating...");
    break;
  case "Delete":
    // Delete the file
    break;
  default:
    throw new Error("Invalid choice");
}

// switch() {}

// if () {}

// function() {}

ternary.js

const age = 21;

if (age >= 21) {
  console.log("Have a 🍺");
} else {
  console.log("Don't have a 🍺");
}

// Ternary
/*
 * If this-then than-else something else
 * Is the age greater than or equal to 21?
 * If so, print "Have a 🍺"
 * If not, print "Don't have a 🍺"
 */

// question (yes-no) ? yes option : no option
const msg = age >= 21 ? "Have a 🍺" : "Don't have a 🍺";
console.log(msg);