FrontEnd in Depth
Tags: frontend, webdev, javascript, react
Published: 2023-10-20 05:31:35

# Introduction

Hey Everyone, Welcome to the new article of the "DEEP DIVE SERIES" where we're focusing on <mark>going in-depth to learn a particular technology</mark>. The first article has already been published on the platform and here's the link to the article ["Deep Dive Into Web Development"](https://devgancode.hashnode.dev/deep-dive-into-web-development) Visit and spread love to the community.

There are multiple videos and articles out there about the JavaScript roadmap. In this tutorial, we are exploring JS topics in detail. <mark>Web development is a vast field every </mark> week you'll see new frameworks coming out and you have to learn that but the fundamentals are the same which is JavaScript.

# Basic Fundamentals

The key to a good software engineer or full-stack developer is to know the fundamentals well. The better clarity you have on the fundamentals the easier you solve the problem.

| Programming by definition is problem-solving.

1. Operators
    
2. String
    
3. Functions
    
4. Loops
    
5. Conditional Statements (if, else, nested if-else)
    
6. Arrays
    
7. Objects
    
8. Document Object Model
    

These are the fundamentals of JavaScript and there are lot to learn in the above-listed topics. Operators (Arithmetic, Comparison, Conditional, Assignment, Bitwise) etc. DOM(Changing HTML elements, Creating new elements, Action Listeners, Events), etc.

# Advanced Topics

1. ES6+ Concepts (const, let, map, set, arrow func, Promises, Array Methods)
    
2. Closures
    
3. Event Loop
    
4. V8 Engine
    
5. Call Stack
    
6. Prototypes
    
7. JSON API format
    
8. Import Export Module
    

These are the most key topics you have to learn as a JavaScript Developer and the interviewer expects you to know these concepts. Learning is not enough proof is important to showcase your ability to work for that you have to build projects along with learning.

| Confidence comes from doing one thing again and again.

# Data Structures & Objects

The essential concept of programming as a developer is Data Structures. The arrays, objects, maps, sets, etc are part of DSA in JavaScript.

| This section is for people who want to build a career in JavaScript.

1. Arrays
    
2. Objects
    
3. String
    
4. Destructing
    
5. Mutability
    
6. Functions
    
7. High Order Functions (Filter, Map, Reduce, Find)
    

# OOPs in JavaScript

Object-oriented programming is a must for every developer whether you're a frontend or backend developer you should know the four pillars of OOP's. The JavaScript OOP's topics include:

1. Classes and new keyword
    
2. this keyword
    
3. Method and Properties
    
4. Polymorphism
    
5. Abstraction
    
6. Encapsulation
    
7. Inheritance
    
8. Getters, Setters
    

# Conclusion

In this tutorial, we cover Basic JavaScript, Advanced topics, DSA, and OOP concepts. These are a complete guide for anyone who wants to explore JavaScript in depth. We are not done here JavaScript is vast you have to learn continuously.

| JavaScript Developers are lifetime students.

Want to connect, Let's chat on [Twitter](https://twitter.com/devgancode).

### Recent Articles 👇

1. [Deep Dive into Web Development](https://devgancode.hashnode.dev/deep-dive-into-web-development)
    
2. [Linux for Beginners](https://devgancode.hashnode.dev/a-complete-guide-to-hackthebox)
    
3. [How to Make Money as a Technical Writer](https://devgancode.hashnode.dev/a-complete-guide-to-make-money-as-a-technical-writer)
    
4. [What is a Developer Relationship](https://devgancode.hashnode.dev/lets-talk-about-devrel)
    
5. [How to Master the Art of Content Creation](https://devgancode.hashnode.dev/how-to-master-the-art-of-content-creation-as-a-developer)
    

Support My YouTube work here 👇

{% youtube https://www.youtube.com/watch?v=52biDlBTrhQ&t=401s %}