JS: любопытные решения задач

- Найти сумму чисел от 1 до n короче всего не через цикл или рекурсию, а по уравнению Гаусса:
lastNumber * (lastNumber + 1) / 2;

- Самый короткий способ найти количество цифр в числе:
String(number).length;

- Кратчайший поиск индекса последнего вхождения числа в массив:
array.lastIndexOf(number);

#JS

JS - Map/WeakMap, Set/WeakSet

- Map - это коллекция, похожая на обычыные объекты, но более гибкая - ключами могут быть в том числе объекты и функции, - и с удобным набором методов.

- WeakMap - аналог Map, который гарантированно удаляется сборщиком мусора после удаления ссылок на объекты, добавленные в коллекцию.

- Set создает множества:
const s = new Set([0, 1, 2, 3]);
Его weak-аналог отличается тем же, чем и в случае с Map.

#JS

Тонкости let и const

- Хотя константе нельзя присвоить новое значение, само это значение менять можно:

const x = [2,4,5];
x[0] = 6; // массив в константе x изменится на [6, 4 ,5]

- Дважды объявить через let переменную с одинаковым именем в одной области видимости нельзя, а в разных - можно:

let x = 10;
const z = () => {
let x = 20;
console.log(x)
}
z() // выведет 20

- Существует феномен Temporal Dead Zone - "временная мёртвая зона", появляющаяся, когда поток входит в лексическую область видимости, содержащую переменную, но еще не доходит до неё. Попытка обратиться к переменной в мёртвой зоне вызовет ошибку - в отличие от var, которая поднимается в самое начало блока и выводит undefined, если обратиться к ней до привязки.

const x = () => {
console.log(typeof z);
let z = 10;
}
x() // выбросит ошибку

Любопытно, что обращение к let-переменной в более высокой области видимости до её инициализации с операцией typeof выведет undefined.

- При объявлении в глобальной области видимости var становится свойством глобального объекта window. Это небезопасное поведение изменили в ES6: let и const не связаны с глобальным объектом.

#JS

Коротко о Vue-Class-Component:

- Computed properties определяются как геттеры и сеттеры класса:
// Declared as computed property getter
get name() {
return this.firstName + ' ' + this.lastName
}

- Хуки и методы жизненного цикла можно определять как простые методы.

- Хуки из vue router и другие не из коробки нужно регистрировать, желательно в отдельном файле, через Component.registerHooks.

- Можно создавать кастомные декораторы:
@MyDecorator
method(arg)

- Возможно наследование через обычный ES6 синтаксис.

- Нельзя использовать функции-стрелки с this внутри и конструкторы. Вместо них используют обычные методы (вместо стрелок) и методы жизненного цикла. Почему нельзя? Конструктор вызывается под капотом компонента, собирая данные, если вызывать вручную - вызовется дважды:

// DO NOT do this. Use "created" lifecycle hook instead.
constructor() {
fetch('/posts.json')
.then(res => res.json())
.then(posts => {
this.posts = posts
})
}

#Vue #JS