This question revisits closure - one of the most confusing concepts in JavaScript. Closure allows us to create astateful function and such a function can access to the variable outside of its scope. In a nutshell, a closure can have access to theglobal variable (scope),father function scope andits own scope.

We have here, the only one correct answer, 3, 3, 3 and 3, 4, 5 because first we simply call the functiona(). It works like a normal function and we have not seen anything so-calledstateful yet. In the following code, we declare a variablex and it stores the value of functiona(1), that is why we get 3. 4. 5 rather than 3, 3, 3.

This kind of gotcha gives me the feeling ofstatic variable in PHP world.

We get true in the console. The tricky part is when we create an object from the constructor function Name but we DO NOT USEnew keywork. That makes the variablea global one and get the value "Vuong". Remember that it is actually a property of the global objectwindow (in the browser) orglobal in the nodejs.

We then geta.length ~ 5 andwindow.a.length ~ 5 which return 0. !0 returns true.

Imagine what would happen when we create the instanceme with thenew keywork. That is an interesting inquire!

The spread operator...x might help us obtain the parameter in the function in the form of array. Yet, in Javascript the typeof array return "object" rather than "array". It is totally odd if you are coming from PHP.

That is said, we now have the length of the stringobject which returns 6. z.y() simply returns the length of the string 'freetut' (7).

Be aware that the function x() (in the form offunction express oranonymous function (if you are coming from PHP) return -1 when being called and when converted to bool withBoolean(-1) return true instead of false. Noted thatBoolean(0) return false.

The functionjs() can be automatically executed without calling it and known as IIFE (Immediately Invoked Function Expression). Noted the parameterx of the functionjs is actuallly passed with the value 3.

The value return of the function is y(s())), meaning calling three other functionsy(),s() andj() because the functions() returnsj().

j() returns 3^3 = 27 so that s() returns 27.

y(s()) means y(27) which returns 27*3 = 81.

Note that we can calldeclare function BEFORE the function is actually declared but not withexpression function.

We have here an IIFE (Immediately Invoked Function Expression). It means we do not have to call it but it will be excuted automatically when declared. The flow is as: husband() returns wife()/2 and wife() returns tip*2.

We might think that tip = 100 because it is a global variable when declaring withvar keyword. However, it is actuallyundefined because we also havevar tip = 10 INSIDE the function. As the variabletip is hoisted with default valueundefined, the final result would be D. We know thatundefined returns NaN when we try to divide to 2 or multiple with 2.

If we do not re-declarevar tip = 10; at the end of the function, we will definately get B.

JS is fun, right?

This challenge revises the ES6's feature regardingspread operator ... Spread operator is quite useful for retrieving parameter in function, tounite orcombine object and array in JavaScript. PHP also has this feature.

In the variableedu, we use...js (spread operator here) to combine both objects into one. It works in the same way with array.

Then we declare another variable namednewbie. IMPORTANT note: By declaring the variable like that, both variables point to the SAME POSITION in the memory. We may have known something like$a = &$b in PHP, which let both varibles work in the same way. We might have known aboutpass by reference in the case.

Then we have 2 asedu.language is deleted. Both objects now have only two elements.

Now is time to think about coping an object in JS either shallow or deep one.

The buit-in methodObject.assign(candidate, job) merges the two objectscandidate andjob into one object. Then the methodObject.keys counts the number ofkey in the object.

Note that two methodsget() andcount() are defined asstatic, so they need to be called statically usingClass.staticmethod() syntax. Then the final object get 5 elements.

Initiallyx is declared with the value 1. In the first IIFE function, there are two operations. Firstx becomes 2 and then 3.

In the second IIFE function,x = x + y then the current value is 5. In the second operation, it returns only 1 as it undergoes5%2.

In the third and fouth IIFE functions, we get 2x = x + x and then 4x = x * x. It is more than simple.

This question illustrates the diffences between PHP and JavaScript when handling closure. In the first snippet, we declare a closure with the keyworduse. Closure in PHP is simply an anonymous function and the data is passed to the function using the keyworduse. Otherwise, it is called aslambda when we do not use the keyworduse. You can check the result of the snippet herehttps://3v4l.org/PSeMY. PHPclosure only accepts the value of the variable BEFORE the closure is defined, no matter where it is called. As such,$var is 10 rather than 15.

On the contrary, JavaScript treats the variable a bit different when it is passed to anonymous function. We do not have to use the keyworduse here to pass variable to the closure. The variablex in the second snippet is updated before the closure is called, then we get 26.

Note that in PHP 7.4, we have arrow function and we then do not have to use the keyworduse to pass the variable to function. Another way to call aglobal ariable inside a function in PHP is to use the keywordglobal or employ the built-in GLOBAL variable $GLOBALS.

Technically,x andy have the same value. Both are empty objects. However, we do not use the value to compare objects.

z isx are two objects referring to the same memory position. In JavaScript, array and object are passed byreference.x andz therefore return true when being compared.

Given that the function setTimeout() will be kept in thetask queue before jumping back tostack, "hello" and "hi" will be printed first, then A is incorrect. That is also the case of the answers C and D.

No matter how many seconds you set to thesetTimeout() function, it will run after synchronous code. So we will get "hello" first as it is put into the call stack first. Though thesetTimeout() is then being put into the call stack, it will subsequently offload to web API (or Node API) and then being called when other synchronous codes are cleared. It means we then get "hi" and finally "world".

So B is the correct answer.

Credit: @kaitoubg (voz) for your suggestion regarding the timeout throttled by which I have decided to alter the question slightly. It will ensure that readers will not get confused as the previous code might bring out different results when tested on other browsers or environments. The main point of the question is about the discrepancy between the synchronous code and asynchronous code when usingsetTimeout..

String.prototype.someThing = function () {} is the common way to define a new built-in method forString. We can do the same thing withArray,Object orFunctionName where FunctionName is the function designed by ourself.

That is not challenging to realise that"string".lengthy() always returnshello. Yet, the tricky part lies in thedelete object where we might think that this expression will entirely delete the object. That is not the case asdelete is used to delete the property of the object only. It does not delete the object. Then we gethello rather thanReferenceError.

Note that if we declare object withoutlet, const orvar, we then have a global object.delete objectName then returntrue. Otherwise, it always returnsfalse.

First we have an empty objectx, then we add another propertyhi for x withx.__proto__.hi. Note this is equivalent toObject.prototype.hi = 10 and we are adding to thefather objectObject the propertyhi. It means every single object will inherit this propety. The propertyhi becomes a shared one. Say now we declare a new object such aslet y = {},y now has a properyhi inherited from thefatherObject. Put it simplyx.__proto__ === Object.prototype returnstrue.

Then we overwrite the propertyhi with a new value 11. Last we have 11 + 1 = 12.x has one property andx.hi returns 11.

Updated (July 27th 2021). If you writeObject.prototype.hi = 11; instead ofObject.prototype.hi = ++x.hi; as written in the code above, thenObject.keys(x) will return an empty array asObject.keys(object) only returns the property of the object itself, not the inherited ones. It means the final result will be 11 rather than 12. For some reason, the code ``Object.prototype.hi = ++x.hi;will create a property for the objectx` itself and then `Object.keys(x)` gives us the array `["hi"]`.

Yet, if you runconsole.log(x.hasOwnProperty("hi")) it still returnsfalse. By the way, when you deliberately add a property for x such asx.test = "testing", thenconsole.log(x.hasOwnProperty("test")) returnstrue.

This question examines how thedelete operator works in JavaScript. In short, it does nothing when we writedelete someObject ordelete someArray. It nonetheless completely deletes and removes a property of an object when writing something likedelete someObject.someProperty. In the case of array, when we writedelete someArray[keyNumber], it only removes thevalue of theindex, keep theindex intact and the newvalue is now set toundefined. For that reason, in the code first snippet, we get (the length) 4 elements as in the original array but only 3 properties left in the object passed when the function object() is called, as in the second snippet.

The third snippet gives us 4 as declaring an object's propery to eithernull orundefined does not completely remove the property. The key is intact. So the length of the object is immutable.

For those who are familiar with PHP, we haveunset($someArray[index]) that remove the array element, both key and value. Whenprint_r the array, we might not see the key and value that have been unset. However, when we push (usingarray_push($someArray, $someValue)) a new element in that array, we might see that the previous key is still kept, but no value and not being displayed. That is something you should be aware of. Have a look athttps://3v4l.org/7C3Nf

a andb returns false because they point to different memory location even though the values are the same. If you are coming from PHP world, then it will return true obviously when we compare either value or value + type. Check it out:https://3v4l.org/IjaOs.

In JavaScript, value is passed by reference in case ofarray andobject. Hence in the second case,d is the copy ofc but they both point to the same memory position. Everything changes inc will result in the change ind. In PHP, we might have$a = &$b;, working in the similar way.

The third one gives us a hint to copy an array in JavaScript usingslice() method. Now we havef, which is the copy ofe but they point to different memory locations, thus they have different "life". We getfalse accordingly when they are being compared.

The code snippet is quite tricky as it has a couple of different built-in methods handling object inJavaScript. For example, bothObject.keys andObject.getOwnPropertyNames are used even thought they are quite similar except that the latter can return non-enumerable properties. You might want to have a look at this thoroughly written referencehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

Object.values andObject.keys return the property value and property name of the object, respectively. That is nothing new.object.hasOwnProperty('propertyName') returns aboolean confirming whether a property exists or not.

We haveflag true becauseObject.values(languages)[0][4].name returnsfeature, which is also the name of the property.

Then we have 4 << 4 in theif-else flow that returns the bitwise value, equivalent to4*2^4 ~4*16 ~ 64.

We can usecall(),apply() andbind() to apply a function to any object. At first sight, it seems that three functions do the same thing. Yet there are some situations where they are differently employed to handle respective contexts or solve particular problems.

Of the three, onlybind() can be executed after binding. We can create a variable to store the result ashelloRonaldo() in the code snippet above.apply() andcall() will bind and execute the function at the same time.apply() hints usa ~ array where we need to pass an array as parameter.call() hints usc or comma where we pass parameters with a comma. You might want to have a look at this posthttps://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind

Note thatwindow.window.window.score orwindow.score or simplyscore do the same thing. It points to thescore() function in the global scope.

The correct anwser is D. Thescore() andgetAge() functions are nothing special. The only tricky part is thatthis.age is incremented each time you call the funtiongetAge();

bind() allows us to bind a function declared with any object. Here we bindscore() and bothronaldo andmessi.

Inscore() we pass three parametersyear,tr andt in which bothtr andt are function. They handle simple things as defined afterwards.

When we bindscore() withronaldo andmessi, we pass three parameters as declared in thescore() function whereintransform andtitle are functions.

Object.keys(obj) is almost identical toObject.getOwnPropertyNames(obj) except the fact that the latter returns any type of object's property regardless ofenumerable. By defaultenumerable is true when creating object. UsingObject.defineProperties orObject.defineProperty we can manually set this option tofalse.

As such the objectperson will get 3 usingObject.keys(obj)but 4 withObject.getOwnPropertyNames(obj).In short Object.keys(obj) only returns the property setting the enumerable astrue.

When declaring a function inside another function, we are working with Closure in JavaScript. Note that if a function is declared as normal (rather than function expression), it is hoisted. We might see severalid in the code snippet above but in fact, some of them does nothing.

The result of the code depending on the operatortypeof id, which isfunction. Soid in this operation is theid() function.

Object.create allows us to create an object which is based on another object. If we do not pass the second parameter -book2 in this case - thename property of the objectbookCollection will beName of the rose inherited from thebook1. It means we can provide additional properties when declaring object withObject.create.

bookCollection has its own propertyname and another one inherited frombook1. In this case its own propertyname will show up as it has higher priority. That is why we get 'Harry Potter'.

The two objectsa andb are created usingObject.create() operator. There is a bit of difference between them asa inherits from Object prototype butb is totally empty when we pass thenull paramater. YethasOwnProperty('toString') always returnsfalse neithera norb given thattoString() is not defined inside these objects. The method however is still available as it is inherited from Object prototype.

Bothf1 andf2 returnfalse. Note that we useobject.hasOwnProperty('key') and('key' in object) to check the availability of a key in an object. There is a bit difference between the two as the latter also returns the key inherited. You might want to have a look here:https://stackoverflow.com/questions/455338/how-do-i-check-if-an-object-has-a-key-in-javascript

Thentypeof a.toString() returnsstring, which gives us 6 with the.length property.

If the syntax is odd to you, you might look for 'self-invoking function' and 'arrow function' in JavaScript.

We first declare a promise-based code withlet and then call it. Given thatsetTimeout() is an asynchronous action, it will run last even the time is set to 0 insetTimeout(() => rs(4), 0);. AlthoughPromise.resolve(console.log(3)) also returns a promise but it is a Microtasks, then it has a higher priority than Tasks as set bysetTimeout(). You might want to have a look at this posthttps://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/.

In.then() we chain the result so that we have4^4 in the first then() and4*4 in the secondthen(). Note thatreturn rs returns the original value.

Though we do not declare any paramater for the functionf(), we passsetTimeout(()=>console.log("kiora"),0) when call it. We therefore get 'kiora' first.

Given that the variablepromise returns a solved promise and it is called with the keywordawait, JavaScript will 'pause' at this lineconsole.log(await promise); till the result is resolved. That is why we get "done" at the next result.

Why we do not get "world" or "hello" at the second ? As JavaScript "pauses" at the line withawait keyword, we cannot get "hello" as usual (note that whenever we call setTimeout(), this function will run last because it is an asynchronous task operator), whereassetTimeout(()=> console.log("world"), 0); should always run last.

Here we might see a bit of difference when employingawait keyword before asynchronous operator (in this case, we usesetTimeout() as an example) or when call the function/operator without it.

Bothcountryandfruit andfruitandcountry are self invoking functions. Both are declared with the keywordasync, it means the code inside will run step by step. It helps us control the flow of data much more concise as compared to Promise-based operator or callback way.

The first function returns"Kiora: New Zealand Kiwi" and the second one ouputs"Hello: New Zealand Kiwi". We might think that the order will be the same but actually the order of the result is reversed because the function withawait keyword will run step by step rather than in in parallel as Promise.all. It meansfruitandcountry will run faster thancountryandfruit.

You might want to have a look at the difference between the two athttps://alligator.io/js/async-functions/

Object.entries returns an array consisting of both key and value from an object whileObject.values retuns an array of the values of object andObject.keys gives us an array of keys of the object. As such,Object.entries(object) in the code snippet above gives us a nested array with just one element in which the values are put in another nested array like that[["month", ["July", "September", "January", "December"]]].

For that reason,Object.entries(this.object)[0][1].sort() will actually sort the value array and return a new order as "December" -> "January" -> "July" -> "September". Hence, when we get the element with the index given by[Object.values(this.object).length] we getJanuary because[Object.values(this.object).length] give us 1 (the length of the array given by Object.values);

Comparing two arrays or two objects in JavaScript always returnfalse because both are passed by reference, unlike primitive types such as string, number or boolean. That is why comparing [] and [] using either == or === returnsfalse. The weird part is the!==!!!!! which is equivalent to!==, nothing special. So theflag istrue.

In the expression functionf(), we use arrow function here but and{} is a part of the function rather than an object. In case you want to return an object, you have to write aslet f = () => ({}) or simply using normal way to define function. With the keywordreturn, we can easily catch the content of the function when using normal way to define function.

Thus, thetypeof f() returnsundefined rathernobject. We then get the length 9 and the flag (true) becomes 'true' (a string, by using toString() function), which returns 3 with the propertylength. We finally get 13.

We have a self-invoking function with three parameters declared. Note thatarguments inside a function returns an object consisting of the parameters of the function.

The key part here is that when we assign a value to that array (it is array-like, as mentioned above) (or any element), the function will use that value rather than the value from the parameter we pass to it when calling the function. Hence,c will be(typeof arguments).length; (6) rather than 3.

Asc has a new value of 6, it is definitely less than 10, so we get the final resultconsole.log(++c), which returns 7.

Note thatarguments is not available on arrow functions. See more detailed herehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

From ES6 onwards, it is recommended to use ...restParameter given that it is a true array. It means you can manipulate the parameter with native JavaScript functions such as map, reduce or filter.

For PHP developer, we havefunc_get_args() in PHP that does the same thing, but it will not override the value passed. Check it by yourself athttps://3v4l.org/dMfhW

We have a class named Calculator. When declaring a new instance of the object, we pass two parametersa andb. These two parameters have the same value butnew Array(this.a).length is totally different fromnew Array(this.b).toString().length because the latter returns a string",,,," meaning the length 4 while the former returns the length of an array and we therefore get 5.

For that reasongetFlag() returnsfalse. IngetValue() we gettypeof new Number(this.b); which returnsobject. That is a bit different fromtypeof b, which returnsnumber.

The key point in this question involves the keywordthis in JavaScript. We have a simple object that contains one method and one string propertyname.

First, it is important to write down is thatlet me = nz.callMe; and then callme() is totally different from directly callingnz.callMe(). If we assign a variable to a method delared inside an object,this in that method will behave differently (when we call the variable as a method and when dirrectly call that method). In particular, in the first case,this is thewindow object while in the second one,this inside the function still points to propertyname in the objectnz. It meansme() returns "Auckland" whilenz.callMe returns "Kiwi".

Thenresult will returnfalse and we get the final output value${me()} ${she()}. Whyshe() is different fromme()? You might easily guess thatshe stillbind to the objectnz rather thanwindow object as inme().

The code snippet above is not a big challenge for you I guess. It simply gives you an example ofthis in different contexts when we declare an anonymous function inside a method of an object. The three first methods are common ways to handlethis usingthis as second parameter inmap(), by usingbind(this) inforEach (or map()) or bythat = thistechnique (you might see people useself = this rather thanthat= this).

The last methodMe() will cause unexpected result becausethis.name does not bind to the objectclub. Note that you might get another result when testing the code on jsbin.com. On Chrome and Firefox, we get 0.

For further information, kindly have a look athttp://speakingjs.com/es5/ch17.html#_pitfall_losing_this_when_extracting_a_method

... can be used in two ways in JavaScript (and PHP) as eitherspread operator orrest parameter. You might have to check the following article about the two. They are the same as three dots, but the way they are employed vary considerably between the two.https://javascript.info/rest-parameters-spread-operator

We see bothspread operator andrest parameter in the code snippet above. First the parameter(...a) in the self-invoking function is of course arest parameter while the constantc we see thespread operator. In the former case, it simply means that you can pass to the function as many parameter as you want. Note that thetypeof a in this case isobject even though it is a native array in JavaScript. (I means native array because you might think about array-like if we use arguments. Please have a look at the question 28 or this linkhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments).

Spread operator as in the constantc allows us to combine array. So...a in the code above isrest parameter when it is used as function parameter but in this case it is the syntax ofspread operator.

Finally, we getc with 5 elements (...a is a nested array, so thelength is 1) but the first element has 10 child elements (when we pass to the functionnew Array(10)). The length of both then returns 15.

We have a function constructorKiora (written with a capital letter, but that is optional) that can be used to create object, as thestudent object in the code above. In the function, we have two parameters with the second one is actually arest parameter. The typeof operator isobject but if we check withArray.isArray(array) it also returns true.

For that reason,Array.isArray(career) === true && typeof career === "object" returns true. Hence thereturn operator finally returns an object{}.

You might be surprised whenconsole.log(student.name); outputsundefined given that the constructor functionKiora returns an object. Otherwise, we might simply get the valuename.

Apologize that the code snippet is a bit longer than usual. But actually it is not really challenging as you might think. You can easily get the correct result after spending a little of time to debug.

First we declare a class that has two methods. The first methodfilter() will returns the first element of the array (of the proptertyelement) or simply returnshello depending on thetype() method. We know thattypeof of array will returnobject so thefilter() method returnthis.element[0].name.

Try to make you feel confused, we then call the built-infilter() method. This native method returns a new array depending on the condition we pass to the call-back function. Note that!item.isdeveloped meansfalse. It means we getVietnam.

Finally we getNew Zealand.length andVietnam.length, which in total returns 18.

D is correct anwser. The order of the asynchronous code's output depends on the MicroTask or MacroTask. MicroTask has a higher priority. Note that the synchronous code always be executed before asynchronous code. So in essense, we have the order as follows:

  1) synchronous code  2) microtask code (promise, queueMicrotask)  3) macrotask code (setTimeout, setInterval)

Be awared that in Nodejs environment, we also haveprocess.nextTick(callback) which has the highest priority but we dont have it in this code.

So, first callback in thesetTimeout() will be executed last given that this is a MacroTask. That is why we got 1 last.

Second, the functionabc() is called next. Then we have 8 printed out in the console first. As the next line of code inside that function is an asynchrnous code with the keyword "await", we thenconsole.log(6) asPromise.resolve(4).then(console.log) is an asynchrnous code. That is why we got 6.

Now is the time forPromise.resolve(2), so we get 2. At this point, you might have some sort of confusion. What will happend if we do not pass the keyword "await" beforePromise.resolve(2) ?

As we haveawait, the code will be blocked here. Then what? We get 0 and 4 not 3.Promise andqueueMicrotask are both microtask and they are already to run beforeconsole.log(3). The reason is that microtask queue need to be emptied before any other codes can be called in the callstack.

In the next step, we get 3 and the last one is 1.

What would happend if we do not have theawait keyword? Then the order of the output will be 8 - 3 - 6 - 2 - 0 - 4 -1.

As the "state" of the data is preserved each time we calldePoSit() orwithDraw(), hence we get $350 after all.

Noted that that is a kind of "factory" function with "preload" data. You might think about another object when pass tomyAccount(somedata); some other data. That is a really helpful way to create multiple objects from a factory function.

We get 21. First "youtube.com/hoccoban" returns 20 as we are using the property length of the string. Then it is being added one more value in++this.x. The question here seems trivial but it is actually not. There is a crucial note we should keep in mind is thatconsole.log(++this.x) will not work asx is undefined when it is called outside of the object.

We can solve the problem withthis in this case by using arrow function in the inner so that is can become something likeconst inner = () => {} as the arrow function does not actually havethis. It will automatically look around and call the available object when the function is executed.

The second solution is that we can somehow "bypass" the trickythis by using that/this solution. We just need to declare a new variableconst that = this inside getMe() and before declaring inner function. That is a quite common practice.

The third solution is to take advantage of call(), bind() and apply() which are native methods of function (yes, function is also an object in JavaScript). In this case, we implementbind(this) to "bind" the function and the object so thatthis can actually point to the object when the function is executed. Note that bind() cannot be instantlly executed so that we need to add () after we bridge the function and the object. If we replace bind() with call(), then we do not need to pass () as in the above example. Soinner.bind(this)(); will becomeinner.call(this);. They are technically equal. In practice, we tend to create a new variable to get the result from the binding of the function and the object.

First, take a closer look at the function. It has a asterisk (*) next to the keyword "function". We do not havereturn keyword inside the function itself. What is going on here?

It you have already known about generator, then this code snippet is not a big deal at all. We do not use generator very often, but this native JavaScript feature is the basis for async/await function, which is supported in ES7 that allows us to handle the flow of asynchronous code much easily.

The operatortypeof data will returnobject rather thanfunction, which is the same case withtypeof hocCoBan(). Of course,typeof hocCoBan still returnsfunction. But it is actually a normal function. Basically, we get 6 in the operator(typeof data).length.

Thendata.next() calls the the built-in methodnext() which will output the value in the firstyield, which is declared in the function. Then we get the length 9 with the stringjs.edu.vn.

After all, we get 15. Not that understanding generator is quite important if you really want to understandasync/await function.

When using ... in array, it is called spread operator in JavaScript which, technically, is similar to rest parameter (using in the context of function). It provides a more elegant way to concat (combine) or copy array. In the code above, b is a copy of a. However, as we pass a in to aSet, it will return the unique value only in a. It means, now we have `[1, 2, "chó", 3, "mèo"] in b.

However, we then set the length for b as 3. Note that "chó".length returns 3 but in PHP, strlen("chó") returns 4, just in case you are coming from PHP world.

As we set the length for the array b, we also cut down the array itselt. That is the reason why we get [1, 2, "chó"] printing out in the console.

First, it should be noted thatarguments cannot be used in an arrow function, so in order to take advantage of this feature, we have to write the function in the casual form.arguments returns an array-like object that contains any parameter we pass into the function when executing it.

... is arest operator. We use this feature in function and array. Noted that in the context of array, it is calledspread operator and it behaves differently. When declaring a function with ..., we can pass as many parameters into the function itselt when executing it as we want.

Note that in the functionhai, we returnarguments[arguments[0]] which meanshai(1, 2, 3) will return 2 rathern than 1 becausearguments[0] return 1 and thenarguments[1] returns 2.

The last thing we have to take note is that the typeof operator of an array will returnobject, here the trick seems more daunting. The final anwser is 2 as we got it ina[1], orhai(1, 2, 3).

We have two simple classes in which Coder extends Component. Nothing fancy. Astypeof ClassName returnsfunction rather thanclass, we then get 8 in the operator"function".length.

Though we implementsuper(age) in the Coder class, we actually overwrite the contructor of the parent class Component in the child class Coder. Therefore, when initiating the objecta, the following code is automatically triggeredthis.age = age -${typeof Coder}.length;. The difference between the child and parent 's constructor is minus (-) and plus (+) in the above code.

As such, we have 16 - 8 rather than 16 + 8, which returns 8. The functiongetAge() returns 9, so the corrent answer is C.

Bear in mind that JavaSCript is not a "real" OOP programming language even though we can now implementclass andobject as in other languages.

The key message that can be taken away in the code snippet above isfiler(Boolean) which can be taken into consideration in case you want to eliminatefalsy values in an array. We can usefilter(callback) orfilter(Boolean) in particular in this case to do that. Note that we have to pass into the filter function a callback and in this case Boolean is actually a function. You can checktypeof Boolean to see it.

Similar tomap orreduce function,filter always returns a new array from the exisiting one.[true, false, 1, 0, NaN, undefined, "", null, "js.edu.vn"].filter(Boolean); will return[true, 1, "js.edu.vn"];, hence calling the functionremoveFalse() gives us 3. So the correct answer is 3.

We have a simple array in the code snippet above that includes some digits, two other arrays and one object. Using the built-in functionNumber, we can convert any value passing to the function intodigit. Ascoderfarm instanceof Array returnstrue, thenconverted get 1. Noted that you can use another way to check the type of an array isArray.isArrray(arrayToBeChecked) which return aboolean value. Suprisingly, the operatortypeof [] returnsobject rather thanarray.

The built-in functionindexOf will return the index of the element that is being checked. So asconverted + true return 2, we are going to check the index of the element with the value 2 in the arraycoderfarm.

We get 4 in theconsole.log and the correct answer is D.

The operator... in JavaScript is very handy. The functionconverter is quite trivial, it takes advantege of... (rest operator || spread operator) to turn an array into an object.

First we have the constantchecking with the valuefunction given thatNumber(false) gives us 0 and that is the first index in the arraycontent.

Second, the constantresult gives us the valuetrue as thetypeof converter(content) isfunction, which is also the value ofcontent[1].

Then in the final code, we havechecking = true, and thenresult = true as well, so the final result is(typeof converter).length which is equivalent to"function".length because thetypeof of converter is simplyfunction. We get 8 after all and the correct answer is D.

So the key message here is that we can take advantate of thespread operator (or...) to turn an array to an object. For example:const a = ["hello", 2], then we can have a go withconst b = {...a} and b is now an object with the following value:{0: "hello", 1: 2}. The key of the object is actually the index of the original array.

We have a generator function in the code snippet above, which is defined with the *. Noted that we can "store" as many result as we want in a generator thanks to the keywordyield.

As thetypeof js isfunction, so the length of the stringfunction is 8. So when callinggetJS.next().value;, we get 8. However, in the next calling, it returns 7, and in the following calling after that, we get 6. That is why generator can "store" and "release" (or return) as many value as we want.

So the answer is C, which is 8 (first execution of the generator) + 7 (second execution of the generator).

Array.prototype.some() is a built-in function facilitating us to iterate the array using a callback. As in the code snippet above, there are three parameters in the callback, namelycurrentValue (the value of the current element that is being checked),index (the index of the element in the array that is being checked/evaluated) andages (the array itself).

The functionsome() returns aboolean value. The codecurrentValue > ages[ages.length - index] returnstrue only one time, which is the last element. Let 's examine the code when it runs through each element:

1. 10 > ages[4 - 0]. As ages[4] returnsundefined, and10 > undefined returnsfalse, it stops.

2. 15 > ages[4 - 1]. As ages[3] returns 25, it breaks as the operator returnsfalse.

3. 20 > ages[4 - 2]. As ages[2] returns 20, it breaks as the operator returnsfalse.

4. 25 > ages[4 - 3]. As ages[1] returns 10, it returnstrue. Only this value is being pushed to the arrayresponse.

Soresponse.push(currentValue + ages.length) will add the value 25 + 4 to the arrayresponse, D is the correct answer.

getString() is an arrow function with two parameters. As you can see that the parametermethod has the default valuefalse, then if you do not pass any value to it when executing the function, the default value will be used.

The key thing to take note from the code above is the difference betweetslice(1, 4) (which returns 3 characters) andsubstr(1, 4) (which returns 4 ones).

Finallyconsole.log(getSTring("hello", true) + getSTring("hello")) returns 7 becauseslice andsubstr are both used.

The code above is a self-executing function. It runs when it is being declared. We have three parameters and three arguments passed are"hello", "world" and"new zealand".

First,arguments returns an object consisting of arguments passed to the function when executing it. However, using spread operator..., we then convert the object to an array. We can also do it by usingArray.from(object).

Second,slice(2, 3) extracts the element from the index 2 to the index 3, which returns"new zealand". It is still an array. We then extract the element with the index[0] and we get the string"new zealand" rather than an array.

Third,"new zealand".slice(3, 4) gives us an empty string (with a space between)" ". TheBoolean(" ") gives ustrue. Noted that if there is no space in the empty string, we getfalse instead.

So the correct answer is B.

The code above is nothing much special. However it is written in a complicated way on purpose. First, we have a class named "HocCoBan" with two methods and one property. Then we add another methodsplit using the tradional way (viaprototype). Note thatclass in JavaScript is simply a syntactic sugar offunction given thattypeof ClassName returnfunction.

When we call the methodsplit, we pass the an empty string to it. This method then call other methods. The flow is as follows:

split("") ==>this.getSlice("") ==>this.getName("") ==>this.name.split(""). Heresplit is a built-in function that convert a string to an array.

Noted that ingetSlice(), we also use.slice(true, this.name.length) toslice (cut) the array from the index 1 to 11. So the length is 10.

So the final answer is C.

This code might help us master the concept functionprototype in JavaScript and the understand the difference between the built in functionString.prototype.split and the function we declare by ourselfHocCoBan.prototype.split.

Apart from learning some built-in functions to handle string such asreplace andinclues, we are reviving the concept ofcurrying function in JavaScript. Say you want to declare a function with three parameters, you may consider refactoring the code by declaring 3 nested functions, each with one parameter you wish to pass to. Basically, both of them work in the same way. However, noted that only the outerest (the main) function has the name asjavaScript in the code above. Both nested (inner) functions are declared without the name. We also use threereturn keywords in the code.

When executing the function, you then have three() as in thejavaScript("I love you")()(). We do not pass any argument into the second and third functions (both are inner/nested functions without the name) and these functions will take the default value we have alreaded declared when being executing.

All in all, we have the final operatorreturn (node + deno + done).length; in whichnode is "I love you",deno is "love" anddone is "I done you". The length of these strings is 24, which you can calculate by yourself the concatenated stringI love youyou I done you. Be aware of theempty space, which is also taken into account.

The key information in the question above is about the methodArray.prototype.find(). It returns the first element in the array that meets the condition declared in the callback function, which is passed to the function. The array is being iterated to check every single element. In the code above, we might easily see that the elementworld is the first element in the array that has a larger value thanvictory. Remember that "w" > "v" return trues if the two letters are compared. When two words are being compared, only the first letter in each word is being utilised to compare.

As the result,found is nowworld and thusfound[1] returns the letterw whereaswww[0][0] gives us the letterh in the elementhello. It meansfound[1] < www[0][0] returnsfalse.

So the final result iswww[true ? 0: 1] orwww[0], which ishello. And the correct answer is A.

We have a self-executing function with the parameter/argument is an empty array. Noted thatNaN === NaN returnsfalse, thenage gets the valueflag, which is an empty array. However, the boolean value istrue when we callBoolean([]).

The functiontoString() returns the stringtrue and theNumber([]) returns0. Then we get "t" in the console.log. The correct answer is B.

Keep in mind thatBoolean([]) ==>true butNumber([]) ==>0. And sadlyNaN === NaN returnsfalse.

JavaScript is sometimes tedious to deal with given that it is a loosely type language. The data type of a variable can be changed depending on the value. An unexpected behaviour might unfortunately occur when you change/convert the original value to another one.

For example, the code 2Number([]) returns0 and 6(Number({})) returnsNaN, although both(Boolean([])) and(Boolean({})) returntrue.

In the code 9Boolean(new Boolean(false)), we gettrue even though we pass into the function constructorBoolean() afalse (as the) parameter. However, if we do not use the keywordnew, thenfalse will return. It seems that inBoolean(new Boolean(false)), we have a valid opreration, so it istrue. However, in theBoolean(Boolean(false))) where we do not use the keywordnew, we then getfalse because now afalse value is being evaluated rather than an operation.

So, the correct answer is D.

Credit: @tiepphan, Vietnamese Angular Facebook group.

To answer the tricky question above, you might want to have a look at the concept ofthis in JavaScript (on browser environment). By default,this refers towindow object. Note thatWindow (written in capital) is the Function constructor of thewindow object. In this regard,console.log(this === window) return true butconsole.log(this === Window) returns false.

Ascontent() is an arrow function,this declared inside this function points towindow, somyYoutube.content() returnsmyYoutube.getInfo(). Noted that we have to explicitly writemyYoutube.getInfo() to make sure the code will run correctly asthis in this case does not work as it does not refer to the currect object. In the functiongetInfo(), however,this actually refers to the currect object instead ofwindow object because we use a normal function here.

Then we have the propertyname with the value "hoccoban". So the correct answer is A.

Credit: Thankshttps://github.com/phanvigiaii for fixing the typo. Please make a pull request when you have time bro. Cheer.

We have a simple array that consists of 3 elements. If checking the type of the array with the operatortypeof, we will haveobject. (Hint, you can make use ofArray.isArray(array)) orarray instanceof Array to check its type).

When declaringmyArray.someProperty, we now add a new property to that array and when declaringArray.prototype.someOtherProperty = "hello", we add a new property to every single array.

As a result, thefor... in loop will iterate through the array in question and return its key/property and the inherited property as well. However, in the second iteration, we take advantage of the methodhasOwnProperty(key) to check whether a particular key/property actually belongs to the array in question rather than the inherited one.

In short, in the first iteration, we get 5 (3 original ones, 1 property that is directly added to the array, 1 inherited from the Array.prototype. In the second one, we only get 4 as the inherited property is not taken into consideration.

Keep in mind that, we usefor... of to loop through an array or the traditionalfor loop. It is not a good practice to usefor ... in to loop through an array. It is often used to loop through an object.

We are using destructure array (or object) technique to extract element of an array (or object). We also take advantage of... (spread parameter) here.

The array we are destructuring is returned from a self-executing function. First we pass the parametercoderfarm, which is the parametera when declaring the function. Then we update this array with some additional value (an array with threeundefined elements usingnew Array(3)) on the top of the array (usingunshift). The array is updated now as[[undefined, undefined, undefined], 1, 2, 3, 4, 5].

Sotop is the first element of the array or[undefined, undefined, undefined], which returns 3 when we check the length.

Thebottom returns the rest of the array in question, which is 5 when usinglength property.

The final number is 8 and thus the correct answer is A.

The operatordelete only works on the property of an object, not the object itself. In the code snippet above, we have a simple functiongetAge with the parameterflag. When theflag istrue, we triggerdelete age.number and if it isfalse, we will use the operatordelete upon the whole object.

As this operator does not work on an object, if we can say that, it turns out thatdelete age actually does nothing. As such,console.log(getAge(false)) returns 10 and simultanously increases the value ofage.number to 11. The value is now being kept in the memory. As such,console.log(age.number) will return 11.

When we pass the argumentflag astrue in theconsole.log(getAge(true)), we will triggerdelete age.number which removes the value and the propertyage.number itself. It meansage.number is nowundefined. However, because we also attempt to increase the value of thisundefined property using++ operator, it returnsNaN.

console.log(age.number) also returnsNaN as well. So the correct answer is D.

We have three outputs in the code snippet above.

Firstconsole.log(cloneA.name); will returnundefined but why? We useObject.assign to clone a new object from an empty and from the objectcopy. The objectcopy itself is actually created from the original objectyoutube usingObject.create. Noted that because we useObject.create,copy will inherit the data from the original one but it is still an empty object itself.

Second, bothconsole.log(cloneB.name) andconsole.log(copy.name) return "hoccoban" becausecloneB.name will have the actual propertyname. On the contrary,copy.name outputs the propertyname inherited from theyoutube.

So the correct answer is A.

We have a self-invoking function here and we pass an array to it when the function is executed. Note thatArray.isArray(x) returntrue but actually we use! beforeArray.isArray(x). It meansdata will returnx.entries().

The methodarray.entries(), as you might have already known, returns agererator. Here we will callnext() to iterate through each element. Note that if you only callnext() once, it will only return the first element instead of the whole iterator.

Then when we callvalue, it returns an array with the index and the value of the iterator. So what will we get if we call console.log(data.next().value[0]). Sure, it returns0 as0 is the index.

So the correct answer is B.

Asx andy are both instances ofsymbol, they are unique in our codebase; therefore, the=== comparison will returnfalse as expected. In the simple code snippet above, we get theelse operation.

It should be noted that thetypeof x operation gives ussymbol, and since a string in JavaScript is iterable, we getm as we pass in the index 2.

So the correct answer is D.

Asframeworks is an array, it has a built-in method namedSymbol.iterator. You can hence iterate through the whole array using commonly used methods such asfor... of, normalfor loop,forEach ormap, among others. That is relatively trivial, I suppose.

This code challenge above is written to help us understand the concept of iteration better. First, we use the built-in method calledentries() to create a new iteration. So doesSymbol.iterator. Both seem to do the same thing.

Each time we callnext() method, the iteration will output one element. We then can callvalue() to get the value. The difference betweeniterator andi is that the former shows the value itself while the latter outputs an array consisting of the index and the value. It means that in the code above,iterator.next().value returnsangular andi.next().value gives us[1, angular].

So the correct answer is D.

We have two classes in the code snippet above. It sounds we are imitating React. TheReact class has only one property namedtheName, and no method is declared here. Providing thatAuthor extends theReact class, it inherits that property, surely. However, we have also declared another property with the same name in theAuthor classs. The difference is that the property declared in the child class is given the keywordstatic.

TheAuthor class also has two methods with the same namerender(), one as regular methods and another withstatic keyword. Will that work in JavaScript?

It turns out that JavaScript is quite flexible. It supports both property and method if they are declared with the same name as long as they are either regular property (or method) or static property (or method).

The last thing you should be aware of is that the methodstatic render() only calls the static property, here isstatic theName = "Real React"; So does the regular methodrender(). As such, the code does not run into any issues.

So the correct answer is A.

js is a standard class declared in the code snippet above that has only one property with the namesay. Then we again declare another property with the same namesay for it. You might think that the propertysay has been overwritten with a new valuegoodbye.

That is not the case as we will gethello when we runconsole.log(new js().say);. It is clear that the JavaScript engine prioritizes the property declared inside the class more than the property declared later using the prototype mechanism.

If the property has not been declared inside the class itself, we can then add a new one with the help ofprototype as inthename. Without the doubt, the codeconsole.log(new js().thename); gives usgoogle as expected.

So the correct answer is B.

To answer the question raised on the above code snippet, you might want to revisit two concepts,currying function anddestructing array or object.

First,currying function means we convert a function with multiple parameters into multiple functions with a SINGLE parameter. Then you can easily manipulate the flow of the data. Noted thatcurrying function is relevant tohigher-order function, you might want to have a look.

destructing array or object means we attempt to extract a complex array or object more conveniently. For example,[y, x, z] = [10, 20, 30, 40] will extract y, x and z with the value 10, 20 and 30 respectively.

The last thing is incremental operator here++x returns 21 butx++ does not as it still returns 21.

So the correct answer is C.

Array.prototype.reduce() is a bit perplexed built-in method that allows you to manipulate data in an array. It returns a single value from the array predefined as in the case withmap orfilter. The syntaxt of the function isarr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue]), so it accepts a callback function with four arguments includingaccumulator,currentValue,currentIndex (optional) andarray (optional).

The second argument of thereduce method, which is optional, is calledinitialValue that will be counted as the first element with the index 0 whenreduce is executing. IfinitialValue is not provided, thenreduce will run with the index 1 instead.reduce() sounds complicated, but truly it is not. In case you want to revise the function, kindly take a look at MDN here:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

The above code has two callback functions namedcallback andthecallback, which do the same thing. The seemingly creepy code is the variablesum, which is returned by a couple of nestedreduce functions. It turns out that there is only one "real"reduce function and the other ones give usinitialValue only.

• The firstinitialValue is 7;
• The first nestedreduce function gives us 7 (initialValue) + 5 + 6 + 7 = 25.
• The second nestedreduce has 25 as the initialValue, which we get from the above. Then it returns 25 + 5 + 6 + 7 = 43;
• The "real"reduce function now has 43 as the initialValue, the we get the final result: 43 + 5+ 6 + 7 = 61.

So the correct answer is D.

The code snippet above is relatively trivial. What we can learn from it is all about thespread operator (three-dot ...). Sometimes it is also used as arest operator to extract data from an object or array.

We have two simple objects which both have the same keyname but different values. The constantfirst gives us the length of the string value of the keywordname that is copied froma. So,first is now 12.

The constantsecond mergesa andb into one object. However, asb has the same keyname witha, the object created by merging two objects will have the value ofb. It means the constantsecond gives us the length ofyoutube.com/hoccoban, which is 20.

third does the same thing withfirst andsecond as it merges two objects into one. However, it also adds another key-value to the object. Coincidently, the key now isname, which is the same with the key attained froma andb. Hence, this key and value will take over the merged object. That meansthird is the length of the stringhello, which is 5.

In total, we have 12 + 20 + 5, and the final result is 37.

So the correct answer is B.

The code snippet above seems complicated regarding how we take advantage ofObject.defineProperty to add key and value to the objecthocCoBan. In fact,Object.defineProperty has a couple of handy features that allow us to control the behavior of the object in some situations where we want to make sure that the object created is mutable or not, whether it is iterable (usingfor..in) and so for. For example, if we setconfigurable: false when we declare an object withObject.defineProperty, we cannot usedelete operator to delete the object's property. We cannot change the value of that property as well.

The second "take away" message when reading the code above is the unpacking object technique, or a more frequent term is the destructing object. Say you have an object with two keys calledyear andage, then you can get them by using the destructing object technique as follows:{year, age} = theOBject;. In the code above, when declaring the functionApp, we also use destructing object technique to get the key from the object and use them as the parameters.

If you are familiar with asynchronous code in JavaScript when using the keywordasync, it is not a big deal to understand why we need to usethen to get the functionApp being called. It fact,async always returns a promise, so we need to usethen method to get the data we want.

The flow of the code is: 2021 - 30 +"hoccoban.com".length (which is 12).

The final result is 2003. So the correct answer is D.