Basics

Details

  1. Main data types (string, number, array, object, function)
  2. var/let/const, scope (block/functional), closures
    1. var/let/const
    2. scope
    3. closures
  3. Loops (while/do-while/for-in/for-of)
  4. Error handling (throw/try-catch)
  5. Promises basics
    1. What is a promise?
    2. Promise states (fulfilled, rejected, etc)
    3. Working with promises
    4. Error handling with promises
  6. Async-await
    1. https://v8.dev/blog/fast-async
  7. Function vs arrow function, arguments object
  8. Working with objects/string/arrays/dates (+ date-fns or similar library)
  9. Classes
  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try…catch
  3. https://www.freecodecamp.org/news/javascript-async-await-tutorial-learn-callbacks-promises-async-await-by-making-icecream/
  4. https://medium.com/nerd-for-tech/implement-your-own-promises-in-javascript-68ddaa6a5409
  5. https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript
  6. https://www.digitalocean.com/community/tutorials/understanding-date-and-time-in-javascript
  7. https://javascript.info/async-await
  8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  9. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
  10. https://date-fns.org/docs/Getting-Started
  11. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Intermediate

Details

  1. Concurrency model and event loop
    1. setTimeout, setInterval
    2. microtasks vs macrotasks
    3. call stack, event queue, heap
  2. This context (call, apply, bind)
  3. Promises in depth (all, race, combining with async await)
  4. Classes in depth (static methods, super constructor, instance properties vs class (prototype) properties, binding context)
  5. Prototypal inheritance
  6. Symbol data type
  7. Iterators, for-of, generators
  8. Coercion
  1. https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
  3. https://medium.com/codex/understanding-this-in-javascript-the-complete-guide-c4c21fe15ff8
  4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
  5. https://dev.to/lawrence_eagles/an-easy-guide-to-understanding-classes-in-javascript-3bcm
  6. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
  7. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
  8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
  9. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
  10. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
  11. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
  12. https://medium.com/intrinsic-blog/javascript-symbols-but-why-6b02768f4a5c
  13. https://thisthat.dev/for-in-vs-for-of/
  14. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols
  15. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator
  16. https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839/

Advanced

Details

  1. ECMAScript versions, transpliation/polyfills/etc
  2. Proxy/Reflect
  3. Decorators
  4. Memory management, WeakMap, WeakSet
  5. Typed Arrays, DataView, endianness
  6. Threading, shared memory
  7. Basics of WebAssembly
  8. void operator
  1. https://kangax.github.io/compat-table/es6/
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
  3. https://2ality.com/2022/10/javascript-decorators.html
  4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
  5. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
  6. https://developer.mozilla.org/en-US/docs/Glossary/Endianness
  7. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
  8. https://developer.mozilla.org/en-US/docs/WebAssembly
  9. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

Courses

  1. https://frontendmasters.com/courses/deep-javascript-v3/
  2. https://frontendmasters.com/courses/web-assembly/

Notes

Three main pillars

1, Scope/Closures 2, Prototypes/Objects 3, Types/Coercion

TODO

  • Check Khi nằm trong timeout thì các biến sẽ lấy như thế nào nếu thay đổi trong React
    • [ ]