Викторина по JavaScript и React

Автор оригинала: Avery Duffin
  • Перевод

В преддверии старта курса "React.js Developer" приглашаем будущих студентов и всех желающих посмотреть открытый вебинар на тему "Пишем приложение на React+Redux".

А сейчас предлагаем пройти квиз на знание JavaScript.


Насколько хорошо вы знаете JavaScript? Стремитесь ли к профессиональному росту?

Я составил викторину из 10 вопросов по JavaScript. Посмотрим, сможете ли вы ответить на них, не используя консоль браузера. Надеюсь, вы узнаете что-то новенькое. Ответы даны в конце статьи.

1. Что этот код выведет на консоль?

var bar = null;
console.log(typeof bar === "object");

a) false

b) true

c) null

d) будет выдана ошибка

2. Что этот код выведет на консоль?

(function(){
  var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

a) true, false

b) false, true

c) true, true

d) false, false

3. В React все является ____ .

a) модулем

b) компонентом

c) пакетом

d) классом

4. От чего отказались в последних версиях React?

a) componentWillMount

b) JavaScript

c) componentDidMount

d) от приглашений на Facebook

5. Что такое Babel?

a) транспайлер

b) компилятор

c) интерпретатор

d) компилятор и транспайлер

6. Что такое виртуальная DOM?

a) точная HTML-копия реальной DOM

b) встроенный компонент браузера

c) объект JavaScript, содержащий элементы и данные

d) строка JSON, содержащая элементы и данные, возвращаемые из метода react.render

7. Какое их следующих утверждений не относится к рендерингу виртуальной DOM?

a) Реализация виртуальной DOM всегда оказывается быстрее, чем манипуляции с DOM.

b) Если что-то меняется, выполняется повторный рендер всего пользовательского интерфейса в виртуальной DOM.

c) Перерисовка DOM — самая медленная часть рендера.

d) После повторного рендера в реальную DOM вносятся только необходимые изменения.

8. Верно или неверно утверждение ниже?

useLayoutEffect запускается после рендера React-компонента и гарантирует, что обратный вызов эффекта не заблокирует отрисовку.

9. Какое из перечисленных ниже слов не является зарезервированным словом в JavaScript?

a) default

b) throw

c) finally

d) undefined

10. Что вернут эти функции?

function foo1() {
  return {
    bar: 'hello'
  };
}
function foo2() {
  return
  {
     bar: 'hello'
  };
}

a) undefined{ bar: “hello” }

b) { bar: “hello” }undefined

c) undefinedundefined

d) { bar: “hello” }{ bar: “hello” }


Ответы

Вопрос 1

b) Многие часто забывают, что null является объектом. Поэтому при проверке типа аргумента с помощью оператора typeof нужно также проверять, что переменной не присвоено значение null.

Вопрос 2

b) Здесь переменная b объявляется в глобальной области, но переменная a — внутри функции. Поэтому b = 3; a = undefined. Чтобы этого избежать, используйте строгий режим (use strict).

Вопрос 3

b) В React все является компонентом — это основные конструктивные блоки веба.

Вопрос 4

a) Да, это уже анонсировали. Нам придется перестать использовать этот метод.

Вопрос 5

d) Это спорно, но на сайте Babel написано, что это компилятор. Вопрос в том, является ли транспайлер компилятором.

Вопрос 6

c) Виртуальная DOM — это просто объект JavaScript, содержащий все данные, которые нам нужно сравнивать с данными реальной DOM.

Вопрос 7

a) Ее вполне можно сделать медленнее. Старайтесь не использовать глубоко вложенные объекты, а при необходимости используйте функцию мемоизации.

Вопрос 8

Неверно. Это делает хук useEffect.

Вопрос 9

d) undefined не является зарезервированным словом, его можно переназначить.

Вопрос 10

b) После оператора return необходимо указывать возвращаемое значение в той же строке, иначе автоматически подразумевается точка с запятой.

Надеюсь, вам понравились вопросы. Если вы чего-то не знали — здорово! Это значит, что вы почерпнули что-то новое.

Готовы ко второй части викторины? Переходите!


Узнать подробнее о курсе "React.js Developer".

Посмотреть открытый урок "Пишем приложение на React+Redux".

ЗАБРАТЬ СКИДКУ

OTUS
Цифровые навыки от ведущих экспертов

Комментарии 13

    +1
    Только когда я честно признался себе, что JS — это язык, состоящий из факапов, я стал продуктивно его осваивать. Я представляю себе, будто это такая игра-аркада с ловушками, и если ее пройти до конца, то получится работающий код.

    Например, сегодня я узнал, что нельзя просто так создать пригодный к использованию массив из поля ввода.
    Array($("input").val()) //бесполезно
    //надо так: 
    var paste = $("input").val();
    if(!isNaN(paste)) {//parseInt неуместен
    			lst = Array(parseInt(paste)||1).fill("") //0 нельзя, а пустой массив не сработает в цикле
    }

      +1
      В смысле? Если вы смотрели, что возвращает val(), то не возникает вопросов, как из строки получить массив. Или возникают?

      Или надо создать массив заданной длины?
        0
        Массив заданной длины, да.
        Строку можно просто разбить split'ом.
        +1

        Честно говоря, после прочтения вашего коммента, я перепроверил: а он точно 2020 года?

          0
          А что нынче в моде?
            +1
            Нынче в моде отрицать существование jQuery и огромное количество сайтов которые его используют. Если его не замечать, может оно исчезнет.
              0
              Какая прелесть. А почему стандарт де-факто пытаются игнорировать, как считаете?
                0

                Стандарт де-факто он на "олдскульных" сайтах с рендерингом html на стороне сервера, а не в современных SPA приложениях, пускай и с серверным рендерингом )


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

              0

              Что и всегда: знать язык и стандартную библиотеку, чтобы не удивляться.
              А js уже не молод, чтобы называть стандартное поведение, описанное в спецификациях и документациях, факапами.


              Что конкретно в вашей задаче вызвало удивление?

                0
                В этом примере много факапов (тем он и интересен), поэтому по порядку.

                1. Метод получения числа из строки, parseInt() далеко не всегда работает корректно. Например, он посчитает числом нумерованный список, но почему-то это будет число 1, а не 2 и не 3, если список состоит из трех пунктов. Бред, поэтому мы вынуждены использовать для проверки менее очевидный метод, и если бы не сервисы вопрос-ответов, копание в руководстве заняло бы слишком много времени.

                2. Ок, мы вроде поняли что в этот раз пришло число (!isNaN), но зачем-то все равно преобразуем его к числу.

                3. Часть выражения ||1 показывает, что внутри себя этот язык не всегда гарантирует, что разные значения одного и того же типа данных могут вызвать, а могут и не вызвать ошибку. Да, мы миримся с делением на ноль, но такие сущности неправильно множить без необходимости, есть даже специальный принцип в программировании, запрещающий делать это в хорошей программе, увы, я его сейчас не вспомню.

                4. fill("") — заполнение уже созданного(!) массива пустыми(!!) значениями. Без этого некоторые итераторы его проигнорируют. Без этого массив как бы есть, но его как бы и нет. Такое вот дамское кокетство.
                  0
                  1. parseInt и parseFloat нужны для преобразования всяких «14px» в число «14». Он просто идёт итеративно посимвольно и заканчивает работу на первом невалидном символе.
                    Ну и допом возможность выбора системы счисления.
                    Для каста валидной string в number есть Number() или унарный “+”. Работают идентично.
                    Для каста float to int есть методы в Math.


                  2. isNaN пытается скастовать в string через Number. И уже Number(“blabla”) возвращает NaN


                  3. Вот тут я не понял. Мне казалось, вам массив нужен с минимальной длиной в единицу. Скорее всего у вас isNaN что-то пропускает, типа пустой строки. А parseInt от неё возвращает NaN. А Number(“”)===0.


                  4. А вот тут сложнее. Массив заданной длины не является заполненным значениями.
                    Так же как и пропущенный элемент: [1,2,,4] и [1,2,undefined,4] ведут себя по-разному. И это описано в спецификации.
                    Если вы сделаете .fill(undefined), то он станет работать корректно.
                    И согласен, это не очень логично, на первый взгляд. Это поведение можно воспроизвести просто изменив свойство length у массива.
                    Не знаю, может здесь нюанс в обратной совместимости. Может суть стандартных итераторов в обходе заданных значений, а не по индексам.
                    Нужно разбираться.


          +1

          Какая-то детская викторина на уровне "Читал до я доки на MDN и reactjs.org", ни одного действительно интересного и нетривиального вопроса

            +2
            В React все является компонентом — это основные конструктивные блоки веба.

            Хуки компонентами не являются. ReactDOM.render() компонентом не является и т. п.


            Вопрос в том, является ли транспайлер компилятором.

            Подмножество компиляторов

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

            Самое читаемое