DEV Community: Dan-Vy Le

MJSQ 101: Why not touch global scope?

Dan-Vy Le — Wed, 01 Apr 2020 09:29:39 +0000

Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

I thought Yangshun's explanation is concise so I'll just leave it here verbatim:

Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.

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!

MJSQ 101: Function.prototype.bind

Dan-Vy Le — Wed, 25 Mar 2020 05:54:08 +0000

Explain Function.prototype.bind

Taken word-for-word from MDN:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

In their example, the unboundGetX variable cannot call on the module variable's getX function until it has been bound with the Function.prototype.bind method.

This approach would be good when you're wanting to bind the value of this to pass into other functions.

References
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

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

Sources:

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

MJSQ 101: Feature detection, feature inference, UA string

Dan-Vy Le — Wed, 18 Mar 2020 04:24:51 +0000

What's the difference between feature detection, feature inference, and using the UA string?

Feature Detection

Feature detection is discovering if a browser supports a certain block of code by running tests and running different code depending on if it does or does not. This allows for the browser to always provide a working experience instead of crashing or rendering errors giving a bad user experience.

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // show the location on a map, perhaps using the Google Maps API
  });
} else {
  // Give the user a choice of static maps instead perhaps
}

Modernizr is a great library to handle feature detection.

Feature Inference

Feature inference is similar to feature detection, but instead uses another function because it assumes it will also exist:

if (document.getElementsByTagName) {
  element = document.getElementById(id);
}
This is not really recommended. Feature detection is more foolproof.

UA String

This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via navigator.userAgent. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.

Checking the UA string is an old practice and should not be used anymore. You keep changing the UA checks and never benefit from newly implemented features, e.g.:

if (navigator.userAgent.indexOf("MSIE 7") > -1){
    //do something
}

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

Sources:

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

MJSQ 101: .concat()

Dan-Vy Le — Wed, 11 Mar 2020 08:35:19 +0000

Make this work: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`]

The solution:


function duplicate(arr) {
    return arr.concat(arr)
}

console.log(duplicate([1, 2, 3, 4, 5]))

//output: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

What do we know:

It looks like the input is [1,2,3,4,5] and the desired output is [1,2,3,4,5,1,2,3,4,5].
It also looks like it's calling a function duplicate() to make this work.
We also know of a quick array method that can add one array onto another, it's called concat()

Here's an example:


var arr = [8, 6, 7]
arr.concat[5, 3, 0, 9]

//output: [8, 6, 7, 5, 3, 0, 9]

Pseudocode:

So we would need to write the function
and call it duplicate(arr)
so that it could take an argument, such as an array of [1, 2, 3, 4, 5]
and work with the concat() array method to add the original array to itself.
We would then return arr.concat(arr)
so that when we display the output or `console.log()the function,
the output will give you the input twice in a new array: [1,2,3,4,5,1,2,3,4,5]

Here's the solution again in case you are one of those models that can only scroll down.

`js

function duplicate(arr) {
return arr.concat(arr)
}

console.log(duplicate([1, 2, 3, 4, 5]))

//output: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

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

Sources:

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

MJSQ 101: FizzBuzz

Dan-Vy Le — Tue, 03 Mar 2020 08:40:05 +0000

FizzBuzz

It's one of the most common JS questions that you'll see, I've seen it three times now, in an intro to algorithms/whiteboarding, in a practice technical interview and now from Yangshun's front-end questions. It's worth it to take a deeper look.

The prompt:

Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5.

A solution:

function fizzBuzz() {
    for (i = 1; i <= 100; i++) {
        if (i % 5 === 0 && i % 3 === 0) {
        console.log("FizzBuzz");
      } else if (i % 3 === 0) {
        console.log("Fizz");
      } else if (i % 5 === 0) {
        console.log("Buzz");
      } else {
        console.log(i);
      }
    }
    }

    fizzBuzz();

Solution broken down:

There are a few things that we know:

We need to print the numbers 1-100.
If the number is divisible by 3, the number will be replaced with "Fizz"
If the number is divisible by 5, the number will be replaced with "Buzz"
If the number is divisible by 3 & 5, the number will be replaced with "FizzBuzz"
We'll go through all of this until we hit 100.

There are a few things that would work well for the solution if we know:

To print something on screen, we can console.log() it.
&& operator allows for us to combine more than one conditional statement.
The Modulo operator or % in javascript doesn't mean percent (unless it's written out in a string). A modulo operator does this cool calculation where it tells you what the remainder of a number is once it has been divided by the number on the right side of the operator.

Take for example:

 30 % 5 
 //output = 0. 30 is perfectly divisible by 5 so its output is 0. 

 31 % 5
 //output = 1. 31 divided by 5 is 6 plus some change, in this case it's 1.

Conditional statements if, else if, and else

 if (conditional statement) {
     //do something here if conditional statement is truthy
 } else if (another conditional statement) {
     //do another thing if statement is truthy
 } else {
     //catch all for whatever else is left basically
 }

for loop. A for loop takes three statements:

Statement 1 is executed (one time) before the execution of the code block. var i is declared before we start the loop.

Statement 2 defines the condition for executing the code block. The loop will run until i < 100 is no longer true aka when i > 100: STOP.

Statement 3 is executed (every time) after the code block has been executed. Whatever i is, add 1 to itself.

for (var i = 1; i < 100; i++) {
}

Here's the solution with a shit ton of comments:

function fizzBuzz() { 
    //we create a function called fizzBuzz() to be called later in the program once we run it
    for (i = 1; i <= 100; i++) {
        //this is a for loop to declare i to start at 1, until it is equal to or greater than 100, and once it executes, add i + 1
        if (i % 5 === 0 && i % 3 === 0) {
        //inside the for loop, we need to exercise a conditional. If i is perfectly divisible by 5 && divisible by 3, where the result of using the modulo operator is equal to 0, let's console.log("FizzBuzz")
        console.log("FizzBuzz");
      } else if (i % 3 === 0) {
        //Or if it's only perfectly divisible by 3, we can say "Fizz"
        console.log("Fizz");
      } else if (i % 5 === 0) {
        //Or if it's only perfectly divisible by 3, we can say "Buzz"
        console.log("Buzz");
      } else {
        console.log(i);
        //or if it's not divisible by any of those numbers, let's just print whatever i is.
      }
    }
    }

    fizzBuzz();
    //call the function and the numbers and Fizz and/or Buzzes will come streaming out.

Hope that explains how to code the all too common FizzBuzz question!

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

Sources:

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:

MJSQ 101: == vs ===, use strict, event bubbling

Dan-Vy Le — Wed, 26 Feb 2020 07:01:53 +0000

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:

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

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

Dan-Vy Le — Wed, 26 Feb 2020 06:58:06 +0000

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?

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:

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

MJSQ 101: Ajax

Dan-Vy Le — Wed, 19 Feb 2020 03:56:53 +0000

Explain Ajax in as much detail as possible.

AJAX stands for Asynchronous Javascript And XML. Ajax is not a programming language. Instead it is a combination of technologies including: HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly the *XMLHttpRequest object. This allows for web applications to make quick, incremental changes to the user interface in the background (asynchronously) without having to relaod the entire browser page.

As a result, your application works much faster and is more responsive to user actions.

To note: Althought AJAX includes XML, modern convention shows JSON being more frequently used due to it being lighter and native to JavaScript. They are both used for packaging information in the AJAX model.

*We use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.

Here's a quick diagram and explanation from w3schools of how it works:

An event occurs in a web page (the page is loaded, a button is clicked)
An XMLHttpRequest object is created by JavaScript
The XMLHttpRequest object sends a request to a web server
The server processes the request
The server sends a response back to the web page
The response is read by JavaScript
Proper action (like page update) is performed by JavaScript

What are the advantages and disadvantages of using Ajax?

I'm going to take straight from Yangshun on this one as I think they hit the points well:

Advantages

Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page.
Reduce connections to the server since scripts and stylesheets only have to be requested once.
State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded.
See advantages of an SPA.

Disadvantages

Dynamic webpages are harder to bookmark.
Does not work if JavaScript has been disabled in the browser.
Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
Webpages using Ajax to fetch data will likely have to combine the fetched remote data with client-side templates to update the DOM. For this to happen, JavaScript will have to be parsed and executed on the browser, and low-end mobile devices might struggle with this.
See disadvantages of an SPA.

Explain how JSONP works and how it's not really Ajax

JSONP can be seen as a workaround to the cross-origin domain policy and doesn't use the XMLHttpRequest object. JSONP stands for JSON with Padding. JSONP won't use the XMLHttpRequest object. Instead, it uses <script> tags. This eliminates the issues caused by the cross-origin domain policy. Requesting an external script from another domain doesn't create this problem, hence JSONP.

JSONP works by making a request to a cross-origin domain via a <script> tag and usually with a callback query parameter, for example: https://example.com?callback=printData. The server will then wrap the data within a function called printData and return it to the client.

An aside: JSONP can be unsafe and has some security implications, so you need to trust the provider of the JSONP data. CORS is the modern recommended approach.

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 quote 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://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://www.w3schools.com/js/js_ajax_intro.asp
https://stackoverflow.com/a/2067584/1751946

MJSQ 101: IIFE, anonymous functions, native vs host objects

Dan-Vy Le — Wed, 05 Feb 2020 06:55:32 +0000

Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?

First you'll need to understand what an IIFE is. An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

(function () {
    var whoWonSuperBowl = "Kansas City Chiefs";
    return whoWonSuperBowl;
})();

//output: "Kansas City Chiefs"

function foo() {} (); is reading the two as separate: function foo(){} as a function declaration and then () as a function call. Since they are not grouped, the function throws an error: Uncaught SyntaxError: Unexpected token.

To fix this, we can call on the grouping operator ( ) to group the function declaration and immediately invoke the function (function foo(){ })() or group the entire function together with (function foo(){ }()) to create function expressions that can be immediately invoked.

What's a typical use case for anonymous functions?

IIFE which was mentioned above:

    (function() {
        //expression
    })();

As a callback where naming the function isn't necessary and it won't need to be used anywhere else(Yangshun's example):

setTimeout(function() {
  console.log('Hello world!');
}, 1000);

What's the difference between host objects and native objects?

Native objects are objects that are unique to the JavaScript language. Some examples include: String, Number, Array, Image, Date, Math, etc.

Host objects are objects that are supplied to JavaScript by the browser environment. Examples of these are window, document, forms, etc.

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 quote 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:

MJSQ 101: .call vs .apply, ternaries, and same-origin policy

Dan-Vy Le — Wed, 29 Jan 2020 03:37:44 +0000

What's the difference between `.call` and `.apply`?

.call and .apply are used to invoke functions. The first parameter will be the value to this function.

.call takes in comma-separated arguments as the next arguments
.apply takes in an array of arguments as the next argument

User Yangshun gives a great tip to remember:
C is for call and comma-separated
A is for apply and an array of arguments


function teamScored(a, b) {
  return a + " " + b;
}

console.log(teamScored.call(null, "It's a", "touchdown")); // "It's a touchdown!"
console.log(teamScored.apply(null, ["It's a", "touchdown"])); // "It's a touchdown!"

Why is it called a Ternary expression, what does the word "Ternary" indicate?

Ternary indicates three. A ternary expression accepts three operands:
1) the test condition
followed by a ?
2) an expression to operate if the test condition is truthy
followed by a :
3) and expression to operate if the test condition is falsy

This is commonly used to shorten up an if statement.


function ballCrossedGoalLine(isTouchdown) {
  return (isTouchdown ? 'Yes! It is a touchdown!' : 'No, the team was denied.');
}

console.log(ballCrossedGoalLine(true));
//output: "Yes! It is a touchdown!"

console.log(ballCrossedGoalLine(false));
//output: "No, the team was denied."

Explain the same-origin policy with regards to JavaScript.

The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of protocol, host, and URL port. These three must be identical in the URLs that are used to access the content for them to be considered the same origin.

The purpose of the same-origin policy is to prevent scripts from accessing malicious content. Without the same-origin policy, a script could open a new browser window and trick the user into accessing sensitive content. The script could then read the content and transmit it to another server.

Here's a great explanation from It Pro Today: Let's say that a script hosted on myhost.com is embedded in a web page that's hosted on yourhost.com using the script element's src attribute. The origin of the script is yourhost.com. The origin of the script is the page's domain in which it's embedded. The script has full access to the content and properties of any page that's hosted on yourhost.com regardless of whether it's opened in new window or iframe. But if the script opens a new window and loads a document from myhost.com or any other domain, then the same-origin policy comes into effect in which the script can't access the document's content or properties.

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 quote 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://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://www.itprotoday.com/web-application-management/javascript-same-origin-policy

More JavaScript 101: Module Patterns

Dan-Vy Le — Tue, 21 Jan 2020 23:13:48 +0000

Continuing from my previous blog post, more javascript 101 questions!:

Module Patterns

Modules are an integral piece of any robust application's architecture and typically help in keeping the units of code for a project both cleanly separated and organized. The Module Pattern is great for services and testing/TDD.

The Module pattern was originally defined as a way to provide both private and public encapsulation for classes in conventional software engineering. This helps reduce the chance of having conflicting function names with other functions in your code.

Before ES6, modules looked similar to this, stating private variables first, returning variables to make them public and then immediately invoking them at the end with () at the bottom.

(function() {

    // declare private variables and/or functions

    return {
        //declare public variables and/or functions
    }
  }

})();

After ES6, modules have been created to be accessible in classes in other files. private properties are established in the constructor and public methods are still below being returned. The class is created and you can export the class. It can then be imported in any other files for use. FreeCodeCamp has a great example of this:

//lib/module.js file
class ShoppingDataType {
  constructor() {
    //private Properties
    this.shoppingList = ['bananas', 'oranges', 'apples']
  }

  // public methods
  getShoppingList() {
    return this.shoppingList.join(", ")
  }

  addItem(item) {
    this.shoppingList.push(item)
  }
}

export default ShoppingDataType;

// main.js file

import ShoppingDataType from 'lib/module';

var shopping = new ShoppingDataType;
console.log(shopping.getShoppingList());

There are many schools of thought on how to design your code in javascript and module patterns is just one. Click here for more information on other design patterns

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 quote 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://coryrylan.com/blog/javascript-module-pattern-basics

https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

https://www.youtube.com/watch?v=3pXVHRT-amw

DEV Community: Dan-Vy Le

MJSQ 101: Why not touch global scope?

More JavaScript Questions 101(MJSQ 101):

Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

Sources:

MJSQ 101: Function.prototype.bind

More JavaScript Questions 101(MJSQ 101):

Explain Function.prototype.bind

Sources:

MJSQ 101: Feature detection, feature inference, UA string

More JavaScript Questions 101(MJSQ 101):

What's the difference between feature detection, feature inference, and using the UA string?

Feature Detection

Feature Inference

UA String

Sources:

MJSQ 101: .concat()

More JavaScript Questions 101(MJSQ 101):

Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]]

The solution:

What do we know:

Pseudocode:

Sources:

MJSQ 101: FizzBuzz

More JavaScript Questions 101(MJSQ 101):

FizzBuzz

The prompt:

A solution:

Solution broken down:

Sources:

MJSQ 101: == vs ===, use strict, event bubbling

More JavaScript Questions 101(MJSQ 101):

1) == vs ===

2) "use strict"

3) event bubbling

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

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

Describe event bubbling.

Sources:

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

More JavaScript Questions 101(MJSQ 101):

1) == vs ===

2) "use strict"

3) event bubbling

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

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

Describe event bubbling.

Sources:

MJSQ 101: Ajax

More JavaScript Questions 101(MJSQ 101):

Explain Ajax in as much detail as possible.

What are the advantages and disadvantages of using Ajax?

Explain how JSONP works and how it's not really Ajax

Sources:

More JavaScript Questions 101(MJSQ 101): this

More JavaScript Questions 101(MJSQ 101):

1. If new keyword is used when calling a function, this is a brand new object.

2. If apply, call, or bind are used to call a function, this inside the function is the object(in this case, touchdown) that is passed in as the argument.

3. If a function is called as a method, this is the object. When a dot is to the left of the function invoked, this is the object to the left of the dot.

4. If a function is invoked as a free function invocation, (global), this is the global object. In a browser, it's the window.

5. If the function is an ES2015 arrow function, all rules are thrown out the window. To determine this, go a line above the arrow function's creation and see what this is there. It will be the same in the arrow function.

Sources:

MJSQ 101: IIFE, anonymous functions, native vs host objects

More JavaScript Questions 101(MJSQ 101):

Explain why the following doesn't work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE?

What's a typical use case for anonymous functions?

What's the difference between host objects and native objects?

Sources:

MJSQ 101: .call vs .apply, ternaries, and same-origin policy

More JavaScript Questions 101(MJSQ 101):

What's the difference between .call and .apply?

Why is it called a Ternary expression, what does the word "Ternary" indicate?

Explain the same-origin policy with regards to JavaScript.

Sources:

More JavaScript 101: Module Patterns

Module Patterns

Sources:

Make this work: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`]

1) `==` vs `===`

2) `"use strict"`

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

1) `==` vs `===`

2) `"use strict"`

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

1. If `new` keyword is used when calling a function, `this` is a brand new object.

2. If `apply`, `call`, or `bind` are used to call a function, `this` inside the function is the object(in this case, `touchdown`) that is passed in as the argument.

3. If a function is called as a method, `this` is the object. When a dot is to the left of the function invoked, `this` is the object to the left of the dot.

4. If a function is invoked as a free function invocation, (global), `this` is the global object. In a browser, it's the `window`.

5. If the function is an ES2015 arrow function, all rules are thrown out the window. To determine `this`, go a line above the arrow function's creation and see what `this` is there. It will be the same in the arrow function.

Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?

What's the difference between `.call` and `.apply`?