Weird JavaScript Part 2 — Exploring Uncommon Concepts

Certainly! We will try to dive deep into some of the less discussed and more complex features of JavaScript, with proper explanation and code where required.

1. Lexical Environment and Execution Context

Execution Context is a powerful concept in JavaScript that describes the environment that defines the scope of any JavaScript code. It consists of:

VO (Variable Object): Holds function arguments, variable declarations, and function declarations.

Scope Chain: Made up of the current variable object and the Variable Objects of all its parent execution contexts.

this: A reference to the object executing the current function.

It has a dictionary like structure of identifier-variable mapping. It consists of.

Environment Record: It keeps the variable bindings to the identifiers.

Reference to outer lexical environment: Ref to lexical environment of outer code.

Example:

function outer() {
var a = 10;
function inner() {
console.log(a);
}
inner();
}
outer(); // Outputs: 10

Here in this example, our inner function is a closure over the outer function’s lexical scope, which we can access in a variable a.

2. Difference Between Function Declaration and Function Expression

Function Declarations are fully hoisted, which means that their name and body both get moved to the top of their scope at compile time.

Example:

hoisted(); // I'm hoisted!

function hoisted() {
console. log("I'm hoisted!" );
}

On the other hand, Function Expressions are not hoisted. Only the declaration part of the variable is hoisted and not the assignment.

Example:

notHoisted(); // error: notHoisted is not a function

var notHoisted = function() {
console. log("I'm not hoisted!" );
};

Calling notHoisted before its definition throws a TypeError, since the function expression is not hoisted.

3. Automatic Semicolon Insertion (ASI)

JavaScript has a feature that automatically adds semicolons to the end of statements, which could cause unintended results.

Problematic Example:

function getObject() {
return
{
name: "John"
};
}
console. log(getObject()); // undefined

This gets interpreted by JavaScript as a result of ASI:

function getObject() {
return;
{
name: "John"
};
}

To resolve this, move the opening brace onto the return statement line:

function getObject() {
return {
name: "John"
};
}

Now, getObject() returns the object you expect.

4. Immediately Invoked Function Expressions (IIFEs)

An IIFE is a function that invokes itself right after definition. It is most often used to create a sort of private scope.

Example:

(function() {
var privateVar = "I'm private";
console.log(privateVar);
})(); // Prints: "I'm private"

b) IIFE (Immediately Invoked Function Expression) allows you to create a private scope: Variables defined inside an IIFE are not visible from outside, preventing contamination of the global namespace.

5. Closures and Function Factories

A closure is an inner function that has access to the outer (enclosing) function’s variables scope even after the outer function has finished executing.

Example:

Please note that this is an introductory tutorial.

return function(value) {
return value * multiplier;
};
}
var double = makeMultiplier(2);
console. log(5 * 2); // Outputs: 10

Here, double is a function that closes over its multiplier value from its creation scope.

6. The call(), apply(), and bind() Methods

These methods prove helpful to create and control the this context within functions.

call(): Calls a function, with a given this and arguments provided individually.

Example:

function greet(greeting) {
console. log(${greeting}, ${this. name});
}

NOTE: Contributors are only expected to follow the same process for new contributors.

greet: call(person, “Hello”); // Log: “Hello, Alice”

apply(): same as call(), but arguments are given as an array.

Example:

greet. apply(person, ["Hi"]); // "Hi, Alice"

bind(): This will returnyou a new function with a bound this value, without it being executed immediately.

Example:

var greetPerson = greet. bind(person);
greetPerson("Hey"); // Prints: "Hey, Alice"

These techniques are especially helpful in borrowing methods from another object or setting context in event handlers.

6. Prototypal Inheritance

JavaScript, for example, uses prototypal inheritance, allowing for the creation of a single object via another object.

Example:

function Animal(name) {
this.name = name;
}
Animal. prototype. speak = function() {
console. log(${this. name} makes a noise. );
};
function Dog(name) {
Animal.call(this, name);
}
Dog. prototype = Object. create(Animal. prototype);
Dog. prototype. constructor = Dog;
Dog. prototype. speak = function() {
console. log(${this. name} barks. );
};
var dog = new Dog("Rex");
dog. speak(); // "Rex barks."

Dog class inherits from Animal class, and the speak method is overridden by Dog.

8. Creating a JavaScript Framework from Scratch

Grasping these concepts (especially the EventEmitter) is also what enables you to create a simple framework in pure JavaScript. For example, exposing a module system with IIFEs and closures:

var MyFramework = (function() {
var privateData = "Secret";
return {
getData: function() {
return privateData;
},
setData: function(data) {
privateData = data;
}
};
})();
console. log(MyFramework. getData()); // "Secret(2023)"
MyFramework. setData("New Secret");
console. log(MyFramework. getData()); // Prints: "New Secret"

This is a structure that wraps data and only presents the methods required, essentially following a modules pattern.

Learning these advanced subjects, helps you to write more efficient, maintainable and robust JavaScript code. Feel free to ask for more detail!