A while back, I posted a mind map of the frontend things that were appearing the most in senior interviews outside of Brazil. I think it would also be useful to have a small list of the type of questions that are most common. I will create a document or blog post to document this but for now, it will be here because it can help someone who is about to be interviewed:
this
context: In various different ways, they will try to make "tricks" with it... calling functions in different ways..arrow function
,inside a literal object (method)
,inside an instance like new MyObject
,borrowing the function from somewhere else like: const m = myObject.m; m();
...
Promise API
... they are keeping a close eye on this... and in 3 different places, they asked to write my ownPromise.all
that takes an array of promises and returns an array with the results in the SAME ORDER as the array of promises.
- Event Loop / Execution Context... Classic trick questions like: What order will the following functions be called:
fn1(); fn2(); setTimeout(() => { fn3(); }, 0);
And also questions like: If javascript is a "single-threaded language," how does it handle more than one task at the same time...
- REACT: Component vs PureComponent? What's a HOC? Can you please write one? Which component composition methodologies do you know? (render props, HOC, function as children...)
- Event Delegation: is a technique in front-end web development where an event handler is attached to a parent element rather than individual child elements. This allows the event handler to capture events that occur on the child elements and handle them efficiently.
- VanillaJS DOM manipulation: They like it when they see a
createDocumentFragment()
7. Master thereduce
,map
,filter
... of life... 8. Closures: The last one I saw was: Create a function calledredGreen
that when called without any parameter once it returnsred
and the other time it returnsgreen
. Do not use ANY place outside the function to store any variables and also do not change the way the function is called:
redGreen(); //red redGreen(); //green redGreen(); //red redGreen(); //green
List to learn
- Rx.js
- TypeScript
- JavaScript
- ES6
- Destructuring
- Class
- Static properties
- Arrow functions
- let / const
- Spread operator
- IIFE
- Design patterns
- Revealing module pattern
- Dependency injection
- Underlying of language
- Prototypes
- Stack / Event Loop
- Memory leaks / GC
- Hoisting
- Differences between let, const, and var
- this scope
- Promises
- Web Workers
- Service Workers
- Data structures
- Map
- WeakMap
- Literal objects
- Arrays
- Set
- Iterables
- for
- for...in
- for...of
- .forEach
- .map
- .reduce
- .filter
- Event bubbling
- Event delegation
- Date API
- localStorage / sessionStorage
- CSS / SCSS
- flexbox
- positioning
- Responsiveness
- Media queries
- HTML5
- Use of semantic components
- header
- section
- article
- ...
- HTTP Protocol
- GET vs POST
- Webpack
- Minification
- Babel
- presets
- loaders
- The DOM
- Accessing nodes
- NodeList vs Array
- Traversing the DOM
- DocumentFragment
- Loading sequence
- Script at the bottom of the page
- defer and async attribute of script
- Testing
- TDD
- Jest
- Enzyme
- Assertions
- Types of testing
- Unit
- Integration
- e2e
- Security
- CSRF
- SSL BREACH
- CORS
- XSS
- OWASP
- React
- Styled components
- Redux
- Middlewares
- Hooks
- Context API