├── .gitignore ├── LICENSE ├── README.md ├── async ├── README.md ├── async-console-log-order.js ├── bookshelf.md ├── live-coding.md └── questions.md ├── base ├── README.md ├── bookshelf.md └── questions.md ├── package-lock.json ├── package.json ├── proto-types ├── README.md ├── array-prototype-methods.js ├── bookshelf.md ├── coercions.js ├── hoisting.js ├── live-coding.md ├── properties.js ├── questions.md └── rotate-matrix-90-degrees.js ├── react ├── README.md ├── bookshelf.md ├── current-time.jsx ├── live-coding.md ├── optimization.jsx ├── questions.md └── use-effect-ordering.jsx ├── this-function ├── README.md ├── block-scope.js ├── bookshelf.md ├── live-coding.md ├── questions.md ├── recursion-and-currying.js ├── this-and-prototype.js └── your-event-emitter.js └── web-apis ├── README.md ├── bookshelf.md └── questions.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **/*.swp 3 | **/*.swo 4 | **/*.owp 5 | **/.DS_Store 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Alexander Olenev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

12 | -------------------------------------------------------------------------------- /async/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Ultimate JavaScript: Async 🪗 4 | 5 | **Let's dive into asynchrony.** 6 | 7 | [Bookshelf 📚](./bookshelf.md) | [Questions 🤔](./questions.md) | [Live Coding 🧑🏼‍💻](live-coding.md) 8 | 9 |

10 | -------------------------------------------------------------------------------- /async/async-console-log-order.js: -------------------------------------------------------------------------------- 1 | // In what order will the numbers be displayed? 2 | 3 | console.log(1); 4 | 5 | setTimeout(() => { 6 | console.log(2); 7 | }, 100); 8 | 9 | setImmediate(() => { 10 | console.log(3); 11 | }); 12 | 13 | const promise = new Promise((resolve) => { 14 | console.log(4); 15 | 16 | resolve(5); 17 | }); 18 | 19 | queueMicrotask(() => { 20 | console.log(6); 21 | }); 22 | 23 | promise 24 | .then((result) => { 25 | console.log(result); 26 | 27 | return 7; 28 | }) 29 | .then((result) => { 30 | console.log(result); 31 | 32 | setTimeout(() => { 33 | throw new Error(8); 34 | }); 35 | 36 | return Promise.resolve(9); 37 | }) 38 | .then((result) => { 39 | console.log(result); 40 | }) 41 | .catch((result) => { 42 | console.log(result); 43 | }); 44 | 45 | promise 46 | .then((result) => { 47 | return new Promise(() => { 48 | console.log("1" + result); 49 | 50 | throw new Error(10); 51 | }); 52 | }) 53 | .catch((result) => { 54 | console.log(result.message); 55 | }); 56 | 57 | process.on("uncaughtException", (err) => { 58 | console.log(err.message); 59 | }); 60 | -------------------------------------------------------------------------------- /async/bookshelf.md: -------------------------------------------------------------------------------- 1 | # Bookshelf 📚 2 | 3 | - [Promises, Callbacks, Async/Await](https://javascript.info/async) 4 | - [Event Loop Timers and NextTick](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/) 5 | - [setTimeout in Depth](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) 6 | - [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 7 | - [Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261) 8 | - [Tasks, Microtasks, Queues and Schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 9 | - [In-depth: Microtasks and the JavaScript Runtime Environment](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth) 10 | - [Event Loop: Microtasks and Macrotasks](https://javascript.info/event-loop) 11 | - [What the Heck is The Event Loop Anyway? | Philip Roberts | JSConf EU](https://youtu.be/8aGhZQkoFbQ) 12 | - [setImmediate() vs nextTick() vs setTimeout(fn,0) - in Depth Explanation](https://www.voidcanvas.com/setimmediate-vs-nexttick-vs-settimeout/) 13 | - [Using requestIdleCallback](https://developer.chrome.com/blog/using-requestidlecallback/) 14 | - [JavaScript: заметка о requestAnimationFrame и requestIdleCallback](https://habr.com/ru/companies/timeweb/articles/587908/) 15 | - [Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite](https://habr.com/ru/articles/517594/) 16 | - [Scheduler.postTask()](https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/postTask) 17 | - [Задачи на собеседованиях. Event loop. JS](https://habr.com/ru/post/681882/) 18 | - [Iterators and Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) 19 | - [AsyncIterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator) 20 | - [Lazy Evaluation in JavaScript with Generators, Map, Filter, and Reduce](https://dev.to/nestedsoftware/lazy-evaluation-in-javascript-with-generators-map-filter-and-reduce--36h5) 21 | - [Полное Понимание Асинхронности в Браузере](https://habr.com/ru/company/yandex/blog/718084/) 22 | - [The Power of JS Generators by Anjana Vakil](https://www.youtube.com/watch?v=gu3FfmgkwUc) 23 | - [try, catch, finally](https://learn.javascript.ru/try-catch) 24 | - [AbortController](https://developer.mozilla.org/ru/docs/Web/API/AbortController) 25 | - [How to Cancel Promise with AbortController](https://leanylabs.com/blog/cancel-promise-abortcontroller) 26 | - [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) 27 | - [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) 28 | - [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) 29 | - [Простое объяснение, что такое Webworkeр-ы в JS и как с ними работать](https://badtry.net/prostoie-obiasnieniie-chto-takoie-webworke-y-v-js-i-kak-s-nimi-rabotat-web-worker-js-example/) 30 | - [Getting started with Progressive Web Apps](https://developer.chrome.com/blog/getting-started-pwa/) 31 | -------------------------------------------------------------------------------- /async/live-coding.md: -------------------------------------------------------------------------------- 1 | # Live Coding 🧑🏼‍💻 2 | 3 | - [In what order will the numbers be displayed?](./async-console-log-order.js) 4 | - [Write down your own throttle function](https://lodash.com/docs/4.17.15#throttle) 5 | -------------------------------------------------------------------------------- /async/questions.md: -------------------------------------------------------------------------------- 1 | # Questions 🤔 2 | 3 | - What is an event loop? Why can it fill up? 4 | - What are macro- and microtasks? In what order are they called? Is it possible to schedule the execution of macro- and microtasks manually? 5 | - Explain the difference between synchronous and asynchronous functions. 6 | - What is the difference between `setImmediate`, `setTimeout`, `requestAnimationFrame`, `requestIdleCallback`, `queueMicrotask`? Can you give use cases for each? 7 | - Why are async/await and promises better than callbacks? 8 | - What are the promise prototype methods? 9 | - What is the extent of your experience with Promises and/or their polyfills? 10 | - How to handle errors during asynchronous work? 11 | - Can a web application be multi-threaded? If so, how? In what cases is it necessary? 12 | - What APIs does WebWorker have access to? 13 | - Generators and iterators. What are they needed for? 14 | - `for await...of` vs. `Promise.all` vs. `Promise.allSettled` 15 | - When do we need lazy collections? What options do we have to implement them in JavaScript? 16 | - The difference between multithreading and asynchrony. 17 | - What can't a PWA exist without? 18 | -------------------------------------------------------------------------------- /base/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Ultimate JavaScript: Base 🏋🏼 4 | 5 | **Let's learn how the base of web technologies works!** 6 | 7 | [Bookshelf 📚](./bookshelf.md) | [Questions 🤔](./questions.md) 8 | 9 |

10 | -------------------------------------------------------------------------------- /base/bookshelf.md: -------------------------------------------------------------------------------- 1 | # Bookshelf 📚 2 | 3 | - [Understanding DNS Сache](https://www.catchpoint.com/blog/dns-cache) 4 | - [TTL](https://en.wikipedia.org/wiki/Time_to_live) 5 | - [The Best Guide To Understand What Is TCP/IP Model](https://www.simplilearn.com/tutorials/cyber-security-tutorial/what-is-tcp-ip-model) 6 | - [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https) 7 | - [How HTTPS Works](https://howhttps.works/) 8 | - [Как HTTPS обеспечивает безопасность соединения: что должен знать каждый Web-разработчик](https://habr.com/ru/articles/188042/) 9 | - [Introduction to HTTP/2](https://web.dev/performance-http2) 10 | - [A Comprehensive Guide To HTTP/2 Server Push](https://www.smashingmagazine.com/2017/04/guide-http2-server-push) 11 | - [What is HTTP/3?](https://www.cloudflare.com/en-gb/learning/performance/what-is-http3/) 12 | - [HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1) 13 | - [WebSockets vs. Server-Sent Events](https://blog.bitsrc.io/websockets-vs-server-sent-events-968659ab0870) 14 | - [Local and Session Storage](https://tutorial.techaltum.com/local-and-session-storage.html) 15 | - [Using HTTP Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) 16 | - [Cookie Size Limits](https://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key) 17 | - [SameSite Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite) 18 | - [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) 19 | - [Preflight Request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) 20 | - [JSONP](https://en.wikipedia.org/wiki/JSONP) 21 | - [What Is an Idempotent API?](https://blog.hubspot.com/website/idempotent-api) 22 | - [RESTful API](https://www.techtarget.com/searchapparchitecture/definition/RESTful-API) 23 | - [Fetch API Request Mode](https://developer.mozilla.org/en-US/docs/Web/API/Request/mode) 24 | - [Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies](https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies) 25 | - [How the Browser Renders a Web Page?](https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969) 26 | - [Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite](https://habr.com/ru/post/517594/) 27 | - [Window: DOMContentLoaded Event](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) 28 | - [Window: Load Event](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) 29 | - [Three JavaScript Articles and One Best Practice](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html) 30 | - [Window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 31 | - [Scripts: Async, Defer](https://javascript.info/script-async-defer) 32 | - [A Deep Dive into Just-In-Time Compilation in V8 JavaScript Engine](https://www.technologyies.com/a-deep-dive-into-just-in-time-compilation-in-v8-javascript-engine/) 33 | - [Faster Page Loads Using Server Think-Time with Early Hints](https://developer.chrome.com/blog/early-hints) 34 | - [Preload, Preconnect, Prefetch: Improve Your Site's Performance with Resource Hints](https://nitropack.io/blog/post/resource-hints-performance-optimization) 35 | - [How to Create High-Performance CSS Animations](https://web.dev/animations-guide) 36 | - [Where To Include JS & CSS In The HTML Page And Why?](https://softauthor.com/where-to-include-js-css-in-the-html-page-and-why/) 37 | - [Eliminate render-blocking resources](https://developer.chrome.com/en/docs/lighthouse/performance/render-blocking-resources/) 38 | - [Render Blocking CSS](https://web.dev/critical-rendering-path-render-blocking-css/) 39 | - [How do browsers read and interpret CSS?](https://stackoverflow.com/questions/3527800/how-do-browsers-read-and-interpret-css) 40 | - [Web Vitals](https://web.dev/vitals/) 41 | - [What are the main CDN benefits?](https://www.cloudflare.com/en-gb/learning/cdn/cdn-benefits/) 42 | -------------------------------------------------------------------------------- /base/questions.md: -------------------------------------------------------------------------------- 1 | # Questions 🤔 2 | 3 | - Difference between UDP and TCP? 4 | - A user opens [yandex.ru](https://yandex.ru/). What happens before the user sees anything on the page? 5 | - How can we speed up page loading? The more said, the better! 6 | - When would you use `document.write()`? 7 | - Difference between document `load` event and document `DOMContentLoaded` event? 8 | - What are Cookies? How do they work with HttpOnly, Secure and SameSite attributes? 9 | - Describe the difference between a cookie, sessionStorage and localStorage. 10 | - Why is CORS needed? 11 | - What are preflight requests? What headers do they send with CORS? 12 | - Why JSONP appeared? 13 | - What is Certificate Authority? 14 | - Can you simply describe the Diffie-Hellman algorithm? 15 | - Can you name differences between request modes of Fetch API? 16 | - Why is Server-Sent Events cooler than Websockets — and vice versa? 17 | - Difference between GET, PUT, POST, PATCH, DELETE methods. What is RESTful? 18 | - Which HTTP methods are idempotent? 19 | - How to code optimized animation? 20 | - Could you give animation use cases via JavaScript? 21 | - What problems do CDNs solve? 22 | - What Web Vitals are used for? 23 | - A user comes over saying that the page on his device `loads slowly`? What do you think your strategy might be to identify the problem? Could you describe your investigation process? 24 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ultimate-javascript", 3 | "version": "1.2.1", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "ultimate-javascript", 9 | "version": "1.2.1", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "prettier": "2.8.3" 13 | } 14 | }, 15 | "node_modules/prettier": { 16 | "version": "2.8.3", 17 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz", 18 | "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==", 19 | "dev": true, 20 | "bin": { 21 | "prettier": "bin-prettier.js" 22 | }, 23 | "engines": { 24 | "node": ">=10.13.0" 25 | }, 26 | "funding": { 27 | "url": "https://github.com/prettier/prettier?sponsor=1" 28 | } 29 | } 30 | }, 31 | "dependencies": { 32 | "prettier": { 33 | "version": "2.8.3", 34 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz", 35 | "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==", 36 | "dev": true 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ultimate-javascript", 3 | "version": "1.2.1", 4 | "description": "Ultimate Preparation Guide for the JavaScript Interview 🌟", 5 | "main": "README.md", 6 | "type": "module", 7 | "scripts": { 8 | "lint": "npx prettier --check ./ --ignore-unknown", 9 | "lint:fix": "npx prettier --write ./" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/aolenevme/ultimate-javascript.git" 14 | }, 15 | "keywords": [ 16 | "javascript", 17 | "prototype", 18 | "frontend", 19 | "backend", 20 | "async", 21 | "rendering", 22 | "this", 23 | "interview", 24 | "interview-practice", 25 | "interview-questions", 26 | "interview-preparation", 27 | "ultimate-javascript" 28 | ], 29 | "author": "Alexander Olenev ", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/aolenevme/ultimate-javascript/issues" 33 | }, 34 | "homepage": "https://github.com/aolenevme/ultimate-javascript#readme", 35 | "devDependencies": { 36 | "prettier": "2.8.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /proto-types/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Ultimate JavaScript: ProtoTypes 😎 4 | 5 | **Discover types, collections, and prototypes.** 6 | 7 | [Bookshelf 📚](./bookshelf.md) | [Questions 🤔](./questions.md) | [Live Coding 🧑🏼‍💻](live-coding.md) 8 | 9 |

10 | -------------------------------------------------------------------------------- /proto-types/array-prototype-methods.js: -------------------------------------------------------------------------------- 1 | import assert from "node:assert/strict"; 2 | 3 | // Implement logic to pass the test. 4 | 5 | const rawArray = [ 6 | 1, 7 | 2, 8 | 3, 9 | 0, 10 | null, 11 | undefined, 12 | NaN, 13 | {}, 14 | true, 15 | false, 16 | 1e7, 17 | "", 18 | "true", 19 | Symbol("a"), 20 | BigInt("1"), 21 | ]; 22 | 23 | const filterMap = (array) => { 24 | const filtered = array.filter(() => { 25 | // Implement the correct filter logic. 26 | return true; 27 | }); 28 | 29 | const mapped = filtered.map((current) => { 30 | // Implement the correct map logic. 31 | return current; 32 | }); 33 | 34 | return mapped; 35 | }; 36 | 37 | const reduce = (array) => { 38 | const reduced = array.reduce((accumulator) => { 39 | // Implement the correct reduce logic. 40 | return accumulator; 41 | }, []); 42 | 43 | return reduced; 44 | }; 45 | 46 | const result = ["one", "two", "three", "{} is an object", "true", "BigInt 1"]; 47 | 48 | assert.deepEqual(filterMap(rawArray), result); 49 | assert.deepEqual(reduce(rawArray), result); 50 | -------------------------------------------------------------------------------- /proto-types/bookshelf.md: -------------------------------------------------------------------------------- 1 | # Bookshelf 📚 2 | 3 | - [Data Types](https://javascript.info/data-types) 4 | - [JavaScript Data Types and Data Structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) 5 | - [Constructor, Operator "new"](https://javascript.info/constructor-new) 6 | - [Arrow Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 7 | - [Prototypes, Inheritance](https://javascript.info/prototypes) 8 | - [The Strict Equality Comparison Algorithm](https://262.ecma-international.org/5.1/#sec-11.9.6) 9 | - [The Abstract Equality Comparison Algorithm](https://262.ecma-international.org/5.1/#sec-11.9.3) 10 | - [Equality (==)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) 11 | - [JavaScript Type Coercion Explained](https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839) 12 | - [Understanding Hoisting in JavaScript](https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript) 13 | - [JavaScript Immutability – Frozen Objects in JS Explained with Examples](https://www.freecodecamp.org/news/javascript-immutability-frozen-objects-with-examples) 14 | -------------------------------------------------------------------------------- /proto-types/coercions.js: -------------------------------------------------------------------------------- 1 | // What will be printed? 2 | 3 | Object.prototype.toString = () => { 4 | throw new TypeError("Heh :)"); 5 | }; 6 | 7 | console.log(0 + "1"); 8 | console.log(0 - "1"); 9 | console.log(0 * "1"); 10 | console.log(0 / "1"); 11 | console.log(true + "1"); 12 | console.log(true + 1); 13 | console.log(undefined || 1); 14 | console.log(undefined && 1); 15 | console.log(undefined ?? 1); 16 | console.log(0 ?? 1); 17 | console.log(Number.isNaN(+" 0001 ")); 18 | console.log(Number.isNaN(+" 0001_")); 19 | console.log(+" 0001 " === NaN); 20 | console.log(+0 === -0); 21 | console.log(Object.is(+0, -0)); 22 | console.log(null === undefined); 23 | console.log(null === null); 24 | console.log(undefined == undefined); 25 | console.log(Symbol("1") === Symbol("1")); 26 | console.log({ a: 1 } === { a: 1 }); 27 | console.log({ a: 1 } == { a: 1 }); 28 | console.log({} === {}); 29 | console.log({} === 1); 30 | console.log({} == 1); 31 | -------------------------------------------------------------------------------- /proto-types/hoisting.js: -------------------------------------------------------------------------------- 1 | // What will be printed? 2 | 3 | console.log(x); 4 | var x = 10; 5 | 6 | console.log(y); 7 | let y = "hello"; 8 | 9 | console.log(z); 10 | const z = true; 11 | 12 | const example = () => { 13 | console.log(a); 14 | var a = [1, 2, 3]; 15 | 16 | console.log(b); 17 | let b = { foo: "bar" }; 18 | }; 19 | 20 | class Person { 21 | constructor(name) { 22 | console.log(this); 23 | this.name = name; 24 | } 25 | } 26 | 27 | example(); 28 | const john = new Person("John"); 29 | -------------------------------------------------------------------------------- /proto-types/live-coding.md: -------------------------------------------------------------------------------- 1 | # Live Coding 🧑🏼‍💻 2 | 3 | - [Type coercions](./coercions.js) 4 | - [Array prototype methods](./array-prototype-methods.js) 5 | - [Prototype inheritance and properties' definition](./properties.js) 6 | - [Hoisting](./hoisting.js) 7 | - [Rotate Matrix 90 Degrees](./rotate-matrix-90-degrees.js) 8 | -------------------------------------------------------------------------------- /proto-types/properties.js: -------------------------------------------------------------------------------- 1 | import assert from "node:assert/strict"; 2 | 3 | // Extend Rabbit and configure its properties to pass the test. 4 | 5 | const Animal = { 6 | animal1: 1, 7 | animal2: 2, 8 | animal3: 3, 9 | }; 10 | 11 | const Rabbit = { 12 | rabbit1: 1, 13 | rabbit2: 2, 14 | rabbit3: 3, 15 | }; 16 | 17 | // Write your code here. 18 | 19 | const keys = []; 20 | for (const key in Rabbit) { 21 | keys.push(key); 22 | } 23 | 24 | const result = ["rabbit1", "rabbit3", "animal1", "animal3"]; 25 | 26 | assert.deepEqual(keys, result); 27 | -------------------------------------------------------------------------------- /proto-types/questions.md: -------------------------------------------------------------------------------- 1 | # Questions 🤔 2 | 3 | - List all data types. List all embedded collections and a couple of their prototype methods each. 4 | - What are explicit and implicit type coercions? Give at least one example of the former and the latter. 5 | - If we want to disallow `Object` to primitive type conversion, which prototype methods do we need to override? 6 | - The difference between `var` vs. `let` vs. `const`. 7 | - `WeakMap` vs. `Map` and `WeakSet` vs. `Set`. 8 | - `Array.prototype.forEach` vs. `for (;;)`. Which of these is more flexible? 9 | - Is multiple inheritance possible in JavaScript and why? 10 | - What is prototype contamination? 11 | - Why is the `new` operator needed? How does it work? When does it not work? 12 | - What is a polyfill? And why might it be needed? 13 | - What is immutability? What are some native ways to make data in JavaScript immutable? 14 | - `shift`, `unshift`, `push`, `pop`. Divide into two parts: fastest and slowest procedures. And why? 15 | -------------------------------------------------------------------------------- /proto-types/rotate-matrix-90-degrees.js: -------------------------------------------------------------------------------- 1 | import assert from "node:assert/strict"; 2 | 3 | // Rotate the matrix 90 degrees. 4 | 5 | const arr = [ 6 | [1, 2, 3, 4], 7 | [5, 6, 7, 8], 8 | [9, 10, 11, 12], 9 | [13, 14, 15, 16], 10 | ]; 11 | 12 | function rotate90(matrix) { 13 | // Write your code here. 14 | } 15 | 16 | const rotatedMatrix = [ 17 | [13, 9, 5, 1], 18 | [14, 10, 6, 2], 19 | [15, 11, 7, 3], 20 | [16, 12, 8, 4], 21 | ]; 22 | 23 | assert.deepEqual(rotate90(arr), rotatedMatrix); 24 | -------------------------------------------------------------------------------- /react/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Ultimate JavaScript: React ☢️ 4 | 5 | **The hyped way to make web applications.** 6 | 7 | [Bookshelf 📚](./bookshelf.md) | [Questions 🤔](./questions.md) | [Live Coding 🧑🏼‍💻](live-coding.md) 8 | 9 |

10 | -------------------------------------------------------------------------------- /react/bookshelf.md: -------------------------------------------------------------------------------- 1 | # Bookshelf 📚 2 | 3 | - [React Docs](https://react.dev) 4 | - [React v18.0](https://reactjs.org/blog/2022/03/29/react-v18.html) 5 | - [Introducing the New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 6 | - [useEffect vs useLayoutEffect](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect) 7 | - [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback) 8 | - [Exhaustive Dependencies](https://github.com/facebook/react/issues/14920) 9 | - [The Complete Guide to useRef() and Refs in React](https://dmitripavlutin.com/react-useref-guide) 10 | - [What is the Virtual DOM in React?](https://blog.logrocket.com/virtual-dom-react) 11 | - [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture) 12 | - [React Batching](https://www.robinwieruch.de/react-batching) 13 | - [React Lifecycle Methods Diagram](https://github.com/wojtekmaj/react-lifecycle-methods-diagram) 14 | - [Replacing Component Lifecycle Methods with React Hooks](https://blog.carbonfive.com/replacing-component-lifecycle-methods-with-react-hooks) 15 | - [Getting Started with React SyntheticEvent](https://blog.logrocket.com/getting-started-react-synthetic-event) 16 | - [React Context API: A Deep Dive with Examples](https://blog.logrocket.com/react-context-api-deep-dive-examples) 17 | - [React Dev Tools — Debug Like a Ninja](https://medium.com/the-thinkmill/react-dev-tools-debug-like-a-ninja-c3a5d09895c6) 18 | - [React Anti-Patterns and Best Practices - Do's and Don'ts](https://www.perssondennis.com/articles/react-anti-patterns-and-best-practices-dos-and-donts) 19 | - [Render Props Pattern](https://www.patterns.dev/posts/render-props-pattern) 20 | - [Investigate Accessibility Checks](https://github.com/gajus/eslint-config-canonical/blob/main/configurations/jsx-a11y.js) 21 | - [Investigate Quality Checks](https://github.com/gajus/eslint-config-canonical/blob/main/configurations/react.js) 22 | -------------------------------------------------------------------------------- /react/current-time.jsx: -------------------------------------------------------------------------------- 1 | // Show current time every second. 2 | 3 | import React from "react"; 4 | 5 | export default function Component() { 6 | // Write your code here. 7 | 8 | return

{"Print current time here."}

; 9 | } 10 | -------------------------------------------------------------------------------- /react/live-coding.md: -------------------------------------------------------------------------------- 1 | # Live Coding 🧑🏼‍💻 2 | 3 | - [What will be printed at the mount and after the button click? In what order and why?](./use-effect-ordering.jsx) 4 | - [Suggest at least two ways to optimize the rendering after the clicking.](./optimization.jsx) 5 | - [Show current time every second.](./current-time.jsx) 6 | -------------------------------------------------------------------------------- /react/optimization.jsx: -------------------------------------------------------------------------------- 1 | // Suggest all possible ways to optimize the . 2 | 3 | import React, { useState } from "react"; 4 | 5 | function getCounter(shouldIncrement) { 6 | let counter = 0; 7 | 8 | if (shouldIncrement) { 9 | while (counter < Number.MAX_SAFE_INTEGER) { 10 | counter++; 11 | } 12 | } else { 13 | while (counter > Number.MIN_SAFE_INTEGER) { 14 | counter--; 15 | } 16 | } 17 | 18 | return counter; 19 | } 20 | 21 | function Text({ veryGreedyValue }) { 22 | return

{veryGreedyValue}

; 23 | } 24 | 25 | export default function Component() { 26 | const [shouldIncrement, setShouldIncrement] = useState(true); 27 | 28 | return ( 29 | <> 30 | 37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /react/questions.md: -------------------------------------------------------------------------------- 1 | # Questions 🤔 2 | 3 | - Strongly suggest using [this list of regularly updated questions](https://github.com/YauhenKavalchuk/interview-questions/blob/main/questions/react.md) as a base. Translate them from Russian to your native language. 4 | -------------------------------------------------------------------------------- /react/use-effect-ordering.jsx: -------------------------------------------------------------------------------- 1 | // What will be printed at the mount and after the button click? In what order and why? 2 | 3 | import React, { useEffect, useState } from "react"; 4 | 5 | function Component3() { 6 | useEffect(() => { 7 | console.log(" inited"); 8 | 9 | return () => { 10 | console.log(" destroyed"); 11 | }; 12 | }, []); 13 | 14 | return <>; 15 | } 16 | 17 | function Component2() { 18 | useEffect(() => { 19 | console.log(" inited"); 20 | 21 | return () => { 22 | console.log(" destroyed"); 23 | }; 24 | }, []); 25 | 26 | return ( 27 | <> 28 | 29 | 30 | ); 31 | } 32 | 33 | export default function Component1() { 34 | const [key, setKey] = useState(0); 35 | 36 | useEffect(() => { 37 | console.log(" inited"); 38 | }, []); 39 | 40 | return ( 41 | <> 42 | 49 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /this-function/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Ultimate JavaScript: This Function 🫦 4 | 5 | **Learn how this functions.** 6 | 7 | [Bookshelf 📚](./bookshelf.md) | [Questions 🤔](./questions.md) | [Live Coding 🧑🏼‍💻](live-coding.md) 8 | 9 |

10 | -------------------------------------------------------------------------------- /this-function/block-scope.js: -------------------------------------------------------------------------------- 1 | // Fix the code to print every help text. 2 | 3 | function print() { 4 | var texts = [ 5 | { id: "email", help: "Your email address" }, 6 | { id: "name", help: "Your full name" }, 7 | { id: "age", help: "Your age (you must be over 16)" }, 8 | ]; 9 | 10 | for (var i = 0; i < texts.length; i++) { 11 | var item = texts[i]; 12 | 13 | setImmediate(() => { 14 | console.log(item.help); 15 | }); 16 | } 17 | } 18 | 19 | print(); 20 | -------------------------------------------------------------------------------- /this-function/bookshelf.md: -------------------------------------------------------------------------------- 1 | # Bookshelf 📚 2 | 3 | - [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 4 | - [Immediately Invoked Function Expressions (IIFEs) Explained](https://nataliecardot.medium.com/immediately-invoked-function-expressions-iifes-explained-501baf835396) 5 | - [Everything You Need to Know About the JavaScript Scope](https://medium.com/swlh/everything-you-need-to-know-about-the-javascript-scope-f81cbffa9491) 6 | - [Scope in JavaScript: Function, Block, Lexical, Global](https://devdojo.com/rahulism/scope-in-javascript-function-block-lexical-global) 7 | - [Arrow Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 8 | - [This](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) 9 | - [Advanced Working with Functions](https://javascript.info/advanced-functions) 10 | - [Demystifying Tail Call Optimization](https://dev.to/rohit/demystifying-tail-call-optimization-5bf3) 11 | - [Currying](https://javascript.info/currying-partials) 12 | - [Partial Function Application in JavaScript and Flow](https://medium.com/@jnkrtech/partial-function-application-in-javascript-and-flow-7f3ca87074fe) 13 | - [Lazy Evaluation in JavaScript](https://itnext.io/lazy-evaluation-in-javascript-62b8ec45e0f6) 14 | - [Understanding Higher-Order Functions in JavaScript](https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad) 15 | - [Mostly Adequate Guide to FP in Javascript](https://github.com/MostlyAdequate/mostly-adequate-guide) 16 | -------------------------------------------------------------------------------- /this-function/live-coding.md: -------------------------------------------------------------------------------- 1 | # Live Coding 🧑🏼‍💻 2 | 3 | - [Block Scope](./block-scope.js) 4 | - [This and Prototype](./this-and-prototype.js) 5 | - [Recursion and Currying](./recursion-and-currying.js) 6 | - [Your Event Emitter](./your-event-emitter.js) 7 | -------------------------------------------------------------------------------- /this-function/questions.md: -------------------------------------------------------------------------------- 1 | # Questions 🤔 2 | 3 | - What is the difference between lexical and function scopes? 4 | - How to create a function scope immediately? 5 | - What is `this`? 6 | - What is the context losing? Can you give an example? How can we fix the context? 7 | - How do `.bind`, `.call`, and `.apply` work? Can you give several use cases? 8 | - What is the difference between a function expression and an arrow function? When we cannot use arrow functions? 9 | - How does `this` work within arrow functions? Can you give several examples? 10 | - What is currying? 11 | -------------------------------------------------------------------------------- /this-function/recursion-and-currying.js: -------------------------------------------------------------------------------- 1 | import assert from "node:assert/strict"; 2 | 3 | // Implement the function to pass the test. 4 | 5 | const add = (number) => { 6 | // Write the code only here. 7 | 8 | return number; 9 | }; 10 | 11 | assert.deepEqual(add(1)(2)(3)(4)(5)(6)(7)(8)(9)(), 45); 12 | assert.deepEqual(add(9)(), 9); 13 | -------------------------------------------------------------------------------- /this-function/this-and-prototype.js: -------------------------------------------------------------------------------- 1 | // What will be printed? 2 | 3 | const parent = { 4 | a: 10, 5 | b: 40, 6 | f: function () { 7 | return this.a + this.b; 8 | }, 9 | }; 10 | 11 | const child = Object.create(parent); 12 | 13 | child.a = 1; 14 | child.b = 4; 15 | 16 | console.log(child.f()); 17 | -------------------------------------------------------------------------------- /this-function/your-event-emitter.js: -------------------------------------------------------------------------------- 1 | import assert from "node:assert/strict"; 2 | 3 | // EventEmitter is a grate pattern to decouple the code. 4 | // Implement YourEventEmitter to pass the tests down below. 5 | 6 | class YourEventEmitter { 7 | // Write your code here. 8 | 9 | emit(key, data) { 10 | // Write your code here. 11 | } 12 | 13 | off(key, handler) { 14 | // Write your code here. 15 | } 16 | 17 | on(key, handler) { 18 | // Write your code here. 19 | } 20 | } 21 | 22 | const tracker = new assert.CallTracker(); 23 | 24 | const eventEmitter = new YourEventEmitter(); 25 | 26 | // Event 1. 27 | const event1Data = "event1 is called"; 28 | const event1Handler = (data) => { 29 | assert.deepEqual(data, event1Data); 30 | }; 31 | const trackedEvent1Handler = tracker.calls(event1Handler, 2); 32 | 33 | eventEmitter.on("event1", trackedEvent1Handler); 34 | eventEmitter.on("event1", trackedEvent1Handler); 35 | eventEmitter.emit("event1", event1Data); 36 | eventEmitter.off("event1", trackedEvent1Handler); 37 | eventEmitter.emit("event1", event1Data); 38 | 39 | // Event 2. 40 | const event2Data = "event2 is called"; 41 | const event2Handler = (data) => { 42 | assert.deepEqual(data, event2Data); 43 | }; 44 | const trackedEvent2Handler = tracker.calls(event2Handler, 1); 45 | 46 | eventEmitter.on("event2", trackedEvent2Handler); 47 | eventEmitter.emit("event2", event2Data); 48 | 49 | // Verify calls. 50 | // Event1 must be called twice. 51 | // Event2 must be called once. 52 | tracker.verify(); 53 | -------------------------------------------------------------------------------- /web-apis/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Ultimate JavaScript: Web APIs 📺 4 | 5 | **Endless possibilities at the click of a mouse.** 6 | 7 | [Bookshelf 📚](./bookshelf.md) | [Questions 🤔](./questions.md) 8 | 9 |

10 | -------------------------------------------------------------------------------- /web-apis/bookshelf.md: -------------------------------------------------------------------------------- 1 | # Bookshelf 📚 2 | 3 | - [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) 4 | - [Storing Data in the Browser](https://javascript.info/data-storage) 5 | - [Please Stop Using Local Storage](https://www.rdegges.com/2018/please-stop-using-local-storage/) 6 | - [Introduction to Game Development for the Web](https://developer.mozilla.org/en-US/docs/Games/Introduction) 7 | - [3 Ways To Implement Infinite Scroll](https://javascript.plainenglish.io/3-ways-to-implement-infinite-scroll-7b2b7e47d58d) 8 | - [Scroll Listener vs Intersection Observers: A Performance Comparison](https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6) 9 | -------------------------------------------------------------------------------- /web-apis/questions.md: -------------------------------------------------------------------------------- 1 | # Questions 🤔 2 | 3 | - There is a picture on the page. We inject code into this page, for example, through a Chrome extension. How can we track from this script that the picture has disappeared or changed? 4 | - What are the ways to track `` size changes? 5 | - What are the ways to implement the infinite scrolling? 6 | - Where can we find the most concrete information about the user's device visiting the webpage? 7 | - What Web APIs would you use if you need to code an in-browser game? 8 | - Could you name several use cases in which Stream API takes place or is already used? 9 | - Let's compare all ways to store data in the browser by speed and security? 10 | --------------------------------------------------------------------------------