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

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ม.ค. 2025

ความคิดเห็น • 105

  • @simplewebdev1098
    @simplewebdev1098 5 ปีที่แล้ว +138

    Блин, очень плохо раскрыта тема. Кому интересно про методы перебора массивов (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. Как-то так.

    • @fantom9419
      @fantom9419 4 ปีที่แล้ว

      Чувак, ты потрясающий 👍

    • @alexaxenov974
      @alexaxenov974 4 ปีที่แล้ว

      Автор не ставил же за цель явно обьяснять как работает тот или иной метод, а в общем осветил какие есть вопросы на собесах.

    • @Fenjkeee
      @Fenjkeee 4 ปีที่แล้ว

      Спасибо за дополнительную информацию.

    • @dj_yamato
      @dj_yamato 3 ปีที่แล้ว

      спасибо за развернутые уточнения

    • @Jetixxxxxxxxxx
      @Jetixxxxxxxxxx 3 ปีที่แล้ว +1

      Купил бы ваш учебник по js

  • @coco_shamil
    @coco_shamil ปีที่แล้ว

    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)

  • @vladislav8234
    @vladislav8234 5 ปีที่แล้ว +3

    Спасибо автору!

    • @SuprunAlexey
      @SuprunAlexey  5 ปีที่แล้ว

      И вам спасибо что смотрите

  • @ИванФедяков-э7э
    @ИванФедяков-э7э 5 ปีที่แล้ว +5

    Начало на 1:30

  • @nickstojanovic9663
    @nickstojanovic9663 4 ปีที่แล้ว +2

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

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +1

      По JavaScript тоже можно отвечать, я его пока только учу, у меня курс 😄😄😃

    • @nickstojanovic9663
      @nickstojanovic9663 4 ปีที่แล้ว +2

      @@SuprunAlexey шутить изволите? )

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว

      Nick Stojanovic законом не запрещено:)

  • @vladkyselov
    @vladkyselov 5 ปีที่แล้ว

    let arr = [1,2,3,4,5,6];
    let result = arr.filter((value)=>value

  • @ВаноВано-л6р
    @ВаноВано-л6р 5 ปีที่แล้ว +20

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

    • @rosts_26
      @rosts_26 3 ปีที่แล้ว +1

      Мне кажется "this" удостоен отдельного ролика)

  • @_Iokanaan_Marusidze_
    @_Iokanaan_Marusidze_ 5 ปีที่แล้ว

    Thank you very much !

  • @armenian_global_animation_5872
    @armenian_global_animation_5872 5 ปีที่แล้ว +1

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

  • @vladkyselov
    @vladkyselov 5 ปีที่แล้ว

    let arr = [1,2,3,4,5,6];
    let result = arr.reduce((current, value)=>{
    return value+current
    },0)

    • @simplewebdev1098
      @simplewebdev1098 5 ปีที่แล้ว

      Что такое current? Текущий элемент? Или результат?

    • @vladkyselov
      @vladkyselov 5 ปีที่แล้ว

      @@simplewebdev1098 сумма

    • @simplewebdev1098
      @simplewebdev1098 5 ปีที่แล้ว

      @@vladkyselov current в переводе означает текущий.

    • @vladkyselov
      @vladkyselov 5 ปีที่แล้ว

      @@simplewebdev1098 там должно быть (prev,current)

    • @simplewebdev1098
      @simplewebdev1098 5 ปีที่แล้ว

      @@vladkyselov prev тоже не лучшее название. Это не предидущий элемент. Тут скорее sum какой-нибудь.

  • @alexluy4673
    @alexluy4673 5 ปีที่แล้ว +1

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

    • @jenncon2012
      @jenncon2012 5 ปีที่แล้ว +5

      Var писали пишут и будут писать

    • @SuprunAlexey
      @SuprunAlexey  5 ปีที่แล้ว +2

      Это уже придирки какие то

    • @skeelo3157
      @skeelo3157 5 ปีที่แล้ว

      Alex Luy разницы никакой

    • @Антон-о6к1у
      @Антон-о6к1у 5 ปีที่แล้ว +2

      Во всех коммерческих проектах используют транспайлер, так что по сути даже новые проекты используют "var", стандарт ES6 всего лишь предоставляет "синтаксический сахар", вся механика все равно реализуется на старом стандарте. А в данном случае автор всего лишь показал пример и использовал он var или let вообще похуй если честно

    • @Andrey-il8rh
      @Andrey-il8rh 5 ปีที่แล้ว

      @@Антон-о6к1у бомбит от того что большая часть людей возбухающая по поводу var вообще не понимает как он работает и в чем вообще разница с let, им просто в Ютубе такие же умники прокукарекали что так надо, вот они теперь и ретранслируют

  • @vladisavvdovin6501
    @vladisavvdovin6501 5 ปีที่แล้ว +3

    Лайк не глядя)

  • @svgaryaev
    @svgaryaev 5 ปีที่แล้ว +1

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

    • @SuprunAlexey
      @SuprunAlexey  5 ปีที่แล้ว

      А какие же по вашему задают?:)

    • @svgaryaev
      @svgaryaev 5 ปีที่แล้ว

      @@SuprunAlexey области видимости с учётом es6+, лексическое окружение и this, прототипы, асинхронный код и промисы и тд
      Если кандидат знает эти вещи, то он наверняка знаком со встроенными методами объектов.

    • @khartower
      @khartower 5 ปีที่แล้ว

      ​@@svgaryaev а еще я много чего бы спросил, к примеру кто знает сколько байт в TCP/IPv4 и в TCP/IPv6 адресах, ааааа не знаете вонючие недо-праграммисты, все уволены, а ведь все этим пользуются...

    • @svgaryaev
      @svgaryaev 5 ปีที่แล้ว

      @@khartower мои вопросы относятся к основной теме - javascript, ваши - нет. Их можно задать на собеседовании, чтобы проверить знания предметной области it, но среднему javascript разработчику это знать не обязательно.
      ps не бывает TCP/IP адресов, есть только ip адреса.

    • @khartower
      @khartower 5 ปีที่แล้ว

      @@svgaryaev та не гони, что серьезно?

  • @ПоповВладимир-ж2ы
    @ПоповВладимир-ж2ы 5 ปีที่แล้ว +7

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

    • @SuprunAlexey
      @SuprunAlexey  5 ปีที่แล้ว

      Это что б напомнить людям перед собеседованием о том какие вопросы ожидать, если делать оооочень подробное видео с каждым примером оно конечно будет минут на 40 по этим темам)

    • @ПоповВладимир-ж2ы
      @ПоповВладимир-ж2ы 5 ปีที่แล้ว +8

      @@SuprunAlexey тогда сразу паузу и списком на экран. Видосика на 5 секунд. Я не вам удивляюсь, я удивляюсь тем кто вам лайкает.

    • @Andrey-il8rh
      @Andrey-il8rh 5 ปีที่แล้ว +1

      @@ПоповВладимир-ж2ы та лайкают полнейшие нубы которые доку в глаза не видели. Посмотри что тут спрашивают, люди не знают как вывести длину массива

  • @saskirakosyan3788
    @saskirakosyan3788 5 ปีที่แล้ว

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

  • @МаксимСамедов-ц2н
    @МаксимСамедов-ц2н 5 ปีที่แล้ว

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

    • @khartower
      @khartower 5 ปีที่แล้ว +3

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

    • @ИззатТурсунов
      @ИззатТурсунов 2 ปีที่แล้ว

      Ну чё там, сеньер дворником стал ?

  • @skeelo3157
    @skeelo3157 5 ปีที่แล้ว

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

    • @o_leh
      @o_leh 5 ปีที่แล้ว

      нет

  • @strel9
    @strel9 4 ปีที่แล้ว +2

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

  • @Indy_660
    @Indy_660 5 ปีที่แล้ว +1

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

    • @SuprunAlexey
      @SuprunAlexey  5 ปีที่แล้ว +1

      Приблизительно или правильно? Немного разные вещи))

    • @Indy_660
      @Indy_660 5 ปีที่แล้ว

      @@SuprunAlexey с объектами я никогда толком не работал, но могу пример дать. А вот объяснить нет.
      методы хорошо знаю, так как часто тренюсь на кодварс.
      Кажется, что уж слишком просто

    • @blackch1p
      @blackch1p 5 ปีที่แล้ว +12

      Тебя не возьмут потому что ты джаву Явой называешь:)

    • @T1nyAss
      @T1nyAss 5 ปีที่แล้ว +39

      @@blackch1p тебя тоже не возьмут потому что ты джавасрипт называешь джавой

    • @ПавелВещенко-ю2я
      @ПавелВещенко-ю2я 5 ปีที่แล้ว +13

      @@T1nyAss тебя тоже не возьмут потому что ты JavaScript называешь джаваскрипт

  • @klyasyuk8284
    @klyasyuk8284 5 ปีที่แล้ว +4

    Что за холиварная тема : var или let?
    ES6 предлагает три способа объявления переменной: var, let и сonst !
    Различие в том, что тип обьявления зависит от области видимости.
    var определяет переменные локально или глобально для всей функции не зависимо от области видимости, а let позволяет обьявлять переменные ограниченные по области видимости до блока, инструкции или выражения в которых они используются.
    Так что утверждение , что VAR в 2k19 году плохо или е правильно работает, просто популизм не подкреплённый ничем.
    Можно использовать и VAR и LET, в зависимости от необходимой области видимости.
    По большому счёту автор молодец.

    • @SuprunAlexey
      @SuprunAlexey  5 ปีที่แล้ว

      Спасибо!

    • @Иван-с5я4к
      @Иван-с5я4к 5 ปีที่แล้ว

      @@SuprunAlexey Вопрос не по теме,но все же....стоит ли изучать C# для андроида или веба?

  • @Dimer-z1x
    @Dimer-z1x 5 ปีที่แล้ว +1

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

    • @Andrey-il8rh
      @Andrey-il8rh 5 ปีที่แล้ว

      Конечно, а почему она должна возвращать что-то другое?

    • @simplewebdev1098
      @simplewebdev1098 5 ปีที่แล้ว

      @@Andrey-il8rh ну, в теории, было бы неплохо возвращать ссылку на массив. Так можно цепочку делать, типа, вызвал forEach, точка, вызвал ещё какую-то шнягу для массива. Всё равно ничего не возвращает.

    • @Andrey-il8rh
      @Andrey-il8rh 5 ปีที่แล้ว

      @@simplewebdev1098 для этого есть map

    • @simplewebdev1098
      @simplewebdev1098 5 ปีที่แล้ว

      @@Andrey-il8rh причём здесь map? Допустим, я хочу что-то сотворить с массивом, а потом его отфильтровать. Map я использую, если не хочу менять исходный массив. А если хочу? Так я сначала сделаю forEach, а потом следующей инструкцией arr.filter( ... ). А так я мог бы arr.foreach( ... ).filter( ... ). Жить, конечно, без этого можно, но почему бы и нет, всё равно forEach ничерта не возвращает.

    • @Andrey-il8rh
      @Andrey-il8rh 5 ปีที่แล้ว

      @@simplewebdev1098 приравняй исходному массиву то что возвращает map

  • @Руслан-р4з6м
    @Руслан-р4з6м 5 ปีที่แล้ว

    расскажи про замыкания

  • @promoabys
    @promoabys 3 ปีที่แล้ว +1

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

  • @рррллл-с3у
    @рррллл-с3у 5 ปีที่แล้ว

    Доброго дня друзья. Ответьте на воброс кто знает? Хочу заняться разработкой браузерной игры онлайн покер стол. Что изучить ?как глубоко изучить?

  • @Влад-м9б8ь
    @Влад-м9б8ь 5 ปีที่แล้ว

    топ

  • @Медвежонок-т2о
    @Медвежонок-т2о 5 ปีที่แล้ว

    Можно ли быть хорошим бэкенд разработчиком, без фронтенда?

    • @subclox
      @subclox 5 ปีที่แล้ว

      Ну, знать фронт на уровне построения шаблонов, базовых концепций html5/css3 и возможностью работы с сеткой того же bootstrap желательно. Лишним точно не не будет, а вот плюсом - однозначно хотя бы потому, что такой человек будет более конкурентоспособным на рынке труда.

  • @АндрейСамохвалов-х6д
    @АндрейСамохвалов-х6д 5 ปีที่แล้ว +1

    Мне уже много лет и js я использую часто как на фронте так и на сервере. О функциях который автор рассказал вообще впервые слышу. Знать их нах не надо чтобы программировать на js. Все задачи, которые описал автор решаются через простой поэлементный перебор массива. А вообще при правильной архитектуре приложения перебором массивов никто не занимается. Это решается на стороне хранимых процедур баз данных.

  • @ГеоргийАгеев-ш1э
    @ГеоргийАгеев-ш1э 3 ปีที่แล้ว

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

      Но все равно у вас такое спросят

  • @VSsoviet
    @VSsoviet 4 ปีที่แล้ว

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

    • @VSsoviet
      @VSsoviet 4 ปีที่แล้ว

      уахааххахахахаха это я еще дальше не посмотрел, чекните требования в вакансиях, у меня 2 раза разговорный английский потребовали НА ДЖУНА, по телефону просили пошпехать потом говори что без этого никак

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว

      Уахахах

  • @ДмитрийРостунов-п8к
    @ДмитрийРостунов-п8к 5 ปีที่แล้ว +1

    Джун жс? Таких не ищут

    • @ldr08eldaradome50
      @ldr08eldaradome50 5 ปีที่แล้ว

      А каких ишут?

    • @ДмитрийРостунов-п8к
      @ДмитрийРостунов-п8к 5 ปีที่แล้ว

      @@ldr08eldaradome50 чекни на hh джунов по жс , даже в мск максимум парочку и обычно не жс а фронтендер и то обычно не Джун

    • @ДмитрийРостунов-п8к
      @ДмитрийРостунов-п8к 5 ปีที่แล้ว

      @@ldr08eldaradome50 это мое мнение , возможно я глуп

    • @ldr08eldaradome50
      @ldr08eldaradome50 5 ปีที่แล้ว

      @@ДмитрийРостунов-п8к просто python разрабов тоже не нужно никому...js можешь использовать и во фронтенде и в бэкенде

    • @ДмитрийРостунов-п8к
      @ДмитрийРостунов-п8к 5 ปีที่แล้ว

      @@ldr08eldaradome50 питонисты по вакансиям (колличество ) сравнимы с джавой

  • @dzibiz
    @dzibiz 5 ปีที่แล้ว +1

    поздновато решил видео выложить. меньше просмотров наберешь же

  • @Сергей-й9т7ъ
    @Сергей-й9т7ъ 4 ปีที่แล้ว

    Какой var, дядя, очнись, уже 2021 скоро, удаляй нахер, не пудри мозги новичкам

  • @Товары-ь4й
    @Товары-ь4й 4 ปีที่แล้ว

    Я нашла аудиокнигу, где много ценных советов, как пройти собеседование th-cam.com/video/lZTqdKI95YE/w-d-xo.html