Frontend Interview - собеседования по Javascript / Html / Css

Рефакторинг кода на JavaScript Мартин Фаулер и другие высококлассные специалисты в области объектно-ориентированного программирования, принявшие участие в написании этой книги, изложили принципы и наиболее эффективные методики выполнения различных рефакторингов и показали, когда и как следует тщательно изучать код с целью его улучшения. 👉 @frontendInterview

«React.js developer» - это хардкорный онлайн-курс про самый популярный и востребованный JS-фреймворк для Frontend-разработки. Справитесь ли вы с уровнем курса? Покажет вступительный тест. ❗️Пройдите тестирование, чтобы: • оценить свои навыки • занять место по специальной цене • получить доступ к демо-урокам курса • попасть в закрытое сообщество профессионалов Пройти тестирование: https://otus.pw/r3LS/

👉 @frontendInterview

​В чем разница между componentDidMount() и componentWillMount()? componentDidMount() выполняется после первого рендеринга только на стороне клиента. Это подходящее место для выполнения AJAX-запросов и обновления состояния. Данный метод также используется для интеграции с другими JavaScript-фремворками и любыми функциями с отложенным выполнением, такими как setTimeout() или setInterval(). Пример

 React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: 'Иван Петров'
    }
  }

  getData(){
    setTimeout(() => {
      console.log('Данные получены')
      this.setState({
        data: 'Привет, Иван!'
      })
    }, 1000)
  }

  componentDidMount() {
    this.getData()
  }

  render() {
    return (
      <div>
        {this.state.data}
      </div>
    )
  }
}

export default App

componentWillMount() выполняется перед рендерингом, как на стороне сервера, так и на стороне клиента. Данный метод используется для программного выполнения задач перед монтированием компонента. Пример import React, { Component } from 'react' class App extends Component { constructor(props) { super(props) this.state = { data: 'Иван Петров' } } componentWillMount() { console.log('Сначала вызывается этот метод') } getData() { setTimeout(() => { console.log('Данные получены') this.setState({ data: 'Привет, Иван!' }) }, 1000) } componentDidMount() { this.getData() } render() { return ( <div> {this.state.data} </div> ) } } export default App 👉 @frontendInterview

👉 @frontendInterview

В чем разница между обычной функцией и функциональным выражением? Допустим, у нас есть следующее:

 hoistedFunc()
 notHoistedFunc()

 function hoistedFunc(){
     console.log('I am hoisted')
 }

 var notHoistedFunc = function(){
     console.log('I will not be hoisted!')
 }

Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет. 👉 @frontendInterview

👉 @frontendInterview

Как запустить повторный рендеринг компонента без вызова функции setState()? Использование forceUpdate() В следующем примере при монтировании компонента генерируется случайное число. При нажатии кнопки вызывается функция forceUpdate(), что, в конечном счете, заврешается генерацией нового случайного числа:

 import React, { Component } from 'react'

 class App extends React.Component{
   constructor() {
     super()
     this.forceUpdateHandler = this.forceUpdateHandler.bind(this)
   }

   forceUpdateHandler() {
     this.forceUpdate()
   }

   render() {
     return (
       <div>
         <button onClick={this.forceUpdateHandler}>Принудительное обновление</button>
         <h4>Случайное число: { Math.random() }</h4>
       </div>
     )
   }
}

 export default App

Обратите внимание: использовать forceUpdate() не рекомендуется. 👉 @frontendInterview

Сортировка массивом Вам даны два массива. Вы должны отсортировать первый массив, используя значения из второго массива чисел. Пример: initialArray = ['x', 'y', 'z'] sortingArray = [ 1, 2, 0] sort(initialArray, sortingArray) => ['z', 'x', 'y'] sort(['z', 'x', 'y'], [0, 2, 1]) => ['z', 'y', 'x'] 👉 @frontendInterview

Освойте верстку на реальных задачах разработки! Хардкорная программа «HTML / CSS» от OTUS — альма-матер IT-специалистов. - Must have для фронтендеров. - Расширение навыков для web-дизайнеров. - Мощный трамплин для тех, кто хочет начать карьеру в IT. За 3 месяца вы научитесь верстать сайт по макету, делать верстку адаптивной, тестировать ее на различных мобильных устройствах, деплоить промежуточные версии. Вас ждет тщательно отобранный материал и практические задания от Маргариты Образцовой, JS-разработчика и преподавателя верстки в университете в Хельсинки. На всем пути вас будет сопровождать персональный ментор. А к концу обучения вы соберете портфолио проектов, которое точно привлечет внимание работодателей. Занимайте место в группе, пока действует спец.цена https://otus.pw/4MZq/

Как определить наличие свойства в объекте? Существует три способа это сделать. Первый способ состоит в использовании оператора «in»:

 o = {
    'prop': 'bwahahah',
    'prop2': 'hweasa'
}

console.log('prop' in o) // true
console.log('prop1' in o) // false

Второй — использовать метод hasOwnProperty:

 console.log(o.hasOwnProperty('prop2')) // true
 console.log(o.hasOwnProperty('prop1')) // false

Третий — индексная нотация массива: console.log(o['prop']) // bwahahah console.log(o['prop1']) // undefined 👉 @frontendInterview

👉 @frontendInterview

В чем заключаются преимущества использования JSX? JSX - это опциональное расширение синтаксиса JavaScript, облегчающее создание компонентов. JSX включает в себя разметку и выражения JavaScript. В действительности, JSX является сокращением для React.createElement(), делая код чище и проще. JSX может быть полезен для создания выразительных конструкций или пользовательских компонентов, снижая количество опечаток в больших древовидных структурах и облегчая процесс преобразования разметки в деревья React-элементов. Кроме того, при использовании JSX в консоль выводятся предупреждения и потенциальные ошибки, помогающие устранять проблемы на ранней стадии разработки. 👉 @frontendInterview

С нас крутые спикеры, интересные лекции и трудоустройство, с тебя – желание учиться и минимум год опыта коммерческой разработки на JavaScript. ⠀ Как все проходит? 3 раза в неделю на протяжении двух месяцев тебя будут обучать Senior’ы и Teamlead’ы ведущих банков страны. ⠀ Чему будут учить? На курсе будем изучать React, Angular, RxJS и Vue. Помимо этого еще будут практические занятия и домашние задания. ⠀ Что будет после учебы? Трудоустройство на Middle позицию в Цифровые привычки. Ты будешь работать над проектами крупных банков страны в Москве, в СПб или на удаленке.