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

Делимся статьей, где автор дает советы по повышению производительности 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

В чём разница между объектами Map и WeakMap?

Эти объекты ведут себя по-разному в том случае, если переменная, содержащая ссылку на объект, являющийся ключом одной из пар ключ/значение, оказывается недоступной. Вот пример:

var map = new Map();
var weakmap = new WeakMap();

(function() {
    var a = {
        x: 12
    };
    var b = {
        y: 12
    };

    map.set(a, 1);
    weakmap.set(b, 2);
})()

После того, как завершается выполнение IIFE, у нас уже не будет доступа к объектам a и b. Поэтому сборщик мусора удаляет ключ b из weakmap и очищает память. А вот содержимое map остаётся при этом неизменным.

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

Трекер расходов

SheetJS — это библиотека JavaScript для Excel, которая позволяет преобразовывать html-таблицу, массив или json в загружаемый xlsx-файл. Все это делается прямо в браузере. Благодаря этой статье ты узнаешь, как создать трекер расходов с помощью SheetJS.

Читать

#статья | JavaScript_Teacher

values()

Метод values() возвращает значения объекта.

const object1 = {
  name: 'John',
  age: 20,
};
console.log(Object.values(object1));

Output:
[ 'John', 20 ]

#tips | JavaScript_Teacher

Расскажите о шаблоне проектирования «Открытый модуль»

Шаблон «Открытый модуль» является разновидностью шаблона «Модуль». Цель этого шаблона заключается в поддержке инкапсуляции и в открытии некоторых свойств и методов, возвращённых в объектном литерале. Реализация этого шаблона:

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // Вывод: This is a method I want to expose!
Exposer.second();       // Вывод: Inside a private method!
Exposer.methodToExpose; // undefined

Недостаток этого шаблона заключается в том, что при его использовании нельзя обращаться к приватным методам.

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

webpack

Поскольку веб-приложения сильно зависят от JavaScript, клиентской стороне приходится обрабатывать все больше и больше задач. Один из лучших способов справиться с дополнительной нагрузкой — использовать модульную систему, такую как webpack. Делимся статьей, где автор знакомит с webpack.

Читать

#статья | JavaScript_Teacher

keys()

Этот метод возвращает ключи объекта.

const object1 = {
  name: 'John',
  age: 20,
};
console.log(Object.keys(object1));

Output:
[ 'name', 'age' ]

#tips | JavaScript_Teacher

Можете ли вы описать основное различие методов массивов forEach() и map()? В каких ситуациях вы предпочли бы один из этих методов другому?

Вот как работает .forEach():

• Он перебирает элементы массива.
• Он выполняет переданную ему функцию обратного вызова для каждого элемента массива.
• Он ничего не возвращает.

Вот краткая характеристика метода .map():

• Он перебирает элементы массива.
• Он преобразует каждый элемент исходного массива в элемент нового массива, вызывая переданную ему функцию для каждого элемента исходного массива.

В результате оказывается, что основное различие между .forEach() и .map() заключается в том, что .map() возвращает новый массив. Если вам нужно получить результат преобразования элементов исходного массива, не меняя этот массив, тогда стоит выбрать .map(). Если же нужно просто перебрать элементы массива — тогда можно воспользоваться .forEach().

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

🚀Прокачайте свой уровень разработки веб-приложений — освойте мощный фреймворк Nest.Js

Начните с бесплатного практического онлайн-урока от опытного программиста.

Открытый вебинар пройдет в рамках большого курса для JS-разработчиков, вы получите выгодные условия на обучение

⏰Встречаемся 17 апреля в 20:00 (мск).

👉Регистрируйтесь прямо сейчас, чтобы посетить бесплатный урок и получить спец. цену на курс: РЕГИСТРАЦИЯ.

Чтение документации API

Лучшая документация по API — это справочник, в котором кратко объясняется, что возможно, а что нет, и с чего начать. Он также служит местом, к которому пользователи могут обращаться с вопросами о синтаксисе или функциональности. В данной статье рассказано, как читать и понимать документацию API.

Читать

#статья | JavaScript_Teacher

padEnd

padEnd аналогичен padStart, только добавляет символы в конце строки.

var str = "15"
var newStr = str.padEnd(4, "3")
console.log(newStr);

Output:
1533

#tips | JavaScript_Teacher

Что такое «временная мёртвая зона» в ES6?

В ES6 выполняется подъём переменных и констант, объявленных с использованием ключевых слов let и const (выполняется и подъём сущностей, объявленных с использованием ключевых слов var, class и function). Однако в коде имеется зона, простирающаяся от входа в область видимости до объявления переменной или константы. При обращении к переменной или константе в этой зоне будет выдана ошибка. Это и есть «временная мёртвая зона» (Temporal Dead Zone, TDZ).

//console.log(aLet)  // выбросит ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

В данном примере TDZ заканчивается после объявления aLet, но не после присвоения aLet значения.

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

Веб-разработка – это удалёнка, развитие и множество интересных проектов.

Получите полноценную профессию, чтобы найти работу сразу после выпуска или даже во время обучения.

Никакой боли с бесконечными откликами на вакансии и собеседованиями. В HTML Academy за 12 лет работы мы подготовили сотни специалистов, которые успешно трудоустроились в ведущих IT-компаниях.

На курсе для вас будет всё для уверенного старта в веб-разработке:

— Личный наставник, который подскажет, что поправить, если не получается сделать как хочется;
— Минимум 3 проекта для портфолио, которые вы сможете показать будущему работодателю;
— Оплачиваемая стажировка, где вы получите опыт работы в команде.

До 14 апреля дарим скидку 15% на профессию "Фронтенд-разработчик".

Кстати, старт совсем скоро – уже на следующей неделе вы сможете начать обучение.

Оставляйте заявку и мы расскажем о профессии подробнее.

Преобразование чисел

Делимся статьей, где автор демонстрирует преобразование шестнадцатеричного числа в десятичное. Для этого используется ParseInt. Для наглядности приведен пример преобразования шестнадцатеричного кода цвета в его эквивалент в формате RGB.

Читать

#статья | JavaScript_Teacher

padStart

Этот метод используется для добавления символов в начале строки, чтобы результирующая строка достигла указанной длины. По умолчанию в начале строки добавляются пробелы, но может добавляться и другая строка, указанная во втором аргументе.

var str = "15"
var newStr = str.padStart(4, "3")
console.log(newStr);

Output:

3315


#tips | JavaScript_Teacher

Расскажите о шаблоне проектирования «Прототип»

Прототип (Prototype) — это порождающий шаблон проектирования. Он используется для создания объектов. Объекты, созданные с его помощью, содержат значения, скопированные из их прототипа (из объекта-образца). Этот шаблон ещё называют шаблоном Свойства (Properties).

Пример использования паттерна «прототип» — это инициализация неких объектов стандартными значениями, хранящимися в базе данных. Такие значения, записанные в прототип, копируются в новые объекты без обращения к базе данных.

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

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