Elkamel Hassen

Elkamel Hassen

1595346233

36 JavaScript Concepts You Need to Master to Become an Expert

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.

  • setTimeout allows us to run a function once after a specific time interval.
  • setInterval allows 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

What is GEEK

Buddha Community

36 JavaScript Concepts You Need to Master to Become an Expert

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Elkamel Hassen

Elkamel Hassen

1595346233

36 JavaScript Concepts You Need to Master to Become an Expert

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.

  • setTimeout allows us to run a function once after a specific time interval.
  • setInterval allows 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

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company