Add Length

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

Пример:
"apple ban" --> ["apple 5", "ban 3"]
"you will win" -->["you 3", "will 4", "win 3"]

👉 @frontendInterview

Подработка для веб-разработчиков от 2 часов в неделю! Делайте код ревью на одном из курсов по JavaScript, React, Node.js или других в HTML Academy. Учитесь сами, обучая других: дружное комьюнити, удалёнка, море фана, опыт преподавания и скидки для своих.
Приходите в команду: https://tml.io/2snii

​TypeScript void, never и unknown

Void
Тип данных Void можно назвать полной противоположностью типа any, так как этот тип означает отсутствие конкретного типа. Основное предназначение типа Void — явно указывать на то, что у функции или метода отсутствует возвращаемое значение.

Для функций и методов, которые ничего не возвращают и у которых отсутствует аннотация типа возвращаемого значения, вывод типов определяет принадлежность к типу void.
Тип Void является подтипом Any и супертипом для Null и Undefined.

 function a(  ): void {
   let result: number = 5;
   return result; // Error
 }
 function b(  ): void {
   let result: string = '5';
   return result; // Error
 }
 function c(  ): void {
   let result: any = 5;
   return result; // Ok
 }

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

Never обозначается ключевым словом never и так же как и void не имеет явных значений.
Тип Never можно указать только той функции, по сценарию из которой, программа, реально никогда не сможет выйти.

 function error( message: string ):  never {
   throw new Error( message );
 }

 function loop():  never {
   while( true ) { }
 }

Unknown
Тип Unknown является типобезопасным аналогом типа any и представлен в виде литерала unknown. Все типы совместимы с типом unknown, в то время как сам тип unknown совместим только с самим собой и типом any.
Кроме того, над типом unknown запрещено выполнение каких-либо операций.
let v0: any;
v0.a = 5; // Ok
v0.a = ''; // Ok
v0(); // Ok

let v1: unknown = v0; // Ok
v1.a = 5; // Error
v1.a = ''; // Error
v1(); // Error

👉 @frontendInterview

​Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами.

Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё:
•разработать мессенджер, используя только JavaScript, Typenoscript, CSS и API браузера;
•познакомиться с теорией и отработать её на практике в больших проектах;
•научиться брать ответственность за решения и вкладываться в общий результат;
•самостоятельно декомпозировать задачи и распределять время;•исследовать смежные сферы программирования, без которых невозможен фронтенд:
•информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП.

На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты.

А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.

Начать учиться

👉 @frontendInterview

👉 @frontendInterview

TypeScript Пересечение (Intersection Type)

Пересечение (Intersection) - мощный механизм TypeScript, который позволяет рассматривать множество типов данных, как один. Пересечение указывается с помощью оператора амперсанда &, по обе стороны от которого указываются типы данных.

Переменной, которой был указан тип пересечение A и B и С может быть присвоено значение, которое принадлежит к типам A и B и C одновременно.

 name: A & B & C; 
// значение должно принадлежать ко всем типам одновременно

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Сборка мусора в JS

Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память.

Основной концепцией управления памятью в JavaScript является принцип достижимости.
Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти.
Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок.

В интерпретаторе JavaScript есть фоновый процесс, который называется сборщик мусора. Он следит за всеми объектами и удаляет те, которые стали недостижимы.

Простой пример

 // в user находится ссылка на объект
 let user = {
   name: "John"
 };

Глобальная переменная user ссылается на объект {name: "John"}
Если перезаписать значение user, то ссылка потеряется:
user = null;
Теперь объект John становится недостижимым. К нему нет доступа, на него нет ссылок. Сборщик мусора удалит эти данные и освободит память.

Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node (2017)

Соберите полный стек, необходимый для создания современного веб-приложения, используя React: MongoDB (база данных NoSQL) и Express (фреймворк для серверов веб-приложений), который работает на Node (JavaScript на стороне сервера), очень хорошо дополняют React. В этой книге также будут рассмотрены многие другие инструменты, необходимые для создания полноценного веб-приложения: React Router, React-Bootstrap, Redux, Babel и webpack.

👉 @frontendInterview

Найти пропавшую букву

Напишите функцию, которая принимает массив букв в алфавитном порядке, следующие друг за другом. При этом одна буква будет пропущена. Функция должна вернуть пропущенную букву.

Примеры:
["a","b","c","d","f"] -> "e"
["O","Q","R","S"] -> "P"

👉 @frontendInterview

Как работать с датами и временем в JavaScript?

В JS есть встроенный объект: Date. Он содержит дату и время, а также предоставляет методы управления ими.

Например, его можно использовать для хранения времени создания/изменения, для измерения времени или просто для вывода текущей даты.

Для создания нового объекта Date нужно вызвать конструктор new Date()
Без аргументов – создать объект Date с текущими датой и временем:
let now = new Date();
alert( now ); // показывает текущие дату и время

Существуют методы получения года, месяца и т.д. из объекта Date:

 getFullYear()

Получить год (4 цифры)

 getMonth()

Получить месяц, от 0 до 11.

 getDate()

Получить день месяца, от 1 до 31, что несколько противоречит названию метода.

 getHours(), getMinutes(), getSeconds(), getMilliseconds()

Получить, соответственно, часы, минуты, секунды или миллисекунды.

Больше про объект Date можно узнать в статье.

👉 @frontendInterview

👉 @frontendInterview

​Почему не стоит использовать краткую запись свойств CSS?

Существует небольшая, но на удивление важная проблема, которую я часто замечал в коде других людей — это использование краткой записи свойств CSS.

Когда мы пишем что-то вроде этого:

 .btn {
   background: red;
 }

Мы всего лишь хотим, чтобы у нашей кнопки был красный фоновый цвет. Но на самом деле мы задаем целый набор правил:
CSS
.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}

За счет простого использования краткой записи, мы безоговорочно решили, что не хотим использовать фоновое изображение, заодно указав для него стартовую позицию с левого верхнего края, повторение по осям x и y и прокрутку вместе с элементом и т.д.

Почти все проблемы, баги и регрессии в CSS происходят из-за того, что мы делаем слишком многое слишком рано, а через некоторое время сталкиваемся с последствиями этого. Из этого факта следует один простой вывод: в CSS вам нужно делать лишь то, что нужно и ничего более.

👉 @frontendInterview