const animals = [
  { name: "cat", sound: "meow" },
  { name: "dog", sound: "woof" }
];

export default animals;

1. Array destructuring

import animals from "./data";

console.log(animals);

const [cat, dog] = animals;

we destructured the 'animals' by saying const [cat, dog] = animals

So now what my code has done is it reached inside this array of animals pulled out the first item and assigned it a name of cat, pulled out a second item and assigned it a name of dog.

it's pretty much the same as saying var cat = animals[0]

*** when you destructure an array, the names must be unique.

2. Destructuring an object

now in order to destructure the cat object, we should create

const {name, sound} = cat;
console.log(sound); // meow

it's pretty much the same as animals[0].sound but this way is more concise

*** difference when destructuring objects versus arrays

1) arrays

in the array, we can basically call each of the destructured variables any name we wanted.

so instead of const [cat, dog] = animals, we could have called const [c, d] = animals

and it's still going to work.

2) object

the names that are going inside the curly braces have to match with the property names of the object. this way it knows which one to actually pull out.

3. giving variables a different name

If you wanted to actually give the variables a different name to what they were as the properties of the object, you can simply add a colon and say this is going to be called _____

const { name: catName, sound: catSound } = cat;
console.log(catName); // cat

This is a way of providing an alternative name for the properties that come from an object.

This is really useful especially when you're getting hold of data from public APIs where you didn't really get the chance to name the properties inside the JSONs.

4. destructuring an object and giving custom values

what should we do if we were going to desturcture our cats objects again and give name and sound a custom value?

const { name = "Fluffy", sound = "Purr" } = cat;
console.log(name); // "Fluffy" (only when the name is undefined in the object({ sound: "meow" })

basically meaning that if 'name' is undefined, use this value instead. you want to give it some default value so that it will actually get displayed.

5. destructuring a nested object

const animals = [
{
	name: "cat",
	sound: "meow",
	feedingREquirements: {
		food: 2,
		water: 3
	}
},
{ name: "dog", sound: "woof" }
];

const [cat, dog] = animals;
const { name, sound, feedingRequirements } = cat;
console.log(feedingRequirements) // Objects { food: 2, water: 3 }

normally if you type our usual syntax which is

console.log(feedingRequirements.food); // 2

하면 원하는 값(2)를 갖겠지만 what if i wanted to get hold of just 'food' by itself without having to use the dot syntax → by destructuring!!

const { name, sound, feedingRequirements: {food, water} } = cat;
console.log(food); // 2

6. how the setState might look

const animals = [
{
	name: "cat",
	sound: "meow",
	feedingREquirements: {
		food: 2,
		water: 3
	}
},
{ name: "dog", sound: "woof" }
];

function useAnimals(animal) {
	return [
		animal.name,
		function() {
			console.log(animal.sound);
		}
	];
}

export default animals;
export {useAnimals};

import animals, {useAnimals} from "./data";

const [cat, dog] = animals;

console.log(useAnimals(cat)); // ["cat", function()]

const [ animal, makeSound ] = useAnimals(cat);
console.log(animal); // cat
makeSound(); // meow

this is very similar to how useState would look.