Posted in webdev

5:45 am, July 8, 2019

So you think you know JavaScript? - DEV Community 👩‍💻👨‍💻

<div data-article-id="133678" id="article-body" itemprop="articleBody" readability="288.91309350311">
JavaScript is an interesting language and we all love it because of its nature. Browsers are the home for JavaScript and both work together at our service. JS has a few concepts where people tend to take it lightly and sometime may tumble over. Concepts like prototyping, closures and event-loops are still one of those obscure areas where most of the JS developers take a detour. And as we know “little knowledge is a dangerous thing”, it may lead to making mistakes.

Let’s play a mini-game where I am going to ask you a few questions and you have to try answering all of them. Make a guess even if you don’t know the answer or if it’s out of your knowledge. Note down your answers and then check the corresponding answers below. Give yourself a score of 1 for each correct answer. Here we go.

<blockquote readability="8">
Disclaimer: I’ve used ‘var’ purposely in some of the following code snippets so that you guys can copy paste them into your browser’s console without running into SyntaxError problem. But I don’t condone the usage of ‘var’ declared variables. ‘let’ and ‘const’ declared variables make your code robust and less error-prone.
</blockquote>

<hr/>Question 1: What will be printed on the browser console?

<div class="highlight" readability="7"><pre class="highlight javascript"><code>var a = 10;
function foo() {
console.log(a); // ??
var a = 20;
}
foo();
</code></pre></div>

Question 2: Will output be the same if we use let or const instead of var?

<div class="highlight" readability="7"><pre class="highlight javascript"><code>var a = 10;
function foo() {
console.log(a); // ??
let a = 20;
}
foo();
</code></pre></div>

Question 3: What elements will be in the “newArray”?

<div class="highlight" readability="8"><pre class="highlight javascript"><code>var array = [];
for(var i = 0; i <3; i++) {
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??
</code></pre></div>

Question 4: If we run the ‘foo’ function in the browser console, will it cause a stack overflow error?

<div class="highlight" readability="8"><pre class="highlight javascript"><code>function foo() {
setTimeout(foo, 0); // will there by any stack overflow error?
};
</code></pre></div>

Question 5: Will the UI of the page (tab) remains responsive if we run the following function in the console?

<div class="highlight" readability="7"><pre class="highlight javascript"><code>function foo() {
return Promise.resolve().then(foo);
};
</code></pre></div>

Question 6: Can we somehow use the spread syntax for the following statement without causing a TypeError?

<div class="highlight" readability="9"><pre class="highlight javascript"><code>var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeError
</code></pre></div>

Question 7: What will be printed on the console when we run the following code snippet?

// what properties will be printed when we run the for-in loop?
for(let prop in obj) {
console.log(prop);
}
</code></pre></div>

Question 8: What value xGetter() will print?

<div class="highlight" readability="9"><pre class="highlight javascript"><code>
var x = 10;
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??
</code></pre></div>

<hr/><h3>
<a name="answers" href="#answers" class="anchor">
</a>
Answers
</h3>

Now, let’s try to answer each question from top to bottom. I will give you a brief explanation while trying to demystify these behaviors along with some references.

Answer 1: undefined. Explanation: The variables declared with var keywords are <a href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting" style="color: inherit; text-decoration: none;" name="readabilityLink-1">hoisted</a><a href="#readabilityFootnoteLink-1" class="readability-DoNotFootnote" style="color: inherit;">[1]</a> in JavaScript and are assigned a value of undefined in the memory. But initialization happens exactly where you typed them in your code. Also, var-declared variables are <a href="http://2ality.com/2011/02/javascript-variable-scoping-and-its.html" style="color: inherit; text-decoration: none;" name="readabilityLink-2">function-scoped</a><a href="#readabilityFootnoteLink-2" class="readability-DoNotFootnote" style="color: inherit;">[2]</a>, whereas let and const have block-scoped. So, this is how the process will look like:

<div class="highlight" readability="9"><pre class="highlight javascript"><code>var a = 10; // global scope
function foo() {
// Declaration of var a will be hoisted to the top of function.
// Something like: var a;

console.log(a); // prints undefined

// actual initialisation of value 20 only happens here
var a = 20; // local scope
}
</code></pre></div>

<hr/>Answer 2: ReferenceError: a is not defined. Explanation: let and const allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. Unlike var, these variables are not hoisted and have a so-called <a href="http://exploringjs.com/es6/chvariables.html#sectemporal-dead-zone" style="color: inherit; text-decoration: none;" name="readabilityLink-3">temporal dead zone</a><a href="#readabilityFootnoteLink-3" class="readability-DoNotFootnote" style="color: inherit;">[3]</a> (TDZ). Trying to access these variables in TDZ will throw a ReferenceError because they can only be accessed until execution reaches the declaration. Read more about <a href="http://2ality.com/2015/02/es6-scoping.html" style="color: inherit; text-decoration: none;" name="readabilityLink-4">lexical scoping</a><a href="#readabilityFootnoteLink-4" class="readability-DoNotFootnote" style="color: inherit;">[4]</a> and <a href="http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/" style="color: inherit; text-decoration: none;" name="readabilityLink-5">Execution Context & Stack</a><a href="#readabilityFootnoteLink-5" class="readability-DoNotFootnote" style="color: inherit;">[5]</a> in JavaScript.

<div class="highlight" readability="11"><pre class="highlight javascript"><code>var a = 10; // global scope
function foo() { // enter new scope, TDZ starts

// Uninitialised binding for 'a' is created
console.log(a); // ReferenceError

// TDZ ends, 'a' is initialised with value of 20 here only
let a = 20;
}
</code></pre></div>

The following table outlines the hoisting behaviour and scoping associated with different keywords used in JavaScript (credit: <a href="https://twitter.com/rauschma" style="color: inherit; text-decoration: none;" name="readabilityLink-6">Axel Rauschmayer</a>'s blog <a href="http://exploringjs.com/es6/chvariables.html#ways-of-declaring-variables" style="color: inherit; text-decoration: none;" name="readabilityLink-7">post</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;">[6]</a><a href="#readabilityFootnoteLink-7" class="readability-DoNotFootnote" style="color: inherit;">[7]</a>).

<hr/>Answer 3: [3, 3, 3]. Explanation: Declaring a variable with var keyword in the head of for loop creates a single binding (storage space) for that variable. Read more about <a href="http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/" style="color: inherit; text-decoration: none;" name="readabilityLink-8">closures</a><a href="#readabilityFootnoteLink-8" class="readability-DoNotFootnote" style="color: inherit;">[8]</a>. Let’s look at the for loop one more time.

<div class="highlight" readability="13"><pre class="highlight javascript"><code>// Misunderstanding scope:thinking that block-level scope exist here
var array = [];
for (var i = 0; i < 3; i++) {
// Every 'i' in the bodies of the three arrow functions
// referes to the same binding, which is why they all
// return the same value of '3' at the end of the loop.
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]
</code></pre></div>

If you let-declare a variable, which has a block-level scope, a new binding is created for each loop iteration.

<div class="highlight" readability="14"><pre class="highlight javascript"><code>// Using ES6 block-scoped binding
var array = [];
for (let i = 0; i < 3; i++) {
// This time, each 'i' refers to the binding of one specific iteration
// and preserves the value that was current at that time.
// Therefore, each arrow function returns a different value.
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
</code></pre></div>

Another way of solving this quirk would be to use <a href="http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/" style="color: inherit; text-decoration: none;" name="readabilityLink-9">closures</a><a href="#readabilityFootnoteLink-9" class="readability-DoNotFootnote" style="color: inherit;">[9]</a>.

<div class="highlight" readability="13"><pre class="highlight javascript"><code>// After understanding static scoping and thus closures.
// Without static scoping, there's no concept of closures.
let array = [];
for (var i = 0; i < 3; i++) {
// invoking the function to capture (closure) the variable's current value in the loop.
array[i] = (function(x) {
return function() {
return x;
};
})(i);
}
const newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
</code></pre></div>

<hr/>Answer 4: No. Explanation: JavaScript concurrency model is based on an “event loop”. When I said “Browsers are the home for JS”, what I really meant was that browsers provide runtime environment to execute our JavaScript code. The main components of the browser include Call stack, Event loop, Task Queue and Web APIs. Globals functions like setTimeout, setInterval, and Promise are not the part of JavaScript but the Web APIs. The visual representation of the JavaScript environment can be something like as shown below:

JS call stack is Last In First Out (LIFO). The engine takes one function at a time from the stack and runs the code sequentially from top to bottom. Every time it encounters some asynchronous code, like setTimeout, it hands it over to the Web API (arrow 1). So, whenever an event is triggered, the callback gets sent to the Task Queue (arrow 2).

The Event loop is constantly monitoring the Task Queue and process one callback at a time in the order they were queued. Whenever the call stack is empty, the loop picks up the callback and put it into the stack (arrow 3) for processing. Keep in mind that if call stack is not empty, event loop won’t push any callbacks to the stack.

For a more detailed description of how Event loop works in JavaScript, I highly recommend watching this <a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ" style="color: inherit; text-decoration: none;" name="readabilityLink-10">video</a><a href="#readabilityFootnoteLink-10" class="readability-DoNotFootnote" style="color: inherit;">[10]</a> by Philip Roberts. Additionally, you can also visualise and understand the call stack via this awesome <a href="http://latentflip.com/loupe/" style="color: inherit; text-decoration: none;" name="readabilityLink-11">tool</a><a href="#readabilityFootnoteLink-11" class="readability-DoNotFootnote" style="color: inherit;">[11]</a>. Go ahead and run the ‘foo’ function there and see what happens!

Now, armed with this knowledge, let’s try to answer the aforementioned question:

<h4>
<a name="steps" href="#steps" class="anchor">
</a>
Steps
</h4>

<ol><li>Calling foo() will put the foo function into the call stack.</li>
<li>While processing the code inside, JS engine encounters the setTimeout.</li>
<li>It then hands over the foo callback to the WebAPIs (arrow 1) and returns from the function. The call stack is empty again.</li>
<li>The timer is set to 0, so the foo will be sent to the Task Queue (arrow 2).</li>
<li>As, our call stack was empty, the event loop will pick the foo callback and push it to the call stack for processing.</li>
<li>The Process repeats again and stack doesn't overflow ever.</li>
</ol><hr/>Answer 5: No. Explanation: Most of the time, I have seen developers assuming that we have only one task queue in the event loop picture. But that’s not true. We can have multiple task queues. It’s up to the browser to pick up any queue and processes the callbacks inside.

On a high level, there are macrotasks and microtasks in JavaScript. The setTimeout callbacks are macrotasks whereas Promise callbacks are microtasks. The main difference is in their execution ceremony. Macrotasks are pushed into the stack one at a time in a single loop cycle, but the microtask queue is always emptied before execution returns to the event loop including any additionally queued items. So, if you were adding items to this queue as quickly you’re processing them, you are processing micro tasks forever. For a more in-depth explanation, watch this <a href="https://www.youtube.com/watch?v=cCOL7MC4Pl0" style="color: inherit; text-decoration: none;" name="readabilityLink-12">video</a><a href="#readabilityFootnoteLink-12" class="readability-DoNotFootnote" style="color: inherit;">[12]</a> or <a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/" style="color: inherit; text-decoration: none;" name="readabilityLink-13">article</a><a href="#readabilityFootnoteLink-13" class="readability-DoNotFootnote" style="color: inherit;">[13]</a> by <a href="https://twitter.com/jaffathecake" style="color: inherit; text-decoration: none;" name="readabilityLink-14">Jake Archibald</a><a href="#readabilityFootnoteLink-14" class="readability-DoNotFootnote" style="color: inherit;">[14]</a>.

<blockquote readability="5">
Microtask queue is always emptied before execution returns to the event loop
</blockquote>

Now, when you run the following code snippet in your console:

Every single invocation of ‘foo’ will continue to add another ‘foo’ callback on the microtask queue and thus the event loop can’t continue to process your other events (scroll, click etc) until that queue has completely emptied. Consequently, it blocks the rendering.

<hr/>Answer 6: Yes, by making object <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iterationprotocols" style="color: inherit; text-decoration: none;" name="readabilityLink-15">iterables</a><a href="#readabilityFootnoteLink-15" class="readability-DoNotFootnote" style="color: inherit;">[15]</a>. Explanation: The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spreadsyntax" style="color: inherit; text-decoration: none;" name="readabilityLink-16">spread syntax</a><a href="#readabilityFootnoteLink-16" class="readability-DoNotFootnote" style="color: inherit;">[16]</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" style="color: inherit; text-decoration: none;" name="readabilityLink-17">for-of</a><a href="#readabilityFootnoteLink-17" class="readability-DoNotFootnote" style="color: inherit;">[17]</a> statement iterates over data that iterable object defines to be iterated over. Array or Map are built-in iterables with default iteration behaviour. Objects are not iterables, but you can make them iterable by using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iterationprotocols#Theiterableprotocol" style="color: inherit; text-decoration: none;" name="readabilityLink-18">iterable</a><a href="#readabilityFootnoteLink-18" class="readability-DoNotFootnote" style="color: inherit;">[18]</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iterationprotocols#Theiteratorprotocol" style="color: inherit; text-decoration: none;" name="readabilityLink-19">iterator</a><a href="#readabilityFootnoteLink-19" class="readability-DoNotFootnote" style="color: inherit;">[19]</a> protocols.

In Mozilla documentation, an object is said to be iterable if it implements the @@iterator method, meaning that the object (or one of the objects up its <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritanceandtheprototypechain" style="color: inherit; text-decoration: none;" name="readabilityLink-20">prototype chain</a><a href="#readabilityFootnoteLink-20" class="readability-DoNotFootnote" style="color: inherit;">[20]</a>) must have a property with a @@iterator key which is available via constant Symbol.iterator.

The aforesaid statement may seem a bit verbose, but the following example will make more sense:

<div class="highlight" readability="18"><pre class="highlight javascript"><code>var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
// An iterator is an object which has a next method,
// which also returns an object with atleast
// one of two properties: value & done.

// returning an iterator object
return {
next: function() {
if (this.countDown === 3) {
const lastValue = this.countDown;
return { value: this.countDown, done: true };
}
this.countDown = this.countDown + 1;
return { value: this.countDown, done: false };
},
countDown: 0
};
};
[...obj]; // will print [1, 2, 3]
</code></pre></div>

You can also use a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function" style="color: inherit; text-decoration: none;" name="readabilityLink-21">generator</a><a href="#readabilityFootnoteLink-21" class="readability-DoNotFootnote" style="color: inherit;">[21]</a> function to customize iteration behaviour for the object:

<div class="highlight" readability="12"><pre class="highlight javascript"><code>var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
yield 1;
yield 2;
yield 3;
};
[...obj]; // print [1, 2, 3]
</code></pre></div>

<hr/>Answer 7: a, b, c. Explanation: The for-in loop iterates over the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerabilityandownershipofproperties" style="color: inherit; text-decoration: none;" name="readabilityLink-22">enumerable properties</a><a href="#readabilityFootnoteLink-22" class="readability-DoNotFootnote" style="color: inherit;">[22]</a> of an object itself and those the object inherits from its prototype. An enumerable property is one that can be included in and visited during for-in loops.

<div class="highlight" readability="14"><pre class="highlight javascript"><code>var obj = { a: 1, b: 2 };
var descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor.enumerable); // true
console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }
</code></pre></div>

Now having this knowledge in your bag, it should be easy to understand why our code printed those specific properties:

<div class="highlight" readability="19"><pre class="highlight javascript"><code>
var obj = { a: 1, b: 2 }; // a, b are both enumerables properties

// setting {c: 3} as the prototype of 'obj', and as we know
// for-in loop also iterates over the properties obj inherits
// from its prototype, 'c' will also be visited.
Object.setPrototypeOf(obj, { c: 3 });

// we are defining one more property 'd' into our 'obj', but
// we are setting the 'enumerable' to false. It means 'd' will be ignored.
Object.defineProperty(obj, "d", { value: 4, enumerable: false });

for (let prop in obj) {
console.log(prop);
}
// it will print
// a
// b
// c
</code></pre></div>

<hr/>Answer 8: 10. Explanation: When we initialised x into the global scope, it becomes the property of the window object (assuming that it’s a browser environment and not a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strictmode" style="color: inherit; text-decoration: none;" name="readabilityLink-23">strict</a><a href="#readabilityFootnoteLink-23" class="readability-DoNotFootnote" style="color: inherit;">[23]</a> mode). Looking at the code below:

<div class="highlight" readability="9"><pre class="highlight javascript"><code>var x = 10; // global scope
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
let xGetter = foo.getX;
xGetter(); // prints 10
</code></pre></div>

We can assert that:

this will always point to the object onto which the method was invoked. So, in the case of foo.getX(), this points to foo object returning us the value of 90. Whereas in the case of xGetter(), this points to the window object returning us the value of 10.

To retrieve the value of foo.x, we can create a new function by binding the value of this to the foo object using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globalobjects/Function/bind" style="color: inherit; text-decoration: none;" name="readabilityLink-24">Function.prototype.bind</a><a href="#readabilityFootnoteLink-24" class="readability-DoNotFootnote" style="color: inherit;">[24]</a>.

<div class="highlight" readability="7"><pre class="highlight javascript"><code>let getFooX = foo.getX.bind(foo);
getFooX(); // prints 90
</code></pre></div>

That’s all! Well done if you’ve got all of your answers correct. We all learn by making mistakes. It’s all about knowing the ‘why’ behind it. Know your tools and know them better. If you liked the article, a few ❤️ will definitely make me smile 😀. 

What was your score anyway 😃?

</div><div id="readability-footnotes"><h3>References</h3><ol id="readability-footnotes-list"><li><a href="#readabilityLink-1" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting" name="readabilityFootnoteLink-1">hoisted</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-2" title="Jump to Link in Article">^</a> <a href="http://2ality.com/2011/02/javascript-variable-scoping-and-its.html" name="readabilityFootnoteLink-2">function-scoped</a> (2ality.com)</li><li><a href="#readabilityLink-3" title="Jump to Link in Article">^</a> <a href="http://exploringjs.com/es6/chvariables.html#sectemporal-dead-zone" name="readabilityFootnoteLink-3">temporal dead zone</a> (exploringjs.com)</li><li><a href="#readabilityLink-4" title="Jump to Link in Article">^</a> <a href="http://2ality.com/2015/02/es6-scoping.html" name="readabilityFootnoteLink-4">lexical scoping</a> (2ality.com)</li><li><a href="#readabilityLink-5" title="Jump to Link in Article">^</a> <a href="http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/" name="readabilityFootnoteLink-5">Execution Context & Stack</a> (davidshariff.com)</li><li><a href="#readabilityLink-6" title="Jump to Link in Article">^</a> <a href="https://twitter.com/rauschma" name="readabilityFootnoteLink-6">Axel Rauschmayer</a> (twitter.com)</li><li><a href="#readabilityLink-7" title="Jump to Link in Article">^</a> <a href="http://exploringjs.com/es6/chvariables.html#ways-of-declaring-variables" name="readabilityFootnoteLink-7">post</a> (exploringjs.com)</li><li><a href="#readabilityLink-8" title="Jump to Link in Article">^</a> <a href="http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/" name="readabilityFootnoteLink-8">closures</a> (dmitrysoshnikov.com)</li><li><a href="#readabilityLink-9" title="Jump to Link in Article">^</a> <a href="http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/" name="readabilityFootnoteLink-9">closures</a> (dmitrysoshnikov.com)</li><li><a href="#readabilityLink-10" title="Jump to Link in Article">^</a> <a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ" name="readabilityFootnoteLink-10">video</a> (www.youtube.com)</li><li><a href="#readabilityLink-11" title="Jump to Link in Article">^</a> <a href="http://latentflip.com/loupe/" name="readabilityFootnoteLink-11">tool</a> (latentflip.com)</li><li><a href="#readabilityLink-12" title="Jump to Link in Article">^</a> <a href="https://www.youtube.com/watch?v=cCOL7MC4Pl0" name="readabilityFootnoteLink-12">video</a> (www.youtube.com)</li><li><a href="#readabilityLink-13" title="Jump to Link in Article">^</a> <a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/" name="readabilityFootnoteLink-13">article</a> (jakearchibald.com)</li><li><a href="#readabilityLink-14" title="Jump to Link in Article">^</a> <a href="https://twitter.com/jaffathecake" name="readabilityFootnoteLink-14">Jake Archibald</a> (twitter.com)</li><li><a href="#readabilityLink-15" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iterationprotocols" name="readabilityFootnoteLink-15">iterables</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-16" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spreadsyntax" name="readabilityFootnoteLink-16">spread syntax</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-17" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" name="readabilityFootnoteLink-17">for-of</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-18" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iterationprotocols#Theiterableprotocol" name="readabilityFootnoteLink-18">iterable</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-19" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iterationprotocols#Theiteratorprotocol" name="readabilityFootnoteLink-19">iterator</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-20" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritanceandtheprototypechain" name="readabilityFootnoteLink-20">prototype chain</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-21" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*" name="readabilityFootnoteLink-21">generator</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-22" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerabilityandownershipofproperties" name="readabilityFootnoteLink-22">enumerable properties</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-23" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strictmode" name="readabilityFootnoteLink-23">strict</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-24" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind" name="readabilityFootnoteLink-24">Function.prototype.bind</a> (developer.mozilla.org)</li></ol></div>

keywords software development, inclusive, community,engineering,javascript, closures, eventloop, webdev

No Items Found.

Add Comment

Other Items in webdev

Hugo Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery

Other Categories in Linx

ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx os osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Latest News

## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.

So you think you know JavaScript? - DEV Community 👩‍💻👨‍💻

Add Comment

Other Items in webdev

Other Categories in Linx

Search Linx

Latest from Linx

Welcome

Random Quote

Latest News

Latest Articles

Code

Links

Quick Links

Quick Links

Sections