DEV Community: Akindele Emmanuel

Understanding JavaScript closures: variables, functions, and scope.

Akindele Emmanuel — Sun, 03 Nov 2024 21:02:07 +0000

“Javascript closures are a fundamental concept in programming, enabling functions to access and manipulate variables from surrounding scopes. This powerful technique allows for data encapsulation, context preservation, and efficient memory management. Understanding Javascript closures is crucial for developing robust, scalable, and maintainable applications. In this article, we will look into the complexity of this concept, exploring variables, functions, and scope to master this essential Javascript concept.”.
Now let's see what a closure in Javascript is. I will like to define this in three ways: in a simple and concise way, in a technical and detailed definition, and in a conceptual and analogous definition.

What is closure in JavaScript?

“A closure is a/are channel(s) through which function inside another function have access to its own scope and the scope of its outer function(s), even when the outer function(s) have returned.”.

“A closure can also be referred to as a self-contained function that maintains a reference to its surrounding lexical scope, allowing it to access and manipulate variables from that scope, even when the function is invoked outside its original context.”.

“A closure is like a room with memory. When a function is created inside another function, it inherits the outer function’s scope, much like a room inherits the features of the building it’s in. Even when the outer function ‘closes’ (returns), the inner function remembers the outer scope, allowing it to access its variables and functions". These definitions highlight different aspects of JavaScript closure.

To buttress the definitions or for better understanding of the subject matter, think of a closure like this. Imagine you have a toy box container where you keep all your favorite toys (the toy box container is our outer function). Now imagine that inside the toy container (outerfunction) you have different toys like cars, dolls, and a robot, among other things. (these are variables or any other function) out of these toys, you have a special toy (inner function) which is the robot. Imagine the robot has special powers through a channel; it can play or connect all the other toys inside the toy box even when the toy box is closed. Imagine that special channel or power to be closure. I hope you get that. Let's see an example of a code to illustrate closure.

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

In the code above, the displayDetails is the function or the closure, or better still, referring to the illustration before the code. funtion displayDetails is using the power of closure to access the variables outside it’s scope. Here is the thing. displayDetails is defined inside details, it accesses surName and lastName from the outer scope, and it retains this access even outside its scope. Or, in another way, details create a scope with surName and lastName, displayDetails access this scope, displayDetail returns a string using surName and lastName, and details returns displayDetails’s result. console.log(details()); calls displayDetails, accessing outer scope variables.
The output of this code is hey john mercy, you have been registered
The result is shown below

Now that you understand closure, let's see the benefit of closure in Javascript code writing.

Variables in closures

Local variables: Variables declared within function, is accessible only within the function scope and not accessible outside the scope.
Outer variables: Variables declared in an outer function are accessible to inner function
Global Variables: Variables declared outside all functions, accessible from anywhere

Functions in closure

Inner functions: these are functions defined within another function that have access to outer scope
Outer function: this function defines the scope for inner functions
Function expressions: function defined as expressions can be used as closures

Scope in closures

Lexical scoping: inner functions have access to outer scope.
Dynamic scoping: scope is determined at runtime ( not used in javascript).

What are the benefits of closure?

Data hiding: protecting data from external access Let’s see in the code below example of code that exhibits this data hiding

<script>
        function Person(name, age) {
            let privateName =  name;
            let privateAge = age;

            return {
                getName:function() {
                    return privateName;
                },
                getAge:function() {
                    return privateAge;
                },
                setAge:function(newAge) {
                    privateAge= newAge;
                }
            };
        }
        const person = Person('bala daodu', 30);
        console.log(person.getName());
        console.log(person.getAge());
    </script>

In the code above, the function Person takes two arguments: name and age, This function creates a new person object. Inside the function, two private variables are declared: privateName and privateAge. These variables are assigned the values passed to the person function ( name and Age). These variables are private because they’re declared with let and aren’t directly accessible outside the Person function. The return objects are also created with three methods. These three methods provide controlled access to private variables. So the Person function creates a closure, allowing the returned object to access private variables. Also the private variables are hidden from external access, providing data protection.

Encapsulations: bundling data and methods
Context preservation: retaining context in asynchronous calls.

Common use cases of closure

Event listeners or event handling: preserving event context. Here is a simple event handling code


<body>
    <button id="myButton">Click me!</button>
    <p id="clickcounter"></p>
    <script>
        const button = document.getElementById('myButton');
        const clickCounterElement=document.getElementById('clickcounter')
        let clickcounter = 0;
        button.addEventListener('click',
            function (){
                clickcounter++;

                clickCounterElement.textContent=(`you have clicked ${clickcounter} times`);
            }
        );      
    </script>
</body>

Here is what happened in the code. We define a function createClickCounter that returns another function. Inside createClickCounter, we declare a variable clickCounter initialized to 0.
The returned function increments clickCounter and updates the text content of clickCounterElement. We call createClickCounter() to create a closure and assign it to the counter variable. We attach the counter function to the button's click event using addEventListener.

The counter function is a closure because it has access to its own scope, has access to the outer function's scope (createClickCounter()), retains the state of clickCounter between function calls.

Callback functions: preserving context in asynchronous calls.
Private modules: creating private variables and functions

Conclusion

JavaScript closures empower developers to write efficient, modular, and secure code. By mastering variables, functions, and scope, developers can harness closures full potential. Closures enable data encapsulation, state preservation, and private variables, elevating code quality and maintainability. With this foundational understanding, developers can tackle complex Javascript challenges with confidence. Effective use of closures is essential for scalable, robust, and efficient JavaScript applications.

Mastering JavaScript Function and Variable Hoisting: Best Practices and Examples.

Akindele Emmanuel — Wed, 30 Oct 2024 11:14:27 +0000

"Writing effective, error-free code requires an understanding of JavaScript's special function and variable hoisting behavior. This article delves into the details of hoisting, providing best practices and illustrative examples to enhance developers' proficiency. By mastering hoisting, developers can streamline their coding process and create more robust applications."

What is hoisting?

Hoisting is javaScripts default behaviour where variable and function declarations are moved to the top of their scope before the execution of code.

The JavaScript engine will normally execute code from the top to the button, line by line or one line after the other, and when it does, hoisting happens before execution during the semantic analysis phase. Variable and function declarations are moved to the top of their scope before the execution process. You can confirm this by using console.log() or document.write() to log out a function or variable before the code itself. Let us look at the illustrations below to shed light on the explanation above.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>   

     function square(a, b) {
        document.write(a * b);
     }
    square(3,4);

    </script>
</body>
</html>

This code will simply output 12 just as we can see below is the result of the code

Now, you can also call or invoke the function before the function is created, and after it is created, it will still give the same result. Are you surprised? This is only possible because of hoising; now let's see that. You can also try this on your own.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        square(3,4); 

     function square(a, b) {
        document.write(a * b);
     }   

    </script>
</body>
</html>

This will still give the same result as above; it will output 12 in the document page when you use document.write() or in the console when you use console.log(), just like the example above.

This is possible because of hoisting. So hoisting moves declaration only and initialization or assignment are left in place. That means javascript initializations are not hoisted.

Types of Hoisting.

In this article we will be looking at two types of hoisting, which include:

Variable Hoisting
Function Hoisting
Function Expression Hoisting

What is variable hoisting?

This can simply refer to the behaviour of javaScript to move a variable declaration to the top of its scope, regardless of its actual position in the code.
Just as I have pointed out while explaining hoisting using a function as an example, variable declarations are also moved the same way the function is moved to the top, but in the case of variables, the output or result might seem a little bit different and not as direct as the case of function code that can be invoked or called before the actual code and it initializes. In the case of variable hoisting, different results for different types of variables. Let's check this out! In the example above, we were able to call or invoke a function before the actual code, and we saw the output: let's use the same method using any of the types of variables (let, const, and var). Let's see in the example below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = "abudog";
        const goat = "constano";
        var dog = "vanetino";
        console.log(name);
        console.log(goat);
        console.log(dog);
    </script>
</body>
</html>

The code above worked without error, below is the result of the code.

But let's see what happens if we want to console.log() our variable declaration before the code or before we write the actual code. For example, let's say we have var, let, and const separated. Now let's see the different results that we will get.
Note: just write your code along for this will aid fast understanding of the subject matter.

<script>        
        //  we are looking at `let` variable keyword first
        // to see what will be log out in the console
        console.log(name);
        let name = "abudog";
        // console.log(dog);
        // var dog = "vanetino"; 
    //    console.log(goat);
    //    const goat = "constano"; 
    </script>

Using the same principle as we have used in the code with function declaration, just like calling the variable before actual code. See the output below; you can as well try this on your own

The result is uncaught referenceError: cannot access ‘name’ before initialization
Let's also see for const variable what will happen

 <script>        
        //  We are looking at using `const` variable keyword now
        // to see what will be logged out in the console
        console.log(goat);       
        const goat = "constano";

        // console.log(name);
        // let name = "abudog";
        // console.log(dog);
        // var dog = "vanetino";
    </script>

And this is the output from the console.

Now we try var variable keyword and let's see the result

<script>        
        //  Now we are using `var` variable keyword
        // to see what will be logged out in the console
        console.log(dog);
        var dog = "vanetino"; 
    //    console.log(goat);
    //    const goat = "constano";
    //    let name = "abudog";
    </script>

In the case of var variable keyword, the result is undefine.

Now we can see that the output is different from the first example, where a function keyword is used to declare the function. Variable hoisting is peculiar, and not only that, we saw that let and const variables output different results and var variable output undefined. Now let's see what happened. The let and const declaration is hoisted to the top of their scope, creating a variable name and goat with an uninitialized value. Let and const variables are not initialized until they are declared; they are in a temporary dead zone from the start of the scope until the declaration accessing a variable in the temporary dead zone, so this results in a referenceError. When you try to log name for let and goat for const variable, they are still in the TDZ, so javaScript throws a referenceError.

Why doesn't this happen with var?

Variables declared with var are also hoisted, but they are initialized with undefined immediately. This behaviour is by default for var variable before its declaration. Just like we can see in the last example above.
Don't forget the hoisting processes occur behind the scenes, and it gave birth to the results we can see or make the process work out the way we saw them.

Function and Function Expression Hoisting

What is function hoisting?

Function hoisting is a javaScript behaviour where function declarations are moved to the top of their scope, regardless of where they’re actually defined. This allows functions to be called before they’re defined. I refer to the first example at the beginning of this article.

<script> 
     function square(a, b) {
        document.write(a * b);
     }
    square(3,4);
    </script>

Function declaration vs function expression

Before diving into function expression hoisting, let’s quickly review the difference between function declarations and function expressions:
Function declaration: a function declaration defined using the keyword, for example, function add( a, b) { return a + b; }
Function expression: a function defined as an expression, often assigned to a variable; for example, const add = function(a, b) { return a + b; };

Here is the important thing or part: function expressions are not hoisted in the same way as function declarations. Only the variable declaration is hoisted, not the assignment. Consider the example below

<script>
        // this is a function declaration
         function add(a,b) {
            return a + b
         }

        //  this is a function expression
         const addConst = function(a,b) {
            return a + b;
         };

         console.log(add(3,5)  +  " " + "output of function");
         console.log(addConst(3,5)  +  " " + "output of function expression addConst");
    </script>

There are two functions here: function declaration with the keyword function and function expression declared using the keyword const, these two should log out the same result. This is the result below

Now let's see what happens if we try to console.log() the two codes: the one with function declaration and the other with function expression. Using the same code.

<script>
        // This is a function
        console.log(add(3,5)  +  " " + "output of function");
         function add(a,b) {
            return a + b
         }

        //  This is a function expression
        console.log(addConst(3,5)  +  " " + "output of function expression addConst");
         const addConst = function(a,b) {
            return a + b;
         };         
    </script>

Below is the output of the code

Now, the first code with function declaration worked very fine, and the second code with function expression using the const keyword to declare it displayed an uncaught ReferenceError: cannot access addConst’ before initialization. This is because only the variable declaration is hoisted in variables defined using const and let and not the assignment. So you can't call the function for function expression before it’s assigned to the variable. It is only possible when writing code with a function keyword.

Best practices for avoiding Hoisting issues

Declare variables at the top of their scope: Below are very good examples of declaring variable or function at the top of their scope before usage

<script>
        // Hoisting with function declaration
function salute() {
    console.log("Hello, Emmanue!");
}
// Hoisting with var
var name;
function meet() {
    // The variable `name` is hoisted, but it's undefined here until it is assigned a value
    console.log("Hello, " + name);
}
// Calling functions before they are defined
meet();         // Output: Hello, world!
salute();     // Output: Hello, undefined
// Assigning a value to the variable `name`
name = "Emmanuel";

// Calling the function again after assigning a value
meet();     // Output: Hello, Emmanuel
    </script>

Use Let and Const for block scope: Always use let and const variable for block scope Example: in javaScript, let and const are used for block-scoped variable declarations, which means they are limited to the block in which they are defined either within a loop, condition, or a function In the code below we can see how to use this

<script>
        function blockScopeExample() {
    if (true) {
        let blockScopedVariable = "I am block scoped!";
        const blockScopedConstant = "I am a constant block scoped!";

        console.log(blockScopedVariable);  // Output: I am block scoped!
        console.log(blockScopedConstant);   // Output: I am a constant block scoped!
    }

    // Trying to access blockScopedVariable and blockScopedConstant here will result in a ReferenceError
    // console.log(blockScopedVariable); // Uncaught ReferenceError: blockScopedVariable is not defined
    // console.log(blockScopedConstant);  // Uncaught ReferenceError: blockScopedConstant is not defined
}

blockScopeExample();

// Example with a loop
for (let i = 0; i < 3; i++) {
    console.log(`Inside loop: ${i}`);  // Output: Inside loop: 0, Inside loop: 1, Inside loop: 2
}

// Trying to access `i` here will also result in a ReferenceError
// console.log(i); // Uncaught ReferenceError: i is not defined
    </script>

Avoid re-defining variables in the same scope:
Minimize global variables:

Conclusion

Mastering JavaScript function and variable hoisting is crucial for any developer aiming to write clean, efficient, and error-free code. By understanding how hoisting works, particularly with var, let, and const, you can avoid common pitfalls related to variable scope and initialization.
Adopting best practices such as declaring variables at the top of their scope, using let and const for block scope, and favoring function declarations where appropriate will not only enhance the readability of your code but also prevent unexpected behaviors that can arise from hoisting.
As you continue to explore JavaScript, keep these principles in mind and apply them in your projects. With practice, you'll gain a deeper understanding of how hoisting impacts your code, enabling you to leverage this knowledge for more effective programming. Embrace these practices, and you'll be well on your way to becoming a proficient JavaScript developer, equipped to tackle complex challenges with confidence.

CSS Positioning: Simplified for Beginners

Akindele Emmanuel — Fri, 22 Sep 2023 08:31:32 +0000

CSS positioning is the placement of an element at a desired location utilizing the top, bottom, right, and left attributes, which determine the element's final position.

Imagine 20 students are resuming into an empty classroom of 20 sit, the teacher has the ability to position any of this students in the front sit or the back sit, since he/she has the ability to do so, just with his command go there the student we occupy any where in the direction the teacher points to or direct them to sit. Also in CSS, the syntax is the teacher and the class is the parent element while the students are the child element.

For example:

The original position of the element is top-left. We can now change the position to right or center or anywhere using the position property and appropriate value in your code. The element will be re-positioned.

Because the position attribute was added to the code above, the element's position has now moved away from its original position.

Depending on where you want the element, this can be done not only to the left but also to the desired top or bottom. Let's now understand more about the CSS positioning values.

Values of CSS positioning

In CSS, there are five major values of positioning. They include:

Relative
Absolute
Sticky
Fixed and
static.

Relative position value

This is a positioning style that is used in styling an element by moving it from its initial position to the top, bottom, right, or left, depending on the location you want the element to be.

Generally, this has no influence on the position of the other elements except the element that you are designing. Using this relative positioning style without specifying whether left or right, in which case the element assumes its regular position and it has no effect. This can be archived by adding position property with value as relative to the CSS styling.

The above shows the default position of the elements and the Code Pen below shows what happens when the CSS position property and the relative value is added to one of the elements

The position of the red element has changed from the default position.

Absolute Position value

This positioning style allows you to position an element relative to the parent element or the HTML page itself in the absence of the parent element.

Imagine you have a big square as the parent element and also have another small square as the child element in the big square. You will notice that both parent and child elements are positioned by default to the top-left side.

You can use the position of value absolute to position the child element (the small square) anywhere inside the big square by giving the parent element a position with value relative. Then, the child element will position relatively anywhere inside the parent element using either the top, left, right or bottom elements.

Now you can see that the child element has changed position to almost the center of the parent element. Position absolute has been used to repositioned it .

NOTE: Position relativeand absolutework the same way except that we use relativeto identify the parent element. And absoluteto identify the children element.

Sticky Position value

As the name implies, this positioning style allows elements to become sticky while scrolling on the viewpoint. It is a bit different from the previously explained styles but trust it is a special one.

The element that possesses this style or positioning will maintain the relative positioning along at first but immediately become sticky or fixed when it reaches the specified point white scrolling. That is after scrolling to a certain point on our screen, this value will fix the position of our element on the screen so it doesn't move.

Consider the code below. And try it

Fixed position value

This positioning style allows the element to maintain its relative position and remain fixed even when you scroll the viewpoint. This are majorly used for navigation bar in web designs. the element is fixed to its position when you scroll the page.

Conclusion

CSS positioning, though initially daunting, can be made super simple for beginners with the right guidance and practice.

Understanding the basic concepts of relative, absolute, fixed, and static positioning, as well as their practical applications, empowers beginners to enhance the layout and design of their web projects.

With continued learning and hands-on experience, beginners can confidently harness the power of CSS positioning to create visually appealing and well-structured web pages.