MJSQ 101: == vs. ===, Use Strict, Event Bubbling,

More JavaScript Questions 101(MJSQ 101):

Continuing from my original blog post, I give you more javascript 101 questions answered!:

Topics covered today:

1) == vs ===

2) "use strict"

3) event bubbling

What is the difference between == and === ?

== is the abstract equality operator

This operator essentially does type conversions for you, so it will produce a true result when the content is the same but type is not the same.

'1' == 1
//output true

1 == 1
//output true

=== is the strict equality operator

This operator will only produce a true result if the content and type are equal.

'1' === 1
//output false

1 === 1
//output true

What is "use strict";? what are the advantages and disadvantages to using it?

"use strict" was introduced with ECMASCript version 5. It indicates that the code should be executed in "strict mode". "Strict mode" makes it easier to write "secure" JavaScript. It will produce errors for previously accepted "bad syntax".

Things not allowed in "strict mode":

• Not declaring a variable

"use strict";
x = 3.14;  
//  This will cause an error

• Not declaring an object

"use strict";
x = {p1:10, p2:20};  
//  This will cause an error

• Deleting a variable(or object)

"use strict";
var x = 3.14;
delete x;
//  This will cause an error

• Deleting a function

"use strict";
function x(p1, p2) {};
delete x;  
//  This will cause an error

• Duplicating a parameter

"use strict";
function x(p1, p1) {};  
//  This will cause an error

• Octal numeric literals

"use strict";
var x = 010;    
//  This will cause an error

• Octal escape characters

"use strict";
var x = "\010" 
//  This will cause an error

• Writing to a read-only property

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;
//  This will cause an error

• Writing to a get-only property

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;  
//  This will cause an error

• Deleting an undeletable property

"use strict";
delete Object.prototype; 
//  This will cause an error

• Using the word eval as a variable

"use strict";
var eval = 3.14;  
//  This will cause an error

• Using the word arguments as a variable

"use strict";
var arguments = 3.14; 
//  This will cause an error

• The with statement

"use strict";
with (Math){x = cos(2)}; 
//  This will cause an error

• Using eval() to create variables in the scope from which it was called

"use strict";
eval ("var x = 2");
alert (x);
//  This will cause an error

The this keyword in functions behaves differently in strict mode.

The this keyword refers to the object that called the function.

If the object is not specified, functions in strict mode will return undefined and functions in normal mode will return the global object (window):

"use strict";
function myFunction() {
  alert(this); // will alert "undefined"
}
myFunction();

As a newbie, my actual use of 'use strict' is limited, so we can call on Yangshun's take on its advantages and disadvantages:

Advantages:

• Makes it impossible to accidentally create global variables.
• Makes assignments which would otherwise silently fail to throw an exception.
• Makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect).
• Requires that function parameter names be unique.
• this is undefined in the global context.
• It catches some common coding bloopers, throwing exceptions.
• It disables features that are confusing or poorly thought out.

Disadvantages:

• Many missing features that some developers might be used to.
• No more access to function.caller and function.arguments.
• Concatenation of scripts written in different strict modes might cause issues.

Describe event bubbling.

Event bubbling is what allows event delegation to happen. Event bubbling directs an intended target to keep going up and up until it gets handled.

Here's an example:

• A button is clicked and the event is directed to the button
• If an event handler is set for that object, the event is triggered
• If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects' parent
• The event bubbles up from parent to parent until it is handled, or until it reaches the document object.

That's all for today, please leave any comments/questions/corrections in the comments. Thanks!

Sources:

Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quotes from his github. Find his tech interview handbook here and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!

Other sources:
https://www.w3schools.com/jsref/event_bubbles.asp