Resources to Master Javascript

Deen John — Sun, 15 Apr 2018 18:24:29 +0000

Master Javascript

Fundamentals Javascript Reading:

http://dmitrysoshnikov.com/category/ecmascript/

MDN
https://developer.mozilla.org/bm/docs/Web/JavaScript)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Expressions and operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)

http://exploringjs.com/impatient-js/ch_syntax.html#statement-vs.expression
https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch1.md
https://stackoverflow.com/questions/12703214/javascript-difference-between-a-statement-and-an-expression

Values & Types

http://speakingjs.com/es5/ch08.html
https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch1.md#values--types
https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md

Primitive Values Versus Objects
http://speakingjs.com/es5/ch01.html#basic_prim_vs_obj

Manually Converting to Boolean
There are three ways any value can be converted to a boolean:

1)Boolean(value)

(Invoked as a function, not as a constructor)

2)value ? true : false

3)!!value
https://stackoverflow.com/questions/10467475/double-negation-in-javascript-what-is-the-purpose
var x = "somevalue"
var isNotEmpty = !!x.length;
Let's break it to pieces:

x.length   // 9
!x.length  // false
!!x.length // true
So it's used convert a "truethy" \"falsy" value to a boolean.

A single “not” converts to negated boolean; use twice for the nonnegated conversion.

var a = "0";
var b = [];
var c = {};

var d = "";
var e = 0;
var f = null;
var g;

!!a;    // true
!!b;    // true
!!c;    // true

!!d;    // false
!!e;    // false
!!f;    // false
!!g;    // false

Truthy values
https://developer.mozilla.org/en-US/docs/Glossary/Truthy
http://speakingjs.com/es5/ch01.html#basic_prim_vs_obj
How to check for “undefined” in JavaScript?

https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript)

https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property)

JavaScript data types and data structures
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
What is the difference between parseInt() and Number()?
https://stackoverflow.com/questions/4090518/what-is-the-difference-between-parseint-and-number

Well, they are semantically different, the Number constructor called
as a function performs type conversion and parseInt performs parsing.

But in real life we often have values in units, like "100px" or "12pt" in CSS. Also in many countries the currency symbol goes after the amount, so we have "19€" and would like to extract a numeric value out of that.

That’s what parseInt and parseFloat are for.

They “read” a number from a string until they can’t. In case of an error, the gathered number is returned.
The function parseInt returns an integer, whilst parseFloat will return a floating-point number:

 alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN (error reading a number at "z")
alert( Number(true) );        // 1
alert( Number(false) );       // 0

Master the JavaScript Interview: What is Function Composition?
https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0#.i84zm53fb)
How do you check that a number is NaN in JavaScript?
https://stackoverflow.com/questions/2652319/how-do-you-check-that-a-number-is-nan-in-javascript

http://speakingjs.com/es5/ch11.html#isNaN best

I would recommend: typeof value === 'number' && !isNaN(value). Because typeof NaN === 'number'.

NaN is the only value that is not equal to itself:


> NaN === NaN
false

So we can use If you want to check whether a value is NaN, you have to use the global function isNaN():

> isNaN(NaN)
true
> isNaN(33)
false

But :
isNaN does not work properly with nonnumbers, because it first converts those to numbers. That conversion can produce NaN and then the function incorrectly returns true:


> isNaN('xyz')
true

Thus, it is best to combine isNaN with a type check:

function myIsNaN(value) {
    return typeof value === 'number' && isNaN(value);
}

Alternatively, you can check whether the value is unequal to itself (as NaN is the only value with this trait). But that is less self-explanatory:

function myIsNaN(value) {
    return value !== value;
}

Is Number.IsNaN() more broken than isNaN() https://stackoverflow.com/questions/25176459/is-number-isnan-more-broken-than-isnan

isNaN() and Number.isNaN() both test if a value is (or, in the case of isNaN(), can be converted to a number-type value that represents) the NaN value. In other words, "NaN" does not simply mean "this value is not a number", it specifically means "this value is a numeric Not-a-Number value according to IEEE-754".

The reason all your tests above return false is because all of the given values can be converted to a numeric value that is not NaN:

Number('')    // 0
Number('   ') // 0
Number(true)  // 1
Number(false) // 0
Number([0])   // 0

The reason isNaN() is "broken" is because, ostensibly, type conversions aren't supposed to happen when testing values. That is the issue Number.isNaN() is designed to address. In particular, Number.isNaN() will only attempt to compare a value to NaN if the value is a number-type value. Any other type will return false, even if they are literally "not a number", because the type of the value NaN is number. See the respective MDN docs for isNaN() and Number.isNaN().

If you simply want to determine whether or not a value is of the number type, even if that value is NaN, use typeof instead:

typeof 'RAWRRR' === 'number' // false

null vs undefined https://basarat.gitbooks.io/typescript/docs/javascript/null-undefined.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Loose_equality_using

Something hasn't been initialized : undefined.
Something is currently unavailable: null.

If you want to test for a null value using its type, you need a compound condition:

var a = null;

(!a && typeof a === "object"); // true

When you’re trying to identify null, use triple equals so that you can correctly identify the type.
ex : console.log(undefined == null); // true
console.log(undefined === null); // false

null is the only primitive value that is "falsy" (aka false-like; see Chapter 4) but that also returns "object" from the typeof check.

Pitfall: typeof null
Unfortunately, typeof null is 'object'. This is considered a bug (null is not a member of the internal type Object), but it can’t be fixed, because doing so would break existing code. You thus have to be wary of null. For example, the following function checks whether value is an object:

function isObject(value) {
return (value !== null
&& (typeof value === 'object'
|| typeof value === 'function'));

Use of null in prototype Use null Prototypes to Prevent Prototype Pollution


function C() { }
C.prototype = null;
But instantiating this constructor still results in instances of Object:
var o = new C();
Object.getPrototypeOf(o) === null; // false
Object.getPrototypeOf(o) === Object.prototype; // true

null vs zero
https://javascript.info/comparison#strange-result-null-vs-0
ToBoolean
https://javascript.info/type-conversions#toboolean
parseInt and parseFloat

Numeric conversion using a plus + or Number() is strict. If a value is not exactly a number, it fails:
alert( +"100px" ); // NaN

There are situations when parseInt/parseFloat will return NaN. It happens when no digits could be read:

alert( parseInt('a123') ); // NaN, the first symbol stops the process

Binary Logical Operators http://speakingjs.com/es5/ch01.html#basic_prim_vs_obj https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch4.md#operators--and-

And (&&)
If the first operand is falsy, return it. Otherwise, return the second operand:

> NaN && 'abc'
NaN
> 123 && 'abc'
'abc'
Or (||)
If the first operand is truthy, return it. Otherwise, return the second operand:

> 'abc' || 123
'abc'
> '' || 123
123

var a = 42;
var b = "abc";
var c = null;

a || b;     // 42
a && b;     // "abc"

c || b;     // "abc"
c && b;     // null

a || b;
// roughly equivalent to:
a ? a : b;

a && b;
// roughly equivalent to:
a ? b : a;

operators https://javascript.info/operators

https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#testing-for-integers
42.3 % 1 is in decimal but 42 % 1 is 0

Number.isInteger( 42 );     // true
Number.isInteger( 42.000 ); // true
Number.isInteger( 42.3 );   // false

this behaviour can be use in :  
To polyfill Number.isInteger(..) for pre-ES6:

if (!Number.isInteger) {
    Number.isInteger = function(num) {
        return typeof num == "number" && num % 1 == 0;
    };
}

*String concatenation, binary + *
https://javascript.info/operators#string-concatenation-binary
Chapter 2. Variable Scope

from book : Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript

This chapter taught me some more hidden things about closures and scopes.

https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch02.html#ch02lev1sec4)

https://stackoverflow.com/questions/111102/how-do-javascript-closures-work
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript
https://stackoverflow.com/questions/2728278/what-is-a-practical-use-for-a-closure-in-javascript
https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue

in vs for ...in

The for-in statement by itself is not a "bad practice", however it can be mis-used,
for example, to iterate over arrays or array-like objects.

The purpose of the for-in statement is to enumerate over object properties.
This statement will go up in the prototype chain, also enumerating over inherited properties, a thing that sometimes is not desired.

for..in isn't guaranteed to preserve element ordering

https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)

https://www.w3schools.com/jsref/jsref_forin.asp
https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea

http://adripofjavascript.com/blog/drips/the-problem-with-for-in-and-javascript-arrays.html

Coercion

Equality comparisons and sameness

Coercion

http://speakingjs.com/es5/ch09.html
http://speakingjs.com/es5/ch10.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)
http://ecma-international.org/ecma-262/5.1/#sec-11.9.3)
http://getify.github.io/coercions-grid/)

http://speakingjs.com/es5/ch09.html
Use case: working with numbers in strings
If you are not sure whether a value x is a number or a number-as-a-string, you can use checks such as the following:


if (x == 123) ...

The preceding checks whether x is either 123 or '123'. Again, this is very compact, and again, it is better to be explicit:

if (Number(x) === 123)

Use case: comparing wrapper instances with primitives
Lenient equals lets you compare primitives with wrapped primitives:


> 'abc' == new String('abc')
true

There are three reasons against this approach. First, lenient equality does not work between wrapped primitives:

> new String('abc') == new String('abc')
false
Second, you should avoid wrappers anyway. 
Third, if you do use them, it is better to be explicit:

if (wrapped.valueOf() === 'abc')

https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch4.md#comparing-strings-to-numbers

var a = "42";

// bad (will fail!):
if (a == true) {
    // ..
}

// also bad (will fail!):
if (a === true) {
    // ..
}

// good enough (works implicitly):
if (a) {
    // ..
}

// better (works explicitly):
if (!!a) {
    // ..
}

// also great (works explicitly):
if (Boolean( a )) {
    // ..
}

Object.is
https://javascript.info/number

How is this experssion evaluated ? x < y*
The Algorithm (http://speakingjs.com/es5/ch08.html#toprimitive)
https://javascript.info/object-toprimitive

You evaluate a comparison:

x < y

by taking the following steps:

Ensure that both operands are primitives. Objects obj are converted to primitives via the internal operation ToPrimitive(obj, Number) (refer to Algorithm: ToPrimitive()—Converting a Value to a Primitive), which calls obj.valueOf() and, possibly, obj.toString() to do so.
If both operands are strings, then compare them by lexicographically comparing the 16-bit code units (see Chapter 24) that represent the JavaScript characters of the string.
Otherwise, convert both operands to numbers and compare them numerically.
The other ordering operators are handled similarly

Chapter 4: Coercion
https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch4.md)
https://stackoverflow.com/questions/154059/how-to-check-empty-undefined-null-string-in-javascript
Item 3: Beware of Implicit Coercions
https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch01.html#ch01lev1sec3)

null becomes 0 if coerced to a number:

Number(null)
0
5 + null
5

Number(undefined)
NaN
5 + undefined
NaN

3 + ' times'
'3 times'

String(null)
'null'
String(123.45)
'123.45'
String(false)
'false'

Number({})
NaN ..why ?Algorithm: ToPrimitive()—Converting a Value to a Primitive. http://speakingjs.com/es5/ch08.html

typeof vs instanceof vs {}.toString

https://javascript.info/instanceof
https://stackoverflow.com/questions/899574/which-is-best-to-use-typeof-or-instanceof)

*typeof : It returns a string describing the “type” of value.*

> typeof true
'boolean'
> typeof 'abc'
'string'
> typeof {} // empty object literal
'object'
> typeof [] // empty array literal
'object'

typeof undefined
'undefined'

typeof null
'object'

var a = null;

(!a && typeof a === "object"); // true
null is the only primitive value that is "falsy" 
but that also returns "object" from the typeof check.

practical use :
in Jquery https://code.jquery.com/jquery-3.3.1.js

function isArrayLike( obj ) {

    // Support: real iOS 8.2 only (not reproducible in simulator)
    // `in` check used to prevent JIT error (gh-2145)
    // hasOwn isn't used here due to false negatives
    // regarding Nodelist length in IE
    var length = !!obj && "length" in obj && obj.length,
        type = toType( obj );

    if ( isFunction( obj ) || isWindow( obj ) ) {
        return false;
    }

    return type === "array" || length === 0 ||
        typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}

instanceof

http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/

https://javascript.info/instanceof

instanceof operator essentially checks whether anything from left-hand object’s prototype chain is
the same object as what’s referenced by prototype property of right-hand object.

var arr = [];
arr instanceof Array; // true
This statement returns true because Array.prototype (being a prototype property of a right-hand object)
references the same object as an internal [[Prototype]] of left-hand object ([[Prototype]]
is “visible” via arr.proto in clients that have proto extension).
An alternative constructor check, which I mentioned earlier, would usually look like:

var arr = [];
arr.constructor == Array; // true

The instanceof operator tests the presence of constructor.prototype i.e Array.prototype in object's prototype chain.

a instanceof Foo; // true

The instanceof operator takes a plain object as its left-hand operand and a function as its right-hand operand.
The question instanceof answers is: in the entire [[Prototype]] i.e proto chain of a, does the object arbitrarily pointed to by Foo.prototype ever appear?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof)

http://speakingjs.com/es5/ch01.html#basic_prim_vs_obj
value instanceof Constr
It returns true if value is an object that has been created by the constructor Constr (see Constructors: Factories for Objects). Here are some examples:

> var b = new Bar();  // object created by constructor Bar
> b instanceof Bar
true

> {} instanceof Object
true
> [] instanceof Array
true
> [] instanceof Object  // Array is a subconstructor of Object
true

> undefined instanceof Object
false
> null instanceof Object
false

Problem with instanceof

case1 :

function Rabbit() {}
let rabbit = new Rabbit();

// changed the prototype
Rabbit.prototype = {};
rabbit instanceof Rabbit //false

That’s one of the reasons to avoid changing prototype. Just to keep safe.

case 2 :
The problems arise when it comes to scripting in multi-frame DOM environments. In a nutshell, Array objects created within one iframe do not share [[Prototype]]’s with arrays created within another iframe. Their constructors are different objects and so both instanceof and constructor checks fail:

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Boom!
arr instanceof Array; // false

// Boom!
arr.constructor === Array; // false

{}.toString https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch3.md#internal-class

Object toString for the type
// copy toString method into a variable for convenience


let objectToString = Object.prototype.toString;

// what type is this?
let arr = [];

alert( objectToString.call(arr) ); // [object Array]

Object.prototype.toString.call( [1,2,3] );
Object.prototype.toString.call( null );         // "[object Null]"
Object.prototype.toString.call( undefined );    // "[object Undefined]"

For a number, it will be [object Number]
For a boolean, it will be [object Boolean]
For null: [object Null]
For undefined: [object Undefined]
For arrays: [object Array]
…etc (customizable).

As we can see, {}.toString is technically a “more advanced” typeof.

functions

IIFE

Using IIFEs in JavaScript to control variable scope

http://speakingjs.com/es5/ch01.html#basic_prim_vs_obj
http://speakingjs.com/es5/ch16.html#iife

function f() {
    if (condition) {
        var tmp = ...;
        ...
    }
    // tmp still exists here
    // => not what we want
}

If you want to introduce a new scope for the then block, you can define a function and immediately invoke it.
This is a workaround, a simulation of block scoping:

function f() {
    if (condition) {
        (function () {  // open block
            var tmp = ...;
            ...
        }());  // close block
    }
}

IIFE Variation: An IIFE with Parameters
You can use parameters to define variables for the inside of the IIFE:

var x = 23;
(function (twice) {
    console.log(twice);
}(x * 2));
This is similar to:

var x = 23;
(function () {
    var twice = x * 2;
    console.log(twice);
}());

IIFE use case: inadvertent sharing via closures
Closures keep their connections to outer variables, which is sometimes not what you want:

var result = [];
for (var i=0; i < 5; i++) {
    result.push(function () { return i });  // (1)
}
console.log(result[1]()); // 5 (not 1)
console.log(result[3]()); // 5 (not 3)
The value returned in line (1) is always the current value of i, not the value it had when the function was created. After the loop is finished, i has the value 5, which is why all functions in the array return that value. If you want the function in line (1) to receive a snapshot of the current value of i, you can use an IIFE:

for (var i=0; i < 5; i++) {
    (function () {
        var i2 = i; // copy current i
        result.push(function () { return i2 });
    }());
}

How can you correct this function ?


var myAlerts = [];

for (var i = 0; i < 5; i++) {
    myAlerts.push(
        function inner() {
            alert(i);
        }
    );
}

myAlerts[0](); // 5
myAlerts[1](); // 5
myAlerts[2](); // 5
myAlerts[3](); // 5
myAlerts[4](); // 5


Answer :

var myAlerts = [];

for (var i = 0; i < 5; i++) {
    myAlerts.push(
       (function iife(){
         var j = i ;
         return function inner() {
            console.log(j);
          }
       })()

    );
}
myAlerts[1]()

https://content.myemma.com/emmatech/using-iifes-in-javascript-to-control-variable-scope)
https://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li
https://stackoverflow.com/questions/13341698/javascript-plus-sign-in-front-of-function-name
https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript
https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript

function arguments object https://github.com/deenjohn/Javascript-revision/blob/master/General/3-%20function%20arguments%20object%20.md)

http://speakingjs.com/es5/ch01.html#basic_prim_vs_obj

*Too Many or Too Few Arguments*

function f(x, y) {
    console.log(x, y);
    return toArray(arguments);
}
Additional parameters will be ignored (except by arguments):

> f('a', 'b', 'c')
a b
[ 'a', 'b', 'c' ]

*Optional Parameters* The following is a common pattern for assigning default values to parameters:

function pair(x, y) {
    x = x || 0;  // (1)
    y = y || 0;
    return [ x, y ];
}
In line (1), the || operator returns x if it is truthy (not null, undefined, etc.). Otherwise, it returns the second operand:

> pair()
[ 0, 0 ]
> pair(3)
[ 3, 0 ]
> pair(3, 5)
[ 3, 5 ]

Function length vs arguments https://github.com/deenjohn/Javascript-revision/blob/master/General/Function%20length%20vs%20arguments) Enforcing an Arity If you want to enforce an arity (a specific number of parameters), you can check arguments.length:

function pair(x, y) {
    if (arguments.length !== 2) {
        throw new Error('Need exactly 2 arguments');
    }
    ...
}

-Functions Inside a Method


var jane = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    logHiToFriends: function () {
        'use strict';
        this.friends.forEach(function (friend) {
            // `this` is undefined here
            console.log(this.name+' says hi to '+friend);
        });
    }
}
Calling logHiToFriends produces an error: why ?

> jane.logHiToFriends()
TypeError: Cannot read property 'name' of undefined

Ans :
 jane.logHiToFriends() runs like 

 var callback = function (friend) {
            // `this` is undefined here
            console.log(this.name+' says hi to '+friend);
        }

 var jane = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    logHiToFriends: function () {
        'use strict';
        this.friends.forEach(callback);
    }
}

as callback funs like callback() i.e without any context , this points to global object i.e window

Let’s look at two ways of fixing this. First, we could store this in a different variable:


logHiToFriends: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name+' says hi to '+friend);
    });
}
Or, forEach has a second parameter that allows you to provide a value for this:

logHiToFriends: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' says hi to '+friend);
    }, this);
}

Call,Apply,Bind

https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)

https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md)

My Notes https://github.com/deenjohn/Javascript-revision/blob/master/General/1-%20bind%20call%20apply%20-Borrowing%20method.md)

Call,Apply,Bind - Learn even more

http://davidshariff.com/blog/borrowing-methods-in-javascript/

var score = Function.prototype.call.bind(scoreCalculator.getScore); //binding call to scoreCalculator.getScore
score(player1);

is doing this

scoreCalculator.getScore.call(player1)

and that you can borrowing the call method from anywhere, in this case from the Function.prototype, but it doesn’t matter where and binding it to the getScore function.

Use call to Call Methods with a Custom Receiver
https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch03.html#ch03lev1sec3)
Use apply to Call Functions with Different Numbers of Arguments
https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch03.html#ch03lev1sec4)
Use bind to Extract Methods with a Fixed Receiver
https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch03.html#ch03lev1sec9)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
How does Function.prototype.call.bind work?
https://stackoverflow.com/questions/11121586/how-does-function-prototype-call-bind-work/50874883#50874883

Call

use of call :

inArray: function( elem, arr, i ) {
        return arr == null ? -1 : indexOf.call( arr, elem, i );
    }

var elems = {
   length: 0,
   add: function(elem){
       Array.prototype.push.call(this, elem);
   },
   gather: function(id){
       this.add(document.getElementById(id));
   }
 };

 elems.gather("first");

 console.log(elems.length == 1 && elems[0].nodeType,
 "Verify that we have an element in our stash");

 elems.gather("second");

 console.log(elems.length == 2 && elems[1].nodeType,
 "Verify the other insertion");

Apply


 function smallest(array){
     return Math.min.apply(Math, array);
 }
 function largest(array){
     return Math.max.apply(Math, array);
 }

 assert(smallest([0, 1, 2, 3]) == 0,
 "Located the smallest value.");

 assert(largest([0, 1, 2, 3]) == 3,
 "Located the largest value.");

Bind

Manually simulating an apply() for constructors
We can simulate apply() in two steps.

Step 1
Pass the arguments to Date via a method call (they are not in an array—yet):

     new (Date.bind(null, 2011, 11, 24))

     or 
     new (Date.bind.call(Date,null, 2011, 11, 24))

The preceding code uses bind() to create a constructor without parameters and invokes it via new.

Step 2
Use apply() to hand an array to bind(). Because bind() is a method call, we can use apply():

new (Function.prototype.bind.apply(
         Date, [null, 2011, 11, 24]))

The preceding array contains null, followed by the elements of arr. We can use concat() to create it by prepending null to arr:

var arr = [2011, 11, 24];
new (Function.prototype.bind.apply(
         Date, [null].concat(arr)))


'use strict';
var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;
    }
};

We want to extract the method describe from jane, put it into a variable func, and call it. However, that doesn’t work:

> var func = jane.describe;
> func()
TypeError: Cannot read property 'name' of undefined
The solution is to use the method bind() that all functions have. It creates a new function whose this always has the given value:

> var func2 = jane.describe.bind(jane);
> func2()
'Person named Jane'

How to delete a function

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
    this.print = null ;
    delete this.print ;
  }).call(animals[i], i);
}

where instanceof fails

If you have two arbitrary objects, say a and b, and want to find out if the objects are related to each other through a [[Prototype]] chain, instanceof alone can't help.

much cleaner, approach to [[Prototype]] reflection is:


      function Foo() {  }

      Foo.prototype = { 
         c :2

       }; // create a new prototype object

      var a1 = new Foo();

      Foo.prototype.isPrototypeOf( a ); // true

Notice that in this case, we don't really care about (or even need) Foo, we just need an object (in our case, arbitrarily labeled Foo.prototype) to test against another object. The question isPrototypeOf(..) answers is: in the entire [[Prototype]] chain of a, does Foo.prototype ever appear?

https://github.com/getify/You-Dont-Know-JS/blob/6efd08c9db8e9808a9046204c719c99cb4702c18/this%20%26%20object%20prototypes/ch5.md#L487)

let,const arrow function

https://github.com/nzakas/understandinges6/blob/master/manuscript/01-Block-Bindings.md
https://www.w3schools.com/js/js_arrow_function.asp

json.stringify

https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch4.md)

Strict

http://speakingjs.com/es5/ch07.html#strict_mode
https://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it)

This in Object

Chapter 1 :https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md
Chapter 2 : https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md

http://davidshariff.com/blog/javascript-this-keyword/

Effective Javascript : Chapter 4

The scope of this is always determined by its nearest enclosing
function.


function CSVReader(separators) {
    this.separators = separators || [","];
    this.regexp =
    new RegExp(this.separators.map(function(sep) {
      return "\\" + sep[0];
       }).join("|"));
}


CSVReader.prototype.read = function(str) {
    var lines = str.trim().split(/\n/);
    return lines.map(function(line) {
        console.log(this)
       return line.split(this.regexp); // wrong this!
     });
};
var reader = new CSVReader();
reader.read("a,b,c\nd,e,f\n");

[
[
"a,b,c"
],
[
"d,e,f"
]
]


function CSVReader(separators) {
    this.separators = separators || [","];
    this.regexp =
    new RegExp(this.separators.map(function(sep) {
      return "\\" + sep[0];
       }).join("|"));
}


CSVReader.prototype.read = function(str) {
    var lines = str.trim().split(/\n/);
    return lines.map(function(line) {
        console.log(this)
       return line.split(this.regexp); // wrong this!
     },this);
};
var reader = new CSVReader();
reader.read("a,b,c\nd,e,f\n");

[
[
"a",
"b",
"c"
],
[
"d",
"e",
"f"
]
]

Borrowing Methods in JavaScript
http://davidshariff.com/blog/borrowing-methods-in-javascript/#first-article)
What is the Execution Context & Stack in JavaScript?
http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/#first-article)
Identifier Resolution, Execution Contexts and scope chains
http://jibbering.com/faq/notes/closures/#clIRExSc)

Closures

Identifier Resolution and Closures in the JavaScript Scope Chain http://davidshariff.com/blog/javascript-scope-chain-and-closures/)

Note :
scope chain only works for fnctions inside functions and not functions inside object

      var StartStopCounter = {
          counter : 0,
          start : function(){
                StartStopCounter.stopCounter = setInterval(function(){
                    console.log(StartStopCounter.counter);
                    //que : why only counter won't work ?
                    StartStopCounter.counter=StartStopCounter.counter + 1 ;
                },1000);

          },
          stop : function(){
              clearInterval(StartStopCounter.stopCounter);

          }
      }

You Don't Know JS: Scope & Closures

https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch1.md#scope
https://github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures)

http://javascript.info/closure

https://www.amazon.com/Functional-JavaScript-Introducing-Programming-Underscore-js-ebook/dp/B00D624AQO

Sometimes encapsulation is used to restrict the visibility of
certain elements, and this act is known as data hiding. JavaScript’s object system does
not provide a way to hide data directly, so data is hidden using something called closures.

By using functional techniques involving closures, you can achieve data hiding that is as effective
as the same capability offered by most object-oriented languages

https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript

Practical use of closure examples

ex1 : Private variables


      function Ninja() {                                            //#1

        var feints = 0;                                             //#2

        this.getFeints = function(){                                //#3
          return feints;                                            //#3
        };                                                          //#3

        this.feint = function(){                                    //#4
          feints++;                                                 //#4
        };                                                          //#4
      }

      var ninja = new Ninja();                                      //#5

      ninja.feint();                                                //#6

      assert(ninja.feints === undefined,                            //#7
          "And the private data is inaccessible to us." );          //#7

      assert(ninja.getFeints() == 1,                                //#8
             "We're able to access the internal feint count." );    //#8

ex2 :


function animateIt(elementId) {

    var elem = document.getElementById(elementId);              //#2
    var tick = 0;                                               //#3

    var timer = setInterval(function(){                         //#4
      if (tick < 100) {
        elem.style.left = elem.style.top = tick + "px";
        tick++;
      }
      else {
        clearInterval(timer);
        assert(tick == 100,                                      //#5
               "Tick accessed via a closure.");
        assert(elem,
               "Element also accessed via a closure.");
        assert(timer,
               "Timer reference also obtained via a closure." );
      }
    }, 10);

  }

  animateIt('box')

ex 3 :

const createStore = (reducer) => {
let state;
let listeners = [];

const getState = () => state;

const dispatch = (action) => {
state = reducer(state, action)
listeners.forEach(listener => listener());
};

const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
};

dispatch({}); // dummy dispatch

return { getState, dispatch, subscribe };

};

Closure use Example : Overloading functions


 var ninjas = {
    values: ["Dean Edwards", "Sam Stephenson", "Alex Russell"]
 };

function addMethod(object, name, fn) {
 var old = object[name];
 object[name] = function(){
   if (fn.length == arguments.length)
      return fn.apply(this, arguments)
   else if (typeof old == 'function')
      return old.apply(this, arguments);
  };
}

 addMethod(ninjas, "find", function(){
          return this.values;
 });

 addMethod(ninjas, "find", function(name){
      var ret = [];
      for (var i = 0; i < this.values.length; i++)
      if (this.values[i].indexOf(name) == 0)
      ret.push(this.values[i]);
      return ret;
 });

 addMethod(ninjas, "find", function(first, last){
      var ret = [];
      for (var i = 0; i < this.values.length; i++)
      if (this.values[i] == (first + " " + last))
      ret.push(this.values[i]);
      return ret;
 });

 assert(ninjas.find().length == 3,
 "Found all ninjas");
 assert(ninjas.find("Sam").length == 1,
 "Found ninja by first name");
 assert(ninjas.find("Dean", "Edwards").length == 1,
 "Found ninja by first and last name");
 assert(ninjas.find("Alex", "Russell", "Jr") == 
 ,
 "Found nothing");

example 2 :
CREATING A SELF-CONTAINED SCOPE

Consider the following snippet:


(function(){
 var numClicks = 0;
 document.addEventListener("click", function(){
 alert( ++numClicks );
 }, false);
})();

/*
Because the immediate function is executed immediately (hence its name), the click
handler is also bound right away. The important thing to note is that a closure is created
for the handler that includes numClicks, allowing the numClicks variable to persist
along with the handler, and be referenceable by the handler but nowhere else.
 This is one of the most common ways in which immediate functions are used: as
simple, self-contained wrappers for functionality. The variables needed for the unit of
functionality are trapped in the closure, but they aren’t visible anywhere else.
*/

object

http://speakingjs.com/es5/ch17.html
https://stackoverflow.com/questions/tagged/javascript+object

MDN : Object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
What is the most efficient way to deep clone an object in JavaScript?
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript?rq=1)

Copying an Object
To create an identical copy of an object, you need to get two things right:

The copy must have the same prototype (see Layer 2: The Prototype Relationship Between Objects) as the original.
The copy must have the same properties, with the same attributes as the original
The following function performs such a copy:

function copyObject(orig) {
// 1. copy has same prototype as orig
var copy = Object.create(Object.getPrototypeOf(orig));

// 2. copy has all of orig’s properties
copyOwnPropertiesFrom(copy, orig);

return copy;

}
The properties are copied from orig to copy via this function:

function copyOwnPropertiesFrom(target, source) {
Object.getOwnPropertyNames(source) // (1)
.forEach(function(propKey) { // (2)
var desc = Object.getOwnPropertyDescriptor(source, propKey); // (3)
Object.defineProperty(target, propKey, desc); // (4)
});
return target;
};
These are the steps involved:

Get an array with the keys of all own properties of source.
Iterate over those keys.
Retrieve a property descriptor.
Use that property descriptor to create an own property in target

Length of a JavaScript object
https://stackoverflow.com/questions/5223/length-of-a-javascript-object?rq=1)
How can I merge properties of two JavaScript objects dynamically?
https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically?rq=1)
Detecting an undefined object property
https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property?rq=1)
How do I remove a property from a JavaScript object?
https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object?rq=1)
How do I remove a property from a JavaScript object?
https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object)
Check if object is array?
https://stackoverflow.com/questions/4775722/check-if-object-is-array)
How do I check if an object has a property in JavaScript?
https://stackoverflow.com/questions/135448/how-do-i-check-if-an-object-has-a-property-in-javascript)
How do I check if an object has a key in JavaScript?
https://stackoverflow.com/questions/455338/how-do-i-check-if-an-object-has-a-key-in-javascript?noredirect=1&lq=1)

https://stackoverflow.com/questions/3390396/how-to-check-for-undefined-in-javascript)

Checking if a key exists in a JavaScript object?
https://stackoverflow.com/questions/1098040/checking-if-a-key-exists-in-a-javascript-object)
How do I remove a property from a JavaScript object?
https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object?noredirect=1&lq=1)

If you delete the property, its key is gone, too:

delete obj.foo
true
Object.keys(obj)
[ 'bar' ]
delete affects only the direct (“own,” noninherited) properties of an object. Its prototypes are not touched

If you merely set a property to undefined, the property still exists and the object still contains its key

var obj = { foo: 'a', bar: 'b' };

obj.foo = undefined;
Object.keys(obj)
[ 'foo', 'bar' ]

Parse JSON in JavaScript?
https://stackoverflow.com/questions/4935632/parse-json-in-javascript)
Detecting an undefined object property
https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property?rq=1)
Object comparison in JavaScript
https://stackoverflow.com/questions/1068834/object-comparison-in-javascript)
Deleting Objects in JavaScript
https://stackoverflow.com/questions/742623/deleting-objects-in-javascript)
How to get the size of a JavaScript object?
https://stackoverflow.com/questions/1248302/how-to-get-the-size-of-a-javascript-object)
Object property shadowing

https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)


      'use strict';

      const anotherObject = {};

      Object.defineProperty(anotherObject, 'a', {
        value: 2,
        writable: false
      });

      var myObject = Object.create( anotherObject );

      myObject.a = 3;

https://medium.freecodecamp.org/lets-explore-objects-in-javascript-4a4ad76af798

Object to primitive conversion
http://javascript.info/object-toprimitive
Prototypes


function SuperType(name){
 this.name = name;
 this.colors = ["red","green"];
}

SuperType.prototype.sayName = function(){
 console.log(this.name);
};

function SubType(name, age){

 //inherit properties
 SuperType.call(this, name);

 this.age = age;
}

//inherit methods
SubType.prototype = new SuperType();  // problem as this creates color property on prototype 

SubType.prototype.sayAge = function(){
 console.log(this.age);
};

var instance1 = new SubType("Nicholas", 29);


problems with this :

console.log(instance1) > color property on prototype 

SubType {name: "Nicholas", colors: Array(2), age: 29}
    age: 29
    colors: (2) ["red", "green"]
    name: "Nicholas"
    __proto__: SuperType
        colors: (2) ["red", "green"]
        name: undefined
        sayAge: ƒ ()
        __proto__: Object

Use hasOwnProperty to Protect Against Prototype Pollution

var dict = {};
"alice" in dict; // false
"bob" in dict; // false
"chris" in dict; // false
"toString" in dict; // true
"valueOf" in dict; // true
Luckily, Object.prototype provides the hasOwnProperty method, which
is just the tool we need to avoid prototype pollution when testing for
dictionary entries:
dict.hasOwnProperty("alice"); // false
dict.hasOwnProperty("toString"); // false
dict.hasOwnProperty("valueOf"); // false

Getting all properties

https://javascript.info/getting-all-properties
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

The Object.values() method returns an array of a given object's own enumerable property values,
in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates
properties in the prototype chain as well).

Object.keys(obj) / Object.values(obj) / Object.entries(obj)
These methods only list enumerable properties, and those that have strings as keys.
1)Object.keys(Object.prototype)

[]
The Object.keys() method returns an array of a given object's own property names,
in the same order as we get with a normal loop.

2)Object.getOwnPropertyNames(Object.prototype)
– returns an array of all own string property names
If we want non-enumerable properties:

(12) ["constructor", "__defineGetter__", "__defineSetter__", "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", "isPrototypeOf", "propertyIsEnumerable", "toString", "valueOf", "__proto__", "toLocaleString"]

3)Reflect.ownKeys(Object.prototype)
(12) ["constructor", "defineGetter", "defineSetter", "hasOwnProperty", "lookupGetter", "lookupSetter", "isPrototypeOf", "propertyIsEnumerable", "toString", "valueOf", "proto", "toLocaleString"]

https://stackoverflow.com/questions/15283720/why-are-for-in-faster-than-for-loops-when-looping-through-an-array
A for loop will search for properties on the [[Prototype]] chain too if they aren't found on the array. E.g. a for loop over [0,,2] will search for 1 all the way to Object.prototype[[Prototype]]

don't use for..in to loop arrays. Not. Ever

Manually simulating an apply() for constructors

1) Pass the arguments to Date via a method call (they are not in an array—yet):

new (Date.bind(null, 2011, 11, 24))

The preceding code uses bind() to create a constructor without parameters and invokes it via new.

2)
Use apply() to hand an array to bind(). Because bind() is a method call, we can use apply():

new (Function.prototype.bind.apply(
Date, [null, 2011, 11, 24]))
The preceding array contains null, followed by the elements of arr. We can use concat() to create it by prepending null to arr:

var arr = [2011, 11, 24];
new (Function.prototype.bind.apply(
Date, [null].concat(arr)))

Effective Javascript - chapter 4

Problem with using default constructor

http://raganwald.com/2014/07/09/javascript-constructor-problem.html

https://javascript.info/function-prototype


function Rabbit() {}

/* default prototype
Rabbit.prototype = { constructor: Rabbit };
*/


function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true

…JavaScript itself does not ensure the right "constructor" value.

Yes, it exists in the default "prototype" for functions, but that’s all. What happens with it later – is totally on us.

In particular, if we replace the default prototype as a whole, then there will be no "constructor" in it.

For instance:

function Rabbit() {}
Rabbit.prototype = {
  jumps: true
};

let rabbit = new Rabbit();
alert(rabbit.constructor === Rabbit); // false

So, to keep the right "constructor" we can choose to add/remove properties to the default "prototype" instead of overwriting it as a whole:

function Rabbit() {}

// Not overwrite Rabbit.prototype totally
// just add to it

Rabbit.prototype.jumps = true

// the default Rabbit.prototype.constructor is preserved
Or, alternatively, recreate the constructor property manually:

Rabbit.prototype = {
  jumps: true,
  constructor: Rabbit
};

// now constructor is also correct, because we added it

    function Person(){

    }

    var friend = new Person();

    Person.prototype = {
     name : "Nicholas",
     age : 29,
     job : "Software Engineer",
     sayName : function () {
        console.log(this.name);
       }
    };


Constructor is Object Constructor
(new Person()).constructor
ƒ Object() { [native code] }

Arrays

https://javascript.info/array-methods
http://speakingjs.com/es5/ch18.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
https://stackoverflow.com/questions/tagged/arrays+javascript

Splice
https://javascript.info/array-methods#splice
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice


array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) //deletecount is no of element to delete

1)
let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // from index 1 remove 1 element

alert( arr ); // ["I", "JavaScript"]

2)
let arr = ["I", "study", "JavaScript", "right", "now"];

// remove 3 first elements and replace them with another
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

3)
let arr = ["I", "study", "JavaScript"];

// from index 2
// delete 0
// then insert "complex" and "language"
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

Remove duplicates from an array of objects in JavaScript
https://stackoverflow.com/questions/tagged/javascript+arrays)
arraylike vs array

https://github.com/deenjohn/Javascript-revision/blob/master/General/arraylike%20vs%20array.md)

what exactly makes an object “array-like”? The basic contract of
an array object amounts to two simple rules.
■ It has an integer length property in the range 0...232 – 1.
■ The length property is greater than the largest index of the object.
An index is an integer in the range 0...232 – 2 whose string representation is the key of a property of the object

This is all the behavior an object needs to implement to be compatible
with any of the methods of Array.prototype. Even a simple object literal can be used to create an array-like object:


var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
var result = Array.prototype.map.call(arrayLike, function(s) {
return s.toUpperCase();
}); // ["A", "B", "C"]


function toArray(arrayLikeObject) {
    return Array.prototype.slice.call(arrayLikeObject);
}

Strings act like immutable arrays, too, since they can be indexed
and their length can be accessed as a length property. So the
Array.prototype methods that do not modify their array work with
strings:

var result = Array.prototype.map.call("abc", function(s) {
return s.toUpperCase();
}); // ["A", "B", "C"]

There is just one Array method that is not fully generic: the array concatenation method concat. This method can be called on any arraylike receiver, but it tests the [[Class]] of its arguments. If an argument
is a true array, its contents are concatenated to the result; otherwise,
the argument is added as a single element. This means, for example,
that we can’t simply concatenate an array with the contents of an
arguments object:


function namesColumn() {
  return ["Names"].concat(arguments);
}
namesColumn("Alice", "Bob", "Chris");
// ["Names", { 0: "Alice", 1: "Bob", 2: "Chris" }]

In order to convince concat to treat an array-like object as a true
array, we have to convert it ourselves. A popular and concise idiom
for doing this conversion is to call the slice method on the array-like
object:


function namesColumn() {
   return ["Names"].concat([].slice.call(arguments));
}
namesColumn("Alice", "Bob", "Chris");
// ["Names", "Alice", "Bob", "Chris"]

https://stackoverflow.com/questions/2218999/remove-duplicates-from-an-array-of-objects-in-javascript

How do I remove a particular element from an array in JavaScript?
https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript)
How do I check if an array includes an object in JavaScript?
https://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript)
Check if object is array?
https://stackoverflow.com/questions/4775722/check-if-object-is-array)
Why is using “for…in” with array iteration a bad idea?
https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea)
How can I concatenate two arrays in Java?
https://stackoverflow.com/questions/80476/how-can-i-concatenate-two-arrays-in-java)
Remove duplicate values from JS array
https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array)
Merge/flatten an array of arrays in JavaScript?
https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript)
**What is the most efficient method to groupby on a JavaScript array of objects?
https://stackoverflow.com/questions/14446511/what-is-the-most-efficient-method-to-groupby-on-a-javascript-array-of-objects)
**Remove duplicates from an array of objects in JavaScript
https://stackoverflow.com/questions/2218999/remove-duplicates-from-an-array-of-objects-in-javascript)
**Remove duplicate values from JS array
https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates?noredirect=1&lq=1

DOM

Uncovering the Native DOM API
https://ponyfoo.com/articles/uncovering-the-native-dom-api)
DOM Tips and Techniques: Parent, Child, and Siblings
https://www.sitepoint.com/dom-tips-techniques-parent-child-siblings/)

Que :http://javascript.info/task/select-diagonal-cells
Ans :


    var tr = Array.from(document.querySelectorAll('tr'));
    for(var i =0 ;i<tr.length ;i++){
       for(var j =0 ;j<tr.length ;j++){
         if(i ==j){
           console.log("i ",i ,j);
           console.log((Array.from(tr[i].querySelectorAll('td'))[i]).style.background ='red');
           console.log('.......')
         }      
       }
    }

    // your code

Live collections

All methods "getElementsBy*" return a live collection. Such collections always reflect the current state of the document
and “auto-update” when it changes

http://javascript.info/searching-elements-dom#live-collections

The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)
https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/)
An Introduction To DOM Events — Smashing Magazine
https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/)
https://eloquentjavascript.net/15_event.html
CSS Layout - The display Property
https://www.w3schools.com/css/css_display_visibility.asp
https://javascript.info/styles-and-classes
JavaScript Events - w3school
https://www.w3schools.com/js/js_events.asp)

good for quick look at all events in javascript

https://www.w3schools.com/jsref/obj_event.asp

https://www.w3.org/TR/uievents/#widl-MouseEvent-relatedTarget

The Event() constructor
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event)
The Event interface
https://developer.mozilla.org/en-US/docs/Web/API/Event)

https://www.w3schools.com/js/js_events.asp)

Introduction to events https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)

https://www.w3schools.com/jsref/event_cancelable.asp

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

What is the difference between targetTouches, touches, and changedTouches in TouchEvent? https://segmentfault.com/q/1010000002870710

https://github.com/krasimir/EventBus
https://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad

Differentiate click vs mousedown/mouseup
https://stackoverflow.com/questions/12572644/differentiate-click-vs-mousedown-mouseup?noredirect=1&lq=1
HTML DOM Events
https://www.w3schools.com/jsref/dom_obj_event.asp
https://www.w3schools.com/jsref/obj_events.asp

http://javascriptkit.com/javatutors/touchevents.shtml

https://stackoverflow.com/questions/31865416/what-is-the-difference-between-event-target-event-toelement-and-event-srcelemen

Create your own long press event in JS https://stackoverflow.com/questions/2625210/long-press-in-javascript https://github.com/john-doherty/long-press-event/blob/master/src/long-press-event.js

var pressTimer;
document.getElementById("demo").addEventListener("mousedown", mouseDown);
document.getElementById("demo").addEventListener("mouseup", mouseUp);

function mouseDown() {
pressTimer = window.setTimeout(function() {
document.getElementById("demo").innerHTML = "The mouse button is held down.";
},1000);

}

function mouseUp() {
clearTimeout(pressTimer);
}

What is the difference between visibility:hidden and display:none? https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden https://developer.mozilla.org/en-US/docs/Web/API/Element/closest https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone

https://javascript.info/task/sliding-tree


var el = document.getElementById('tree');
console.log(el);
el.addEventListener("click", handler);

function handler(e){
  if(e.target.children.length == 1){
    e.target.children[0].hidden = !e.target.children[0].hidden;
  }
}

mouseleave https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

mouseleave vs mouseover
https://codepen.io/deen_john/pen/jONJwJz?editors=0010
https://www.youtube.com/watch?v=pzT4hAY82q4

preventDefault https://javascript.info/default-browser-action https://bugzilla.mozilla.org/show_bug.cgi?id=653009 https://stackoverflow.com/questions/30426523/why-does-preventdefault-on-checkbox-click-event-returns-true-for-the-checked-att https://technet.microsoft.com/en-us/windows/ff974940(v=vs.60)

Safari 4, Android 2.2 WebKit, and Opera Mobile 11 all have the following behavior:

1) preventDefault on the touchstart event prevents scrolling, double-tap zooming, and mouseup/mousedown/click events.

2) preventDefault on the touchmove event prevents scrolling.

3) preventDefault on the touchend event does NOT prevent scrolling or mouse events.

4) None of these will prevent pinch zooming. Safari implements a separate "gesturechange" event that is fired for pinch gestures and can be used to prevent zooming. This event is not implemented by Android or Opera.

Example :


<!DOCTYPE html>
<html>
<body>

<h1>Show checkboxes:</h1>

<form action="/action_page.php">
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
  <input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br><br>
  <input type="submit" value="Submit">
</form>

<script>
var fe = document.querySelector('form');

fe.addEventListener("mousedown", function(e){
  console.log(e);
  e.preventDefault()
});

fe.addEventListener("mouseup", function(e){
e.preventDefault()
  console.log(e)
});

fe.addEventListener("click", function(e){
e.preventDefault()
  console.log(e)
});


</script>
</body>
</html>


<body>

<p>This example uses the addEventListener() method to attach a "mousedown" and "mouseup" event to a p element.</p>

<p id="demo">Click me.</p>

<script>
document.getElementById("demo").addEventListener("mousedown", mouseDown);
document.getElementById("demo").addEventListener("mouseup", mouseUp);

function mouseDown(e) {
e.preventDefault();
//return false ;
 // document.getElementById("demo").innerHTML = "The mouse button is held down.";
}

function mouseUp(e) {
e.preventDefault();
//return false
  //document.getElementById("demo").innerHTML = "You released the mouse button.";
}
</script>

</body>

In above example , events order is mousedown > mouseup > click
preventdefault only works on click

passive handler
https://javascript.info/default-browser-action#the-passive-handler-option

Stopping Event Propagation https://css-tricks.com/dangers-stopping-event-propagation/ http://jsfiddle.net/tedp/aL7Xe/1/

Element.closest()


$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

The above handler listens for clicks on the document and checks to see if the event target
is #menucontainer or has #menucontainer as a parent. If it doesn't, you know the click originated
from outside of #menucontainer, and thus you can hide the menus if they're visible.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

cancelbubble
if the bubbles attribute is set to false, the bubble phase will be skipped


<body>

<p>Click the button to find out if the onclick event is a bubbling event.</p>

<button id ='button'>Try it</button>

<p id="demo"></p>

<script>

document.addEventListener("click", myFunction1);
button.addEventListener("click", myFunction1);
button.addEventListener("click", myFunction2);

function myFunction1() {
  console.log(event.cancelBubble);
  console.log('event ',  event.currentTarget)
  event.cancelBubble=true;
  document.getElementById("demo").innerHTML = event.cancelBubble;
}

function myFunction2(event) { 

  console.log('event ',  event.currentTarget)
  console.log(event.cancelBubble);

  document.getElementById("demo").innerHTML = event.cancelBubble;
}
</script>

</body>

Disabling the context menu on long taps on Android
https://stackoverflow.com/questions/3413683/disabling-the-context-menu-on-long-taps-on-android?noredirect=1&lq=1
clientX vs PageX vs ScreenX
https://heeestorys.tistory.com/778
https://stackoverflow.com/questions/9262741/what-is-the-difference-between-pagex-y-clientx-y-screenx-y-in-javascript/17705548
https://blog.csdn.net/lzding/article/details/45437707
https://heeestorys.tistory.com/778
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
https://o7planning.org/en/12293/javascript-mouseevent-tutorial
order of events
events orders :

https://www.html5rocks.com/en/mobile/touchandmouse/
https://www.w3.org/TR/uievents/#events-mouseevent-event-order
https://www.w3.org/TR/uievents

Focus event :
Before Focus event is fired , mousedown event is fired.let
Mousedown > Focus

MOUSEOUT VS MOUSELEAVE
https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover_addeventlistener
https://www.w3.org/TR/uievents
creating your own visibilitychangeEvent
https://www.html5rocks.com/en/tutorials/pagevisibility/intro/
Pointer events IE
https://msdn.microsoft.com/en-us/windows/dn304886(v=vs.71)
What is a viewport ?
https://www.kirupa.com/html5/viewport_device_document_size.htm
DOM in depth -1 -MyNotes
https://github.com/deenjohn/Javascript-revision/tree/master/DOM%20in%20depth%20-1)
innerText vs innerHTML vs textContent
https://www.w3schools.com/jsref/prop_node_textcontent.asp

textContent gets the content of all elements, including and elements, innerText does not innerText is aware of style and will not return the text of hidden elements, whereas textContent will. <a href="https://know-it-all.io/">https://know-it-all.io/</a>) <a href="https://codepen.io/collection/Dapaqx/">https://codepen.io/collection/Dapaqx/</a>) <a href="http://domenlightenment.com/">http://domenlightenment.com/</a>) <a href="https://stackoverflow.com/questions/26496176/when-logging-an-event-object-currenttarget-is-null-but-when-logging-event-curr">https://stackoverflow.com/questions/26496176/when-logging-an-event-object-currenttarget-is-null-but-when-logging-event-curr</a> <a href="https://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget?noredirect=1&lq=1">https://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget?noredirect=1&lq=1</a> <a href="https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y">https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y</a> <h2> <a name="es6-functional" href="#es6-functional" class="anchor"> </a> ES6 ,functional </h2> <ul> <li>Decorators <a href="https://www.youtube.com/watch?v=_8wOde1fmEM">https://www.youtube.com/watch?v=_8wOde1fmEM</a></li> <li>Annotated Underscore.js source code <a href="http://underscorejs.org/docs/underscore.html">http://underscorejs.org/docs/underscore.html</a>) <a href="https://github.com/deenjohn/Javascript-revision/blob/master/General/underscore%20notes">https://github.com/deenjohn/Javascript-revision/blob/master/General/underscore%20notes</a>)</li> <li>*MDN : Array API * <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array</a>)</li> </ul> <a href="https://github.com/deenjohn/functional-javascript">https://github.com/deenjohn/functional-javascript</a> <ul> <li>Functional Programming <a href="https://codepen.io/collection/nWRKrb/">https://codepen.io/collection/nWRKrb/</a>)</li> <li>JavaScript hacks for ES6 hipsters <a href="https://hackernoon.com/javascript-hacks-for-es6-hipsters-67d633ce8ace?source=placement_card_footer_grid---------2-60">https://hackernoon.com/javascript-hacks-for-es6-hipsters-67d633ce8ace?source=placement_card_footer_grid---------2-60</a>)</li> <li>Creating an ES6ish Compose in Javascript</li> </ul> Creating an ES6ish Compose in Javascript – Drew Tipson – Medium Let’s Make a Monad – Drew Tipson – Medium *Currying versus partial application (with JavaScript code) <a href="http://2ality.com/2011/09/currying-vs-part-eval.html">http://2ality.com/2011/09/currying-vs-part-eval.html</a> <a href="https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8">https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8</a> <a href="https://javascript.info/currying-partials">https://javascript.info/currying-partials</a> example from secrets of Javascript book -ed1 , chapter 5 <div class="highlight"><pre class="highlight javascript"><code> Function.prototype.curry = function() { var fn = this, args = Array.prototype.slice.call(arguments,0,1); //only the first argument return function() { return fn.apply(this, args.concat( Array.prototype.slice.call(arguments))); }; }; function test(x,y){ return x+y } var add10 = test.curry(10,2); //only 10 is bind , 2 is ignored , like test.curry(10) add10(3) </code></pre></div> Partial function <div class="highlight"><pre class="highlight javascript"><code>Function.prototype.partial = function() { var fn = this, args = Array.prototype.slice.call(arguments); return function() { var arg = 0; for (var i = 0; i < args.length && arg < arguments.length; i++) { if (args[i] === undefined) { args[i] = arguments[arg++]; } } return fn.apply(this, args); }; }; var delay = setTimeout.partial(undefined, 10); delay(function(){ assert(true, "A call to this function will be delayed 10 ms."); }); var bindClick = document.body.addEventListener .partial("click", undefined, false); bindClick(function(){ assert(true, "Click event bound via curried function."); }); </code></pre></div> <ul> <li>The event loop and the rise of Async programming + 5 ways to better coding with async/await</li> </ul> <a href="https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5">https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5</a>) <a href="https://youtu.be/u1kqx6AenYw?list=PL37ZVnwpeshG2YXJkun_lyNTtM-Qb3MKa">https://youtu.be/u1kqx6AenYw?list=PL37ZVnwpeshG2YXJkun_lyNTtM-Qb3MKa</a> <a href="https://blog.risingstack.com/writing-a-javascript-framework-execution-timing-beyond-settimeout/">https://blog.risingstack.com/writing-a-javascript-framework-execution-timing-beyond-settimeout/</a> <a href="https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/">https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/</a> <a href="http://sculove.github.io/blog/2018/01/18/javascriptflow/">http://sculove.github.io/blog/2018/01/18/javascriptflow/</a> <a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/</a> <a href="http://bazyd.com/event-queue-in-browser/">http://bazyd.com/event-queue-in-browser/</a> <a href="https://medium.com/<a%20class='mentioned-user'%20href='https://dev.to/gaurav'><a%20class='mentioned-user'%20href='https://dev.to/gaurav'>@gaurav</a>%0A</a>%0A.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec">https://medium.com/</a><a class="mentioned-user" href="https://dev.to/gaurav"></a><a class="mentioned-user" href="https://dev.to/gaurav">@gaurav</a> .pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec <a href="https://gitissue.com/issues/5b764a6f725e4a4219fbf874">https://gitissue.com/issues/5b764a6f725e4a4219fbf874</a> <a href="https://itw01.com/NR6AE4C.html">https://itw01.com/NR6AE4C.html</a> <h3> <a name="asyncawait-promises-observables" href="#asyncawait-promises-observables" class="anchor"> </a> Async-Await /Promises /OBSERVABLES </h3> <a href="https://github.com/jawache/async-javascript-workshop">https://github.com/jawache/async-javascript-workshop</a> <a href="https://www.youtube.com/watch?v=jgWnccjXR4I&t=959s">https://www.youtube.com/watch?v=jgWnccjXR4I&t=959s</a> Callbacks vs Promises vs RxJs Observables vs async/ await <ul> <li>Promises and Asynchronous Programming <a href="https://github.com/nzakas/understandinges6/blob/master/manuscript/11-Promises.md">https://github.com/nzakas/understandinges6/blob/master/manuscript/11-Promises.md</a>)</li> <li>Understand promises before you start using async/await <a href="https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8">https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8</a>)</li> <li>Master the JavaScript Interview: What is a Promise? <a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261">https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261</a>)</li> <li>Even with async/await, raw promises are still key to writing optimal concurrent javascript <a href="https://medium.com/@bluepnume/even-with-async-await-you-probably-still-need-promises-9b259854c161">https://medium.com/@bluepnume/even-with-async-await-you-probably-still-need-promises-9b259854c161</a>)</li> </ul> <h2> <a name="event-loop" href="#event-loop" class="anchor"> </a> Event Loop </h2> <h3> <a name="level-1" href="#level-1" class="anchor"> </a> Level 1 </h3> <ul> <li> Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 <a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">https://www.youtube.com/watch?v=8aGhZQkoFbQ</a>) <a href="https://blog.risingstack.com/writing-a-javascript-framework-execution-timing-beyond-settimeout/">https://blog.risingstack.com/writing-a-javascript-framework-execution-timing-beyond-settimeout/</a> </li> </ul> <h3> <a name="-level-2" href="#-level-2" class="anchor"> </a> ### Level 2 </h3> <ul> <li>Understanding the Node.js Event Loop <a href="https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/">https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/</a>)</li> <li>Jake Archibald: In The Loop <a href="https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=8s">https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=8s</a>)</li> </ul> <h3> <a name="level-3-master-level" href="#level-3-master-level" class="anchor"> </a> Level 3 : master level </h3> <ul> <li> lesson : The Internals of Node <a href="https://www.udemy.com/advanced-node-for-developers/">https://www.udemy.com/advanced-node-for-developers/</a>)</li> </ul> <h2> <a name="concurrency-" href="#concurrency-" class="anchor"> </a> Concurrency : </h2> <a href="https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch07.html">https://www.safaribooksonline.com/library/view/effective-javascript-68/9780132902281/ch07.html</a>) <h2> <a name="v8" href="#v8" class="anchor"> </a> V8 </h2> <ul> <li>The Journey of JavaScript: from Downloading Scripts to Execution - Part II <a href="https://www.telerik.com/blogs/journey-of-javascript-downloading-scripts-to-execution-part-i">https://www.telerik.com/blogs/journey-of-javascript-downloading-scripts-to-execution-part-i</a> <a href="https://www.telerik.com/blogs/journey-of-javascript-downloading-scripts-to-execution-part-ii">https://www.telerik.com/blogs/journey-of-javascript-downloading-scripts-to-execution-part-ii</a></li> <li>How JavaScript works: an overview of the engine, the runtime, and the call stack</li> </ul> <a href="https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf">https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf</a>) <ul> <li>How JavaScript works: tracking changes in the DOM using MutationObser</li> </ul> <a href="https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401">https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401</a>) <ul> <li>How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them</li> </ul> <a href="https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a">https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a</a>) <ul> <li>An overview of the engine, the runtime, and the call stack</li> </ul> <a href="https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf?source=collection_home---2------1----------------">https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf?source=collection_home---2------1----------------</a>) <ul> <li>How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path</li> </ul> <a href="https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7">https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7</a>) <ul> <li>How JavaScript works: memory management + how to handle 4 common memory leaks <a href="https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec?source=user_profile---------8----------------">https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec?source=user_profile---------8----------------</a>)</li> <li>How JavaScript works: the rendering engine and tips to optimize its performance</li> </ul> <a href="https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda">https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda</a>) <ul> <li>How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code</li> </ul> <a href="https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e">https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e</a>) <ul> <li>How Modern Web Browsers Accelerate Performance: The Networking Layer</li> </ul> <a href="https://blog.sessionstack.com/how-modern-web-browsers-accelerate-performance-the-networking-layer-f6efaf7bfcf4">https://blog.sessionstack.com/how-modern-web-browsers-accelerate-performance-the-networking-layer-f6efaf7bfcf4</a>) <h2> <a name="design-patterns" href="#design-patterns" class="anchor"> </a> Design Patterns </h2> <a href="https://github.com/deenjohn/Design-Patterns">https://github.com/deenjohn/Design-Patterns</a> <ul> <li>Dependency injection in JavaScript <a href="http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript">http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript</a></li> <li>The MVC Design Pattern in Vanilla JavaScript <a href="https://www.sitepoint.com/mvc-design-pattern-javascript/">https://www.sitepoint.com/mvc-design-pattern-javascript/</a></li> <li>Observer pattern <a href="https://github.com/deenjohn/Design-Patterns/tree/master/Observer%20Pattern">https://github.com/deenjohn/Design-Patterns/tree/master/Observer%20Pattern</a></li> <li>The Comprehensive Guide to JavaScript Design Patterns <a href="https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns">https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns</a></li> </ul> <h1> <a name="books-" href="#books-" class="anchor"> </a> Books : </h1> (only mentioning the books i read & found helpful) <h3> <a name="for-core-javascript" href="#for-core-javascript" class="anchor"> </a> For Core Javascript </h3> <ul> <li>Professional JavaScript for Web Developers</li> </ul> The only book that covers events & HTML Form inner details in depth. An awesome coverage on Objects,prototypes,all the inheritance patterns <ul> <li>You Don't Know JS series: <a href="https://github.com/getify/You-Dont-Know-JS">https://github.com/getify/You-Dont-Know-JS</a>)</li> <li>You Don't Know JS: Types & Grammar</li> <li>You Don't Know JS:Scope & Closures</li> <li>You Don't Know JS: this & Object Prototypes</li> </ul> All the above 3 books by Kyle Simpson are must read , word by word <ul> <li>DOM Enlightenment</li> </ul> Best book ever written on DOM <ul> <li>Effective javascript Polish your skills , learn more hidden gems on JS</li> <li>Secrets of the JavaScript Ninja</li> <li>JavaScript Allongé: A strong cup of functions, objects, combinators, and decorators</li> </ul> This book will change the way you think in Javascript <ul> <li>Learning JavaScript Design Patterns Addy Osmani</li> <li>High Performance JavaScript - Nicholas C. Zakas</li> </ul> <h2> <a name="es6-reading" href="#es6-reading" class="anchor"> </a> ES6 Reading </h2> <ul> <li>exploringjs.com</li> </ul> <a href="http://exploringjs.com/es6.html">http://exploringjs.com/es6.html</a>) best book <ul> <li>ES6 Katas <a href="http://es6katas.org/">http://es6katas.org/</a>)</li> <li>ES6 Modules in Depth <a href="https://ponyfoo.com/articles/es6-modules-in-depth">https://ponyfoo.com/articles/es6-modules-in-depth</a>)</li> </ul> <h2> <a name="functional-js-reading" href="#functional-js-reading" class="anchor"> </a> Functional JS Reading </h2> <h3> <a name="books-" href="#books-" class="anchor"> </a> books : </h3> <ul> <li>Introducing functional programming with Underscore.js</li> <li>Functional-Light JavaScript: Pragmatic, Balanced FP in JavaScript</li> <li><a href="http://reactivex.io/learnrx/">http://reactivex.io/learnrx/</a></li> <li>Functional Programming in JavaScript Luis Atencio</li> </ul> <a href="https://github.com/mjavascript/mastering-modular-javascript">https://github.com/mjavascript/mastering-modular-javascript</a>) <a href="https://github.com/mjavascript/practical-modern-javascript">https://github.com/mjavascript/practical-modern-javascript</a>) <a href="http://exploringjs.com/impatient-js/toc.html">http://exploringjs.com/impatient-js/toc.html</a> <a href="https://javascript.info/">https://javascript.info/</a> <h2> <a name="regex" href="#regex" class="anchor"> </a> Regex </h2> <ul> <li> Breaking the Ice With Regular Expressions <a href="https://www.codeschool.com/courses/breaking-the-ice-with-regular-expressions">https://www.codeschool.com/courses/breaking-the-ice-with-regular-expressions</a>)</li> </ul> The only REGEX course that really taught me Regex , it's free too <ul> <li>Regular Expressions Demystified: RegEx isn’t as hard as it looks</li> </ul> <a href="https://medium.freecodecamp.org/regular-expressions-demystified-regex-isnt-as-">https://medium.freecodecamp.org/regular-expressions-demystified-regex-isnt-as-</a> hard-as-it-looks-617b55cf787) <h1> <a name="you-dont-need-a-framework" href="#you-dont-need-a-framework" class="anchor"> </a> You dont need a framework </h1> <a href="https://medium.freecodecamp.org/do-we-still-need-javascript-frameworks-42576735949b">https://medium.freecodecamp.org/do-we-still-need-javascript-frameworks-42576735949b</a> <h1> <a name="video-courses-" href="#video-courses-" class="anchor"> </a> Video Courses : </h1> <h2> <a name="fundamentals-javascript-course" href="#fundamentals-javascript-course" class="anchor"> </a> Fundamentals Javascript Course </h2> <ul> <li>JavaScript: Understanding the Weird Parts</li> </ul> <a href="https://www.udemy.com/understand-javascript/">https://www.udemy.com/understand-javascript/</a>) A great course which gives you a rock solid foundation but even more, you start loving javascript <ul> <li>Deep JavaScript Foundations</li> </ul> <a href="https://frontendmasters.com/courses/javascript-foundations/">https://frontendmasters.com/courses/javascript-foundations/</a>) taught by Kyle Simpson .... enough said <ul> <li>JavaScript: Events <a href="https://www.lynda.com/JavaScript-tutorials/JavaScript-Events/140780-2.html">https://www.lynda.com/JavaScript-tutorials/JavaScript-Events/140780-2.html</a>) <a href="https://www.sitepoint.com/javascript-custom-events/">https://www.sitepoint.com/javascript-custom-events/</a></li> <li>JavaScript: Enhancing the DOM <a href="https://www.lynda.com/HTML-tutorials/JavaScript-Enhancing-DOM/122462-2.html">https://www.lynda.com/HTML-tutorials/JavaScript-Enhancing-DOM/122462-2.html</a>)</li> <li>JavaScript Objects and Prototypes <a href="https://app.pluralsight.com/library/courses/javascript-objects-prototypes">https://app.pluralsight.com/library/courses/javascript-objects-prototypes</a>)</li> <li>Reduce Data with Javascript Array#reduce <a href="https://egghead.io/courses/reduce-data-with-javascript">https://egghead.io/courses/reduce-data-with-javascript</a>)</li> <li>Understand Javascript arrays <a href="https://egghead.io/courses/understand-javascript-arrays">https://egghead.io/courses/understand-javascript-arrays</a>)</li> </ul> <a href="https://github.com/deenjohn/Javascript-revision">https://github.com/deenjohn/Javascript-revision</a>) <a href="https://github.com/deenjohn/functional-javascript">https://github.com/deenjohn/functional-javascript</a>) <a href="https://github.com/deenjohn/You-Dont-Need-JavaScript">https://github.com/deenjohn/You-Dont-Need-JavaScript</a>) <ul> <li>Advanced Javascript</li> </ul> <a href="https://www.udemy.com/top-javascript-interview-questions-and-answers/">https://www.udemy.com/top-javascript-interview-questions-and-answers/</a>) (good course- covers CORS,JSONP) <ul> <li>JavaScript 30 — Build 30 things with vanilla JS in 30 days <a href="https://javascript30.com/">https://javascript30.com/</a>)</li> <li>*The Complete JavaScript Course: Build a Real-World Project</li> </ul> <a href="https://www.udemy.com/the-complete-javascript-course/">https://www.udemy.com/the-complete-javascript-course/</a>) <ul> <li>JavaScript: Getting Started <a href="https://app.pluralsight.com/library/courses/javascript-getting-started/table-of-contents">https://app.pluralsight.com/library/courses/javascript-getting-started/table-of-contents</a>)</li> <li>jQuery-free JavaScript <a href="https://app.pluralsight.com/library/courses/jquery-free-javascript">https://app.pluralsight.com/library/courses/jquery-free-javascript</a>) (awesome course -teaches you DOM in depth)</li> <li>JavaScript: The Hard Parts <a href="https://frontendmasters.com/courses/javascript-hard-parts/">https://frontendmasters.com/courses/javascript-hard-parts/</a>)</li> <li>Modern Asynchronous JavaScript <a href="https://app.pluralsight.com/library/courses/javascript-asynchronous-modern/table-of-contentsnts">https://app.pluralsight.com/library/courses/javascript-asynchronous-modern/table-of-contentsnts</a>)</li> <li>Reasoning About Asynchronous JavaScript <a href="https://app.pluralsight.com/library/courses/asynchronous-javascript-reasoning/table-of-contents">https://app.pluralsight.com/library/courses/asynchronous-javascript-reasoning/table-of-contents</a>)</li> <li>Asynchronous Programming: The End of The Loop <a href="https://egghead.io/courses/asynchronous-programming-the-end-of-the-loop">https://egghead.io/courses/asynchronous-programming-the-end-of-the-loop</a>)</li> <li>Asynchronous Programming in JavaScript (with Rx.js Observables) <a href="https://frontendmasters.com/courses/asynchronous-javascript/">https://frontendmasters.com/courses/asynchronous-javascript/</a>)</li> <li>Advanced Asynchronous JavaScript <a href="https://frontendmasters.com/courses/advanced-async-js/">https://frontendmasters.com/courses/advanced-async-js/</a>)</li> <li>style.cssText</li> </ul> <a href="http://javascript.info/styles-and-classes">http://javascript.info/styles-and-classes</a> we can set special style flags like "important" here <h2> <a name="es6-course" href="#es6-course" class="anchor"> </a> ES6 Course </h2> <ul> <li> Rapid ES6 Training <a href="https://app.pluralsight.com/library/courses/rapid-es6-training/table-of-contents">https://app.pluralsight.com/library/courses/rapid-es6-training/table-of-contents</a>)</li> </ul> Most in-depth of all course on ES6 , complement the Exploring ES6 by Dr. Axel Rauschmayer book well <ul> <li>ES6: The Right Parts <a href="https://frontendmasters.com/courses/es6-right-parts/">https://frontendmasters.com/courses/es6-right-parts/</a>)</li> <li>ES6 for Everyone! | Wes Bos <a href="http://wesbos.com/es6-for-everyone/">http://wesbos.com/es6-for-everyone/</a>)</li> <li>ES6 in Motion <a href="https://www.safaribooksonline.com/library/view/es6-in-motion/10000MNLV201701/">https://www.safaribooksonline.com/library/view/es6-in-motion/10000MNLV201701/</a>)</li> </ul> (good to learn es6 class in depth ) <h2> <a name="functional-js-course" href="#functional-js-course" class="anchor"> </a> Functional JS course </h2> <ul> <li>Functional-Lite JavaScript <a href="https://frontendmasters.com/courses/functional-javascript-v2/">https://frontendmasters.com/courses/functional-javascript-v2/</a>)</li> <li>Deep Dive into Functional JavaScript [Video] | PACKT Books <a href="https://www.packtpub.com/web-development/deep-dive-functional-javascript-video">https://www.packtpub.com/web-development/deep-dive-functional-javascript-video</a>)</li> <li>Mastering Functional JavaScript Libraries</li> </ul> <a href="https://www.packtpub.com/web-development/mastering-functional-javascript-libraries-video">https://www.packtpub.com/web-development/mastering-functional-javascript-libraries-video</a>) <h2> <a name="debugging-course" href="#debugging-course" class="anchor"> </a> Debugging course </h2> <ul> <li>Debugging and Fixing Common JavaScript Errors <a href="https://frontendmasters.com/courses/debugging-javascript/">https://frontendmasters.com/courses/debugging-javascript/</a>)</li> <li>Fixing Common JavaScript Bugs <a href="https://app.pluralsight.com/library/courses/fixing-common-javascript-bugs/table-of-contents">https://app.pluralsight.com/library/courses/fixing-common-javascript-bugs/table-of-contents</a>)</li> </ul> <h3> <a name="testing" href="#testing" class="anchor"> </a> Testing </h3> <ul> <li>Testing Clientside JavaScript <a href="https://app.pluralsight.com/library/courses/testing-javascript">https://app.pluralsight.com/library/courses/testing-javascript</a>)</li> <li>Testing JavaScript Applications (feat. React and Redux) <a href="https://frontendmasters.com/courses/testing-javascript/">https://frontendmasters.com/courses/testing-javascript/</a>)</li> <li>Front-End First: Testing and Prototyping JavaScript Apps <a href="https://app.pluralsight.com/library/courses/testing-and-prototyping-javascript-apps/table-of-contents">https://app.pluralsight.com/library/courses/testing-and-prototyping-javascript-apps/table-of-contents</a>)</li> <li>Testing JavaScript for Node.js with Mocha <a href="https://app.pluralsight.com/library/courses/mocha-javascript-testing-nodejs/table-of-contents">https://app.pluralsight.com/library/courses/mocha-javascript-testing-nodejs/table-of-contents</a>)</li> <li>Unit Testing with Node.js <a href="https://app.pluralsight.com/library/courses/unit-testing-nodejs/table-of-contents">https://app.pluralsight.com/library/courses/unit-testing-nodejs/table-of-contents</a>)</li> <li>Building a JavaScript Development Environment <a href="https://app.pluralsight.com/library/courses/javascript-development-environment/table-of-contents">https://app.pluralsight.com/library/courses/javascript-development-environment/table-of-contents</a>)</li> <li>Understanding Jest Mocks <a href="https://medium.com/<a%20class='mentioned-user'%20href='https://dev.to/rickhanlonii'><a%20class='mentioned-user'%20href='https://dev.to/rickhanlonii'>@rickhanlonii</a>%0A</a>%0A/understanding-jest-mocks-f0046c68e53c">https://medium.com/</a><a class="mentioned-user" href="https://dev.to/rickhanlonii"></a><a class="mentioned-user" href="https://dev.to/rickhanlonii">@rickhanlonii</a> /understanding-jest-mocks-f0046c68e53c)</li> </ul> <a href="https://blog.kentcdodds.com/but-really-what-is-a-javascript-mock-10d060966f7d?source=bookmarks---------19----------------">https://blog.kentcdodds.com/but-really-what-is-a-javascript-mock-10d060966f7d?source=bookmarks---------19----------------</a>) <a href="https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3">https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3</a>) <a href="https://github.com/deenjohn/Testing-In-Depth/blob/master/jest2.js">https://github.com/deenjohn/Testing-In-Depth/blob/master/jest2.js</a>) <a href="https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64">https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64</a>) <a href="https://medium.com/@7ynk3r/react-testing-done-right-24fdb4ef43d8">https://medium.com/@7ynk3r/react-testing-done-right-24fdb4ef43d8</a>) <h2> <a name="interview-preparation-mocks" href="#interview-preparation-mocks" class="anchor"> </a> Interview Preparation - mocks </h2> <ul> <li> Answering Tricky JS Interview Questions <a href="https://www.youtube.com/watch?v=MY0UBGX2FtA">https://www.youtube.com/watch?v=MY0UBGX2FtA</a>)</li> </ul> <a href="https://www.youtube.com/watch?v=057Rs6CgJnY">https://www.youtube.com/watch?v=057Rs6CgJnY</a>) <h3> <a name="talks" href="#talks" class="anchor"> </a> Talks </h3> <ul> <li>**<a href="https://github.com/AllThingsSmitty/must-watch-javascript">https://github.com/AllThingsSmitty/must-watch-javascript</a> A list of important javascript talks</li> <li>How Browsers Work_ Behind the scenes of modern web browsers <a href="https://vimeo.com/44182484">https://vimeo.com/44182484</a>)</li> </ul> How Browsers Work_ Behind the scenes of modern web browsers - HTML5 Rocks <ul> <li>**JavaScript engine fundamentals: Shapes and Inline Caches <a href="https://mathiasbynens.be/notes/shapes-ics">https://mathiasbynens.be/notes/shapes-ics</a> </li> </ul> <h2> <a name="rxjs" href="#rxjs" class="anchor"> </a> RXJS </h2> <a href="https://github.com/ichpuchtli/awesome-rxjs">https://github.com/ichpuchtli/awesome-rxjs</a> <a href="https://medium.com/google-developer-experts/angular-introduction-to-reactive-extensions-rxjs-a86a7430a61f">https://medium.com/google-developer-experts/angular-introduction-to-reactive-extensions-rxjs-a86a7430a61f</a> <a href="https://toddmotto.com/rxjs-observables-observers-operators">https://toddmotto.com/rxjs-observables-observers-operators</a> <h2> <a name="performance" href="#performance" class="anchor"> </a> Performance </h2> <a href="https://developers.google.com/web/fundamentals/performance/get-started/">https://developers.google.com/web/fundamentals/performance/get-started/</a> <a href="https://csstriggers.com/align-content">https://csstriggers.com/align-content</a> The Only 2 CSS Properties You Should Animate <a href="https://www.youtube.com/watch?v=N5EW4HnF6FU">https://www.youtube.com/watch?v=N5EW4HnF6FU</a> <h2> <a name="jquery-annotated-source" href="#jquery-annotated-source" class="anchor"> </a> Jquery Annotated source </h2> <a href="https://robflaherty.github.io/jquery-annotated-source/">https://robflaherty.github.io/jquery-annotated-source/</a> <h2> <a name="css" href="#css" class="anchor"> </a> CSS </h2> <a href="https://www.inmotionhosting.com/support/edu/website-design/using-css/linking-your-css-to-your-website">https://www.inmotionhosting.com/support/edu/website-design/using-css/linking-your-css-to-your-website</a> <a href="https://www.w3schools.com/cssref/css_selectors.asp">https://www.w3schools.com/cssref/css_selectors.asp</a> <h2> <a name="mobile" href="#mobile" class="anchor"> </a> Mobile </h2> 1)Detecting which mobile <a href="https://www.w3schools.com/jsref/prop_nav_useragent.asp">https://www.w3schools.com/jsref/prop_nav_useragent.asp</a> <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html">https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction">https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction</a> <a href="https://stackoverflow.com/questions/42929323/touchevent-touches-length-returns-always-1-on-android">https://stackoverflow.com/questions/42929323/touchevent-touches-length-returns-always-1-on-android</a> <a href="https://javascript.info/bubbling-and-capturing">https://javascript.info/bubbling-and-capturing</a> <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html">https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html</a> <a href="http://qu.edu.iq/wp-content/uploads/2017/09/HTML5-APPLICATIONS-DEVELOPMENT-MANUAL-2017.pdf">http://qu.edu.iq/wp-content/uploads/2017/09/HTML5-APPLICATIONS-DEVELOPMENT-MANUAL-2017.pdf</a> <a href="https://github.com/john-doherty/long-press/blob/master/src/long-press.js">https://github.com/john-doherty/long-press/blob/master/src/long-press.js</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Touch_events">https://developer.mozilla.org/en-US/docs/Web/API/Touch_events</a> <a href="https://patrickhlauke.github.io/getting-touchy-presentation/">https://patrickhlauke.github.io/getting-touchy-presentation/</a> <a href="https://blog.mobiscroll.com/working-with-touch-events/">https://blog.mobiscroll.com/working-with-touch-events/</a> <a href="https://www.html5rocks.com/en/mobile/touchandmouse/">https://www.html5rocks.com/en/mobile/touchandmouse/</a> <a href="https://docs.sencha.com/extreact/6.5.3/guides/gestures.html">https://docs.sencha.com/extreact/6.5.3/guides/gestures.html</a> <a href="https://www.davrous.com/2015/08/10/unifying-touch-and-mouse-how-pointer-events-will-make-cross-browsers-touch-support-easy/">https://www.davrous.com/2015/08/10/unifying-touch-and-mouse-how-pointer-events-will-make-cross-browsers-touch-support-easy/</a> <a href="https://developer.tizen.org/dev-guide/2.4/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm">https://developer.tizen.org/dev-guide/2.4/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm</a> <a href="https://codepen.io/deen_john/pen/PyeXyP">https://codepen.io/deen_john/pen/PyeXyP</a> <a href="https://medium.com/<a%20class='mentioned-user'%20href='https://dev.to/jh3y'><a%20class='mentioned-user'%20href='https://dev.to/jh3y'>@jh3y</a>%0A</a>%0A/implementing-touch-support-in-javascript-b8e43f267a16">https://medium.com/</a><a class="mentioned-user" href="https://dev.to/jh3y"></a><a class="mentioned-user" href="https://dev.to/jh3y">@jh3y</a> /implementing-touch-support-in-javascript-b8e43f267a16 <a href="https://css-tricks.com/the-javascript-behind-touch-friendly-sliders/">https://css-tricks.com/the-javascript-behind-touch-friendly-sliders/</a> <a href="https://www.youtube.com/watch?v=_3b1rvuFCJY">https://www.youtube.com/watch?v=_3b1rvuFCJY</a> <a href="http://www.thatsoftwaredude.com/content/8579/javascript-touch-events">http://www.thatsoftwaredude.com/content/8579/javascript-touch-events</a> <a href="https://eloquentjavascript.net/15_event.html">https://eloquentjavascript.net/15_event.html</a> <a href="https://www.sitepen.com/blog/2011/12/07/touching-and-gesturing-on-iphone-android-and-more/">https://www.sitepen.com/blog/2011/12/07/touching-and-gesturing-on-iphone-android-and-more/</a> <a href="https://davidwalsh.name/mootools-touch">https://davidwalsh.name/mootools-touch</a> <a href="https://www.youtube.com/watch?v=Rwc4fHUnGuU">https://www.youtube.com/watch?v=Rwc4fHUnGuU</a> <a href="https://www.youtube.com/watch?v=ga_SLzsUdTY">https://www.youtube.com/watch?v=ga_SLzsUdTY</a> <a href="https://segmentfault.com/q/1010000002870710">https://segmentfault.com/q/1010000002870710</a> What is the difference between targetTouches, touches, and changedTouches in TouchEvent?<a href="https://segmentfault.com/q/1010000002870710">https://segmentfault.com/q/1010000002870710</a> <h2> <a name="interview-prep" href="#interview-prep" class="anchor"> </a> Interview prep </h2> <a href="http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/">http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/</a> <h2> <a name="extras" href="#extras" class="anchor"> </a> Extras </h2> <a href="https://html.spec.whatwg.org/">https://html.spec.whatwg.org/</a> <a href="https://awesometalks.party/">https://awesometalks.party/</a> <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model">https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model</a>) <a href="https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations">https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations</a>) <a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_parsing_algorithm">https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_parsing_algorithm</a>) <a href="https://github.com/WebKit/webkit/blob/fde57e46b1f8d7dde4b2006aaf7ebe5a09a6984b/Source/WebCore/rendering/RenderObject.h">https://github.com/WebKit/webkit/blob/fde57e46b1f8d7dde4b2006aaf7ebe5a09a6984b/Source/WebCore/rendering/RenderObject.h</a>) <a href="https://codeburst.io/the-ultimate-guide-to-learning-full-stack-web-development-in-6-months-for-30-72b3854a7458">https://codeburst.io/the-ultimate-guide-to-learning-full-stack-web-development-in-6-months-for-30-72b3854a7458</a>) <a href="https://www.reddit.com/r/cscareerquestions/comments/5gnmkj/what_are_some_of_the_best_resu%D0%BCe_formats_youve/">https://www.reddit.com/r/cscareerquestions/comments/5gnmkj/what_are_some_of_the_best_resu%D0%BCe_formats_youve/</a>) <a href="https://github.com/thlorenz/v8-perf">https://github.com/thlorenz/v8-perf</a>) <a href="http://benediktmeurer.de/2017/10/05/connecting-the-dots/">http://benediktmeurer.de/2017/10/05/connecting-the-dots/</a>) <a href="https://github.com/thlorenz/async-await-box">https://github.com/thlorenz/async-await-box</a>) <a href="https://medium.freecodecamp.org/elegant-patterns-in-modern-javascript-roro-be01e7669cbd">https://medium.freecodecamp.org/elegant-patterns-in-modern-javascript-roro-be01e7669cbd</a>) <a href="https://codeburst.io/javascript-null-vs-undefined-20f955215a2?source=placement_card_footer_grid---------2-60">https://codeburst.io/javascript-null-vs-undefined-20f955215a2?source=placement_card_footer_grid---------2-60</a>) <a href="https://google.github.io/styleguide/jsguide.html">https://google.github.io/styleguide/jsguide.html</a>) <a href="https://github.com/airbnb/javascript">https://github.com/airbnb/javascript</a>) <a href="https://www.sitepoint.com/mvc-design-pattern-javascript/">https://www.sitepoint.com/mvc-design-pattern-javascript/</a> <a href="https://legacy.gitbook.com/book/basarat/typescript/details">https://legacy.gitbook.com/book/basarat/typescript/details</a> <a href="https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone">https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone</a> <a href="http://dfsq.info/site/read/writing-your-own-jquery">http://dfsq.info/site/read/writing-your-own-jquery</a> <a href="https://learnquery.infinum.co/">https://learnquery.infinum.co/</a> SPA :<a href="https://www.youtube.com/watch?v=F_BYg2QGsC0">https://www.youtube.com/watch?v=F_BYg2QGsC0</a> <a href="https://www.youtube.com/watch?v=qvHecQOiu8g">https://www.youtube.com/watch?v=qvHecQOiu8g</a> How Single Page Applications WorkHow Single Page Applications Work <a href="https://www.youtube.com/watch?v=xN9QxPtK2LM&list=PLw5h0DiJ-9PAY1hpmbkRkV7dYA5RpL9LT&index=2&t=0s">https://www.youtube.com/watch?v=xN9QxPtK2LM&list=PLw5h0DiJ-9PAY1hpmbkRkV7dYA5RpL9LT&index=2&t=0s</a>

DEV Community: Deen John

Resources to Master Javascript

Master Javascript

Fundamentals Javascript Reading:

in vs for ...in

Coercion

typeof vs instanceof vs {}.toString

functions

IIFE

Call,Apply,Bind

Call,Apply,Bind - Learn even more

let,const arrow function

json.stringify

Strict

This in Object

Closures

object

Arrays

DOM