Деструктуризация массива

Деструктуризация: или более научно деструктурирующее присваивание - это когда мы вытасакиваем свойства или значения наружу(из объекта или массива) и можем присвоить их отдельным переменным или сделать еще какие либо манипуляции с ними.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // мы имеем массив.

let [a,b] = arr; // прописываем let и в [] скобках указываем названия переменных, далее оператор присваивания и массив который мы деструктуризируем
// теперь у нас есть две переменные и в каждой значение из массива по порядку.
console.log(a,b); // 1,2

Более сложная конструкция.

const arr = [[1,2],3,4,[5,6]]; // массив с массивами внутри, такая конструкция называется матрица.

let [[a,b],c,d,[e,f]] = arr; // мы просто по сути повторяем саму конструкцию с нужными переменными и все.
console.log(f,a,c); // 6,1,3

Деструктуризация объекта

Деструктруизация объекта: Раньше для использования свойства вне объекта, нужно было использовать синтаксис obj.свойство, часто такую конструкцию выносили в отдельную переменную, с деструктуризацией такая проблема исчезла.

const options = {  // имеем объект со свойствами
    name: 'test',
    width: 1024,
    height: 1024,
    colors: {
        border: 'black',
        bg: 'red'
    }
};

 // создаем переменную с фигурными скобками {}, после помещаем свойства, что хотим вытащить, а потом, откуда.
const {border, bg} = options.colors; 
console.log(border); // black - мы можем использовать это свойство.

Здесь все примерно как и у массивов. Только тут мы вытащили свойства, а там мы их присвоили в определенные переменные, так как здесь само свойство играет роль переменной, а внутренности это значение, у массивов есть только значение, поэтому для них нужно хранилище.
Выше мы деструктуризировали только объект внутри объекта, сейчас мы используем деструктуризацию на всем объекте разом. По сути мы просто повторим конструкцию объекта, только без значений:

const options = { 
    name: 'test',
    width: 1024,
    height: 1024,
    colors: {
        border: 'black',
        bg: 'red'
    }
};

// Так мы деструктуризировали весь объект.
// там где внутренний объект 'colors' мы просто ставим : и указываем его свойства в {} скобках.
const {name,width,height,colors:{border,bg}} = options;

Пример деструктуризации и параметров по умолчанию

Параметры по умолчанию в программировании относятся к функциям и позволяют задать значения по умолчанию для аргументов функции. Это означает, что если аргумент не будет передан при вызове функции, то будет использовано значение по умолчанию. Деструктуризация, в свою очередь, позволяет извлекать значения из объектов или массивов и присваивать их переменным. Это полезно, когда функция принимает объект с настройками, и мы хотим использовать эти настройки, не обращая внимания на порядок аргументов.

function hi (hi='hi') {
    console.log(hi);
}

hi(); // hi

Теперь перейдем к практике.

// аргументом мы открывем {} и прописываем наши свойства(используем деструктуризацию).
function slider({
    width = 200, // Так же мы можем указать параметры по умолчанию.
    height = 250,
    img = 'imgSlider.com/sliders/slider1.png' } = {}) // к нашему объекту присваиваем пустой объект {}.

{
    console.log(`Текстовый слайдер шириной в ${width + 'px'} длинной в ${height + 'px'} и с картинкой с этого адреса ${img}`)
}

slider({
    width: 450,
    height: 300,
    img: 'server/img1.png',
}); // при вызове функции мы передаем объект с нужными параметрами и не важно в каком они порядке.

Порядок мы убрали с помощью деструктуризации, а возможность передавать один аргумент и при этом все будет работать как нужно, мы пофиксили с помощью параметров по умолчанию. То есть пользователю не нужно знать все аргументы, не нужно думать о порядке и так далее. Если ему нужно поменять ширину, он просто меняет ее, и все будет работать.
В итоге в коносли мы получим это:

Текстовый слайдер шириной в 450px длинной в 300px и с картинкой с этого адреса server/img1.png

Если же мы не будем передавать значения, то все будет по умолчанию.

Текстовый слайдер шириной в 200px длинной в 250px и с картинкой с этого адреса imgSlider.com/sliders/slider1.png

Немного о пустом объекте который мы присваиваем при деструктуризации свойств объекта. Нужно это для того, что бы не было ошибки, при вызове нашей функции без передоваемого объекта. Для деструктуризации чего либо, нам нужно указать массив или объект, без этих контрукций мы не можем работать, это синтаксис деструктуризации.

// у нас есть переменные со значениями которые мы деструктуризируем.
let {a = 2,b = 1,c = 3} = {}  // Если мы уберем часть c присваиванием пустого объекта = {}, то будет ошибка.
console.log(a) // 2

Если это будет уже созданный именованный и пустой объект, то это сработает, но сам объект так и останется пустым. Или же если это даже будет именованный объект и внутри что-то будет, только с другими именами, мы все равно сможем использовать те свойства которые указали при самой деструктуризации.

const obj = {
    color:'black',
    padding:'l0px'
};
let {hi = 'hi'} = obj
console.log(hi) // hi