⚡

Data Extraction & Manipulation

Master destructuring, spread operator, and data transformation

⭐ Advanced Topics

What is Data Extraction?

Modern JavaScript provides powerful tools to extract, copy, and transform data efficiently. These patterns help you work with complex recipe data, ingredient lists, and menu structures more elegantly!

💡 Real-World Example:

Extract just the ingredients you need from a recipe object, or combine multiple menus into one!

Extraction Techniques

1. Object Destructuring 

const recipe = { name: "Cake", time: 45, servings: 8 };
const { name, time } = recipe;  // Extract specific properties
console.log(name);  // "Cake"
console.log(time);  // 45

2. Array Destructuring 

const ingredients = ["flour", "sugar", "eggs"];
const [first, second] = ingredients;
console.log(first);   // "flour"
console.log(second);  // "sugar"

3. Spread Operator (...) 

const base = ["flour", "water"];
const full = [...base, "yeast", "salt"];  // Combine arrays
console.log(full);  // ["flour", "water", "yeast", "salt"]

const menu1 = { pasta: 12, pizza: 15 };
const menu2 = { salad: 8, ...menu1 };  // Combine objects
console.log(menu2);  // { salad: 8, pasta: 12, pizza: 15 }

4. Rest Parameters 

const [first, ...rest] = ["egg", "milk", "flour", "sugar"];
console.log(first);  // "egg"
console.log(rest);   // ["milk", "flour", "sugar"]

Learn More

📘 MDN - Destructuring 📘 MDN - Spread

🚀 Try It Yourself

Output:

🧹

Game 1: Recipe Cleanup Tool

Clean and extract structured data from messy recipe text! Practice string manipulation, parsing, and transformation.

📄 Raw Recipe Data

✨ Cleaned Data

🔍 Extraction Steps:
⚖️

Game 2: Ingredient Converter

Extract measurements from ingredient text and convert between units! Parse quantities, units, and ingredient names.

📋 Ingredient List

Quick Examples:

🔄 Unit Conversions

🧹

Challenge 1: Recipe Cleanup Tool

📋 Your Mission:

Extract essential recipe information:

  1. Destructure to get name and ingredients from a recipe object
  2. Destructure to get the first ingredient from the ingredients array
  3. Return a new simplified object with these values

Example:

cleanupRecipe({ name: "Soup", time: 30, ingredients: ["water", "salt"] })

→ { name: "Soup", firstIngredient: "water" }

💡 Hints:

  • Use object destructuring: const { name, ingredients } = recipe
  • Use array destructuring: const [first] = ingredients
  • Return { name, firstIngredient: first }

Test Results:

🔄

Challenge 2: Ingredient Converter

📋 Your Mission:

Merge ingredient lists and add new items:

  1. Combine two arrays of ingredients using spread operator
  2. Add additional ingredients to the combined list
  3. Return the complete merged array

Example:

mergeIngredients(["flour", "sugar"], ["eggs"], "vanilla")

→ ["flour", "sugar", "eggs", "vanilla"]

💡 Hints:

  • Use spread: [...arr1, ...arr2, extra]
  • This combines all arrays and adds individual items

Test Results: