{"id":1767,"date":"2021-05-24T11:18:27","date_gmt":"2021-05-24T11:18:27","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1767"},"modified":"2021-05-24T11:18:27","modified_gmt":"2021-05-24T11:18:27","slug":"the-javascript-cheatsheet-you-need-in-2021","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1767","title":{"rendered":"The JavaScript Cheatsheet you need in 2021"},"content":{"rendered":"\n<p id=\"3fc7\">I&#8217;m pretty sure I&#8217;m not the only one who ran into some&nbsp;<em>uncomfortable&nbsp;<\/em>technical questions during an interview and felt like I knew&nbsp;<em>what was going on<\/em>&nbsp;but couldn&#8217;t really&nbsp;<strong>explain<\/strong>&nbsp;it.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p id=\"61ab\">I&#8217;ve been working on this summary of questions and concepts for a while now and selected the&nbsp;<strong>20<\/strong>&nbsp;most challenging ones. Enjoy!<\/p>\n\n\n\n<h2 id=\"344d\"><strong>What is the difference between Arrow and Regular Functions?<\/strong><\/h2>\n\n\n\n<ul><li><strong>This&nbsp;<\/strong>value (context): in a regular function, the value of&nbsp;<em>this<\/em>&nbsp;has nothing to do with the class on which it was defined; instead, it depends on the object that it was&nbsp;<strong><em>called upon<\/em><\/strong>; inside an arrow function&nbsp;<em>this&nbsp;<\/em>value always equals the&nbsp;<em>this&nbsp;<\/em>value from the outer function<\/li><li><strong>Constructors<\/strong>: regular functions can easily construct objects, while an arrow function cannot be used as a constructor<\/li><li><strong>Arguments<\/strong>&nbsp;object: is a special array-like object containing the list of arguments with which the function has been invoked, inside an arrow function the&nbsp;<em>arguments<\/em>&nbsp;object is resolved lexically: it accesses arguments from the outer function<\/li><li><strong>Implicit return<\/strong>: regular functions use the return expression statement \u2014 otherwise it will just return undefined, while with arrow functions, if they contain one expression and the function\u2019s curly braces are missing, then the expression is implicitly returned<\/li><li><a href=\"https:\/\/dmitripavlutin.com\/differences-between-arrow-and-regular-functions\/\">Read more<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"ff86\"><strong>How does&nbsp;<em>This<\/em>&nbsp;work?<\/strong><\/h2>\n\n\n\n<ul><li><strong><em>this<\/em><\/strong>&nbsp;keyword refers to an object, that object which is executing the current bit of javascript code<\/li><li>Every javascript function while executing has a reference to its current execution context, called&nbsp;<strong><em>this<\/em><\/strong>&nbsp;\u2014 execution context means here is how the function is called<\/li><li>To understand&nbsp;<strong><em>this<\/em><\/strong>&nbsp;keyword, only we need to know how, when and from where the function is called, does not matter how and where function is declared or defined<\/li><li><a href=\"https:\/\/codeburst.io\/all-about-this-and-new-keywords-in-javascript-38039f71780c\">Read more &amp; see examples<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"25d3\">What are&nbsp;<strong>callbacks and closures<\/strong>?<\/h2>\n\n\n\n<ul><li><strong>Callback<\/strong>: a function which is accessible by another function and invoked after the first function \u2014 if that first function completed<\/li><li><a href=\"https:\/\/www.freecodecamp.org\/news\/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them\/\">Read more<\/a>&nbsp;about callbacks<\/li><li><strong>Closure<\/strong>: are created whenever a variable that is defined outside the current scope is accessed from within some inner scope \u2014 it gives you access to an outer function\u2019s scope from an inner function<\/li><li>To use a closure, simply define a function inside another function and expose it<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Closures#:~:text=A%20closure%20is%20the%20combination,scope%20from%20an%20inner%20function.\">Read more<\/a>&nbsp;about closures<\/li><\/ul>\n\n\n\n<h2 id=\"dd66\">What is an&nbsp;<strong>Anonymous Function<\/strong>?<\/h2>\n\n\n\n<ul><li>A function that was declared without any function named identifier to refer to it \u2014 it is usually not accessible after its initial creation. These functions are created at run time<\/li><li><a href=\"https:\/\/www.javascripttutorial.net\/javascript-anonymous-functions\/\">Read more<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"19c1\">What are&nbsp;<strong>Higher-Order Functions<\/strong>?<\/h2>\n\n\n\n<ul><li>Functions that r<strong>eceive a function as an argument<\/strong>&nbsp;or&nbsp;<strong>return a function as output<\/strong><\/li><li>For example, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.<\/li><li><a href=\"https:\/\/blog.bitsrc.io\/understanding-higher-order-functions-in-javascript-75461803bad\">More here<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"d49b\">What is&nbsp;<strong>\u201cstrict\u201d mode<\/strong>&nbsp;in JS?<\/h2>\n\n\n\n<ul><li>Strict mode enables more rigorous error-checking in your code and makes debugging easier<\/li><li>You enable strict mode by adding \u201cuse strict\u201d; at the beginning of the file<\/li><li><a href=\"https:\/\/www.educative.io\/edpresso\/what-is-use-strict-in-javascript?utm_source=Google%20AdWords&amp;aid=5082902844932096&amp;utm_medium=cpc&amp;utm_campaign=kb-dynamic-edpresso&amp;gclid=CjwKCAjwoc_8BRAcEiwAzJevtZyt8ueI8zRKbsnF5_b0OYQXvsk4kA5GMACgxLhBfJQH-XNfPt_WmRoCC0wQAvD_BwE\">Read more<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"3e19\"><strong>Promises vs Async\/Await<\/strong>?<\/h2>\n\n\n\n<ul><li><strong>Scope<\/strong>: in a promise, only the promise chain is asynchronous \u2014 doesn\u2019t block the execution; with async\/await the entire wrapper function is asynchronous<\/li><li><strong>Logic<\/strong>: in a promise, synchronous work can be handled in the same callback, and multiple promises can be handled using Promise.all; with async\/await the synchronous work needs to be placed outside the callback, and multiple promises can be handled with more simple variables<\/li><li><strong>Error handling<\/strong>: Promises:<em>&nbsp;then, catch, finally<\/em>; Async\/await:&nbsp;<em>try, catch, finally<\/em><\/li><li><a href=\"https:\/\/levelup.gitconnected.com\/async-await-vs-promises-4fe98d11038f\">See examples here<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"1dd1\"><strong>Mutable<\/strong>&nbsp;vs&nbsp;<strong>Immutable<\/strong>&nbsp;in JS<\/h2>\n\n\n\n<ul><li>The difference between immutable and mutable: if an item is mutable, when changing the value of the reference variable it will also affect the value of the original referenced variable<\/li><li><strong>Primitive data types<\/strong>&nbsp;such as numbers, strings, and Booleans are&nbsp;<strong>immutable<\/strong>&nbsp;\u2014 it is impossible to change values of those types by changing the reference \u2014 you can combine them and derive new values from them, but when you assign a specific value, that value will always remain the same; you can make a variable name point to a new value, but the previous value is still held in memory<\/li><li><strong>Mutable<\/strong>&nbsp;is a type of variable that can be changed by its reference \u2014 in JS only&nbsp;<strong>objects and arrays<\/strong>&nbsp;are mutable: you can change their properties; for example: causing a single object value to have different content at different times<\/li><li><a href=\"https:\/\/gomakethings.com\/mutable-vs.-immutable-in-javascript\/\">Read more and see examples<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"f646\">What is a<strong>&nbsp;typed language<\/strong>?<\/h2>\n\n\n\n<ul><li>The values are associated with values and not with variables \u2014 it can be&nbsp;<em>static or dynamic<\/em><\/li><li><strong>Static<\/strong>: the variable can hold only one type, like in Java: a variable declared of string can take only a set of characters and nothing else<\/li><li><strong>Dynamic<\/strong>: the variable can hold multiple types \u2014 like in JS: a variable can take number, chars, etc<\/li><\/ul>\n\n\n\n<h2 id=\"778d\">What is&nbsp;<strong>hoisting<\/strong>?<\/h2>\n\n\n\n<ul><li>JavaScript\u2019s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function)<\/li><li>JavaScript only hoists&nbsp;<em>declarations<\/em>, not&nbsp;<em>initializations<\/em><\/li><\/ul>\n\n\n\n<h2 id=\"eece\">What is&nbsp;<strong>event delegation<\/strong>&nbsp;in JS?<\/h2>\n\n\n\n<ul><li>A simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements<\/li><li>Using event delegation it\u2019s possible to add an event handler to an element, wait for an event to bubble up from a child element and easily determine from which element the event originated<\/li><li><a href=\"https:\/\/www.sitepoint.com\/javascript-event-delegation-is-easier-than-you-think\/#:~:text=JavaScript%20event%20delegation%20is%20a,handlers%20to%20multiple%20child%20elements.\">Examples<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"42fa\">What is the difference between&nbsp;<strong>call<\/strong>,&nbsp;<strong>apply &amp; bind?<\/strong><\/h2>\n\n\n\n<ul><li>By using them you can explicitly determine what&nbsp;<strong>this<\/strong>&nbsp;should refer to<\/li><li><strong>bind<\/strong>&nbsp;can be particularly helpful when you want to use events to access properties of one class within another class<\/li><li>The main difference is that&nbsp;<strong>apply<\/strong>&nbsp;executes the function immediately, while&nbsp;<strong>bind<\/strong>&nbsp;returns a function<\/li><li><strong>call<\/strong>&nbsp;and&nbsp;<strong>apply<\/strong>&nbsp;are very similar \u2014 they invoke a function with a specified&nbsp;<em>this<\/em>&nbsp;context, and optional arguments<\/li><li>The difference is that&nbsp;<strong>call<\/strong>&nbsp;requires the arguments to be passed in one-by-one, and&nbsp;<strong>apply<\/strong>&nbsp;takes the arguments as an array<\/li><li><a href=\"https:\/\/www.taniarascia.com\/this-bind-call-apply-javascript\/\">Read more and see examples<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"9de1\">What is the difference between&nbsp;<strong>host&nbsp;<\/strong>and&nbsp;<strong>native objects<\/strong>?<\/h2>\n\n\n\n<ul><li>Objects can be divided into these two main categories, depending on the environment and language<\/li><li>Host objects: environment specific \u2014 ex. Browser supplies certain objects such as window, node supplies NodeList, etc.<\/li><li>Native \/ Built-in objects: standard objects provided by JS \u2014 sometimes referred to as global objects; JS is mainly constructed by these categorized native objects (String, Number, etc)<\/li><\/ul>\n\n\n\n<h2 id=\"4a01\">What is a&nbsp;<strong>curry function<\/strong>?<\/h2>\n\n\n\n<ul><li>Currying is a process in functional programming in which we can transform a function with multiple arguments into a sequence of nesting functions \u2014 it returns a new function that expects the next argument inline<\/li><li>Transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c )<\/li><li>It allows us to easily get partials, avoid passing the same variable multiple times<\/li><li>It creates nesting functions according to the number of the arguments of the function so each function receives an argument: if there is no argument, there is no currying.<\/li><li><a href=\"https:\/\/javascript.info\/currying-partials\">Read more<\/a><\/li><li><a href=\"https:\/\/dev.to\/suprabhasupi\/currying-in-javascript-1k3l\">Read more 2<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"1c7e\">What is the&nbsp;<strong>Event loop<\/strong>?<\/h2>\n\n\n\n<ul><li>In most browsers there is&nbsp;<strong>an event loop for every browser tab<\/strong>, to make every process isolated and avoid a web page with infinite loops or heavy processing to block your entire browser<\/li><li>The environment manages multiple concurrent event loops, to handle API calls<\/li><li><a href=\"https:\/\/flaviocopes.com\/web-workers\/\">Web Workers<\/a>&nbsp;run in their own event loop as well<\/li><li>You mainly need to be concerned that your code will run on a&nbsp;<strong>single event loop<\/strong>, and write code with this thing in mind to avoid blocking it<\/li><li>Any JavaScript code that takes too long to return back control to the event loop will&nbsp;<strong>block the execution<\/strong>&nbsp;of any JavaScript code in the page, even block the UI thread, and the user cannot click around, scroll the page, and so on<\/li><li><a href=\"https:\/\/flaviocopes.com\/javascript-event-loop\/#:~:text=The%20event%20loop%20continuously%20checks,executes%20each%20one%20in%20order.\">Read more<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"6b74\">What is&nbsp;<strong>Event propagation<\/strong>?<\/h2>\n\n\n\n<ul><li>Event propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it afterward<\/li><li>In modern browser event propagation proceeds in two phases:&nbsp;<strong>capturing<\/strong>, and&nbsp;<strong>bubbling<\/strong>&nbsp;phase<\/li><li><strong><em>Capturing<\/em><\/strong>: events propagate from the window down through the DOM tree to the target node \u2014 only works with event handlers registered with the&nbsp;<strong>addEventListener()<\/strong>&nbsp;method when the third argument is set to&nbsp;<strong>true<\/strong><\/li><li><strong><em>Bubbling<\/em><\/strong>: In this phase event propagates or bubbles back up the DOM tree, from the target element up to the window, visiting all of the ancestors of the target element one by one \u2014 supported in all browsers, and it works for all handlers, regardless of how they are registered e.g. using&nbsp;<strong>onclick<\/strong>&nbsp;or&nbsp;<strong>addEventListener()<\/strong><\/li><li><a href=\"https:\/\/www.tutorialrepublic.com\/javascript-tutorial\/javascript-event-propagation.php#:~:text=Event%20propagation%20is%20a%20mechanism,what%20happens%20to%20it%20afterward.\">Read more<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"98a6\">What is the difference between Cookies, Local Storage and Session Storage?<\/h2>\n\n\n\n<ul><li>Browser&nbsp;<strong>storage<\/strong>: data is never transferred to the server &amp; can only be read on client-side; storage limit is about 5MB<\/li><li><strong>Session vs local storage<\/strong>: session is only temporary \u2014 data is stored until tab\/browser is closed; local doesn\u2019t have an expiration date<\/li><li>Cons for storage: not secure, limited to strings, danger for XSS<\/li><li><strong>Cookie<\/strong>: stores data with expiration date, storage limit about 4KB, is sent to the server for each request, read\/write on both client &amp; server side (if HttpOnly then it is inaccessible to client-side scripts)<\/li><\/ul>\n\n\n\n<h2 id=\"37d7\">What is&nbsp;<strong>Content Security Policy (CSP)<\/strong>?<\/h2>\n\n\n\n<ul><li><mark>Content Security Policy (CSP) is an&nbsp;<\/mark><mark><strong>HTTP header<\/strong><\/mark><mark>&nbsp;that allows site operators fine-grained control over where resources on their site can be loaded from.<\/mark><\/li><li>The use of this header is the best method to prevent cross-site scripting (XSS) vulnerabilities.<\/li><li>Due to the difficulty in retrofitting CSP into existing websites, CSP is&nbsp;<strong>mandatory<\/strong>&nbsp;for all new websites and is strongly recommended for all existing high-risk sites.<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CSP\">Read more<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"ae27\">What is&nbsp;<strong>Cross-Site Scripting (XSS)<\/strong>?<\/h2>\n\n\n\n<ul><li>Cross-Site Scripting (XSS) is an&nbsp;<strong>attack<\/strong>&nbsp;that occurs when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user<\/li><li>The page provided by the server when someone requests it is unaltered; instead, an XSS attack exploits a&nbsp;<strong>weakness<\/strong>&nbsp;in a page that include a variable submitted in a request to show up in raw form in the response<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Types_of_attacks#Cross-site_scripting_XSS\">Read more about attacks<\/a><\/li><\/ul>\n\n\n\n<h2 id=\"95dd\">What is&nbsp;<strong>CORS (Cross-Origin Resource Sharing)<\/strong>?<\/h2>\n\n\n\n<ul><li><strong>Cross-Origin Resource Sharing<\/strong>&nbsp;(<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CORS\">CORS<\/a>) is a&nbsp;<strong>mechanism<\/strong>&nbsp;that uses additional&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/HTTP\">HTTP<\/a>&nbsp;headers to tell browsers to give a web application running at one&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/origin\">origin<\/a>, access to selected resources from a different origin<\/li><li>A web application executes a cross-origin HTTP request when it requests a resource that has a different&nbsp;<strong>origin<\/strong>&nbsp;(domain, protocol, or port) from its own<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CORS\">Read more<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m pretty sure I&#8217;m not the only one who ran into some&nbsp;uncomfortable&nbsp;technical questions during an interview and felt like I knew&nbsp;what was going on&nbsp;but couldn&#8217;t really&nbsp;explain&nbsp;it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[95],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1767"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1767"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1767\/revisions"}],"predecessor-version":[{"id":1768,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1767\/revisions\/1768"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}