Javascript собеседование вопросы для начинающих junior

Мы продолжаем рубрику вопросов по собеседованию junior javascript разработчика. Рубрика с вопросами собранными с собеседований javascript поможет вам подготовится и устроиться на вашу первую работу возможно trainee или junior программистом js. Часто на собеседованиях программистам задают однотипные или те же самые вопросы, изучив их заранее у вас не составит никаких проблем ответить на них более чем идеально и получить заветное место в топовой it компании.

[simplewebdev]

Блин, очень плохо раскрыта тема. Кому интересно про методы перебора массивов (map, filter, reduce, forEach) читайте дальше.
Идея такова: отделить логику перебора массива от бизнес-логики (что мы делаем с элементами). Самые распространённые кейсы по перебору такие:
- сделать что-то с каждым элементом массива (forEach). Изменяет исходный массив;
- сделать новый массив, где каждый элемент будет зависеть от соответствующего элемента исходного (map). Не изменяет исходный массив;
- сделать новый массив, в который войдёт часть элементов исходного, удовлетворяющих условию (filter). Не изменяет исходный массив;
- получить какое-то одно значение на основании всех элементов исходного массива (reduce). Не изменяет исходный массив.

Все они построены по схожему принципу: у массива есть метод, которому первым аргументом мы передаём функцию, которая будет применена к каждому элементу: arr.map( function ( ... ) { ... }). В эту функцию для каждого элемента будут переданы 3 параметра (для reduce 4): function ( item, index, array) { ... }. Item - ссылка на текущий элемент массива, index - индекс текущего элемента (точнее, номер итерации, в отличие от индекса, начинается с 1), array - собственно сам перебираемый массив. Мы именуем только те параметры, которые нам интересны, остальные игнорируем. У reduce есть пару отличий, о них позже.
Например, у нас есть массив элементов, допустим учеников:
const students = [
{ id: 1, firstName: 'Василий', lastName: 'Иванов', age: 14, weight: 45, height: 160, math: 4, chemistry: 5, physics: 3 },
{ id: 2, firstName: 'Андрей', lastName: 'Петров', age: 15, weight: 55, height: 163, math: 3, chemistry: 3, physics: 3 },
{ id: 3, firstName: 'Семён', lastName: 'Сидоров', age: 14, weight: 62, height: 155, math: 5, chemistry: 5, physics: 5 },
...
];
У каждого элемента массива поля одинаковые, различаются только значения. Для работы с такими массивами, в основном, и созданы эти методы. Допустим, нам нужен список учеников. Для этого можно получить новый массив, каждому элементу которого соответствует элемент исходного. Это метод map:
const list = students.map( function (student) {
return student.lastName + ' ' + student.firstName;
});
Метод map возвращает новый массив, равный по длине исходному, где каждому элементу присваивается то, что вернёт функция. В примере мы получим массив, где каждым элементом будет строка фамилия + пробел + имя. Мы именуем только первый параметр, называем его как хотим (желательно осмысленно). Остальные нам тут не нужны, игнорируем их.

Допустим, нам нужно выбрать учеников, которым 15 лет. Это метод filter:
const age_15 = students.filter( function (student) {
return student.age === 15;
});
Метод filter возвращает новый массив, в который попадут только те элементы, для которых функция вернёт true. Мы не обязаны использовать элементы исходного массива в проверке, мы можем просто написать return true, и получить копию массива. Но смысла в этом не много.

Допустим, мы хотим получить список дрищей. Тут тоже подойдёт filter:
const drisches = students.filter( function (student) {
return student.weight < 50;
});

Допустим, нам нужно переименовать какое-то поле. Эту операцию нужно проделать на исходном массиве, для каждого элемента. Тут подойдёт forEach:
students.forEach(function (student) {
student.chem = student.chemistry;
delete student.chemistry;
});
Метод forEach ничего не возвращает, он работает с исходным массивом "на месте".

Метод reduce имееет несколько отличий. Он проходит по всему массиву и передаёт некое значение от итерации к итерации. В результате работы он возвращает это значение (это легко может быть объект, не обязательно примитив). Записывается так:
arr.reduce( function(acum, item, index, array) { ... }, initValue). В сам метод, кроме функции, передаётся начальное значение накопителя initValue. Если его не передать, то проход массива начнётся со второго элемента, а первый элемент полностью пойдёт в накопитель. Во внутреннюю функцию первым аргументом попадает накопитель, и дальше все те же, что и для остальных. Из внутренней функции мы должны вернуть то, что попадёт в качестве накопителя в следующую итерацию. Для этого у нас есть предидущее значение накопителя, ссылка на текущий элемент, индекс и ссылка на сам массив. Допустим, мы хотим узнать средний балл по физике:
const avgPhysics = students.reduce( function (acum, student) {
return acum + student.physics;
}, 0)/students.length;
Начальное значение накопителя мы указываем равным 0, иначе в первой итерации накопитель станет равен объекту, и после попытки сложения объекта с числом мы получим NaN, который пройдёт по всему циклу, и в итоге будет NaN. Во внутренней функции мы явно возвращаем значение накопителя + текущая оценка. Если мы не вернём его, то в следующей итерации acum будет undefined, да и итог reduce будет undefined. Как-то так.

[CocoShamil]

let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sumArray = a.reduce((accum, item)=>{
if(item >= 5){
accum = accum + item **2;
}
return accum;
}, 0);

console.log(sumArray)

[jljzjvg]

Ты забыл сказать про важный момент это аргумент контекста this и в каком случае его использовать

[nickstojanovic]

Спрашивают про scope, контекст, замыкания, хостинг, сравнения типов, отличия let от var, задают вопросы с конкретными примерами по асинхронности (с подставой, на логику), promise... Если берут джуном на каком-нибудь фронте ваять типа vuejs, то будут и по нему вопросы задавать (store, router, хуки) и довольно много вопросов. Короче говоря джун должен уверенно знать язык. Никому не захочется с вами возиться, вы должны сами все уметь и быстро разбираться по ситуации. Если на собеседовании вас спрашивают что-то, чего вы не знаете, я имею ввиду какую-то технологию, например TypeScript (который вы не знаете, но до кучи указали в анкете, да, так тоже можно), лучше сказать "Я его пока только учу, у меня по нему курс".

[vladkyselov]

let arr = [1, 2, 3, 4, 5, 6];

let result = arr.filter((value)=>value <3)

alert(result)

[armenian_global_animation_]

Тебе лайк, подписка css-нику теперь буду смотреть видос

[vladkyselov]

let arr = [1, 2, 3, 4, 5, 6];

let result = arr.reduce((current, value)=>{
return value+current
}, 0)

[zqcvukq]

Чувак, тема reduce не раскрыта. Джун ничего кроме суммы сделать не сможет. Да и остальное так себе, на тройку.

[saskirakosyan]

It was all about method of array's. But its olso important. Callback function, closure, this, classes.

[strel]

судя по всему автор не был на собеседовании уже лет 5

[klyasyuk]

Что за холиварная тема : var или let?
ES6 предлагает три способа объявления переменной: var, let и сonst !

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

Так что утверждение, что VAR в 2k19 году плохо или е правильно работает, просто популизм не подкреплённый ничем.

Можно использовать и VAR и LET, в зависимости от необходимой области видимости.

По большому счёту автор молодец.

[svgaryaev]

Давно вы не ходили на собеседования. Где такие вопросы вообще задают?

[Indy_]

Эммм, то есть если я учу только яву 1 месяц(ксс и хтмл немного знаю), и на все эти вопросы приблизительно правильно ответил, то меня возьмут в джуниоры?)

[alexluy]

не могу понять сколько можно var писать если повсюду уже только let и const

[mqeqbyz]

Подскажите пожалуйста, возможно ли начать работу на фрилансе, делая сайты не с нуля, а по своим шаблонам? Я делаю небольшой интернет-магазин и хочу просто его подгонять под заказчиков, потом так же с лендингом. Будет ли заметная разница между заказами обрывков сайтов или их доработкой и заказами с таким подходом?

[skeelo]

А разве без filter функция не вывела бы такой же результат?

[promoabys]

Видео ни о чём. Затронуто пара тем, а вопросов реально больше )) Кликбейт какой-то.

[tlcmijm]

forEach возвращает "undefined"
var double = forEach...

[yzrkfvq]

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

[VSsoviet]

какой же бред, это наверное мотивационное видео для начинающих, чтобы они думали что там все так просто.