Mastery takes time, but knowing what to master makes it easier
You’ll hear many people complaining that JavaScript is weird and sometimes worthless. People complain like this because they don’t understand how things work under the hood. Although I do agree that some scenarios in JavaScript are handled differently, that does not make it weird but rather beautiful in its own way.
To start loving a programming language, you should start by looking deep within and mastering its concepts one by one.
Here is a list of 36 JavaScript concepts that you need to master to become an all-round JavaScript expert.
Although this piece is one of my longest, I assure you that it is worthy of your time. Kudos to Stephen and Leonardo for the resources.
The resources section contains a link to the GitHub repo by Leonardo which contains learning material for all these concepts explained below. Please take your time in understanding each of the below-mentioned concepts.
1. Call Stack Execution
2. Primitive Data Types
3. Value Types and Reference Types
4. Type Coercion
5. Equality Comparison and ‘typeof’ Operator
6. JavaScript Scope
7. Statements and Expressions
8. Immediately Invoked Function Expressions and Modules
9. Message Queues and Event Loops
10. Time Intervals
11. JavaScript Engines
12. Bitwise Operations
13. DOM and Layout Trees
14. Classes and Factories
15. ’this’ Keyword and ‘apply’, ‘call’, and ‘bind’ Methods
16. Constructor Functions and ‘instanceOf’ Operator
17. Prototypes
18. Object Creation With ‘new’, ‘Object.create’, and ‘Object.assign’
19. ‘map’, ‘filter’, and ‘reduce’ Methods
20. Pure Functions, Side Effects, and State Mutation
21. Closures
22. Higher-Order Functions
23. Recursion
24. Collections and Generators
25. Promises
26. Asynchronous Programming
27. ES6 Arrow Functions
28. Data Structures
29. Time Complexity
30. Algorithms
31. Inheritance, Polymorphism, and Code Reuse
32. Design Patterns
33. Functional Programming
34. Clean Code Principles
35. Destructuring Assignment
36. ES2020 New Features
1. Call Stack Execution
Everyone will have heard of the website Stack Overflow. But are you aware of the actual stack overflow? Stack overflow is an error associated with the operations of the call stack.
By understanding the call stack, you will have a working knowledge of how a high-level language like JavaScript gets executed.
2. Primitive Data Types
const foo = "bar";
foo.length; // 3
foo === "bar"; // true
Wait!
When you assign the value bar to the constant foo, it is of the primitive type string. That’s acceptable for everyone. But how can you access the property length of a primitive string?
Weird? Nah.
This feature is called autoboxing. In the above example, JavaScript wraps the constant in a temporary wrapper object and then accesses the length property of that object. Once this step is complete, the object is safely discarded.
By having a deep knowledge of the primitive data types, you will know how they are stored in memory up until the point of their binary representation. You will also know how these “weird” situations occur and the logical reason behind them.
3. Value Types and Reference Types
I recently had some confusion over how the concept “pass by reference” works in JavaScript. Although I was aware of the concepts “pass by reference” and “pass by value” in languages such as C and Java, I was not sure how it worked in JavaScript.
Did you know that variables assigned to non-primitive values in JavaScript are given a reference to that value? The reference points to the memory location where the value is stored.
var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(10);
console.log(arr2);
//[1, 2, 3, 10]
console.log(arr1);
//[1, 2, 3, 10]
As you can see from the above example, any modifications done to arr2 will be reflected on arr1 as well. This is because they only hold the reference to the value, not the actual value itself.
By understanding this concept of value types and reference types, you will have a better understanding of how variables are assigned with values and memory references.
4. Type Coercion
This concept mainly explains the difference between implicit and explicit type coercion. This is one of the few areas in JavaScript where people get things wrong. This is especially true with the concept of implicit type coercion because it behaves in different ways with different data types.
This is one of the most commonly tested areas of JavaScript in interviews.
Number('789') // explicit
+'789' // implicit
789 != '456' // implicit
9 > '5' // implicit
10/null // implicit
true | 0 // implicit
By understanding type coercion clearly, you can be happy that you have a great understanding of one of JavaScript’s trickiest concepts.
5. Equality Comparison and ‘typeof’ Operator
This concept basically explains the use of double equals and triple equals, and when and why you should use them. Although they appear the same on the surface and give the same results most of the time, they can give you unexpected bugs if you use them unknowingly.
You should also be able to use the typeof operator and know the possibilities of the outputs. It can get confusing when objects come into play.
typeof 3 // "number"
typeof "abc" // "string"
typeof {} // "object"
typeof true // "boolean"
typeof undefined // "undefined"
typeof function(){} // "function"
typeof [] // "object"
typeof null // "object"
6. JavaScript Scope
Scopes are one of the concepts, I believe, that should be perfected at the beginning of your JS journey. According to Wissam, the simple definition of scope is that it’s where the compiler looks for variables and functions when it needs them.
Understanding scopes will allow you to use JavaScript more efficiently and effectively. You should learn about the global scope and the block and function scope, also known as lexical scope. JS scope can look quite confusing at first, but once you understand how things work under the hood, it will be very exciting to work with.
7. Statements and Expressions
These are the two major syntactic categories in JavaScript. You should know the difference between these two and how statements get evaluated. This will allow you to get an overall understanding of how your code is structured as expressions and statements. You will notice that most of your code is expressions, while you have a fewer number of statements, comparatively. You will also be able to avoid bugs that are a result of improper use of these two.
8. Immediately Invoked Function Expressions and Modules
Immediately Invoked Function Expressions (IIFEs) are functions that run as soon as they are defined. They are mostly used to avoid polluting the global scope. Later on, ES6 modules were introduced, providing a standard way of avoiding global scope pollution — although some people believe that it is not a direct replacement to IIFEs.
By understanding IIFEs and modules, you can build applications with fewer bugs due to mishandling of the global space. With modules, however, you can do quite a number of things.
9. Message Queues and Event Loops
As the MDN doc says, JavaScript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued subtasks. This model is quite different from models in other languages, like C and Java.
Message queues are used in the above concurrency model to handle messages starting with the oldest. Messages are added anytime an event occurs and there is an event listener attached to it.
By understanding these concepts, you get a better understanding of how JS works under the hood and manages to interpret your code.
10. Time Intervals
To schedule a call or function in JavaScript, you use two methods.
setTimeoutallows us to run a function once after a specific time interval.setIntervalallows us to run a function repeatedly, starting after a specific time interval, then repeating continuously at that interval.
These are somewhat related to the previous concept of message queues and event handlers. Therefore, by understanding time interval methods, we can understand how they work and use them efficiently in our use cases.
#javascript #developer
