5 Concepts every JavaScript Developer must know

1. Strict Mode

Strict mode, first introduced with ECMAScript5(ES5), allows developers to opt-in to a restricted variant of JavaScript. When enabled, the JavaScript runtime imposes a set of constraints and behaviors that help catch common coding mistakes and provide a cleaner development experience.

To enable strict mode add the following in the beginning of the script:

"use strict"

Changes in strict mode:

1. Function Restrictions:

   • Duplicate parameter names: Declaring a function with duplicate parameter names will throw an error in strict mode.

   • arguments object: Modifications to the arguments object inside a function do not reflect outside of it in strict mode, preventing unexpected side effects

2. Variable Restrictions:

   • No global variables: In strict mode, assigning a value to an undeclared variable (i.e., creating a global variable unintentionally) will throw an error. This prevents accidental pollution of the global namespace.

   • Cannot use the delete keyword to delete a variable in strict mode. It can only be used to delete the properties of an object.

   • Stricter rules for variable declaration. Cannot use the variable without declaring it first(eg. a=10 is not valid in strict mode).

2. Hoisting

Hoisting is a mechanism in JavaScript where variables and functions are moved up to the top of the scope during compilation, while assignments are left in place. This means you can use variables and functions before they are declared.

console.log(myVar);  // Output will be: undefined
var myVar = 5;
console.log(myVar);  // Output will be: 5

In the above example, even though we're trying to log the value of myVar before its declaration, it doesn't result in an error. This is because the declaration var myVar; is hoisted to the top of its containing scope, making it accessible throughout the scope. However, the initialization (myVar = 5;) remains in place, so the first console.log() outputs undefined.

Note: Care should be taken while using function expressions and using them with respect to hoisting

3. Event Delegation:

• Event delegation is a technique where you attach an event listener to a parent element instead of individual child elements. When an event is triggered on a child element, it bubbles up to the parent element, allowing the parent to handle the event.

• This approach improves performance by reducing the number of event listeners, especially on large lists or dynamically generated content. It also simplifies event management and can lead to cleaner and more maintainable code.

4. Memory Management:

1. Primitive Types (Stored in Stack-like Structures):

   • In JavaScript, primitive data types such as numbers, strings, boolean,null,undefined, and symbols are typically stored in a stack-like structure associated with the call stack or execution context. These primitive values are directly accessed, and their memory is managed efficiently within the stack or execution context, as opposed to complex objects or data structures.

2. Objects, Functions, and Non-Primitive Types (Stored in Heap-like Structures):

   • Objects, functions, arrays, and other non-primitive types in JavaScript are stored in a heap-like structure, referred to as the "heap" or dynamic memory allocation area. When creating objects or complex data structures, JavaScript allocates memory in the heap, allowing for dynamic memory management, garbage collection, and efficient storage of mutable and complex data types.

When assigning a primitive value to a variable, it holds a distinct copy of that value, ensuring independent variable behavior. In contrast, non-primitive variables store references, pointing to the actual memory location of the object. Consequently, changes made to non-primitive objects through one variable impact all variables referencing the same object, reflecting shared state due to referencing the same memory address. This distinction between storing actual values for primitives and references for non-primitives influences variable behavior, object interactions, and memory management in JavaScript applications.

5. Modules:

Both CommonJS and module systems are foundational concepts in JavaScript that allow developers to organize, encapsulate, and reuse code across applications. However, they differ in syntax, usage, and environment compatibility.

CommonJS:

1. CommonJS is a module system introduced for server-side JavaScript environments, primarily associated with Node.js. CommonJS modules enable developers to define, import, and export modules using specific syntax and patterns tailored for server-side development.

JavaScript Modules (ES6 Modules):

1. JavaScript modules are a standardized module system introduced in ECMAScript 2015 (ES6) for both client-side and server-side JavaScript environments. JavaScript modules provide a unified, interoperable, and standardized approach for defining, importing, and exporting modules in modern JavaScript applications.

Understanding the CommonJS and JavaScript Modules enables to appropiately use them and helps to read/write better code.