Как отследить событие закрытия браузера и вкладки с помощью JavaScript

Вам нужно отследить событие закрытия браузера или вкладки, чтобы предупредить пользователя о любых несохраненных изменениях на веб-странице? Предлагаем пошаговый алгоритм этой операции.

Читать

#статья | JavaScript_Teacher

Number()

Метод Number() используется для преобразования других типов данных в числа.

 x = true;
console.log(Number(x))
var x = false;
console.log(Number(x))
var x = "999";
console.log(Number(x))

1
0
999

#tips | JavaScript_Teacher

(React) Что будет если вызвать this.setState в render методе компонента?

Будут проблемы. Реакт перерисовывает компонент, если state изменился. setState === ситуации «стейт изменился», а «реакт перерисовывает компонент» === render метод. Получается, что будет циклическая перерисовка.

#собеседование | JavaScript_Teacher

Планировщик по управлению недвижимостью

В этом туториале с помощью Brynthum Scheduler мы создадим приложение для управления недвижимостью, которое будет отслеживать заказы на аренду различных квартир.

Читать

#статья | JavaScript_Teacher

parseFloat()

Этот метод принимает строку в качестве аргумента и возвращает число с плавающей точкой.

function addition(r) {
  return parseFloat(r) * 2.0;
}
console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))

Output:
4
4
6.6

#tips | JavaScript_Teacher

(React) В каких методах жизненного цикла стоит выполнять xhr запросы? В каких стоит «обновлять state на основе props»?

Xhr (ajax, асинхронные запросы) — нужно выполнять в момент componentDidMount

Обновление state, на основе props:

• react до версии 16.3 — componentWillReceiveProps
• react 16.3 и выше — getDerivedStateFromProps

#собеседование | JavaScript_Teacher

Задачи на Event Loop

Event Loop выполняет одну простую задачу — отслеживает стек вызовов и очередь обратного вызова. Если стек вызовов пуст, цикл событий возьмет первое событие из очереди и поместит его в стек вызовов, который его запустит. В данной статье автор разбирает задачи на Event Loop.

Читать

#статья | JavaScript_Teacher

toPrecision()

Этот метод используется для конвертации числа в число с указанной точностью. Метод возвращает полученное значение в виде строки.

var x = 9.656;
var newX = x.toPrecision(2);
console.log(newX)
var newX = x.toPrecision(4);  
console.log(newX)
var newX = x.toPrecision(6);  
console.log(newX)
console.log(typeof(newX))

Output:
9.7
9.656
9.65600
string

#tips | JavaScript_Teacher

(React) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?

setState — асинхронная функция. Чтобы выполнить, что-либо заведомо после обновления state, нужно использовать запись с callback’ом

this.setState({data: [1,2,3]}, () => {
  console.log('здесь, уже точно state будет обновлен')
})

Так же, чтобы обновить состояние, основываясь на предыдущее, подойдет следующая запись:

this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
});

#собеседование | JavaScript_Teacher

Эмуляторы операционных систем

Появление стандартов ECMAScript позволило улучшать и добавлять функции в JS, чтобы сделать его еще более быстрым и совместимым. В настоящее время в современном браузере ты можете создавать впечатляюще сложные приложения. Делимся статьей, где продемонстрированы лучшие эмуляторы операционных систем.

Читать

#статья | JavaScript_Teacher

toFixed()

Метод toFixed() форматирует число, используя запись с фиксированной запятой.

var x = 9.656;
var newX = x.toFixed(0);
console.log(newX)
var newX = x.toFixed(2); 
console.log(newX)
var newX = x.toFixed(4);  
console.log(newX)
var newX = x.toFixed(6);  
console.log(newX)
console.log(typeof(newX))

Output:
10
9.66
9.6560
9.656000
string

#tips | JavaScript_Teacher

Сравните использование конструкции async/await и генераторов для реализации одного и того же функционала

• При итерировании генератора с использованием метода .next() каждый вызов этого метода приводит к возврату одного значения с помощью ключевого слова yield. При использовании конструкции async/await await-выражения выполняются последовательно.

• Конструкция async/await упрощает реализацию определённого сценария использования генераторов.

• Значения, возвращаемые генератором, всегда имеют вид {value: X, done: Boolean}, а асинхронные функции возвращают промисы, разрешаемые со значением X, либо завершаются с ошибкой.

• Асинхронную функцию можно преобразовать в генератор, использующий промисы.

#собеседование | JavaScript_Teacher

Создание столбчатых диаграмм

Работая с данными, ты должен знать, как представить их графически. Это позволяет лучше и быстрее понять, что они говорят. Один из наиболее распространенных методов визуализации данных — гистограммы. Благодаря этой статье ты узнаешь, как легко создавать интерактивные диаграммы с помощью JavaScript.

Читать

#статья | JavaScript_Teacher

assign()

Этот метод используется для копирования свойств объекта в другой объект.

const person = {
  name: "John",
  age : 20
};
const obj = {
  ishuman : true
}
Object.assign(person, obj);
console.log(person);

Output:
{ name: 'John', age: 20, ishuman: true }

#tips | JavaScript_Teacher

Как организовать «глубокую заморозку» объекта?

Для того чтобы обеспечить «глубокую заморозку» объекта с использованием Object.freeze(), нужно создать рекурсивную функцию, которая «замораживает» свойства объекта, которые также являются объектами.

function deepFreeze(object) {
let propNames = Object.getOwnPropertyNames(object);
for (let name of propNames) {
let value = object[name];
object[name] = value && typeof value === "object" ?
deepFreeze(value) : value;
}
return Object.freeze(object);
}
let person = {
name: "Leonardo",
profession: {
name: "developer"
}
};
deepFreeze(person);
person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

Сообщение об ошибке выводится лишь в строгом режиме. В обычном режиме значение не меняется без вывода сообщений об ошибках.

#собеседование | JavaScript_Teacher

Повышение производительности

Делимся статьей, где автор дает советы по повышению производительности JavaScript. К ним относятся: использование локальных переменных, XMLHttpRequest, инструментов для отладки и многое другое.

Читать

#статья | JavaScript_Teacher

freeze()

Метод Object.freeze() замораживает объект. То есть он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости.

const person = {
  name: "John",
};
Object.freeze(person);
person.name = "Robert";
console.log(person.name);

Output:
John

#tips | JavaScript_Teacher

Как в JavaScript-функции передаются параметры: по ссылке или по значению?

Параметры всегда передаются по значению, но в переменные, представляющие объекты, записаны ссылки на объекты. Поэтому, когда в функцию передают объект и меняют свойство этого объекта, это изменение сохраняется в объекте и при выходе из функции. В результате возникает ощущение того, что параметры в функции передаются по ссылке. Но если изменить значение переменной, представляющей объект, это изменение не повлияет на объекты, находящиеся за пределами функции.

Вот пример:

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

Вот что выведет этот код:

10
changed
unchanged

#собеседование | JavaScript_Teacher

require и import

Одно из основных различий между require() и import() заключается в том, что require() может быть вызвана из любого места внутри программы. import()всегда запускается в начале файла. Делимся статьей, где автор рассказывает про require и import.

Читать

#статья | JavaScript_Teacher

create()

С помощью этого метода можно создать новый объект из существующего.

const person = {
  name: "John",
  introduction: function() {
    console.log(`My name is ${this.name}`);
  }
};
const me = Object.create(person);
me.name = 'Robert'; 
me.introduction();

Output:
My name is Robert

#tips | JavaScript_Teacher