Перевірка знань по темі "JavaScript"

JavaScript — це мова програмування, яка робить веб-сторінки інтерактивними.

• Працює в браузері та на сервері (Node.js)
• Може змінювати DOM (структуру сторінки)
• Дозволяє обробляти події (клік, натискання клавіш тощо)

// приклад
document.body.style.background = "lightblue"; // змінює фон сторінки

Є кілька способів:

• Всередині HTML:

<script>
  alert("Привіт!");
</script>

• Зовнішній файл:

<script src="app.js"></script>

Щоб не блокувати завантаження сторінки, часто додають defer:

<script src="app.js" defer></script>

Змінна — це контейнер для збереження значення.

let name = "Оля";
const age = 20;
var city = "Київ";

Можна змінювати let і var, але const — ні.

• let — блочна область, можна змінювати значення.
• const — блочна область, не можна перевизначати.
• var — функціональна область, застарілий спосіб.

if (true) {
  let x = 10;
  var y = 20;
}
console.log(typeof x); // undefined
console.log(y);        // 20

Є примітиви та об’єкти.

• Примітиви: string, number, boolean, null, undefined, symbol, bigint.
• Об’єкти: {}, [], function(){}.

let str = "Привіт";   // string
let num = 42;         // number
let flag = true;      // boolean
let arr = [1, 2, 3];  // object

Основний спосіб — оператор typeof.

typeof "abc"  // "string"
typeof 123    // "number"
typeof []     // "object"

Для масивів краще:

Array.isArray([1,2,3]); // true

Оператори виконують дії над значеннями:

• Арифметичні: +, -, *, /, %
• Порівняння: ==, ===, !=, >
• Логічні: &&, ||, !

let a = 5, b = 10;
console.log(a + b);   // 15
console.log(a > b);   // false
console.log(a < b && b > 0); // true

• == — порівнює значення з приведенням типів.
• === — суворе порівняння (тип + значення).

console.log(5 == "5");  // true
console.log(5 === "5"); // false

В JS є кілька способів виконати код залежно від умови:

let age = 18;

if (age >= 18) {
  console.log("Дорослий");
} else {
  console.log("Дитина");
}

switch (age) {
  case 18: console.log("Повноліття!"); break;
  default: console.log("Інший вік");
}

let status = (age >= 18) ? "Adult" : "Child";

• for, while, do...while
• for...of — значення
• for...in — ключі

for (let i=0; i< 3; i++) {
  console.log(i); // 0,1,2
}

let arr = ["a","b"];
for (let el of arr) console.log(el); // a, b

Функція — це блок коду, який можна викликати багато разів.

function greet(name) {
  return "Привіт, " + name;
}

console.log(greet("Оля")); // Привіт, Оля

// оголошення
function add(a, b) { return a+b; }

// функціональний вираз
const sum = function(a, b) { return a+b; };

// стрілкова
const mult = (a, b) => a*b;

Якщо значення не передано — використовується стандартне.

function greet(name = "Гість") {
  console.log("Привіт, " + name);
}

greet();        // Привіт, Гість
greet("Іра");   // Привіт, Іра

Scope визначає, де можна використовувати змінні:

• Глобальна
• Функціональна
• Блочна

let x = 10; // глобальна

function test() {
  let y = 20; // функціональна
  if (true) {
    let z = 30; // блочна
  }
}

JS «піднімає» оголошення змінних і функцій нагору області.

console.log(a); // undefined
var a = 5;

foo(); // працює
function foo() { console.log("ok"); }

let і const піднімаються, але не ініціалізуються → Temporal Dead Zone.

Замикання — це функція, яка пам’ятає змінні з оточення, навіть після завершення зовнішньої функції.

function outer() {
  let count = 0;
  return function() {
    count++;
    return count;
  }
}

let counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

Вони коротші та не мають власного this.

const square = x => x * x;
console.log(square(4)); // 16

Зручно використовувати в map, filter, reduce.

Визначає тип значення:

typeof "Привіт"  // string
typeof 42        // number
typeof null      // object (історична помилка)

NaN означає "Not a Number".

let result = 0 / 0;
console.log(result); // NaN
console.log(typeof NaN); // number

Перевірка: Number.isNaN(value).

Це рядки в зворотних лапках (``), які підтримують інтерполяцію.

let name = "Андрій";
console.log(`Привіт, ${name}!`); // Привіт, Андрій!

Масив — це впорядкований список значень.

let fruits = ["яблуко", "банан", "вишня"];
console.log(fruits[1]); // банан

Масив може містити різні типи значень, навіть інші масиви чи об’єкти.

let arr = [10, 20, 30];
console.log(arr[0]); // 10
arr[1] = 25;
console.log(arr); // [10, 25, 30]

Якщо індекса немає → undefined.

Часто використовують:

let arr = [1, 2, 3, 4];

arr.push(5);      // [1,2,3,4,5]
arr.pop();        // [1,2,3,4]
arr.shift();      // [2,3,4]
arr.unshift(0);   // [0,2,3,4]

let doubled = arr.map(x => x*2); // [0,4,6,8]
let even = arr.filter(x => x%2===0); // [0,2,4]

for...of ітерує значення, for...in — ключі.

let arr = ["a","b","c"];
for (let val of arr) console.log(val);   // a,b,c
for (let i in arr) console.log(i);       // 0,1,2

Об’єкт — набір пар "ключ: значення".

let user = {
  name: "Оля",
  age: 25,
  isAdmin: true
};

console.log(user.name); // Оля

let car = {brand: "BMW", year: 2020};

console.log(car.brand);   // BMW
console.log(car["year"]); // 2020

Квадратні дужки зручні, якщо ключ — змінна.

let user = {name: "Іра", age: 20};

for (let key in user) {
  console.log(key, user[key]);
}

Або сучасні методи:

Object.keys(user);   // ["name","age"]
Object.values(user); // ["Іра",20]
Object.entries(user);// [["name","Іра"],["age",20]]

this вказує на контекст виконання.

let user = {
  name: "Оля",
  sayHi() {
    console.log("Привіт, " + this.name);
  }
};
user.sayHi(); // Привіт, Оля

В стрілкових функціях this не прив’язується.

Можна використати bind, call або apply.

function greet() { console.log(this.name); }

let user = {name:"Іра"};
let bound = greet.bind(user);

bound(); // Іра

JSON (JavaScript Object Notation) — текстовий формат для обміну даними.

let user = {name:"Оля", age:25};

let json = JSON.stringify(user);
console.log(json); // '{"name":"Оля","age":25}'

let obj = JSON.parse(json);
console.log(obj.name); // Оля

Це зручний спосіб отримати значення з об’єкта чи масиву.

let arr = [1,2];
let [a,b] = arr; // a=1, b=2

let user = {name:"Оля", age:20};
let {name, age} = user; // name="Оля", age=20

Розгортає масив або об’єкт.

let arr = [1,2,3];
let newArr = [...arr, 4, 5]; // [1,2,3,4,5]

let obj = {a:1};
let copy = {...obj, b:2}; // {a:1, b:2}

Збирає залишок у масив.

function sum(...nums) {
  return nums.reduce((a,b)=>a+b);
}
console.log(sum(1,2,3)); // 6

let arr = [1,2,3];
let copyArr = [...arr];

let obj = {a:1};
let copyObj = {...obj};

Але це поверхнева копія. Для глибокої — structuredClone() або JSON.parse(JSON.stringify()).

Створює новий масив, застосовуючи функцію до кожного елемента.

let nums = [1,2,3];
let doubled = nums.map(n => n*2);
console.log(doubled); // [2,4,6]

Фільтрує елементи за умовою.

let nums = [1,2,3,4];
let even = nums.filter(n => n%2===0);
console.log(even); // [2,4]

Агрегує значення в одне.

let nums = [1,2,3];
let sum = nums.reduce((acc,n)=>acc+n, 0);
console.log(sum); // 6

let arr = [1,2,3,4];

arr.find(n => n>2);      // 3
arr.some(n => n>3);      // true
arr.every(n => n>0);     // true

let a = [1,2];
let b = [3,4];

let merged = [...a, ...b]; // [1,2,3,4]
let concat = a.concat(b);  // [1,2,3,4]

За замовчуванням сортує як рядки.

let nums = [10, 2, 5];
nums.sort(); // [10,2,5] → ["10","2","5"]

nums.sort((a,b)=>a-b); // [2,5,10]

Синхронний код виконується по черзі, рядок за рядком. Асинхронний дозволяє виконувати інші задачі, поки чекаємо результат (наприклад, відповідь сервера).

// синхронний
console.log("1");
console.log("2");

// асинхронний
console.log("1");
setTimeout(()=>console.log("2"), 1000);
console.log("3");
// результат: 1, 3, 2

Callback — це функція, передана іншій функції як аргумент і викликана пізніше.

function greet(name, callback) {
  console.log("Привіт, " + name);
  callback();
}

greet("Оля", () => console.log("Як справи?"));
// Привіт, Оля
// Як справи?

Якщо є багато вкладених callback-ів, код стає важким для читання та підтримки.

getUser(1, user => {
  getPosts(user.id, posts => {
    getComments(posts[0].id, comments => {
      console.log(comments);
    });
  });
});

Вирішення → Promise або async/await.

Promise — це об’єкт, який представляє результат асинхронної операції: виконаний (resolved) або з помилкою (rejected).

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Готово!"), 1000);
});

promise.then(result => console.log(result));
// Готово!

• pending — очікування
• fulfilled — успіх
• rejected — помилка

let p = Promise.resolve(123);
p.then(val => console.log(val)); // 123

let p = new Promise((res, rej) => rej("Помилка"));

p.then(val => console.log(val))
 .catch(err => console.log("Сталася помилка:", err))
 .finally(() => console.log("Завжди виконається"));

Виконує кілька промісів паралельно. Якщо один завершується з помилкою → весь ланцюг rejected.

Promise.all([
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3)
]).then(values => console.log(values)); // [1,2,3]

Повертає результат першого виконаного проміса.

Promise.race([
  new Promise(res => setTimeout(()=>res("A"), 1000)),
  new Promise(res => setTimeout(()=>res("B"), 500))
]).then(val => console.log(val)); // B

Синтаксичний цукор над Promise, що робить асинхронний код більш схожим на синхронний.

async function fetchData() {
  let res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  let data = await res.json();
  console.log(data);
}
fetchData();

async function getData() {
  try {
    let res = await fetch("wrong_url");
    let data = await res.json();
  } catch (err) {
    console.log("Помилка:", err.message);
  }
}

Це функції браузера для запуску коду з затримкою або регулярно.

setTimeout(()=>console.log("1 раз"), 1000);

let id = setInterval(()=>console.log("кожні 2с"), 2000);
clearInterval(id);

Event Loop — механізм, який керує виконанням асинхронного коду в JS.

console.log("A");
setTimeout(()=>console.log("B"), 0);
console.log("C");
// порядок: A, C, B

Макрозадачі: setTimeout, setInterval, I/O. Мікрозадачі: Promise, queueMicrotask.

setTimeout(()=>console.log("timeout"));
Promise.resolve().then(()=>console.log("promise"));
// результат: promise, timeout

Це функції, які можна "призупиняти" та "відновлювати". Повертають об’єкт-ітератор.

function* gen() {
  yield 1;
  yield 2;
  return 3;
}

let g = gen();
console.log(g.next()); // {value:1, done:false}
console.log(g.next()); // {value:2, done:false}
console.log(g.next()); // {value:3, done:true}

Для fetch існує AbortController.

let controller = new AbortController();

fetch("https://api", {signal: controller.signal});
controller.abort();

async function* gen() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
}

(async ()=>{
  for await (let val of gen()) {
    console.log(val); // 1, 2
  }
})();

for await...of зручно для асинхронних ітерацій.

function delay(ms) {
  return new Promise(res => setTimeout(res, ms));
}

delay(1000).then(()=>console.log("Через 1с"));
// Через 1с

Це ітератор, метод next() якого повертає Promise.

let asyncIterable = {
  async *[Symbol.asyncIterator]() {
    yield "A";
    yield "B";
  }
};

(async ()=>{
  for await (let v of asyncIterable) {
    console.log(v); // A, B
  }
})();

Додає завдання у чергу мікрозадач.

queueMicrotask(()=>console.log("Мікрозадача"));
console.log("Звичайний код");
// порядок: Звичайний код, Мікрозадача

async function getA() {
  return "A";
}
async function getB() {
  return "B";
}

async function main() {
  let [a,b] = await Promise.all([getA(), getB()]);
  console.log(a,b); // A B
}
main();

DOM (Document Object Model) — це об’єктне представлення HTML-документа. Завдяки DOM JavaScript може змінювати елементи, стилі та структуру сторінки.

document.title; // Отримати заголовок сторінки
document.body.style.background = "lightblue";

Основні методи:

document.getElementById("id");
document.getElementsByClassName("class");
document.getElementsByTagName("div");

document.querySelector(".class"); // перший
document.querySelectorAll("p");   // всі

let el = document.getElementById("demo");
el.textContent = "Новий текст";
el.innerHTML = "<b>Жирний текст</b>";

let img = document.querySelector("img");
img.setAttribute("alt", "Фото");
console.log(img.getAttribute("src"));
img.removeAttribute("width");

let div = document.createElement("div");
div.textContent = "Привіт!";
document.body.appendChild(div);

Або:

document.body.insertAdjacentHTML("beforeend", "<p>Hello</p>");

let el = document.querySelector("#demo");
el.remove();

Або через батьківський елемент:

el.parentNode.removeChild(el);

Подія — це дія користувача або браузера (клік, клавіша, завантаження).

let btn = document.querySelector("button");
btn.addEventListener("click", () => alert("Клік!"));

onclick замінює обробник, а addEventListener дозволяє додавати кілька.

btn.onclick = () => console.log("1");
btn.onclick = () => console.log("2"); // перезаписує

btn.addEventListener("click", ()=>console.log("1"));
btn.addEventListener("click", ()=>console.log("2")); // обидва спрацюють

Коли виконується обробник, передається об’єкт події з інформацією.

btn.addEventListener("click", (event)=>{
  console.log(event.type);   // click
  console.log(event.target); // сам елемент
});

Обробник ставиться на батьківський елемент, а події ловляться через event.target.

document.getElementById("list")
.addEventListener("click", e=>{
  if(e.target.tagName==="LI"){
    console.log("Клік по", e.target.textContent);
  }
});

Це сховище браузера для ключ-значення (рядки), зберігається навіть після перезавантаження.

localStorage.setItem("name","Оля");
console.log(localStorage.getItem("name")); // Оля
localStorage.removeItem("name");
localStorage.clear();

• localStorage — зберігає дані безстроково.
• sessionStorage — зберігає лише на час сесії (закриєш вкладку — видаляється).

fetch() використовується для HTTP-запитів.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json())
  .then(data => console.log(data));

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {"Content-Type":"application/json"},
  body: JSON.stringify({title:"Привіт", body:"Текст"})
})
.then(res => res.json())
.then(data => console.log(data));

let form = document.querySelector("form");
form.addEventListener("submit", e=>{
  e.preventDefault(); // відміняє перезавантаження
  let data = new FormData(form);
  console.log(data.get("username"));
});

input — спрацьовує при кожній зміні. change — коли елемент втратив фокус.

let inp = document.querySelector("input");
inp.addEventListener("input", ()=>console.log("Змінюється"));
inp.addEventListener("change", ()=>console.log("Закінчено")); 

document.cookie = "user=Olya; path=/; max-age=3600"; // 1 година
console.log(document.cookie);

Для зручності зазвичай використовують бібліотеки (наприклад, js-cookie).

Це метод для плавних анімацій у браузері.

function animate() {
  console.log("Кадр");
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

document.addEventListener("keydown", e=>{
  console.log("Натиснуто:", e.key);
});
document.addEventListener("keyup", e=>{
  console.log("Відпущено:", e.key);
});

document.addEventListener("click", e=>{
  console.log("X:", e.clientX, "Y:", e.clientY);
});

clientX/Y — відносно вікна, pageX/Y — відносно всієї сторінки.

ES6 (ECMAScript 2015) — це велике оновлення JavaScript, яке додало:

• let/const
• стрілкові функції
• класи
• шаблонні рядки
• деструктуризацію
• Promise
• модулі

Використовуються бектики ` і дозволяють вставляти змінні через ${}.

let name = "Оля";
console.log(`Привіт, ${name}!`); // Привіт, Оля!

Коротший синтаксис функцій. Не мають власного this та arguments.

let add = (a,b) => a+b;
console.log(add(2,3)); // 5

let [a,b] = [1,2];
console.log(a,b); // 1 2

let {name, age} = {name:"Іра", age:22};
console.log(name, age); // Іра 22

// spread (...)
let arr = [1,2,3];
let arr2 = [...arr, 4,5];
console.log(arr2); // [1,2,3,4,5]

// rest (...)
function sum(...nums) {
  return nums.reduce((a,b)=>a+b,0);
}
console.log(sum(1,2,3)); // 6

Синтаксичний цукор над прототипами.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log("Привіт, я " + this.name);
  }
}
let p = new Person("Олег");
p.greet();

class Animal {
  speak() { console.log("Звук"); }
}

class Dog extends Animal {
  speak() { console.log("Гав!"); }
}

new Dog().speak(); // Гав!

Дозволяють імпортувати/експортувати змінні та функції між файлами.

// math.js
export function add(a,b){ return a+b; }

// main.js
import {add} from "./math.js";
console.log(add(2,3));

// default export
export default function greet(){ console.log("Hi"); }
import greet from "./file.js";

// named export
export function sum(a,b){ return a+b; }
import {sum} from "./file.js";

Proxy дозволяє перехоплювати операції з об’єктом.

let obj = {name:"Іра"};
let proxy = new Proxy(obj, {
  get(target, prop) {
    return prop in target ? target[prop] : "Немає!";
  }
});
console.log(proxy.name); // Іра
console.log(proxy.age);  // Немає!

• Map — зберігає пари ключ-значення (будь-який тип ключа).
• Set — колекція унікальних значень.

let map = new Map();
map.set("a",1);
console.log(map.get("a"));

let set = new Set([1,2,2,3]);
console.log(set); // {1,2,3}

Вони зберігають лише об’єкти як ключі/значення і не заважають garbage collection.

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, "дані");
console.log(weakMap.get(obj));

Унікальний і незмінний тип даних, часто для прихованих властивостей.

let id = Symbol("id");
let user = {name:"Іра", [id]:123};
console.log(user); // {name:"Іра", Symbol(id):123}

Генератори дозволяють керувати потоком виконання асинхронно або поетапно.

function* idGen() {
  let id=1;
  while(true) yield id++;
}
let gen = idGen();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

async function* gen() {
  yield "A";
  yield "B";
}
(async ()=>{
  for await(let v of gen()){
    console.log(v);
  }
})();

Модульний патерн дозволяє інкапсулювати код і уникати глобальних змінних.

let Module = (function(){
  let secret = "приватне";
  return {
    getSecret: () => secret
  };
})();
console.log(Module.getSecret());

Патерн, який гарантує існування лише одного екземпляра.

class Singleton {
  constructor(){
    if(Singleton.instance) return Singleton.instance;
    Singleton.instance = this;
  }
}
let a = new Singleton();
let b = new Singleton();
console.log(a===b); // true

Бандл (bundle) — це об'єднаний файл, що містить весь JS-код, модулі, бібліотеки та ресурси проєкту, готовий для браузера.

• Сумісність із браузерами: сучасний код перетворюється у старіший формат.
• Менше запитів: один або кілька файлів замість сотень маленьких.
• Оптимізація: мінімізація, tree shaking, code splitting.
• Зручність розробки: модульний код працює як єдиний застосунок.

Приклад:

// math.js
export function add(a, b) { return a + b; }

// app.js
import { add } from './math.js';
console.log(add(2, 3));

// після бандлу (bundle.js) можна підключити в HTML:
<script src="bundle.js"></script>

Відкладене завантаження ресурсів, коли вони реально потрібні (зображення, модулі).

// динамічний імпорт
import("./math.js").then(module=>{
  console.log(module.add(2,3));
});

• мінімізувати доступ до DOM
• використовувати дебаунс/тротлінг для подій
• дробити великі задачі через setTimeout / requestIdleCallback
• використовувати кешування даних
• lazy loading для ресурсів