Объекты и их создание

Объект - это структура которая может сохранять в себе любые типы данных в формате ключ: значение.
Для создания объекта используем фигурные скобки {}.

const options = {           
    // внутри ключи и их значения
        name:'test', // name - это ключ, а test - значение.
        width: 1024,
        height: 1024, 
        colors: {       // объект в объекте и это нормально.
            border:'black',
            bg: 'red'
        }
    };
    
    // Устаревший способ
    const obj = new Object();
    obj.width = 1024;
    obj.height = 1024

Что такое методы и свойства объекта

Методы - вспомогательные функции.
Свойства - вспомогательные значения.
В javaScript у объекта есть только свойства (если не считать сеттеры и геттеры), а метод — это просто ссылка на объект, который является функцией. Для доступа к методам и свойствам используется оператор точка .
Создадим метод:

let obj = { // создал пустой объект
  abc: function() { // внутри создаю свойство(ключ), а внутрь помещаем функцию
   console.log('hello'); 
  }
}; 

Более современный способ ES6:

let obj = {
  abc() { 
   console.log('hello'); 
  }
}; 

Или же можно уже после создания объекта добавить метод или свойство так:

let obj = {} // создал объект
obj.abc = function () { // мы обращаемся к obj, ставим точку и знак присваивания, пишем название свойства и что в нем будет.
        console.log('hello');
};
obj.one = 1; // добавили в obj свойство one со значением 1. - Это будет называться свойством
obj.abc(); // вызываем наш метод(функцию) - Это будет называться методом.
// Это все свойства, но разница в том, что в одном функция, а в другом простое значение. Свойство с функцией всегда будет называться методом.

Значением свойства может быть не только примитив, но и ссылка на другой объект, функцию или массив.

let arr2 = [1, 2, 3];
let obj = {
    abc: function () {
        console.log('hi');
    },
    arr: arr2,
    obj2: {

        noAbc: function () {
            console.log('я запутался');
        }
    }
};

obj.obj2.noAbc(); // я запутался
console.log(obj.arr.length); // 3
// у объекта obj есть свойство obj2 которое тоже является объектом и имеет свой метод noAbc.
// у объекта obj есть свойство arr, значением которого является ссылка на массив, у массивов есть свойство length, которое считает кол элементов внутри.
// Мы часто используем console.log() - тоже самое, console - это некий объект в котором есть метод log, что бы его вызвать, нужно указать объект и сам метод console.log()

Так же свойства можно удалять delete

const obj = {
    name: 'alo',
    age: 30
};

delete obj.name; // удаляем свойство name
console.log(obj) // { age: 30 }

Методы объектов

Object.keys()

Object.keys() - Возвращает массив из собственных перечисляемых свойств переданного объекта

const obj = {
    name:'dima',
    age:25
}

console.log(Object.keys(obj)) // [ 'name', 'age' ]

Object.entries()

Object.entries() - Возвращает массив собственных перечисляемых свойств указанного объекта в формате ключ: значение

const obj = {
    name:'dima',
    age:25
};

console.log(Object.entries(obj)); // [ [ 'name', 'dima' ], [ 'age', 25 ] ] получили массив с массивами [ключ, значение]

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

console.dir(Object); // проверяем глобально у Object его свойства

Перебираем объект циклом for in

Перебераем свойства объекта for in:

const options = {           
        name:'test',
        width: 1024,
        height: 1024, 
        colors: {      
            border:'black',
            bg: 'red'
        }
    };
 for (let key in options) {  // создаем переменную в которую будут складываться свойства(ключи) и указываем какой объект перебираем.
        console.log(`Свойства ${key} имеет значение ${options[key]}`); // в key помещается наше свойство(ключ).
     // Eсли имя свойства в переменной, то обратиться мы можем только через [] не через точку.
    //  options[key] - значит, что мы обращаемся к значению ключа, который находится в key.
    /* Такая конструкция все выведет, кроме ключа colors, так как это тоже объект
       он нам просто выведет 'Свойства colors имеет значение [object Object]'
       мы просто выводим значение в виде строк, но так как наш ключ вложенный объект, js не может его превратить в строку и он,
       просто нам выводит строковое представление объекта.
       При помощи условия мы можем сказать, что если внутри объекта есть другой объект, то мы можем запустить еще перебор.
       По сути это перебор внутри другого перебора.
    */
    if (typeof(options[key]) === 'object') { // мы проверяем тип значения на объект
        for (let i in options[key]) { // и если мы находим объект, то используем еще один перебор.
        // так как key у нас занята, мы используем i и копаемся мы уже не в options, а в объекте внутри options
        // Это объект будет внутри key, поэтому и пишем options[key].
        console.log(`Свойства ${i} имеет значение ${options[key][i]} `);
        /* здесь меняем key на i, так как ключи нашего вложенного объекта будут находиться внутри i. Далее у нас будет двойной доступ, выглядит это так options[key][i]
           Мы обращаемся к объекту options далее к key ключу, так как в key сейчас лежит вложенный объект
           внутри него нам тоже нужно обратиться к ключу, который у нас находится в i
           таким образом мы просто просим показать значение i внутри key который внутри options
        */
        } 
    } else {  // иначе, если наш ключ не объект, то продолжаем выводить как было
        console.log(`Свойства ${key} имеет значение ${options[key]} `);
    }
    
    }

Вот как код выглядит без тонны моих глупых объяснений для самого себя.

const options = {
    name: 'test',
    width: 1024,
    height: 1024,
    colors: {
        border: 'black',
        bg: 'red'
    }
};
for (let key in options) {
    if (typeof (options[key]) === 'object') {
        for (let i in options[key]) {
            console.log(`Свойства ${i} имеет значение ${options[key][i]} `);
        }
    } else {
        console.log(`Свойства ${key} имеет значение ${options[key]} `);
    }
}