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

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

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

Сравнение элементов двух массивов

Благодаря этой статьей ты научишься сравнивать элементы двух массивов. Рассмотрено два метода решения этой задачи: использование объектов Set; применение функций высшего порядка.

Читать

#статья | JavaScript_Teacher

charAt()

А этот метод возвращает сам символ с указанным индексом.

var str = "JavaScript is nice"
var newStr = str.charAt(1)
console.log(newStr);

Output:

a

#tips | JavaScript_Teacher

Создание QR-кода

Библиотека QRCode.js позволяет создавать QR-коды. Делимся статьей, где автор демонстрирует настройку и генерацию QR-кода. Также продемонстрировано использования кода в ванильном JS.

Читать

#статья | JavaScript_Teacher

#test | JavaScript_Teacher

Что такое «поднятие переменных»?

Сущность концепции «поднятия переменных» заключается в том, что объявления «поднимаются» в верхнюю часть текущей области видимости. В результате переменной можно воспользоваться до её объявления. Поднимаются лишь объявления переменных, но не код их инициализации. Обратите внимание на то, что поведение переменных, объявляемых с использованием ключевого слова var, отличается от поведения переменных и констант, объявленных с использованием let и const.

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

Использование ESLint

ESLint — это инструмент для выявления шаблонов, обнаруженных в коде ECMAScript/JavaScript, и составления отчетов о них. Во многом он похож на JSLint и JSHint. Благодаря этой статье ты узнаешь, как правильно пользоваться ESLint.

Читать

#статья | JavaScript_Teacher