JavaScript 🇺🇦 є каналом, який допомагає вивчати JavaScript разом з іншими учасниками. Це високооплачувана професія, яка надає багато можливостей для розвитку. На каналі ви знайдете корисні матеріали, інструкції та поради з вивчення JavaScript. Також ми надаємо підтримку у пошуку роботи у сфері програмування. Приєднуйтесь до нас, щоб покращити свої навички в програмуванні та знайти нові кар'єрні можливості! Долучайтесь до нашого каналу JavaScript 🇺🇦 прямо зараз! 🚀
11 Feb, 18:01
display: flex в CSS та умовні оператори в JS.11 Feb, 10:01
10 Feb, 10:01
09 Feb, 10:04
splice() дозволяє змінювати вміст масиву, видаляючи або замінюючи існуючі елементи на нові. const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
console.log(months);
// ["Jan", "Feb", "March", "April", "May"]
slice().08 Feb, 18:07
07 Feb, 14:14
Object.assign() копіює всі власні властивості, що перераховуються, з одного або декількох вихідних об'єктів в цільовий об'єкт. const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }06 Feb, 18:00
const arr = [1, 2, 3];
console.log(Array.from(arr, x => x + x));
06 Feb, 10:01
05 Feb, 10:03
Reflect.preventExtensions() запобігає додаванню нових властивостей до об'єкта. Він схожий на Object.preventExtensions(), але з деякими відмінностями. const object1 = {};
console.log(Reflect.isExtensible(object1));
// true
Reflect.preventExtensions(object1);
console.log(Reflect.isExtensible(object1));
// falsetarget методу Reflect не є об'єктом (примітивом), це викличе TypeError. З методом Object аргумент target, що не є об'єктом, перетвориться на об'єкт.04 Feb, 18:01
04 Feb, 10:01
03 Feb, 18:01
03 Feb, 10:01
01 Feb, 18:44
01 Feb, 10:03
toUpperCase() повертає рядкове значення виклику, перетворене на верхній регістр.const sentence =
'The quick brown fox jumps over the lazy dog.';
console.log(sentence.toUpperCase());
// THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
null або undefined, буде TypeError.30 Jan, 18:20
console.log(1234 / 10 | 0);
console.log(1234 / 100 | 0);
console.log(43.21 | 0);
30 Jan, 10:01
29 Jan, 10:03
Reflect.isExtensible() визначає, чи об'єкт розширюється (чи можуть до нього додаватися нові властивості). Він схожий на Object.isExtensible(), але з відмінностями. const object1 = {};
console.log(Reflect.isExtensible(object1));
// true
Reflect.preventExtensions(object1);
console.log(Reflect.isExtensible(object1));
// false
const object2 = Object.seal({});
console.log(Reflect.isExtensible(object2));
// falsetarget тут не є об'єктом (примітивом), то викликається TypeError. Із Object.isExtensible() аргумент target, який не є об'єктом, поверне false без жодних помилок.28 Jan, 18:01
28 Jan, 10:01
27 Jan, 18:51
27 Jan, 10:01
26 Jan, 10:04
trimEnd() видаляє прогалини з кінця рядка. До них відносяться пробіли, табуляції тощо. const greeting = ' Hello world! ';
console.log(greeting);
// " Hello world! ";
console.log(greeting.trimEnd());
// " Hello world!";
25 Jan, 19:14
25 Jan, 10:03
Object.keys(), Object.values() і Object.entries().
const zoo = {
lion: 'meat',
panda: 'grass',
};
Object.keys(zoo);
// ['lion', 'panda']
Object.values(zoo);
// ['meat', 'grass']
Object.entries(zoo);
// [['lion', 'meat'], ['panda', 'grass']]
Object.fromEntries. По суті, це протилежність Object.entries.24 Jan, 18:52
24 Jan, 10:03
24 Jan, 08:45
23 Jan, 18:13
const arr = [4, 9, 16];
const result = Math.abs(arr);
console.log(result);
23 Jan, 10:56
svg, що анімуються бібліотекою anime.js.22 Jan, 10:04
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode) // Результат: True або False21 Jan, 18:43
21 Jan, 10:01
20 Jan, 14:47
Function Expression — це спосіб зберігати функції у змінних.// create a function named greet()
function greet() {
console.log("Hello World!");
}
// store a function in the displayPI variable
// this is a function expression
let displayPI = function() {
console.log("PI = 3.14");
}
// call the greet() function
greet();
// call the reply() function
displayPI();
// Output:
// Hello World!
// PI = 3.14
greet() та function expression у змінній displayPI. Для виклику функції використовуються її ім'я і дужки (): greet() для іменованої функції та displayPI() для функції, збереженої у змінній.20 Jan, 10:01
19 Jan, 19:12
19 Jan, 10:03
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Результат: повертає true, якщо у користувача пристрій Apple
18 Jan, 18:35
18 Jan, 10:04
=== та !== для запобігання неявному перетворенню типів.const a = 5;
const b = '5';
console.log(a = b); // true
console.log(a ≡ b); // false
17 Jan, 19:18
17 Jan, 10:01
16 Jan, 15:09
let date = new Date('December 25, 1995 23:15:30');
let result = date.getHours();
console.log(result);16 Jan, 10:01
15 Jan, 10:03
function processUserData(user) {
validateUser(user);
const processedData = manipulateData(user);
displayData(processedData);
}14 Jan, 14:11
14 Jan, 12:10
14 Jan, 10:31
Pug та SCSS. Кожна кнопка, що натискається — це input з type="radio", при натисканні на який активуються певні стилі.13 Jan, 12:10
13 Jan, 10:01
12 Jan, 10:28
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
displayInfo() {
console.log(`Ім'я: ${this.name}, Вік: ${this.age}`);
}
}11 Jan, 18:04
09 Jan, 19:47
for (i = 5; i < 8; i++) {
for (j = i; j < i+1; j++) {
console.log(j);
}
}09 Jan, 10:01
08 Jan, 10:36
function calculateSquareRoot(num) {
if (typeof num ≢ 'number' || num < 0) {
throw new Error('Невірні вхідні дані');
}
return Math.sqrt(num);
}07 Jan, 19:18
07 Jan, 10:01
06 Jan, 18:01
06 Jan, 10:01
05 Jan, 18:09
const myFavoriteObj = {
guessThis() {
const getName = () => {
console.log(this.name);
};
getName();
},
name: "Marko Polo",
thisIsAnnoying(callback) {
callback();
},
};
myFavoriteObj.guessThis();
myFavoriteObj.thisIsAnnoying(function() {
console.log(this);
});05 Jan, 10:03
SOLID (Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, Dependency Inversion) забезпечують гнучкість, підтримуваність та читабельність коду.// Приклад принципу єдиної відповідальності
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
displayInfo() {
console.log(`Имя: ${this.name}, Возраст: ${ this.age}`);
}
saveToDatabase() {
// Логіка збереження користувача до бази даних
}
}
04 Jan, 18:04
04 Jan, 10:03
function fetchData(config) {
const { url, method = 'GET', headers } =
config;
// Логіка запиту
}
const requestConfig = {
url: 'https://api.example.com/data',
method: 'POST',
headers: { 'Content-Type': 'application/json' }
};
fetchData(requestConfig);03 Jan, 19:27
03 Jan, 10:01
Vue (Nuxt v4, Vite v6, Vitest v3 і Pinia v3), а також аналізує поточний стан режиму Vapor в даному JS-фреймворку.02 Jan, 18:04
const result = '10' - 8 + true;
console.log(result);
02 Jan, 11:37
01 Jan, 10:03
function processData(data) {
validateData(data);
const transformedData =
transformData(data);
saveData(transformedData);
sendNotification('Data processed
successfully');
}31 Dec, 18:01
background в CSS і типи даних null та undefined в JavaScript.28 Dec, 10:01
const MAX_ALLOWED_ATTEMPTS = 3;
if (attempts > MAX_ALLOWED_ATTEMPTS) {
// Дії при перевищенні максимальної кількості спроб
}
26 Dec, 18:01
const obj = {
objProp: 42,
};
class Foo {
get classProp() {
return 24;
}
}
const bar = new Foo();
console.log('objProp' in obj);
console.log('toString' in obj);
console.log('classProp' in bar);
console.log(obj.hasOwnProperty('objProp'));
console.log(obj.hasOwnProperty('toString'));
console.log(bar.hasOwnProperty('classProp'));26 Dec, 10:01
26 Dec, 09:15
25 Dec, 10:01
Rest дозволяє передавати змінну кількість аргументів на функцію, що робить код більш гнучким.function sum(...numbers) {
return numbers.reduce((acc, num) ⇒ acc + num, 0);
}24 Dec, 18:21
box-model в CSS, і пояснює про тип даних boolean.24 Dec, 10:01
23 Dec, 18:01
document.execCommand("copy") для обробки операцій буфера обміну. Цей підхід був синхронним і обмеженим — він дозволяв копіювати текст лише з вибраних елементів DOM. Крім того, він не працював узгоджено в різних браузерах.API navigator.clipboard вирішує ці проблеми, надаючи асинхронні методи, які працюють з різними типами даних. Крім того, це безпечніше — браузери вимагають явного дозволу, перш ніж дозволити доступ до буфера обміну. Детальніше про це — у статті.23 Dec, 10:01
22 Dec, 10:01
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num ⇒ num * 2);
const evenNumbers = numbers.filter(num ⇒ num % 2 ≡ 0);
const sum = numbers.reduce((acc, num) ⇒ асс + num, 0);
21 Dec, 19:17
21 Dec, 11:21
function processUserData(userData) {
if (!userData) {
console.error('No user data provided');
return;
}
// Логіка обробки даних
}19 Dec, 18:01
const foo = () => {
try {
throw new Error("error");
return 24;
} catch (error) {
return error;
} finally {
return 42;
}
};
console.log(foo());19 Dec, 10:01
01 Dec, 10:01
Object.keys() повертає масив усіх властивостей об’єкта.const keys = Object.keys(person);
console.log(keys); // Виведе: ['name', 'age']
30 Nov, 18:01
30 Nov, 10:01
Object.freeze() запобігає зміні властивостей об'єкта.Object.freeze(person);
person.age = 32; // Помилка у строгому режимі (TypeError)
29 Nov, 19:29
29 Nov, 10:40
28 Nov, 18:01
function myFunc() {
let a = (b = 33)
}
myFunc()
console.log(b)28 Nov, 10:01
27 Nov, 18:01
27 Nov, 12:13
ssn, яка буде перерахована при переборі властивостей об'єкта.Object.defineProperty(person, 'ssn', {
value: '123-45-6789',
writable: true,
enumerable: false
});26 Nov, 19:46
26 Nov, 17:05
26 Nov, 10:01
25 Nov, 19:16
const book = {
_title: 'JavaScript Book',
get title() {
return this._title;
},
set title(newTitle) {
this._title = newTitle;
}
};25 Nov, 16:00
25 Nov, 14:35
25 Nov, 10:01
24 Nov, 16:09
JavaScript" ви зможете отримати в подарунок майстер-клас з розвʼязання Machine Learning задачі. Вам потрібно його вказати під час реєстрації в боті😁 24 Nov, 10:01
_ перед ім'ям властивості сигналізує, що воно має бути розглянуте як захищене і не повинно змінюватися безпосередньо.const car = {
_brand: 'Toyota',
get brand() {
return this._brand;
}
};23 Nov, 18:01
const arr = ['One', 'Two', 'Three', 'Four', 'Five'];
const iterator = arr.keys();
for (const key of iterator) {
console.log(key);
}
23 Nov, 10:02
...) можна створити поверхневу копію об'єкта.const clone = { ...person };22 Nov, 08:10
21 Nov, 18:10
const arr = [3, 8, 14];
const [elem, ...rest] = arr;
const javascript_tests = rest[0];
console.log(javascript_tests);
21 Nov, 16:10
21 Nov, 10:01
20 Nov, 19:38
20 Nov, 10:01
Object.create() дозволяє створити новий об'єкт, який успадковує властивості та методи від батьківського об'єкта parent.const parent = {name: 'John'};
const child = Object.create(parent);
child.age = 5;20 Nov, 08:10
19 Nov, 18:01
19 Nov, 10:01
18 Nov, 18:01
18 Nov, 10:01
17 Nov, 10:01
Object.defineProperty() дозволяє налаштувати атрибути властивості, такі як writable, configurable та enumerable.const product = {};
Object.defineProperty(product, 'price', {
value: 50,
writable: false,
configurable: true,
enumerable: true
});16 Nov, 18:01
function a(value) {
return true - value;
}
var b = a('4') + a('-4') + a(-'4') + a(4);
console.log(b); 16 Nov, 10:01
originalName змінюється, коли властивість name в об'єкті user перезаписується.const user = {name: 'Alice'};
const originalName = user.name;
user.name = 'Bob';
console.log(originalName); // Виведе: 'Bob'15 Nov, 18:01
14 Nov, 18:01
14 Nov, 10:01
13 Nov, 10:01
colors елементи можуть бути доступні за індексом.const colors = ['red', 'green', 'blue'];
console.log(colors[1]); // Виведе: 'green'
12 Nov, 18:53
12 Nov, 12:13
11 Nov, 11:48
10 Nov, 18:01
10 Nov, 10:01
const key = 'location';
person[key] = 'New York';
09 Nov, 18:01
09 Nov, 10:01
const id = Symbol('id');
const user = {[id]: 123};
console.log(user[id]); // Виведе: 12308 Nov, 18:01
08 Nov, 10:01
07 Nov, 18:01
const o = {}
console.log("prop" in o === o.hasOwnProperty("prop"))
console.log("toString" in o === o.hasOwnProperty("toString"))07 Nov, 13:01
06 Nov, 10:01
Object.keys() повертає масив імен всіх властивостей об'єкта, які перераховуються.const keys = Object.keys(person);
console.log(keys); // Виведе: ['name', 'age']
05 Nov, 18:01
05 Nov, 12:15
04 Nov, 19:20
04 Nov, 10:01
03 Nov, 18:01
03 Nov, 11:14
Object.values() повертає масив.const values = Object.values(person);
console.log(values); // Виведе: ['John', 30]
02 Nov, 11:50
Person з конструктором і методом sayHello(). Потім ми створюємо екземпляр класу та викликаємо метод об'єкта.class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Привіт, мене звати ${this-name} і мені ${this.age} років.`);
}
}
const person1 = new Person('Іван', 25);
person1.sayHello();26 Oct, 17:10
26 Oct, 15:00
26 Oct, 09:02
MathUtils можуть бути викликані без створення екземпляра класу.class MathUtils {
static add(x, y) {
return x + y;
}
static multiply(x, y) {
return x * y;
}
}
console.log(MathUtils.add(2, 3)); // Виведе 5
console.log(MathUtils.multiply(2, 3)); // Виведе 625 Oct, 18:24
25 Oct, 09:01
signature_pad.24 Oct, 18:05
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 1);
}
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 1);
}24 Oct, 09:01
23 Oct, 09:01
super використовується для виклику конструктора батьківського класу.class Vehicle {
constructor(type) {
this.type = type;
}
}
class Car extends Vehicle {
constructor(type, brand) {
super(type);
this.brand = brand;
}
}
const car = new Car('Автомобіль', 'Toyota');
console.log(car.type); // Виведе "Автомобіль"
console.log(car.brand); // Виведе "Toyota"22 Oct, 17:01
22 Oct, 12:58
22 Oct, 09:56
21 Oct, 13:53
21 Oct, 09:01
20 Oct, 17:01
const numbers = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 5]
console.log([...new Set(numbers)])
20 Oct, 09:01
Task представляє завдання із заголовком, описом та статусом виконання.class Task {
constructor(title, description) {
this.title = title;
this.description = description;
this.isCompleted = false;
}
complete() {
this.isCompleted = true;
}
}
const task1 = new Task('Задача 1', 'Опис задачі 1');
task1.complete();
console.log(`Задача "${taskl.title}" завершена: ${task1.isCompleted}`);19 Oct, 17:54
19 Oct, 09:01
Product та обчислюємо загальну вартість продуктів за допомогою методу reduce.class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
const products = [
new Product('Книга', 20),
new Product('Фільм', 15),
new Product ('Музика', 10)
];
const totalPrice = products.reduce((sum, product) ⇒ sum + product.price, 0);
console.log(`Загальна вартість: $${totalPrice}`);18 Oct, 15:42
18 Oct, 09:12
17 Oct, 17:42
let a = {},
b = {key: 'b'},
c = {key: 'c'};
a[b] = 1;
a[c] = 2;
console.log(a[b]);17 Oct, 11:05
16 Oct, 18:33
16 Oct, 09:01
User використовується для створення об'єктів користувачів, які можуть бути збережені у масиві чи БД.class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const users = [
new User('user1', '[email protected]'),
new User('user2', '[email protected]')
];
console.log(users[0].username); // Виведе "user1"15 Oct, 17:11
15 Oct, 15:10
15 Oct, 09:01
14 Oct, 18:41
14 Oct, 09:01
13 Oct, 09:16
Animal використовується для створення об'єкта cat, який представляє тварину.class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} видає звук. `);
}
}
const cat = new Animal('Кіт');
cat.speak(); // Виведе "Кіт видає звук."12 Oct, 17:55
12 Oct, 09:01
Temperature дозволяє переводити температуру з градусів Цельсія в градуси Фаренгейта, і назад.class Temperature {
constructor(celsius) {
this.celsius = celsius;
}
get fahrenheit() {
return(this.celsius * 9/5) + 32;
}
set fahrenheit(value) {
this.celsius = (value - 32) * 5/9;
}
}
const temp = new Temperature(25);
console.log(temp.fahrenheit); // Виведе 77
temp.fahrenheit = 86;
console.log(temp.celsius); // Виведе 30
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
