что выведет этот код let f function g return 23 alert typeof g

JavaScript Quiz Answers Explained

November 30, 2015

Introduction

JavaScript is notoriously a simple programming language, but let’s be honest: it sucks!

Don’t get me wrong! I love programming in JavaScript, it gives extraordinary freedom in building things that runs everywhere, but at the cost that is so easy to write bad code. The reason falls back to its winding history, starting from its creation in 10 days by Brendan Eich. Wikipedia has an exhaustive entry on the subject, so I suggest you to check it.

Nevertheless after 20 years, a language with loads of imperfections, is going through its sixth standardization and is currently implemented on PCs, TVs, watches, cars, circuits and is, from time to time, adopted in place of Java in server environments. I remember back in the days when I was using JS to create random snowflakes on a webpage, now enterprise JS applications consists in thousands of hundreds lines of code and handle the business of billion different companies.

The Quiz

While browsing the web I stumbled upon one of the many JavaScript quizzes that challenge the visitors to guess the output of small functions. The quiz is quite challenging in some points, so I decided to write a blog post trying to explain each question, so you can reason more extensively on the answer.

Question 1

Notice: typeof is not reliable. Use polyfills!

The arguments object is not an Array. It is similar to an Array, but does not have any Array properties except length.

However you should be aware that in JS arrays are also objects, so the answer would have been “object” in any case.

Question 2

In this case we have to investigate the difference between function declaration and function expression. So I suggest you to read this fantastic article by Angus Croll, which also explains what is hoisting in JS.

Question 3

Here we encounter another IIFE. This time the interesting part is the body of the function which receives 1 as parameter. What is the effect of delete on x and what is the return value? The common sense suggests that must be something like undefined or more likely should throw an error. However as MDN points out

Unlike what common belief suggests, the delete operator has nothing to do with directly freeing memory […] delete is only effective on an object’s properties. It has no effect on variable or function names.

So, in the light of this explanation, the result is obviously 1.

Question 4

This is actually really simple if you know of associativity works.

Assignment operators are right-associative

Question 5

So what is the answer? The function f invokes itself, with a simple function as argument, and in the body we have an instruction typeof which applies to the return value of the function argument, that is 1. So the answer is number.

Question 6

This question is slightly harder because one must know how the this operator works. As MDN points out

this refers to the current context object

In the foo object, when the bar function is called, its this is set to the object the method is called on. This means that if we call foo.bar() we would get 1.

In JavaScript however, the Function.prototype provides two useful methods for binding the desired object to the this keyword. Those methods are call and apply and their use is quite popular in jQuery plugins.

Question 7

This is a variation of the previous question. However the answer is still “undefined”. Can you see why?

Exactly! this still points to the global object, therefore baz is undefined.

Question 8

What? How are we supposed to interpret this code? (function f() < return "1"; >, function g() < return 2; >)()

Let’s see how MDN describes the comma operator

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

So it’s clear that we can rewrite the first row as follows

Question 9

The if statement executes a statement if a specified condition is true. If the condition is false, another statement can be executed.

Here is clearer that f is undefined, so our answer is “1undefined”. Remember that in JS the + operator is used to sum numeric values but also to concatenate strings.

Question 10

Question 11

This question is tricky, but simple in reality, however it requires a bit of substitutions. We can rewrite everything in this form, equivalent to the previous

Question 12

As you may imagine, this snippet requires you to know how function declaration hoisting works. If you read the article linked in Question 2 you should definitely be able to solve this one.

As a recap, function declarations are first hoisted to the top of the scope and then evaluated in order. So the code is equivalent the the following:

f refers in order to the top level anonymous function, then to the inside function returning 1 and finally to the second function returning 2. So when we call f the value 2 is returned.

Question 13

First we have to understand how the new operator works:

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function

When the code new f() is executed, the following things happen, accordingly to MDN:

Consider the following code:

Here g is equal to f because the constructor of f returns f itself.

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

We know that f is a function because it is an instance of the Function object. This means that f instanceof Function === true which proves directly that f instanceof f is false.

Question 14

I failed this question so horribly, mainly because I learned in the past to avoid the with statement, as MDN points out wisely

Use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues.

Using with is not recommended, and is forbidden in ECMAScript 5 strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.

Let’s see what are we dealing with here:

The with statement extends the scope chain for a statement.

The following example explains clearly what it does

Our question could then be translated like this

The length property of a function returns the number of its arguments, so the answer to the question is 2.

Bonus Question (ES2015)

I decided to add a question (popped out on Twitter) written in ECMAScript2015 (or ES6), the new major release of ECMAScript, which I’m currently learning and using for new projects.

I’m assuming that you’re already familiar with the new syntax and things like let or the fat arrow function notation don’t scare you, otherwise this guide may be a valid starting point. However note that the behaviour of this function is equivalent in ES5.

The essential question is the following: is the function returning the first value of i in the for loop, which would be 0, or returns 3?

The answer is the latter, the finally block has the precedence on the entire try-catch-finally production, as MDN points out

If the finally block returns a value, this value becomes the return value of the entire try-catch-finally production, regardless of any return statements in the try and catch blocks. This includes exceptions thrown inside of the catch block.

Laravel 5 Cron Jobs on shared hosting

Introduction

The Laravel documentation covers all the information you need to configure Cron Jobs on your hosting machine. Some years ago …

Источник

Форум

Справочник

	По поводу применимости/неприменимости: в экзамене Zend на сертифицированного PHP-программиста много подобных вопросов (на знание PHP, разумеется), он тоже, скажете, туфта?
Сообщение от Kolyaj
в экзамене Zend на сертифицированного PHP-программиста много подобных вопросов (на знание PHP, разумеется), он тоже, скажете, туфта?
8 из 14, стыд мне и позор. Два, причем, по невнимательности. Спасибо, отличный тест, теперь я знаю, что еще нужно подтянуть.
Сообщение от Мараторий
В практике практически не применимо

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

Представим себе конструкцию:

Т.е., в итоге получаем, что инициализация происходит неявно и один раз. Наверняка же такую же вещь можно сделать поизящнее

Сообщение от KolyajЗнание языка, очевидно, на котором пишешь.

ну да. но насколько хорошо надо знать язык, чтобы успешно применять его на практике? Возьмем хотя бы этот тест

да, полезно знать, что присваивание выполняется справа налево

у параметров приоритет перед названием функции? Ну может иногда пригодиться

теряется контекст (своими словами)? Пишем один раз bind и запоминмаем, что контекст может теряться

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

это просто на внимательность

если в функции тонна вложенных функций, то это какбэ символизирует

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

кроме того, если не знаешь, как что-то работает, это ж легко можно проверить

итого, я насчитал где-то 4 практических вопроса. А вы?
—
про копание в чужом коде: в идеале нужно знать все про язык, потому что все, что ты не знаешь может быть использовано против тебя везде А если серьезно, то я затрудняюсь с более реальным списком для этого случая. Ничего в голову не приходит.

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

Источник

Укажите правильный способ записи медиа-запроса

С помощью какого свойства возможно задать семейство шрифтов?

a) font-style b) font-variant c) font-family d) font e)font-size f)font-weight

Какое свойство позволяет задать положение начала координат фонового изображение блока?

a)background-color b)background-image c) background-attachment d) background-position

Какой параметр устанавливает расстояние между столбцами

a) column-gap b) column-rule c) column-span d) column-width e) columns

a) flex-shrink b) flex-wrap c) flex-grow d) flex-flow e) flex-basis

Поставьте свойства в соответствие фигурам

Какие вызовы parseInt возвратят число?

C)parseInt(«0 минут») D)parseInt(«$1.2»)

Какой оператор из этих выполняет не только математические операции?

Что выведет этот код?

A)number B)undefined C)function D)ошибка.

24) Объявлена функция : function F() <>

25) Верно ли, что null == undefined?

A) Да. B)Нет. C)Когда как.

26) Чему равно a + b + c?

A)11[object Object] B) 2[object Object] C)111 D)3

Что выведет код ниже?

A )0 B)1 C)В коде ошибка.

a. sleep(5000); alert(«Привет!»);

Выберите правильные утверждения:

a. DOM-модель – это внутреннее представление HTML-страницы в виде дерева.

b. Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.

c. У элементов DOM есть свойства и методы, которые позволяют изменять их.

d. Относительно экрана screen – можно узнать координаты браузера, но не элемента.

e. IE8- генерирует пробельные узлы в DOM.

f. DOM – является статичным и не может содержать пользовательские свойства и методы

g. Для нестандартных атрибутов отдельно генерируется DOM-свойство

Поставить в соответствие (события мыши):

1) mousedown 2) mouseup 3) mouseover 4) mouseover 5) mouseout 6) mousemove

b. Кнопка мыши нажата над элементом.

c. Кнопка мыши отпущена над элементом.

d. Мышь появилась над элементом.

e. Мышь ушла с элемента.

f. Каждое движение мыши над элементом генерирует это событие

Дата добавления: 2019-01-14 ; просмотров: 292 ; Мы поможем в написании вашей работы!

Источник

typeof

Оператор typeof возвращает строку, указывающую тип операнда.

Синтаксис

Операнд следует за оператором typeof :

Параметры

operand является выражением, представляющим объект или примитив, тип которого должен быть возвращён.

Описание

Type	Result
Undefined	«undefined»
Null	«object» (смотрите ниже)
Boolean	«boolean»
Number	«number»
String	«string»
Symbol (новый тип из ECMAScript 2015)	«symbol»
Host object (определено JS окружением)	Зависит от реализации
Function object (реализует [[Call]] в терминах ECMA-262)	«function»
Любой другой тип	«object»

Примеры

В первой реализации JavaScript значения были представлены парой тип тега и значение. Тип тега для объектов равнялся 0. null был представлен как нулевой указатель (0x00 в большинстве платформ). Следовательно, тип тега для null равнялся нулю, поэтому возвращаемое значение typeof является фиктивным. (подробнее)

Использование оператора new

Регулярные выражения

Вызываемые регулярные выражения были нестандартным дополнением в некоторых браузерах.

Ошибки, связанные с временными мёртвыми зонами

Исключения

Хотя спецификация разрешает собственные имена типов для нестандартных экзотических объектов, требуется чтобы эти имена отличались от предопределённых. Ситуация, когда document.all имеет тип undefined должна рассматриваться как исключительное нарушение правил.

Спецификации

Спецификация	Статус	Комментарии
ECMAScript (ECMA-262) Определение ‘The typeof Operator’ в этой спецификации.	Живой стандарт
ECMAScript 2015 (6th Edition, ECMA-262) Определение ‘The typeof Operator’ в этой спецификации.	Стандарт
ECMAScript 5.1 (ECMA-262) Определение ‘The typeof Operator’ в этой спецификации.	Стандарт
ECMAScript 3rd Edition (ECMA-262) Определение ‘The typeof Operator’ в этой спецификации.	Стандарт
ECMAScript 1st Edition (ECMA-262) Определение ‘The typeof Operator’ в этой спецификации.	Стандарт	Изначальное определение. Реализовано в JavaScript 1.1

Совместимость с браузерами

BCD tables only load in the browser

IE-специфичные замечания

В IE 6, 7 и 8 многие host-объекты являются объектами, но не функциями. Например:

Источник

Привязка контекста и карринг: «bind» в JavaScript

Привязка контекста и карринг: «bind» в JavaScript

Здравствуйте! В продолжении темы указателя this Функции в JavaScript в этом уроке рассмотрим ситуации, связанные с потерей контекста.

Иногда возникают такие ситуации, когда функция теряет свой контекст и ее указатель this уже указывает в никуда. Как бороться с этим явлением и что такое карринг об этом мы как раз и поговорим в этой статье.

Пример потери контекста

В браузере есть встроенная функция setTimeout(func, ms), это так называемый таймер позволяет выполнить функцию по истесению некоторого времени.

Я подробно расскажу о ней позже в уроках по setTimeout и setInterval, а пока давайте рассмотрим пример.

Этот код просто выведет «Привет мир» через 2000 мс, то есть 2 секунды:

А теперь давайте попробуем сделать то же самое с объектом, следующий код выведет имя пользователя через 2 секунды:

В примере выше через 2 секунды выведется вовсе не «Василий», а undefined!
Это происходит потому, что в примере setTimeout получил функцию user.say, но не её контекст:

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

Решение 1: вызов через функцию обёртку

Самый простой вариант решения – это обернуть вызов в анонимную функцию, которая представляет собой обертку

Теперь код будет работать поскольку user берется из замыкания.
Это решение также позволяет передать дополнительные аргументы:

Но здесь можно заметить некотрую уязвимость в коде.
А что, если до вызова setTimeout (ведь есть целых 2 секунды) в переменную user будет помещено другое значение? В этом случае вызов будет уже не тот!
Хорошо бы гарантировать правильность контекста.

Решение 2: метод bind для привязки контекста

Давайте напишем вспомогательную функцию bind(func, context), которая и будет собственно жёстко фиксировать контекст для func:

Итак давайте поглядим что она делает и как работает примере:

Таким образом bind(func, «Context») привязывает «Context» в качестве this для func.
Давайте разбираться что собственно происходит.
Результатом bind(func, «Context»), как видно из кода, будет анонимная функция (*).
Вот она отдельно:

Если подставить наши конкретные аргументы, то есть f и «Context», то получится так:

То эта функция запишется в переменную g.
Далее, когда вы вызываете g, то вызов будет передан в f, причём f.apply(«Context», arguments) передаст в качестве контекста «Context», который и будет собственно выведен.
Если попробовать вызвать g с аргументами, то также будет работать:

Теперь всё будет работать как надо.
Вызов bind(user.say, user) возвращает функцию-обёртку, которая привязывает user.say к контексту user. Она и будет вызвана через 1с.
Полученную функцию-обёртку можно вызвать и с аргументами – они пойдут в user.say без изменений, фиксирован лишь контекст.

В примере вы видите другую частую цель использования bind – «привязать» функцию к контексту и просто вызывать say.
Результат bind можно передавать в любое место кода, вызывать как обычную функцию, он «помнит» свой контекст.

>Решение 3: встроенный метод bind

В современном JavaScript у функций уже есть встроенный метод bind, который также можно использовать.
Но при это имеет небольшие изменения:

func Произвольная функция context Контекст, который привязывается к функции func arg1, arg2, … Если указаны аргументы arg1, arg2… – они будут прибавлены к каждому вызову функции.

Результат вызова функции func.bind(context) будет аналогичен вызову bind(func, context), описанному выше. То есть, wrapper – это некая обёртка, которая фиксирует контекст и передает вызовы в func.
Вот пример со встроенным методом bind:
var user = <
firstName: «Василий»,
say: function() <
alert( this.firstName );
>
>;
// setTimeout( bind(user.say, user), 1000 );
setTimeout(user.say.bind(user), 1000); // аналог через встроенный метод

В результате получили простой и надёжный способ привязать контекст.

Методы bind и call/apply близки по синтаксису, но имеется важнейшее отличие.

Методы call/apply вызывают функцию с заданным контекстом и аргументами.

А bind не вызывает функцию. Он просто возвращает «обёртку», которую мы впоследствии можем вызвать позже, и которая потом передаст вызов в исходную функцию, с привязанным контекстом.

Карринг

До этого мы с вами говорили о привязке контекста. Теперь пойдём на шаг дальше. Привязывать можно не только контекст, но и также и аргументы. Используется это реже, но иногда бывает полезно.
Карринг (currying) или каррирование – термин функционального программирования, который означает создание новой функции путём фиксирования аргументов существующей.
Как было сказано выше, метод func.bind(context, …) может создавать обёртку, которая фиксирует не только контекст, но и также ряд аргументов функции.
Например, пусть есть функция умножения двух чисел mult(a, b):

При помощи bind создадим функцию doubleMult, которая будет удваивать значения. Это будет вариант функции mult с фиксированным первым аргументом:

При вызове doubleMult будет передавать свои аргументы исходной функции mul после тех, которые указаны в bind, то есть в данном случае после зафиксированного первого аргумента 2.
Говорят, что doubleMult будет как бы «частичной функцией» (partial function) от mult.

Итоги

Или использовать bind:

Задачи

Что выведет этот код и почему.

Напишите функцию которая будет складывать 2 числа. Используя bind вызовите ее в контексте другой функции, чтобы эта функция удваивала сумму 2-х элементов.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник