BlogPost_208

• Talk about something you learned this week.

We have been using the Fetching for APIs and Recursion. Pure functions and immutability.

• Explain Function.prototype.bind()

bind is a method on the prototype of all functions in JavaScript. It allows you to create a new function from an existing function, change the new function’s this context, and provide any arguments you want the new function to be called with. The arguments provided to bind will precede any arguments that are passed to the new function when it is called.

• Describe event bubbling.

Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.

With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.

With capturing, the event is first captured by the outermost element and propagated to the inner elements.

• What's the difference between window load event and document DOMContentLoaded event?

The DOMContentLoaded event fires when parsing of the current page is complete; the load event fires when all files have finished loading from all resources, including ads and images.

• Describe the call-stack.

In computer science, a call stack is a stack data structure that stores information about the active subroutines of a computer program. This kind of stack is also known as an execution stack, program stack, control stack, run-time stack, or machine stack, and is often shortened to just "the stack".

BlogPost_207

• Write about something you learned this week.

Using APIs. I used a Pokemon API to make a website where two pokemon appear and their attack stats are compared to say which one would win.

• Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading. To execute anything post document load, we fire these events. One disadvantage is that it won't wait for an image to load, so you have to do something else about that. An alternative would be to use a setTimeOut. Another is DOMContentLoaded.

• What are the advantages and disadvantages of using Ajax?

Advantages of AJAX

AJAX Concept
Before you starting AJAX you'll need to have a strong knowledge of JavaScript. AJAX is not a difficult, you can easy implement AJAX in a meaningful manner. Some IDE are help us to implement AJAX.

Speed
Reduce the server traffic in both side request. Also reducing the time consuming on both side response.

Interaction
AJAX is much responsive, whole page(small amount of) data transfer at a time.

XMLHttpRequest
XMLHttpRequest has an important role in the Ajax web development technique. XMLHttpRequest is special JavaScript object that was designed by Microsoft. XMLHttpRequest object call as a asynchronous HTTP request to the Server for transferring data both side. It's used for making requests to the non-Ajax pages.

Asynchronous calls
AJAX make asynchronous calls to a web server. This means client browsers are avoid waiting for all data arrive before start the rendering.

Form Validation
This is the biggest advantage. Form are common element in web page. Validation should be instant and properly, AJAX gives you all of that, and more.

Bandwidth Usage
No require to completely reload page again. AJAX is improve the speed and performance. Fetching data from database and storing data into database perform background without reloading page.

Disadvantages of AJAX

1. AJAX application would be a mistake because search engines would not be able to index an AJAX application.

2. Open Source: View source is allowed and anyone can view the code source written for AJAX.

3. ActiveX requests are enabled only in Internet Explorer and newer latest browser.

4 The last disadvantage, XMLHttpRequest object itself. For a security reason you can only use to access information from the web host that serves initial pages. If you need to fetching information from another server, it's is not possible with in the AJAX.

• Explain how JSONP works (and how it's not really Ajax).

JSONP (acronym for JavaScript Object Notation with Padding) is a common method to retrieve data from another domain and bypass CORS (Cross Origin Resource Sharing) rules.

An overview of JSONP base on personal experience
I have used JSONP as a work around to get data by wrapping the response data in JSON format with a function callback set in query string as parameter and setting the callback as an object property of ajax object.

** Note, I was using jQuery library when implementing AJAX with JSONP

I’ve also heard of CORS as a set of rules regarding retrieving and transferring data or assets from 3rd parties or different domains from a client. This strictly applies to XMLHttpRequest for security reasons. Making HTTP Requests with XMLHTTPRequest object will only let us make request to our own domain and restricts us from different domain, thus, JSONP was created as a way to bypass this rule.

More about CORS: HTTP access control (CORS)

---

How does JSONP work?

After reading further, implementation of JSONP differ from JavaScript libraries to the actual native JavaScript. In native JavaScript, JSONP requests aren’t dispatched with XMLHttpRequest object, rather, a script tag is added to the DOM, targeting its src attribute with the url. Reason is script tag does not have limitation to which domains it can retrieve its scripts from. Also, since JavaScript has a global scope, we can reference a function to handle incoming JSON data from a 3rd party api url and link that to our application. While, in JavaScript libraries such as jQuery, it automatically generate callback and clean up any inserted script tags unto the DOM.

In order for JSON data to be wrapped in a function, the 3rd party API service needs to support JSONP feature. Usually, they will specify on their documentation how to implement JSONP. Here is an example: http://forismatic.com/en/api/

If you copy & paste the url below, this will return a simple quote formatted in JSON

http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json

While this url will return the same result except JSON data will be wrapped with a function since we explicitly specify format as jsonp and gave it a callback function

http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=processQuote

When this loads unto our application from script tag, the given callback name (function name) will get registered unto the global scope and will be available for us to use throughout our application.

JSONP limits us with just retrieving GET data. It does not let us create, update, or delete CRUD data. That’s why its just a work around but it does have its advantages. For example, retrieving simple data from a weather api, etc. If you want to take advantage of these other HTTP methods, then its best to build your own simple API Server.

• Explain Ajax in as much detail as possible.

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

It is a technique used in order to send and retrieve data in the background without refreshing the webpage.

• What does it mean when we talk about time complexity of an algorithm?

Time complexity is a concept in computer science that deals with the quantification of the amount of time taken by a set of code or algorithm to process or run as a function of the amount of input. In other words, time complexity is essentially efficiency, or how long a program function takes to process a given input.

• What are the three laws of recursion algorithm?

Like the robots of Asimov, all recursive algorithms must obey three important laws: A recursive algorithm must call itself, recursively. A recursive algorithm must have a base case. A recursive algorithm must change its state and move toward the base case.

• How do you see yourself growing as a web developer?

I'm still unsure. I don't like making websites that have only aesthetic and commercial properties. I like complex applications and i still can't code them so I still need to learn a lot more. 

BlogPost_206

• Tell us about something you learned this week.

Learned a few of the different sorting algorithms that exist and made one from scratch.

• What are the pros and cons of immutability?

Advantages:

• Each function is easier to understand because it uses only other public functions and its own private variables.
• The code is easier to parallelize. For example, multiply calls can run in parallel, without the risk of interference. 

Disadvantages :

• It takes more memory. Each function uses its acc accumulator, so the functional version requires twice as much memory as the imperative version.
• The application state is stored in a single object, store, which cannot be edited directly.
• To change the state of the application, you need a function, reducer, which takes as input a state and an action (an object that declaratively describes a change) and returns the following state in return.

• How can you achieve immutability in your own code?

The immutability is a very highly exploited concept in functional programming languages, where the values of the variables do not change when assigned. This has the merit of simplifying the administration of the application state by reducing the number of shared variables.

• What are Divide and Conquer algorithms? Describe how they work. Can you give any common examples of the types of problems where this approach might be used?

Divide and Conquer is an algorithmic paradigm. A typical Divide and Conquer algorithm solves a problem using following three steps.

1. Divide: Break the given problem into subproblems of same type.
2. Conquer: Recursively solve these subproblems
3. Combine: Appropriately combine the answers

Quicksort is a sorting algorithm. The algorithm picks a pivot element, rearranges the array elements in such a way that all elements smaller than the picked pivot element move to left side of pivot, and all greater elements move to right side. Finally, the algorithm recursively sorts the subarrays on left and right of pivot element.

Merge Sort is also a sorting algorithm. The algorithm divides the array in two halves, recursively sorts them and finally merges the two sorted halves.

• How do Insertion sort, Heapsort, Quicksort, and Merge sort work?

Insertion sort is a simple sorting algorithm that builds the final sorted array (or list) one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort.

In computer science, heapsort is a comparison-based sorting algorithm. Heapsort can be thought of as an improved selection sort: like that algorithm, it divides its input into a sorted and an unsorted region, and it iteratively shrinks the unsorted region by extracting the largest element and moving that to the sorted region. The improvement consists of the use of a heap data structure rather than a linear-time search to find the maximum.

Like Merge Sort, QuickSort is a Divide and Conquer algorithm. It picks an element as pivot and partitions the given array around the picked pivot. There are many different versions of quickSort that pick pivot in different ways.

1. Always pick first element as pivot.
2. Always pick last element as pivot (implemented below)
3. Pick a random element as pivot.
4. Pick median as pivot.

The key process in quickSort is partition(). Target of partitions is, given an array and an element x of array as pivot, put x at its correct position in sorted array and put all smaller elements (smaller than x) before x, and put all greater elements (greater than x) after x. All this should be done in linear time.

Merge Sort is also a sorting algorithm. The algorithm divides the array in two halves, recursively sorts them and finally merges the two sorted halves.

• What are the key advantages of Insertion Sort, Quicksort, Heapsort and Mergesort? Discuss best, average, and worst case time and memory complexity.

Insertion sort: Simple implementation. Efficient for (quite) small data sets. Adaptive, i.e. efficient for data sets that are already substantially sorted: the time complexity is O(n + d), where d is the number of inversions.

The quick sort is regarded as the best sorting algorithm. This is because of its significant advantage in terms of efficiency because it is able to deal well with a huge list of items. Because it sorts in place, no additional storage is required as well

Efficiency. The Heap sort algorithm is very efficient. While other sorting algorithms may grow exponentially slower as the number of items to sort increase, the time required to perform Heap sort increases logarithmically. This suggests that Heap sort is particularly suitable for sorting a huge list of items.

Merge sort is not in place because it requires additional memory space to store the auxiliary arrays. The quick sort is in place as it doesn't require any additional storage. Efficiency : Merge sort is more efficient and works faster than quick sort in case of larger array size or datasets.

• Explain the difference between mutable and immutable objects.

Mutable objects have fields that can be changed, immutable objects have no fields that can be changed after the object is created.

A very simple immutable object is a object without any field. (For example a simple Comparator Implementation).

class Mutable{
  private int value;

  public Mutable(int value) {
     this.value = value;
  }

  //getter and setter for value
}

class Immutable {
  private final int value;

  public Immutable(int value) {
     this.value = value;
  }

  //only getter
}

• What is an example of an immutable object in JavaScript?

The Object.freeze() method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.

BlogPost_205

• Describe one thing you're learning in class today.
• In class we don´t learn. We learn by googling and finding answers ourselves. In class I´m learning how not to rely on class to learn. In class we just beg the teachers to give us the answers to the assignments we have since we have not learned anything there and we can´t solve them ourselves. It´s great practice since it doesn´t create dependability and promotes independent thinking. I googled and learned about objects.

• Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
• You can use the arrow function when you want to quickly make an anonymous function or when you want to reduce the amount of code you´re using.
• The new syntax differs from other functions in the sense that certain scopes will work differently with the => function. You would also need to attach the function to a variable in order to call it.

• Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
• One is a function called foo. The other one is a declaration of a variable that contains a function.
• They have different scopes and evaluated at different times.

• Can you give an example for destructuring an object or an array?

	const student = {
	firstname: 'Glad',
	lastname: 'Chinda',
	country: 'Nigeria'
	};
	// Object Destructuring
	const { firstname, lastname, country } = student;
	console.log(firstname, lastname, country); // Glad Chinda Nigeria

• What advantage is there for using the arrow syntax for a method in a constructor?
• Constructors

There’s another way arrow functions don’t work well with objects. They can’t be constructors. The classic function expressions can be used to construct a new object like so:

let Person = function(name, height) {
  this.name = name
  this.height = height
}Person.prototype.hello = function() {
  console.log('Hi, my name is ' + this.name)
}let alice = new Person('Alice', 1.7)
alice.hello() // Hi, my name is Alice

But arrow functions do not have a prototype property and they cannot be used with new.

• Explain Closure.
• A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.