Нотатки з JavaScript (частина 1)

Синтаксис

Змінну, яка не використовується, називають знаком нижнього підкреслення:

const x = new Array.from({length: 10}, (_, i) => i + 1);

Для застосування методу до чисел використовуються круглі дужки:

(2.6).toFixed(3);
// '2.600'

(4).toFixed(2);
// '4.00'

Це повʼязано з тим, що числа в JavaScript є primitives, а primitives не є обʼєктом і не мають методів. Використання круглих дужок перетворює число в обʼєкт Number, після чого можна викликати методи обʼєкта Number.

Робота з числами

Типізація числа

console.log('59');
// '59' (string)

Number('59');
// 59  (int)

console.log(+'59');
// 59  (int)

Number.parseInt('59px');
// 59 (int)

Number.parseInt('e59');
// NaN

Number.parseFloat('2.5rem');
// 2.5 (float)

Number.isNAN(34);
// false

Number.isNAN('34');
// false

Number.isNAN(+'34px');
// true

100/0
// Infinity

Як перевірити чи є значення чисел у JS

Number.isFinite(23);
// true

Number.isFinite('23');
// false

Number.isInteger(23);
// true

Number.isInteger(23.0);
// true

Number.isInteger(23.5);
// false

Математичні функції

Math.abs(-100); 
// 100

// Square root
Math.sqrt(25);
// 5

25 ** (1/2);
// 5

// Cubic root
8 ** (1/3);
// 2

Math.max(2, 5, 22);
// 22

Math.min(2, 5, 22);
// 2

Math.PI;
// 3.14...

// Removes decimal part
Math.trunc(123.45678);

Math.rand();
// 123

Рядки JavaScript

Виведення змінних у текстових рядках

const site = 'hosting.xyz';
console.log('I rented VPS server at ' + site);
console.log(`I rented dedicated server at ${site}`);

Рядок у JS є обʼєктом, тому в кожного рядка є свій набір методів. Для отримання символу в рядку можна використовувати метод at:

'test string'.at(5);
// output: s

Перетворення рядків

'Test String'.toUpperCase();
// TEST STRING

'Test String'.toLowerCase();
// test string

'Test String'.split(' ');
// ['Test', 'String']

Масиви JavaScript

let arr = ['a', 'b', 'c', 'd'];

array.slice()

Метод slice не змінює масив, а повертає новий.

Отримання частини масиву з 2 по 4 елемент

arr.slice(2, 4);

Отримати останній елемент масиву

arr.slice(-1);

Оскільки масиви є обʼєктами Javascript, то використання стандартного методу копіювання масиву

let new_arr = arr;

не призведе до копіювання, а лише створить змінну з покажчиком на вихідний масив. Тому під час зміни new_arr буде змінюватися і arr.

Для копіювання масиву використовуйте оператор розширення або метод array.slice() без параметрів:   

let new_arr = [...arr];
let new_arr = arr.slice();

array.splice()

Видаляє елементи з масиву, до якого застосовується метод. Параметри такі самі як і в array.slice(). Для створення копії масиву використовуйте array.toSpliced().

array.reverse() і array.toReverse()

Змінює порядок елементів масиву до якого застосовується метод. Аналогом array.reverse(), але без зміни масиву, до якого застосовується метод, є array.toReverse().

array.concat()

Обʼєднує кілька масивів в один.

let arr1 = ['a', 'b', 'c'];
let arr2 = ['e', 'd', 'f'];
let abc = arr1.concat(arr2);
console.log(abc);
// output: ['a', 'b', 'c', 'e', 'd', 'f']

Для обʼєднання масивів можна так само використовувати оператор розширення:

let abc = [...arr1, ...arr2];

array.join()

Перетворює масив у рядок, розділяючи елементи масиву роздільником, який вказується як паарметр:

let str = letters.join(' - ');
console.log(str);
// output: a - b - c - d - e - f

array.push()

Додає елемент у кінець масиву

let arr = [];
arr.push('USD');
arr.push('EUR');
console.log(arr);
// output: ['USD', 'EUR']

array.find() і array.findLast()

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

const money = [10, -20, 40, -10];
const firstWithdrawal = money.find(mov => mov < 0);
console.log(firstWithdrawal);
// -20

array.findIndex() і array.findLastIndex()

Працює так само як і array.find(), але повертає не сам елемент, а його порядковий номер у масиві. Такий пошук корисний, коли необхідно видалити певний елемент масиву і для цього необхідно знати його порядковий номер.

let money = [10, -20, 40, -10];
let index = money.find(val => val < 0);
money.splice(index, 1);

array.flat()

Перетворює багатовимірний масив на одновимірний. Як параметр приймає кількість рівнів вкладеності, які слід перемістити на перший рівень.

Як відсортувати значення масиву JavaScript

Якщо сортувати необхідно рядки, то достатньо використовувати метод array.sort(), який змінює масив, сортуючи значення в алфавітному порядку:

const developers = ['Leonid', 'Andrey', 'Eugen', 'Ilya'];
developers.sort();
console.log(developers);
// ["Andrey", "Eugen", "Ilya", "Leonid"[

Якщо вихідний масив необхідно залишити незмінним, використовуйте unmutable метод array.toSorted().

Оскільки метод array.sort() перетворює числа в рядки, а потім їх сортує, то для правильного сортування необхідно використовувати callback функцію:

const prices = [100, 20, 400, 3];
prices.sort();
console.log(prices);
// [100, 20, 3, 400]

// a - current element, b - next element
// return < 0, a, b (keep order)
// return > 0, b, a (change order)

// Ascending order
prices.sort((a, b) => {
  return (a > b) ? 1: -1;
});
// or
prices.sort((a, b) => a - b);

console.log(prices);
// [3, 20, 100, 400]
// []

Як перевірити наявність елемента в масиві

let money = [10, -20, 40, -10];

// EQUALITY
let test = money.includes(40);
console.log(test);
// true

// CONDITION
let anyDeposits = money.some(val => val > 10);
console.log(anyDeposits);
// true

Перевірка на відповідність умові

Щоб перевірити відповідність усіх елементів масиву певній умові використовується метод array.every(). Тільки якщо для всіх елементів масиву функція поверне true, то результатом методу array.every() буде true, в іншому випадку — false.

let money = [10, -20, 40, -10];
let onlyDeposits = money.every(val => val >= 0);
console.log(onlyDeposits);
// false

Як отримати останній елемент масиву в JS

Для отримання останнього елемента масиву в JavaScript можете використовувати будь-який із наведених нижче методів:

arr[arr.length - 1];
arr.slice(-1)[0];
arr.at(-1); 

Як пройтися по всіх елементах масиву

const arr = [100, 200, -400, 500, -120];
// for loop
for (let val of arr) {
  console.log(val);
}

// for loop with index
for ([i, val] = arr.entries()) {
   console.log(i + ': ' + val);
}

// foreach loop
arr.forEach(function(val) {
  console.log(val);
});

// foreach with index
arr.forEach(function(val, i) {
  console.log(i + ': ' + val);
});

Використання циклу for дає змогу в коді додати умову і перервати виконання циклу, тоді як під час використання array.forEach() такої можливості — немає.

Якщо при виклику array.forEach() помножити значення на два, то це призведе до зміни значень поточного масиву. Якщо масив змінювати не потрібно, то для цього використовується array.map(), який поверне новий масив.

// Multiply values by 2 in the arr array
arr.forEach(function(val) {
  val = val * 2;
});

// Create new array with values multiplied by 2
let new_array = arr.map(function(val) {
  val = val * 2;
});

Видалення зайвих елементів масиву

Точніше створення нового масиву, який міститиме тільки потрібні елементи. Наприклад, необхідно отримати масив, який міститиме тільки позитивні елементи.

const arr = [100, 20, -40, 50, -100, 30];
arr.filter(function(val) {
  if (val > 0) {
    return true;
  } else {
    return false;
  } 
});

console.log(arr);
// [100, 20, 50, 30]

Як підсумувати елементи в масиві

const arr = [100, 20, -40, 50, -100, 30];
cons sum = arr.reduce(function(acc, val, i) {
  console.log(`Iteration ${i}: ${val}. Total: ${acc}`)
  return acc + cur;
}, 0);

console.log(sum);
// 60

Групування масивів

const trn = [100, 200, -50, -100];
let groupedTrn = Object.groupBy(trn, pay => pay > 0 ? 'deposit': 'withdrawal');
console.log(groupedTrn);
// {
//   deposits: [100, 200],
//.  withdrawal: [-50, -100]
//. }

Як заповнити масив значеннями

const arr = new Array(5);
arr.fill(1);
// [1, 1, 1, 1, 1]

arr.fill(100, 3, 4)
// [1, 1, 100, 100, 1]

const x = Array.from({length: 10}, () => 1);
console.log(x);
// [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

const x = Array.from({length: 10}, (cur, i) => i + 10);
console.log(x);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const nodeArray = new Array.from(
  document.querySelector('.myclass'), 
  el => Number(
    el.textContent.replace(' EUR', '')
  )
);

Асоціативні масиви або структури в JavaScript

Масив, у якому як ключ використовується не число, а текст, називається асоціативним;  

const currency = new Map([
  ['USD', 'United States dollar'],
  ['EUR', 'Euro'],
  ['UAH', 'Ukrainian hryvna']
]);

Структури з унікальними значеннями

Для зберігання в масиві тільки унікальних значень створюється набір значень SET.

let currencies = new Set(['USD', 'EUR', 'GBP', 'UAH']);

Функції

Коли визначаєте функцію в JavaScript, то вона повертає посилання на адресу памʼяті, в яку вона записана. Можна сказати що поводиться функція так само як і змінна. Тому з функціями можна працювати як зі змінними — присвоювати їхні значення змінній, елементам обʼєкта ....   

const myFunction = function() {
    console.log(123);
}
myFunction();

const myObj {
  prop1: 'test',
  myFunc: function() {
    console.log(this.prop1)
  }
}
myObj.myFunc();

Приклад використання стрілочної функції

array.map(val => val * 2);
array.map((val, i, arr) => {
  console.log(`${i}: ${val}`);
  return val * 2; 
});

DOM

Отримання обʼєкта на сторінці

const menu = document.querySelector('.nav');

const menu_items = [...document.querySelectorAll('.nav.items')];
menu_items.foreach(function(el, i) {
  if (i % 2 === 0) el.style.backgroundColor = 'green';
});

Додавання HTML елемента на сторінку:

menu.insertAdjacentHTML('afterbegin', '<div class="menu">One more item</div>');

<!-- beforebegin -->
<div class="nav">
  <!-- afterbegin -->
  ...
  text
  ...
  <!-- beforeend -->
</div>
<-- afterend -->

Зміна вмісту елемента:

menu.innerHTML = '';

Події

const button = document.querySelector('button');
button.addEventlistener(function(e) {
  // Prevent form from submitting
  e.preventDefault();
  ...
});