In JS we trust - The best way to learn is by building/coding and teaching. I create the challenges to help my friends learn JavaScript and in return it helps me embrace the language in much deeper level. Feel free to clone, fork and pull.
This question revisits closure - one of the most confusing concepts in JavaScript. Closure allows us to create a stateful function and such a function can access to the variable outside of its scope. In a nutshell, a closure can have access to the global variable (scope), father function scope and its own scope.
We have here, the only one correct answer, 3, 3, 3 and 3, 4, 5 because first we simply call the function a(). It works like a normal function and we have not seen anything so-called stateful yet. In the following code, we declare a variable x and it stores the value of function a(1), that is why we get 3. 4. 5 rather than 3, 3, 3.
This kind of gotcha gives me the feeling of static 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 USE new keywork. That makes the variable a global one and get the value "Vuong". Remember that it is actually a property of the global object window (in the browser) or global in the nodejs.
We then get a.length ~ 5 and window.a.length ~ 5 which return 0. !0 returns true.
Imagine what would happen when we create the instance me with the new 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 string object which returns 6. z.y() simply returns the length of the string 'freetut' (7).
Be aware that the function x() (in the form of function express or anonymous function (if you are coming from PHP) return -1 when being called and when converted to bool with Boolean(-1) return true instead of false. Noted that Boolean(0) return false.
The function js() can be automatically executed without calling it and known as IIFE (Immediately Invoked Function Expression). Noted the parameter x of the function js is actuallly passed with the value 3.
The value return of the function is y(s())), meaning calling three other functions y(), s() and j() because the function s() returns j().
j() returns 3^3 = 27 so that s() returns 27.
y(s()) means y(27) which returns 27*3 = 81.
Note that we can call declare function BEFORE the function is actually declared but not with expression function.
5. What's the output?
vartip=100;(function(){console.log("I have $"+husband());functionwife(){returntip*2;}functionhusband(){returnwife()/2;}vartip=10;})();
A: "I have $10";
B: "I have $100";
C: "I have $50";
D: "I have $NaN";
Answer
Answer: D
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 with var keyword. However, it is actually undefined because we also have var tip = 10 INSIDE the function. As the variable tip is hoisted with default value undefined, the final result would be D. We know that undefined returns NaN when we try to divide to 2 or multiple with 2.
If we do not re-declare var tip = 10; at the end of the function, we will definately get B.
This challenge revises the ES6's feature regarding spread operator ... Spread operator is quite useful for retrieving parameter in function, to unite or combine object and array in JavaScript. PHP also has this feature.
In the variable edu, 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 named newbie. 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 about pass by reference in the case.
Then we have 2 as edu.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.
7. What's the output?
varcandidate={name: "Vuong",age: 30,};varjob={frontend: "Vuejs or Reactjs",backend: "PHP and Laravel",city: "Auckland",};classCombine{staticget(){returnObject.assign(candidate,job);}staticcount(){returnObject.keys(this.get()).length;}}console.log(Combine.count());
A: 5;
B: 6;
C: 7;
D: 8;
Answer
Answer: A
The buit-in method Object.assign(candidate, job) merges the two objects candidate and job into one object. Then the method Object.keys counts the number of key in the object.
Note that two methods get() and count() are defined as static, so they need to be called statically using Class.staticmethod() syntax. Then the final object get 5 elements.
This question illustrates the diffences between PHP and JavaScript when handling closure. In the first snippet, we declare a closure with the keyword use. Closure in PHP is simply an anonymous function and the data is passed to the function using the keyword use. Otherwise, it is called as lambda when we do not use the keyword use. You can check the result of the snippet here https://3v4l.org/PSeMY. PHP closure 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 keyword use here to pass variable to the closure. The variable x 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 keyword use to pass the variable to function. Another way to call a global ariable inside a function in PHP is to use the keyword global or employ the built-in GLOBAL variable $GLOBALS.
Technically, x and y have the same value. Both are empty objects. However, we do not use the value to compare objects.
z is x are two objects referring to the same memory position. In JavaScript, array and object are passed by reference. x and z therefore return true when being compared.
Given that the function setTimeout() will be kept in the task queue before jumping back to stack, "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 the setTimeout() function, it will run after synchronous code. So we will get "hello" first as it is put into the call stack first. Though the setTimeout() 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 using setTimeout..
String.prototype.someThing = function () {} is the common way to define a new built-in method for String. We can do the same thing with Array, Object or FunctionName where FunctionName is the function designed by ourself.
That is not challenging to realise that "string".lengthy() always returns hello. Yet, the tricky part lies in the delete object where we might think that this expression will entirely delete the object. That is not the case as delete is used to delete the property of the object only. It does not delete the object. Then we get hello rather than ReferenceError.
Note that if we declare object without let, const or var, we then have a global object. delete objectName then return true. Otherwise, it always returns false.
First we have an empty object x, then we add another property hi for x with x.__proto__.hi. Note this is equivalent to Object.prototype.hi = 10 and we are adding to the father object Object the property hi. It means every single object will inherit this propety. The property hi becomes a shared one. Say now we declare a new object such as let y = {}, y now has a propery hi inherited from the fatherObject. Put it simply x.__proto__ === Object.prototype returns true.
Then we overwrite the property hi with a new value 11. Last we have 11 + 1 = 12. x has one property and x.hi returns 11.
Updated (July 27th 2021). If you write Object.prototype.hi = 11; instead of Object.prototype.hi = ++x.hi; as written in the code above, then Object.keys(x) will return an empty array as Object.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 run console.log(x.hasOwnProperty("hi")) it still returns false. By the way, when you deliberately add a property for x such as x.test = "testing", then console.log(x.hasOwnProperty("test")) returns true.
客服电话
APP下载
官方微信
