const arr = [1, 2, 3];
const notArr = "Hello";

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(arr instanceof Array); // true
   console.log(notArr instanceof Array); // false
   

Object.prototype.toString.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
   console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // false

  - Может давать неверные результаты, если массив создан в другом контексте (например, в iframe).

- Object.prototype.toString.call():
  - Универсальный метод для проверки различных типов объектов.
  - Меньше подвержен проблемам с контекстом, но выглядит менее читаемым по сравнению с Array.isArray().

      document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
   

      const getCookie = (name) => {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
   }

   console.log(getCookie('username')); // 'John Doe'
   

      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
   

      const express = require('express');
   const app = express();

   app.get('/', (req, res) => {
     res.cookie('username', 'John Doe', { maxAge: 900000, httpOnly: true });
     res.send('Cookie has been set');
   });

   app.listen(3000);
   

      const express = require('express');
   const cookieParser = require('cookie-parser');
   const app = express();

   app.use(cookieParser());

   app.get('/', (req, res) => {
     const username = req.cookies.username;
     res.send(`Username is: ${username}`);
   });

   app.listen(3000);
   

      import React, { createContext, useState } from 'react';

   const MyContext = createContext();
   

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };
   

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };
   

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

      <div class="block1"></div>
   <div class="block2"></div>

      <div class="parent">
     <div class="child"></div>
   </div>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<div class="container">
  <div class="content">Content</div>
</div>

    .parent {
    padding-top: 1px;
  }
  

<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>

<div class="header">
  <div class="header__logo"></div>
  <div class="header__nav"></div>
</div>

<div class="footer">
  <div class="footer__logo"></div>
</div>

<div class="card">
  <div class="card__title">Title</div>
  <div class="card__content">Content</div>
</div>

<div class="profile">
  <div class="card">
    <div class="card__title">Profile Title</div>
    <div class="card__content">Profile Content</div>
  </div>
</div>

<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

.menu {
  background-color: #fff;
  border: 1px solid #ccc;
}

.menu__item {
  padding: 10px;
  color: #333;
}

.menu__item--active {
  background-color: #007bff;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Child
    </div>
  </div>

  <script>
    document.getElementById('parent').addEventListener('click', () => {
      alert('Parent clicked!');
    });

    document.getElementById('child').addEventListener('click', () => {
      alert('Child clicked!');
    });
  </script>
</body>
</html>

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  });

  document.getElementById('child').addEventListener('click', (event) => {
    alert('Child clicked!');
    event.stopPropagation(); // предотвращает всплытие события
  });
</script>

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  }, true);

  document.getElementById('child').addEventListener('click', () => {
    alert('Child clicked!');
  }, true);
</script>

      npx create-next-app my-ssr-app
   cd my-ssr-app
   npm run dev
   

      // pages/index.js
   import React from 'react';

   const Home = ({ data }) => {
     return (
       <div>
         <h1>Server-Side Rendering Example</h1>
         <p>{data.message}</p>
       </div>
     );
   };

   // Эта функция вызывается на сервере при каждом запросе к странице
   export async function getServerSideProps() {
     // Выполняем запрос к API или базе данных
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();

     // Передаем данные как пропсы в компонент
     return {
       props: {
         data
       }
     };
   }

   export default Home;
   

(function() {
  console.log('This is an IIFE');
})();

(function namedIIFE() {
  console.log('This is a named IIFE');
})();

var i = 10;

(function() {
  var i = 20;
  console.log(i); // 20
})();

console.log(i); // 10

var counter = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
      return count;
    },
    reset: function() {
      count = 0;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
counter.reset();
console.log(counter.increment()); // 1

(function() {
  console.log('IIFE for initialization');
  // Initialization code here
})();

interface User {
  id: number;
  name: string;
  email: string;
}

const updateUser = (id: number, userUpdates: Partial<User>) => {
  // Обновление пользователя
};

updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств

interface User {
  id?: number;
  name?: string;
  email?: string;
}

const user: Required<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
}; // Все свойства должны быть указаны

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Readonly<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

user.id = 2; // Ошибка: свойство id доступно только для чтения

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Pick<User, 'id' | 'name'> = {
  id: 1,
  name: 'Alice'
}; // Только свойства id и name

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Omit<User, 'email'> = {
  id: 1,
  name: 'Alice'
}; // Все свойства, кроме email

type Roles = 'admin' | 'user' | 'guest';

const roles: Record<Roles, string> = {
  admin: 'Admin User',
  user: 'Regular User',
  guest: 'Guest User'
};

type T = 'a' | 'b' | 'c';
type U = 'a';

type Result = Exclude<T, U>; // 'b' | 'c'

type T = 'a' | 'b' | 'c';
type U = 'a' | 'c';

type Result = Extract<T, U>; // 'a' | 'c'

type T = string | number | null | undefined;

type NonNullableT = NonNullable<T>; // string | number

function getUser() {
  return { id: 1, name: 'Alice' };
}

type User = ReturnType<typeof getUser>; // { id: number, name: string }

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const updateUser = (id: number, userUpdates: Partial<User>) => {
     // Обновление пользователя
   };

   updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств
   

      interface User {
     id?: number;
     name?: string;
     email?: string;
   }

   const user: Required<User> = {
     id: 1,
     name: 'Alice',
     email: 'alice@example.com'
   }; // Все свойства должны быть указаны
   

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const user: Readonly<User> = {
     id: 1,
     name: 'Alice',
     email: 'alice@example.com'
   };

   user.id = 2; // Ошибка: свойство id доступно только для чтения

func.call(thisArg, arg1, arg2, ...);

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

greet.call(user, 'Hello', '!'); // Hello, Alice!

func.apply(thisArg, [arg1, arg2, ...]);

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

greet.apply(user, ['Hello', '!']); // Hello, Alice!

const boundFunction = func.bind(thisArg, arg1, arg2, ...);

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

const boundGreet = greet.bind(user, 'Hello');
boundGreet('!'); // Hello, Alice!

function add(a: number, b: number): number {
  return a + b;
}

// Ошибка на этапе компиляции, если передать нечисловые значения
// add('1', '2');

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'Alice'
};

// Автодополнение будет предлагать поля 'id' и 'name' для объекта 'user'

// Это корректный TypeScript-код, так как он также является корректным JavaScript-кодом
const message = "Hello, TypeScript!";
console.log(message);

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

// module.ts
export function greet(name: string): string {
  return `Hello, ${name}`;
}

// main.ts
import { greet } from './module';

console.log(greet('TypeScript'));