<dialog>
 <!-- содержимое-->
 <button id="closeBtn">Закрой меня</button>
</dialog>
<button id="openBtn">Открыть модалку</button>

dialog {
  width: 300px;
  animation: move-in 0.3s;
  /* другие стили */
}
dialog::backdrop {
  background-color: #2e3252b3;
  animation: fade-in 0.3s;
}

const dialog = document.querySelector('dialog');
const openBtn = document.querySelector('#openBtn');
const closeBtn = document.querySelector('#closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());

console.log(myVar); // Output: ReferenceError: Cannot access 'myVar' before initialization

let myVar = 42;

console.log(myVar); // Output: undefined

var myVar = 42;

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>

 const numbers = [43, 6, 35, 1, 9, 7, 5, 75, 16];
 const sortedNumbers = numbers.toSorted((a, b) => a - b);
 console.log(numbers);
 // [43, 6, 35, 1, 9, 7, 5, 75, 16];
 console.log(sortedNumbers);
 // [1, 5, 6, 7, 9, 16, 35, 43, 75]

const obj = {name: 'Scarlett'};
 const names = [
   obj,
   'Albert',
   undefined,
   '',
 ];
 const sortedNames = names.toSorted();

 console.log(sortedNames);
 //  ['', 'Albert', { name: 'Scarlett' }, undefined]

 obj.name = 'Dan'; 
 console.log(sortedNames)
 //  ['', 'Albert', { name: 'Dan' }, undefined]