JavaScript

Destructering & Spread

Objekt Destructering

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;

console.log(name);     // Output 'Batman',
console.log(realName); // Output 'Bruce Wayne'


const otherName = hero.name;
const otherRealName = hero.realName;

UTAN DESTRUCTERING

"Plocka ut" - "unpacka" - enskilda egenskaper från ett objekt

Ordningen spelar INTE roll, utan namngivningen. Ger en mer "clean" kod.

Array Desctructering

let [soccer, golf, surfing] = ['⚽', '⛳', '🏄'];

console.log(soccer, golf, surfing) 
// Output ['⚽', '⛳', '🏄'];

Svensk översättning 🤷🏻‍♀️

"Plocka ut" - "unpacka" - enskilda variabler från en array.

Ordningen spelar roll. Ger en mer "clean" kod.

let sports = ['⚽', '⛳', '🏄'];
let soccer = sports[0];
let golf = sports[1];
let surfing = sports[2];

UTAN DESCTRUCTERING

UTAN DESCTRUCTERING

const clothing = ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];

const clothingCloned = [...clothing];
console.log(clothingCloned); // Outpput ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];

Spread operator (...)

Ett sätt att kopiera (värdena) från en array

const person = {
  name: "John",
  age: 30,
  city: "New York",
  },
};

// Kopierar värdena från personobjektet
const personCopy = { ...person };

// Praktiskt för att skaåa en kopia som uppdateras
const updatedPerson = {...person, city: "Boston'};

Spread operator (...)

Eller med objekt!

const person = {
    name: "John",
    age: 30,
    address: {
        street: "Main Street",
        number: 123,
    },
};

const personCopy = { ...person };

personCopy.name = "Jane";
personCopy.address.street = "Second Street";

console.log("original", person);
console.log("copy", personCopy);

Spread operator (...)

Spread operator verkar bara på en nivå!

Mer om shallow copy och deep copy senare..

const trains = ['🚋', '🚝', '🚉'];
const boat = ['🚤', '🚣', '🚢', '⛵'];

const transportation = [...trains, ...boat]
console.log(transportation) // Output ['🚋', '🚝', '🚉', '🚤', '🚣', '🚢', '⛵']

Slå ihop (merga) två arrayer

Spread operator (...)

Rest ...

const [shirt, jeans, ...rest] = ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];

console.log(shirt); // '👔'
console.log(jeans); // '👖'
console.log(rest); // [👢', '👡', '💄', '👠, '👗']

Svensk översättning 🤷🏻‍♀️

Till vänster om likamedstecknet finns motsvarande ... (operator). Den mappar resterande element i arrayen till denna.

Rest ...

const person = {
    name: "John",
    age: 30,
    address: {
        street: "Main Street",
        number: 123,
    },
};

const { name, ...rest } = person;
console.log(name, rest);

Och för objekt!