Understanding JavaScript

JavaScript “Language Of The Web.” Rightfully so! I love this language, the amount of freedom is endless. I learned an insane amount of knowledge in a month , and I still haven’t made a dent in this vast language! My Phase 4 project for JavaScript is not something I am proud of to be honest with you. I did the bare minimum, which is usually not like me, but I felt the need to take things slow with this Phase, and thankfully I did. JavaScript is nothing to joke about, its a very complex language and going from Ruby to JS was rough. My project I believe is lack luster visually, but I felt I covered most of what was taught throughout this module. In this blog post I am going to attempt to answer some questions about what I learned in JS, in a Q&A format. Hopefully this will help you with starting off fresh in JavaScript.

● What loads your JavaScript code when you open your index.html file in the browser?

AJAX is used to load all data upon initial loading time. AJAX stands for Asynchronous JavaScript And XML. AJAX of two things XMLHTTPRequest to request data from a server, and JS and HTML DOM to display the data.

In our html file we use a script tag to connect our JS file to the HTML.

● What is returned by a fetch? What is a Promise? Can you explain how it works in your code? Why do you have to use a .then after the fetch?

A Fetch Request retrieves data from our backend(API) and return it back to us in JSON format. Upon making a Fetch Request we receive a stream object, we use this object with the json() function which then returns a promise. Since JS is asynchronous we can tell JS the order to execute the fetch request by adding .then() functions so after our promise is done pending we can THEN move to grabbing our data from said request.

● Where does your code run asynchronously?

Asynchronous code is ran when making AJAX calls. A good example of this would be a fetch request. Asynchronous JS waits for other code to run before finishing itself, that way it doesn’t hold up the JS server from running other code upon load or event handling.

● Why and when do you need to use preventDefault? What would happen if you didn’t use It?

We use prevent default to prevent the default of elements that have a default action upon their event being activated. Good example of this is a form tag. Maybe upon getting the form by id or query selector, you would add an eventListener to the form. Forms have a default of submitting and refreshing a page depending on the CRUD method and route action, but since JS can make fetch requests to the backend without navigating away from the page. Inside the event listener we can prevent the default of said form.

● What’s the difference between an arrow function and a regular function declaration?

Difference between regular functions and arrow functions are the way they bind objects to which they are called upon. An arrow function does not bind “this” to the object that called it.

(beyond just how they are written differently) When would you use one over the other?

Standard functions are best suited for object methods. Arrow functions are best suited for callbacks.

● Can you convert a regular function declaration to an arrow function and vise-versa?

You could, however changing from Standard to Arrow could raise some errors, do to the binding objects to that which they were called upon.

● What is a callback function ?

A callback function is a function within an argument of another function to be called upon later in the code. Good examples are filter(),map(),and find()

●Identify what `this` represents in different functions.

‘this’ represents the object it belongs to.

● What’s the difference between let, const, and var?

let and var are destructive. We never use var and on rare occasions we use let.
const is non-destructive, you cannot change the value or the constant.

● What is hoisting?

Hoisting is the action of variable or function declaration being moved to the top of their scope regardless if its global or local.

● What does JSON.stringify() do and why do we need to use it?

The JSON.stringify() function converts parameter into strings in a JSON format. This way the server can receive the data we send safely.

● What is the .json() function doing?

JavaScript Object Notation is a format for representing data. It is mainly used for passing data from server to client.

● How do you differentiate between a class level function and an instance level function in a JS class?

Class functions are static.

● When does the constructor function run? What is the purpose of the constructor function?

The constructor function lies within a Class. We use constructors to instantiate our objects with attributes. Kind of like a ruby class.

● How do event listeners work?

We addEventListeners to objects or elements that have actions. This could be a key stroke, a submit button, etc. Once the Event is triggered it responds with a callback function.

● Why do we use serializers?

its a fast way of translating data into a readable format for transferring over a network or storage.

● When to use forEach?

Use forEach when you have a large array that you need to manipulate each element inside that array.

● When to use map?

Use map when you need to manipulate an array and store the new values into another array non destructively.

● When to use filter?

Use filter when you need to narrow down objects within a collection

● When to use find?

Use find when trying to find an object within a collection

● When to use reduce?

Use reduce when you need to reduce objects within an array.

I will now leave you off with some tools which made my adventure a lot easier.
●Debugger
●console.log()
●http://pythontutor.com/visualize.html#mode=edit
●https://developer.mozilla.org/

Happy Coding!