JavaScript: A Beginner's Guide (2019)

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

👉 @frontendInterview

Расскажите об обобщённых типах в TypeScript.

Обобщённые типы (generics) позволяют создавать компоненты или функции, которые могут работать с различными типами, а не с каким-то одним. Рассмотрим пример:

/** Объявление класса с параметром обобщённого типа */
class Queue<T> {
private data = [];
push = (item: T) => this.data.push(item);
pop = (): T => this.data.shift();
}

const queue = new Queue<number>();
queue.push(0);
queue.push("1"); // Ошибка : в такую очередь нельзя добавить строку, тут разрешено использовать лишь числа

👉 @frontendInterview

Сколько времени учатся на фронтендера с нуля?

От 6-ти месяцев. Вот несколько правил, с которыми сделать это будет проще:

- Не изучайте фреймворк, не разобравшись в азах;
- Не учитесь по любительским урокам, где могут показать плохие практики;
- Не делайте перерывов в обучении;
- Выполняйте практические задания, выбирайте их соответственно своему уровню;
- Найдите ментора, который будет вас проверять и выявлять пробелы в знаниях.

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

Можно выбрать готовое решение - Профессия Frontend-разработчик PRO от Skillbox.

Курс разработан грамотно и проверен на тысячах студентов.

В него входят:
- 3 месяца бесплатного периода;
- изучение React, Vue
- гарантия трудоустройства;
и многое другое.

👉 @frontendInterview

Что произойдет при использовании React пропов в начальном состоянии (Initial State)?

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

В приведенном ниже примере обновленное значение инпута никогда не отобразится:

 class MyComponent extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
       records: [],
       inputValue: this.props.inputValue
     };
   }
   render() {
     return <div>{this.state.inputValue}</div>
   }
 }

Значение обновится при использовании пропов в методе render():
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
record: []
}
}

render() {
return <div>{this.props.inputValue}</div>
}
}

Слова в двоичный код

Напишите функцию, которая принимает строку и возвращает массив, состоящий из двоичных чисел, соответствующих ASCII коду символов строки.

Пример:
'man' => [ '01101101', '01100001', '01101110' ]

👉 @frontendInterview

👉 @frontendInterview

Современный фронтенд на нашем втором канале

17к фронтендеров уже читают его, подпишись и ты

👉 @seniorFront

Как в TypeScript реализовать свойства класса, являющиеся константами?

В TypeScript, при объявлении свойств классов, нельзя использовать ключевое слово const. При попытке использования этого ключевого слова выводится следующее сообщение об ошибке: A class member cannot have the ‘const’ keyword. В TypeScript 2.0 имеется модификатор readonly, позволяющий создавать свойства класса, предназначенные только для чтения:

class MyClass {
readonly myReadonlyProperty = 1;
myMethod() {
console.log(this.myReadonlyProperty);
}
}

new MyClass().myReadonlyProperty = 5; // ошибка, так как свойство предназначено только для чтения

👉 @frontendInterview

👉 @frontendInterview

Почему следует быть осторожным при распространении (spread) пропов на DOM-элементы?

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

Например:
const ComponentA = () =>
<ComponentB isDisplay={true} className='someClassName' />

const ComponentB = ({ isDisplay, ...domProps }) =>
<div {...domProps}>{ComponentB}</div>

👉 @frontendInterview

Расскажите об основных компонентах TypeScript.

TypeScript включает в себя три основных компонента:

1. Язык. Это, с точки зрения разработчиков, самая важная часть TypeScript. «Язык» — это синтаксис, ключевые слова, всё то, что позволяет писать программы на TypeScript.

2. Компилятор. TypeScript обладает компилятором с открытым исходным кодом, он является кросс-платформенным, с открытой спецификацией, и написан на TypeScript. Компилятор выполняет преобразование TypeScript-кода в JavaScript-код. Кроме того, если с программой что-то не так, он выдаёт сообщения об ошибках. Он позволяет объединять несколько TypeScript-файлов в один выходной JS-файл и умеет создавать карты кода.

3. Вспомогательные инструменты. Вспомогательные инструменты TypeScript предназначены для облегчения процесса разработки с его использованием в различных IDE.

👉 @frontendInterview

👉 @frontendInterview

Изучаем TypeScript 3.

Книга начинается со знакомства с языком TypeScript, и, поэтапно переходит от базовых понятий к продвинутым и мощным функциям языка, включая методы асинхронного программирования, декораторы и обобщения. Также параллельно рассматривается множество современных фреймворков JavaScript и TypeScript - для каждого из них подробно описано модульное и интеграционное тестирование. Описаны некоторые из известных объектно-ориентированных методов и шаблонов проектирования, а также представлены их реальные реализации.
К концу книги вы создадите всеобъемлющее комплексное вебприложение, которое покажет, как можно объединить в реальном сценарии возможности языка TypeScript, шаблоны проектирования и передовые практики разработки.

👉 @frontendInterview