JS Flatiron Assessment Study Sheet

I recently completed and passed my JS assessment at Flatiron. I was a panicked mess before the assessment and was studying so hard. I figured I would give a study sheet of concepts to know and also what to practice for the live coding.

What does the this keyword mean?

• inside a function, this is the object that represents the function's execution context
• in a method it refers to the owner object
• alone and in a function it refers to the global object
• in a function in strict mode it is undefined
• in an event, it refers to the element that received the event
• methods like call, apply, etc can refer this to any object
• returns the current execution context while the function is being run, whether the context was passed explicitly or implicity, this returns it
• Implicitly set
  • in bare function calls the context is automatically set to the global object unless prevented by "use strict"
  • in non-bare function calls the context is automatically set to the object to the left of the dot
  • in OOJS execution context defaults to the new thing being created in a class's constructor

What is destructuring?

• creating variables from objects and arrays
• create objects with same variable name key value pairs
• arrays are destructured with [] and can be set to any variable and has to be in order
• objects are destructured with {} and the variables names need to match the key but can be in any order

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

• == loose equality
  • returns true if the two values are equal but also with type conversion 42 == '42' => true '0' == false => true
• === strict equality
  • returns true if the two values are equal without performing type conversions
• != loose inequality
  • returns true if two values are not equal but also will do type conversion
• !== strict inequality
  • returns true if two values are not equal without performing type conversions
• generally you want to use the strict operators as the loose operators will return true even if the data types aren't the same

What is the difference between event capturing and bubbling?

• bubbling
  • the event is first captured and handled by the innermost element and then propagated to outer elements
• capturing
  • the event if first captured by the outermost element and propagated to the inner elements

What is JSON?

• JS Object Notation
• a string that JS knows how to turn into an object
• serialization format

What is DOM and how do you manipulate it?

• Document Object Model
• uses JavaScript to:
  • ask the DOM to find or select an HTML element or elements in the rendered page
  • remove and/or insert an element
  • adjust a property of the selected elements
• can only be spoken to via JavaScript
• data representation of the objects that comprise the structure and content of a document on the web
• when the DOM is changed, it doesn't change the source

How do you handle events/ How do event listeners work?

• events are something the user does
• 3 phases
  • capturing phase- the event goes down to the element
  • target phase- the event reached the target element
  • bubbling phase- the event bubbles up from the element
• addEventListener()
  • to teach nodes or elements to listen for an event
  • allows you to associate hearing an event with executing a callback
  • takes two arguments
    • the name of the event
    • a callback function to handle the event
    • takes a string with the name of the event and a callback function
  • if you call a function plus () in an event listener, you are actually passing in the return value which is undefined not the function itself
    • if your event automatically fires upon loading instead of the event this is why. Just remove ()

What is fetch and how does it work and what does it return?

• It is an asynchronous function and doesn't block up our call stack
• all fetch request go first to the web api then to the callback queue and when the call stack is clear, the event loop pushes the fetch request to the call stack
• usually getting a response that you want to put into json so it is readable and then you are also getting the data or the object based on that response
• will only return the promise, you can never make the function return all the data you retrieved from the promise
  • you can access the data until you are in the callback queue
  • you can only access the data in an event method
  • can only access the data in the then methods
• because it is an asynchronous method, anything called in that function outside of the fetch, then statements, will run before the fetch method so you can't call anything you declare in the fetch/then methods because they will run after the rest of the block outside of that scope
• a global method on the window object
• pass in a path to a resource as an argument
• to use the data that is returned by fetch, you need to chain on the then() method

What is a Promise? Can you explain how it works in your code?

• A Promise object represents a value that may not be available yet, but will be resolved at some point in the future. It allows you to write asynchronous code in a more synchronous fashion. For example, if you use the promise API to make an asynchronous call to a remote web service, you will create a Promise object which represents the data that will be returned by the web service in future. The caveat is that the actual data isn’t available yet. It will become available when the request completes and a response comes back from the web service. In the meantime, the Promise object acts like a proxy to the actual data. Furthermore, you can attach callbacks to the Promise object, which will be called once the actual data is available.

Why do we use .then after a fetch request?

• usually getting a response that you want to put into json so it is readable and then you are also getting the data or the object based on that response
• used with fetch() to help convert the response from fetch
• is chained on the promise from the fetch request but isn't usually explicitly called promise.then()
• takes a function usually with a parameter of response and data
• this is where you tell JS to ask the network response to be turned into JSON
• the second .then() is when you actually get some JSON which is the return from the first .then()
• used to get the data from the return of the fetch method which is the promise
• chained on to fetch request to access the data from the promise that is returned
• every .then returns a new promise
• .then is a method that you are calling on a promise that's going to take in a callback function and it is going to put that callback right on the callback queue when you get the response back so that when the event loop is empty it is going to call the callback function and pass in the response that you got from the backend from the web api

Have an understanding of hoisting, scope and context

• scope/lexical scope
  • the only thing that matters is where function and variable are declared which is usually the outer scope
  • scope of that variable of a function will have is determined on where it is defined not when it is executed
  • with JS it has to do with where declared variables and methods are available within the code
  • what functions and variables we have access to
  • function scope
    • function from the first curly bracket to the last curly bracket
  • global scope
    • access everywhere
  • block scope
    • only access them within a block
    • for, if, or any loop
  • where the variable is defined and how it is defined(let, const, var)
• execution context
  • the 'environment' a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.
  • within it, you can write an expression that references a variable of invokes a function declared in the same context
  • creates a new scope that encompasses all of the variables and functions declared in the execution context
  • global execution context is the context that implicitly wraps all of the JS code in a project
  • variables and functions declared in the global execution context, in the global scope, are accessible everywhere in your JS code
  • if a variable or function is not declared inside a function or block it is in the global execution context
• hoisting
  • refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
  • defines if something is available to be called before it is declared.
  • let isn't hoisted so you will get a reference error if you use a variable before you declare it and it can be declared without a value
  • const isn't hoisted and you will get a reference error if you use the variable before you declare it and the variable must have a value on declaration
  • var gets hoisted and can be declared without a value
  • function declarations are hoisted
  • arrow functions and function expressions are not hoisted

What is the purpose of the constructor function?

• to set/assign properties to new instances of an object
• the thing you create with the function is a more specific than object by using the keyword new
• uses this as the function's context since functions in JS are also objects, a function can say set a property on me
• creates a new copy of itself, leaving the original unchanged and on the copy it is setting the properties based on the arguments passed into the function and the keyword new tells the constructor to do that

What is a callback function? When do we use them? Give examples of callback functions in your project.

• when you pass a function expression(an anonymous function) or the pointer(variable name, declared function name) to a function as an argument, the passed function is called a callback
• the receiving function of a callback will execute or call that callback function at a later time
• we run some code, give it a callback, and maybe run it later
• functions that are specified as arguments when calling a function which will start executing code in the background
  • an example is the second parameter of the addEventListener()
    • the first parameter is the type of event to be listened for and the second parameter is a callback function that is invoked when the event is fired
    • when you pass in the callback function, you are passing in the function's reference as an argument and is not executed immediately
• most asynchronous functions are passed a callback function
• includes setTimeout() and fetch()

Why do we use serializers?

• the process of translating a data structure or object state into a format that can be stored or transmitted and reconstructed later
• In JavaScript, for example, you can serialize an object to a JSON string by calling the function JSON.stringify().
• once in a serialization format, it can be used to create a semantically identical clone of the original object
• serialization of OO objects does not include any of their associated methods with which they were previously linked

What is the purpose of JSON.stringify()?

• When sending data to a web server, the data has to be a string.
• In JavaScript, for example, you can serialize an object to a JSON string by calling the function JSON.stringify().

What are the differences between let, const, and var?

• Var
  • Hoisted
  • Function scoped
• Let
  • Can change value
  • Block scoped
• Const
  • Doesn’t change value
  • Block scoped

What kind of inheritance is JS?

• Prototypal

Things to practice for live coding

• add a form to your DOM, have the input be put on your DOM and return the form to blank
• add a like button that increases a counter
• convert an arrow function to a function declaration and vice versa
• practice array methods like .map() .filter() etc.
• be able to look at random code and know this, hoisting, and scope of variables and functions
• Identify places in your project where the code is running asynchronously and explain what that means.

Lastly, good luck! You are going to do great on your assessment. Another tip for the live coding, use console.log() and debugger a lot! It shows that you know how to use these and shows that you know how to problem solve. I was told that a lot of people panic and forget to use them and end up freezing up.