JavaScript roadmap to crack FAANG interviews in 2022

Have you ever watched a movie where there is always this popular girl or a boy who is loved by everyone and everyone wants to be his/her friend?
That's C++ and Java in the coding community and there is a genuine reason behind it. These two languages have been dominating the industry for the past two(maybe more) decades now for many obvious technical reasons. Right now, we don't wanna go there. There are few more languages as well.
But you, my friend, are that guy who suddenly comes to the school, get bullied by everyone and eventually become the hero of the school. You know why? Because you are JavaScript. The new-age hero who is thirsted over by every developer out there.

So this is the definition of JavaScript according to mdn web docs:
JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

You cannot imagine web development without JavaScript.

In this post, we will talk about your roadmap as a UI engineer at these big FAANG companies (or do they call it MAANG now, eh?)
Your purpose as a JavaScript developer. Your proposito!

The journey, of course, begins with HTML and CSS. Before going into the dynamic world, you need to know how static pages work.
Master your HTML5 and CSS3 skills followed by CSS pre-processors like SASS and LESS. Bootstrap is a popular CSS framework which every front end engineer is expected to know these days.
After you are done learning these skills, keep practicing your web development skills by building static landing pages with mobile-first approach (your website should be responsive to cellular devices).

Now comes Thor's hammer! The Mjolnir! JavaScript!!

You cannot imagine client-side web development without JavaScript. It adds all the dynamics and all sorts of functionalities to your web applications. I am going to list out the topics/areas you have to master if you want to land a job as a Frontend engineer at any company(not just MAANG):

1. Basics of JavaScript (like every other language) like declaring variables, for loops, switch cases, etc. You know!
2. ES6+ conventions (let, const, arrow functions, async await etc.)
3. DOM manipulation (such as selecting and traversing classes and IDs using JS, getting and setting values of an attribute, etc.)
4. Arrow functions and when to use them
5. Closures and scoping
6. Promises
7. Immediately Invoked Function Expression (IIFE)
8. apply(), bind() and call() method
9. Event loop and execution context
10. Higher order array methods like map, filter, reduce, etc.
11. Currying in JS
12. Various browser APIs
13. Accessibility and web performance

This list is definitely not the perfect list to learn JavaScript from and is definitely not exhaustive but these are definitely the concepts of JS which separates a great developer from ordinary ones. There are so much more in JavaScript.

But, Mazel Tov!

You are halfway through your frontend journey. Right now, you are well-equipped to build web applications using JS. But. . . .

There's some more time. You won't be building real applications in the industry using vanilla JavaScript always so learning a framework is also very important but I must say, do not rush into learning a framework/library until you are totally well-versed with writing applications using vanilla JavaScript.

That being said, my personal favorite is React.JS. It was created by Facebook.
Angular is also a popular frontend framework out there and it was created by Google. There are many more.
If you are into mobile development, try React Native.
But as long as you are gooooooooddddd in JavaScript, it does not matter what framework you choose. Great companies like Facebook and Google are going to see how good you are at your JavaScript skills and if you have enough knowledge with how the web works and why JS fits so well in this bracket.

Few resources that I personally think are top-notch:

1. You Don't Know JS Yet - All 6 editions by Kyle Simpson (absolute masterpiece!)
2. Namaste Javascript - By Akshay Saini on YouTube

So start today! It's a long journey but I can assure you will enjoy every bit of it if you are planning to start out as a frontend engineer.

Godspeed!!!!!

Comments

[Yo]

Thanks Tamojay for sharing this and strong emphasis on learning JavaScript/HTML/CSS concepts before jumping into frameworks. Having solid knowledge in core JavaScript is a mandatory to crack an frontend interview in any good company.
On top of that one should also be aware of the way companies hire frontend engineers. Different companies have different hiring process for different levels.
Overall it boils down to two tech rounds

Machine Coding Round

• You will be asked to develop a simple web app with HTML/CSS/JS or any frameworks within a constrained time (60-120mins)
• What companies expect from you:
  • Clean code, no red flags like codesmells. Code should be easily readable and efficient.
  • How effective is the solution: Is it functional solution?, Error handling, Corner cases
  • For senior roles:
    • Usually completes the solution with minimum hints to solve the problem and thinks bigger picture of the webapp, instead of just finishing the functionality
    • Does the solution scale well?, Did we consider security or any concerns

Design Round

• You will be asked to come up with a system design solution for a problem like how do design a LinkedIn (Frontend). Mostly it is verbal and at times you need to come up with whiteboard solutions for architectural stuff
• What companies expect from you:
  • High level design of the system
  • How would you compose your frontend components like do you opt for any frameworks? If so what is the reason behind it
  • How do you make your components reusable?
  • How the state management is handled?
  • What are the APIs you will use and how they are structured?
  • Does your solution scale? Security ? and many more stuff

I guess different companies have different criteria for hiring. Companies like Google you must be very familiar with DS and Algorithms apart from Frontend concepts. Good luck! Cheers!

[Tamojay Dey]

Thanks for sharing this. I know I missed a lot of things 😊
Yes, different companies have different hiring process and you are right, it's imperative one should be extensively familiar with core JS and basic data structures like arrays, strings and matrices.
I doubt advanced DS like graphs and trees are expected from a frontend dev.
Hope that helps!