Насколько хорошо вы знаете JavaScript?



    Доброго времени суток! Как известно, одной из характерных черт JavaScript, наряду c мультипарадигменностью, слабой (динамической) типизацией, автоматическим управлением памятью и прототипным наследованием, является тот факт, что JS — это однопоточный (синхронный) язык.

    Что касается синхронности, то ключевым элементом здесь выступает стек вызовов (call stack). Если вы впервые о нем слышите, то настоятельно рекомендую прочитать эту статью и посмотреть это видео.

    Насколько хорошо вы знакомы с тем, как работает JS под «катом»?

    Давайте проверим.

    Предлагаю вашему вниманию небольшой интерактив — игру под названием «CallStack Challenge».

    Условия следующие: 11 вопросов на определение порядка вывода значений в консоль, 11 ответов в формате «log,log,log», +1 балл за каждый ответ. Набрали 9+ баллов, значит, вы — мастер коллстека. Набрали меньше — есть над чем работать.

    Готовы? Тогда вперед.

    Проект на GitHub Pages.



    Код проекта на GitHub

    Благодарю за внимание.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +1

      10/11, последний вопрос подвёл — на внимательность ;)

        +1
        Тоже самое :)
        setTimeout(console.info('foo'), 0)

        Только с 3-го раза увидел, что console.info выполняется вне setTimeout
        +3

        Кстати, последний пример зависит от среды исполнения. В Node.js будет выведено только 'foo':


        setTimeout(console.info('foo'), 0)
        
        console.info('bar');
        
        (async () => {
            const result = await Promise.resolve('baz')
            console.info(result)
        })()

        foo
        internal/validators.js:200
            throw new ERR_INVALID_CALLBACK(callback);
            ^
        
        TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
          0

          11/11. Было довольно сложно. Справился только потому, что недавно по работе разбирался со всеми этими очередями. Если в браузере всё просто — сначала очередь тасков, потом все микротаски, то в ноде это просто зоопарк очередей.

            –2
            Подколка в последнем вопросе расстроила.
            Вот ещё добавлю:

            a = new Promise((resolve, reject) => {console.info('foo'); resolve(null);});
            b = new Promise((resolve, reject) => {console.info('baz'); resolve(null);});
            console.log('goo');
            a.then(() => console.log('foo2'));
            b.then(() => console.log('baz2'));
            


            a = new Promise((resolve, reject) => {setTimeout(()=>console.log('foo'), 500);resolve('foo2');});
            b = new Promise((resolve, reject) => {setTimeout(()=>console.log('baz'), 100);resolve('baz2');});
            console.log('mor');
            a.then((res) => console.log(res));
            console.log('dor');
            b.then((res) => console.log(res));


            longJob = (text, dur) => new Promise((resolve, reject) => { 
                console.log(text);
                setTimeout(() => { 
                    console.log(text + '2');
                    resolve(text + '3'); 
                }, dur) 
            });
            console.log(await longJob('foo', 300) + await longJob('boo', 100));
            


            longJob = (text, dur) => new Promise((resolve, reject) => {console.log(text); setTimeout(()=>{console.log(text+'2');resolve(text+'3');}, dur)});
            j1 = longJob('foo', 300);
            j2 = longJob('boo', 100);
            console.log(await j1 + await j2);


            longJob = (text, dur) => new Promise((resolve, reject) => {console.log(text); setTimeout(()=>{console.log(text+'2');resolve(text+'3');}, dur)});
            ['foo', 'bar', 'baz'].forEach(async (el, i) => await longJob(el, 400 - i*100));
            console.log('goo');
              0
              10/11
              Последний вопрос конечно с подвохом)

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

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