Section 1
Preview this deck
What is the difference between BDD vs TDD
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
2
All-time users
2
Favorites
0
Last updated
1 year ago
Date created
Mar 1, 2020
Cards (55)
Section 1
(50 cards)
What is the difference between BDD vs TDD
BDD (Behavior Driven Development) you write the function first and then write an unit test (Karma, Jasmine) TDD (Test Driven Development) you write the test before you implement a function.
Difference between forEach and .map()
forEach - impure - calls a callback for each index in the array Map - Pure function - Returns a new array
What's the difference between Object.create() vs new
In Object.create(), the constructor function is never run from the existing object's prototype of the newly created object. In new, the constructor function is run. Remember, the new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor type
What's a typical use case for anonymous functions?
IIFEs (function(){})()
Difference between typeof and instance of
Typeof checks the type of the object InstanceOf checks at whether the prototype property of a constructor appears anywhere in the prototype chain of the object.
Explain how prototypical inheritance works.
All JavaScript objects have a prototype property, that is a reference to another object. When a property is accessed on an object and if the property is not found, it will look to the object's prototype property and the prototype's prototype and so on until it reaches null. (the end of the prototype chain).
Explain event delegation.
Event delegation is a technique involving adding event listeners to the parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant element due to the event bubbling up to the DOM.
What is the extent of your experience with Promises and/or their polyfills?
A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved. A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
What is an IIFE? Explain it.
IIFE means Immediately Invoked Function Expressions. It allows you to create a local scope of the variables and the function insides the function and a have a clean global scope.
Difference between "attribute" and "property"
Attributes are defined in the HTML markup but properties are defined in the DOM.
Difference between null vs undefined
undefined something that occurs during hoisting (initial value before initializing a value to it) null explicitly have to set it
Advantages of using ES6 maps over objects
Explain how JSONP works (and how it's not really Ajax).
JSON with Padding is a method used to bypass the cross-domain policies in web browsers because AJAX requests from the current page to a cross-origin domain is not allowed! JSONP is unsafe and has some security implications. CORS is WAY BETTER!
Explain Ajax in as much detail as possible.
AJAX is short for Asynchronous Javascript + XML. The technique consists of making server requests for additional data without unloading the page, resulting in a better user experience. Most modern implementations use JSON instead of XML. fetch API is most commonly used!
What is immutability?
This means data should be constant and unchangeable.
What does functional programming aim for?
Functional programming aims to separate data from behavior. It aims to keep data separate from the functions that work on it. In doing so, it results in functions that are pure and reusable.
Difference between call(), apply(), and bind()
Call is a method that calls a function with a given this value and arguments provided individually. Apply() is the same as call but accepts a single array of arguments instead of an argument list. Bind() takes in a this value and as many more parameters as we'd like to give it. However of calling the function immediately, bind returns a new function. The new function has the this value and the parameters already set and bound.
Why is it called a ternary expression?
Ternary expressions accepts three operators, the test condition, the then expression followed before ? and then : the else expression
What is AJAX?
Asynchronous Javascript and XML. Asynchronous means that the engine runs in an event loop. for example, setTimeOut, setInterval.
What are static methods in classes
They are placed directly on the class itself not on its prototype. An object created through the class (using new) cannot call a static method using dot notation). They can only be accessed through the name of the class itself.
Name some Array functions that are impure
Array.push, pop, and splice are impure
What are the 3 criterias for a function to be pure?
1. Does not affect anything outside its scope 2. Does not rely on anything outside its scope 3. Produces the same result for the same input every time
Difference between undefined and not defined
Undefined - Declared variable that is given a value during hoisting Not defined - Not declared and defined.
What is a closure?
when an inner function has access to it's parent scope variable
Why use "strict"?
Strict enables strict mode to entire scripts or individual functions. Advantages - makes it impossible to accidentally create global variables - requires that the function parameter be unique - this is undefined in global context
Explain hoisting
There is a preproccess or precompile in javascript runtime. and 'Hoisting' occur in the preproccess. Function declarations and variable declarations are always moved ("hoisted") invisibly to the top of their containing scope by the JavaScript interpreter. Variables get assign a hoisted value of undefined. Function declarations have the body hoisted while the function expressions only have the variable declaration hoisted.
What is event loop? What is the difference between call stack and task queue?
Event loop is a single-threaded loop that monitors the call stack and checks to see if there is work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and push onto the call stack to be executed.
What are pure functions?
Functions that don't affect anything in the outside scope.
Difference between: function Person(){}, var person = Person(), and var person = new Person()?
function Person(){} -> normal function declaration var person = Person() -> Invokes the Person function and NOT THE CONSTRUCTOR! var person = new Person() -> Creates a new instance of Person which inherits from Person.prototype.
Difference between null vs undefined vs undeclared
Undefined - A variable that has been declared but not assigned a value (HOISTING) Null - Explicitly assigning to the null value. It represents no value. Undeclared - When you assign a value to an identifier that is not previously created using var, let, or const.
Pros and cons of using Promises
Pros - gets rid of callback hell - make it easy to write sequential asynchronous code that is readable with .then() - makes it easy to write parallel asynchronous code with Promise.all() Cons - older browsers where ES2015 is not supported, you need a polyfill.
What are Promises?
An object that represents an eventual completion (or failure) of an asynchronous operation. const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve('foo'), 300) }); promise1.then(value => console.log(value); Great things about promises: - chaining with then() and catch() new Promise((resolve, reject) => { console.log("Initial"); resolve(); }); .then(() => console.log("Do something"); .catch(() => console.log("Do that"); .then(() => console.log("Do this after that");
Difference between == and ===
== compares only by value === compares by value and type
What is encapsulation?
Writing functions that hide data from someone who uses the function.
What does calling super in a subclass constructor do?
It calls the superclass's constructor function, binding the current instance of this to the superclass. If super is to be called, it must be called using this in the constructor.
How does extends work?
An object created by a subclass prototypically inherits from the super class.
Advantages of using ES6 sets over arrays
no duplicates
What is prototype chaining?
Each object has a private property which holds a link to another object called prototype. That prototype object has a prototype of its own and so on until an object is reached with null as its prototype.
What is a closure?
A closure refers to the lexical context a function was declared in and the variables it has access to.
Explain why the following doesn't work as an IIFE: function foo(){ }();
It doesn't work because when () is called there is no name specified. Solution: (function foo(){})()
How do arrow functions work with this?
Arrow functions get their this binding from their scope. If you used arrow functions, it ignores all 5 rules and receives the this value of its surrounding scope at the time its created.
Host Objects vs Native Objects
Native objects are objects that are part of the JavaScript language defined by ECMAScript specification (Math, String, RegEx, Object, Function, etc) Host objects are provided by the runtime environment (browser or Node), or window or XMLHTTPRequest
Unit testing vs E2E Testing vs Integration Testing
Unit testing (Unit tests take a small piece of the product and test that piece in isolation. Unit tests are fast, reliable, isolate failures) - Jest/Enyzme, Mocha/Chai, AVA/Type Integration Testing (takes a small group of units often 2 units and tests their behavior as a whole, verifying that they coherently work together.) - Karma E2E Testing (with e2e tests, you have to wait for the entire product to be built then to be deployed and finally for all the e2e tests to run, E2e are not fast, not reliable, but stimulates real user.) - Selenium, Cypress, Puppeteer, Cucumber.js, Nightwatch.js E2E testing allows us to cover sections of the application that unit tests and integration tests don't cover. Google recommends 70/20/10 70% unit tests, 20% integration tests, and 10% end-to-end tests.
What are callbacks?
Functions passed to other functions as parameters.
What are the 4 rules of this?
1. if the new keyword is used when calling the function, this inside the function is a brand new object created by the JavaScript engine. 2. If apply, call, or bind are used to call a function, this inside the function is the object that is passed in as the argument. 3. If a function is called as a method -- that is, if dot notation is used to invoke the function -- this is the object that the function is a property of. In other words, when a dot is to the left of a function invocation, this is the object to the left of the dot. 4. If a function is invoked as a free function invocation, meaning it was involved without any of the conditions present above, this is the global object. The window object. 5. If multiple of the above rules apply, the rule that higher wins and will the this value.
Explain how this works
The value of this depends on how the function is called. There are a set of rules that follow: 1. If the new keyword is used when calling the function, this inside the function is a brand new object 2. If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument. 3. If a function is called as a method, such as obj.method() - this is the object that the function is a property of 4. If the function is invoked as a free function invocation, this is the global object. In a browser, it is the windows object. If set in strict mode, this will be undefined. 5. Arrow functions apply lexical binding scope around this
Describe event bubbling.
When an event is triggered by a low-level element, the event bubbles up the DOM until it encounters an event handler. Required functionality for event delegation.
AMD vs CommonJS
AMD (Asynchronous Module Definition) - asynchronous - intended for browsers CommonJS - intended for server side
Explain the same-origin policy with regards to JavaScript.
The same-origin policy prevents JavaScript from making requests across domain boundaries.
What's a single page app (SPA)?
However, in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.
Section 2
(5 cards)