DEV Community: Shikhar Saxena

Scopes in Javascript

Shikhar Saxena — Mon, 26 Apr 2021 15:11:06 +0000

Scope in Javascript basically means the area of code where a particular variable or function is available.
There are 2 types of scopes in Javascript -

Function Scope
Block scope

This article will cover both of them in detail and we will try to understand what they mean. If you have prior experience in other languages like Java, Python, etc., you might find it a bit weird, but I hope that everyone will have a clear understanding of how scopes work in Javascript by the end of this article.

P.S. - You can check out the TL;DR at the bottom of the article

Function Scope

Let us begin by guessing the output of this simple example.

function foo() {
    if(true) {
        var x = 10;
    }
    console.log(x);
}
foo(); // ??

If you answered undefined or some error, then you'd be surprised to see that this prints 10 to the console.

Let's dive deeper to understand what is going on under the hood.

Understanding the example

When the function foo is called, javascript creates a new execution context for foo and puts it on top of the call stack.

Execution context contains all the variables and functions that are defined inside the function scope. So before the execution of the function starts, it gets all the variables defined in the foo function(i.e. x) and puts a value of undefined to them.

Another point to note here is that what we see is
var x = 10;, whereas the JS engine breaks it into two lines
var x; and x=10 i.e the variable declaration and function assignment.
This is broken up and put into tp be put into the Abstract Syntax Tree which is outside the scope of this article.

Now as the function continues its execution, it assigns the value 10 to x and then prints it out to the console.

What we encountered here is called Hoisting, you may have also read about hoisting where people say that while compilation the declarations are moved to the top whereas, in reality, the execution scope just parses the context and keeps the value of all defined variables as undefined before execution.

In function scope, all the variables declared inside the function can be used at any place inside the function even before they are declared although it is considered a bad practice to use any variable or function before declaring them.

Block Scope

Let's look at a slightly modified version of our last example.

function foo() {
    if(true) {
        let x = 10;
    }
    console.log(x); // ??
}

foo();

This time we got a Reference Error saying x is not defined. This should have been the expected behavior all along.

Originally JS did not have block scope and it was introduced to Javascript in ES6.

To understand block scope first, we need to understand what a block is.

{ ... } -> This is what a block is. A pair of curly braces and everything inside them is a block. Maybe now you understand why we got a reference error while trying to use x in the second example.

But unlike function scope, you are not allowed to use the variables before declaring them. (Because let and const are not hoisted)

Note - Both function and block scope have a reference to their lexical environment which is used when a certain variable is not found in the same environment.

TL;DR

Function scope is when variables defined in an execution context are available throughout the execution context.

Block scope is when variables defined in a scope are available only in the current scope and not outside the scope even though it is still in the same execution context.

Conclusion

In this article, we discussed the two different kinds of scopes in Javascript and discussed them in detail.

You can learn more about Scopes in this famous book Scopes and Closures by Kyle Simpson.

Javascript - forEach vs map method in Arrays

Shikhar Saxena — Thu, 01 Apr 2021 18:20:55 +0000

Javascript provides us with different functions to make our development life easy but if you have worked with Javascript for a little while, you understand how weird bugs can pop up if we don't understand the complete need of a function. Arrays in javascript provide two different functions to iterate through an array, Array.prototype.forEach and Array.prototype.map

Definition

map takes one mandatory parameter as an argument which is a function (callback function) that defines what is required to be done to the element. It expects a value to be returned in the callback function and the map() returns a new array with the specified modifications on each value of the original value.

const arr = [1,2,3]
let result = arr.map(val=>{
    return val*2
})
console.log(result) // [2,4,6]

forEach also takes one mandatory parameter which is the callback function that defines what needs to done to the element. Although it does not expect any value to be returned and the complete .forEach() function returns undefined.

const arr = [1,2,3]
let result = arr.forEach(val=>{
    console.log(val*2) // 2 4 6
})
console.log(result) // undefined

Differences

1. Return Value

The main difference between map and forEach is that map returns a new array whereas forEach returns undefined.

2. Mutability

MDN Docs of forEach and map say the following for both of these.

forEach does not mutate the array on which it is called. (However, callback may do so).

map does not mutate the array on which it is called (although callback, if invoked, may do so).

What this basically means is that both of them do not change the original array but the logic inside the callback function may do so.

3. Performance

Performance is arguably one of the most important part of the codebase and hence it makes sense to cover the performance of these two functions.

Although since both these functions have different usecases, there is no universal way to compare both of them equally. I have used the performance APi to cover the performance of both of these functions.

let arr = [2,3,5,6,8,0]

let startTime = performance.now()
arr.forEach(num=>num*2)
let endTime = performance.now()
console.log("TIme taken by forEach is " + (endTime - startTime) +" milliseconds")

let arr = [2,3,5,6,8,0]

let startTime = performance.now()
arr.map(num=>num*2)
let endTime = performance.now()
console.log("TIme taken by map is" + (endTime - startTime) +" milliseconds")

My observations were that map was faster when array size was small but as array size started crossing 10^5, forEach showed better performance.
But feel free to comment down your observations for the same as well.

Bonus - Another thing I noticed is that the use of for loop gave better performance in all cases but it affects the readability of code.

When to use map and forEach

So, we dived deep into how the functions are working and saw how we use them in different cases but how do you figure out which one to use in what situations.

As a rule of thumb, we want to use forEach in cases when we do not want to store the result of the modifications and only want to access the values and perform operations using the value.

So we should use map when we require the resultant array, another advantage of using map is the ability of function chaining.

const arr = [1,2,3,4,5];
const result  = arr.map(x=>x*2).filter(x=>x>=5)

Here the filter function is chained to the map function as it returns an array. This provides easily readable code and keeps the codebase clean.

Conclusion

Both forEach and map are powerful functions with different use cases but can be used to do almost everything that the other one does.
Using a for loop gives better performance than both the inbuilt functions.
map returns the resultant array whereas forEach returns undefined.

Getting Started with SVN

Shikhar Saxena — Sun, 29 Nov 2020 18:42:18 +0000

SVN is an SCM(Source Code Management) tool developed by the Apache Software Foundation. It is one of the less popular but still widely used Source Code Management tool.

Installation

To check the version of Subversion run the following command
svn --version

If SVN client is not installed on your machine, you will get back an error, otherwise, the command will return the version number.

$ svn --version
bash: svn: command not found

If you get back an error, SVN is not installed on your system and you need to run the following commands to install Subversion.

If you are using RPM-based GNU/Linux, the default package manager is yum package manager. So you will have to run the following command.

$ sudo yum install subversion

In the case of Debian-based GNU/Linux, the default package manager is apt package manager. So to install Subversion, run the following command

$ sudo apt-get install subversion

Workflow

Checking out a repository

svn checkout <svn-repo-url> <folder-name>

Now you can cd into the svn directory and copy your project files and folders inside the directory.

Adding files or folders to SVN

svn add filename
svn add foldername

Checking in code to the server

svn commit -m "Commit Message"

Conclusion

Now you are ready to get started with SVN and use it as an SCM in your projects.