Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
117 videos
319 files
529 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Строка заканчивается на

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

Примеры:
solution('abc', 'bc') // returns true
solution('abc', 'd') // returns false


👉 @frontendInterview
Angular для профессионалов (2018)

Книга рассказывает о принципах применения Angular в проектах, начиная с основ и заканчивая наиболее продвинутыми и сложными функциями. В ней описаны общие проблемы при разработке с использованием популярного фреймворка, а также способы их избежать. Разобраны преимущества работы с шаблоном MVC.

👉 @frontendInterview
В чем заключаются преимущества использования JSX?

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

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

👉 @frontendInterview
Как определить наличие свойства в объекте?

Существует три способа это сделать.
Первый способ состоит в использовании оператора «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
Сортировка массивом

Вам даны два массива. Вы должны отсортировать первый массив, используя значения из второго массива чисел.

Пример:
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
Какой из перечисленных синтаксисов задания CSS свойства box-shadow НЕ валидный?
Anonymous Quiz
45%
box-shadow: 10px 10px 10px 10px;
16%
box-shadow: 10px 10px 10px 10px #f00;
16%
box-shadow: 10px #f00;
5%
box-shadow: 10px 10px #f00;
Как запустить повторный рендеринг компонента без вызова функции 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
👍1
Какое значение примет result?
Anonymous Quiz
47%
true
53%
false
В чем разница между обычной функцией и функциональным выражением?

Допустим, у нас есть следующее:

 hoistedFunc()
notHoistedFunc()

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

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

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

👉 @frontendInterview
Какова высота элемента section?
Anonymous Quiz
21%
0px
6%
400px
27%
200px
46%
100px
В чем разница между 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
Какое значение примет result?
Anonymous Quiz
20%
||||
8%
0
6%
5
66%
0|1|2|3|4
Рефакторинг кода на JavaScript

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

👉 @frontendInterview
Простая математика

Вам дана строка, содержащая цифры и математические операторы (plus и minus).
Вам нужно произвести математические операции и вернуть результат.

Примеры:
"1plus2plus3plus4" --> "10"
"1plus2plus3minus4" --> "2"


👉 @frontendInterview