## Introduction

React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use React's framework along with native platform capabilities. React Native is one of the best platforms to create a cross-platform application that works on both Android as well as iOS. The core UI components in react native help us to speed up and scale up the development

But.. this core UI element Looks different in a different platform as in android and iOS same goes with the Button component look different on each platform, and there are limited styling and customization options to these components. For this and many other reasons, it’s critical to know how to create buttons that look consistent regardless of the operating system.



![Buttons in different OS](/blog/creating-custom-buttons-in-react-native/react-native-1.png)
For a user interface to look seamless and the same on every platform it becomes very important to create our custom components. In this blog, we will be dealing with several methods to create our custom button.





## Setting Up

Assuming you all guys know the basics of React and React-native let's get right into constructing custom buttons component in react-native.

Start with setting up a general React native app by typing the following in the command prompt



```javascript
npm react-native init AviateButtonDemo
```



Clear down the all default code written in the App.js and start with the fresh window. Then type the following to get the basic component of a button in react-native



```javascript
import React from "react";
import { View, Button, StyleSheet } from "react-native";

const App = () => {
	return (
		<View style={styles.Container}>
			<Button title="Hii dev!" />
		</View>
	);
};

const styles = StyleSheet.create({
	Container: {
		flex: 1,
		justifyContent: "center",
		padding: 18,
	},
});

export default App;
```



In the above code, we have created a button that is the core UI component of the react-native which is wrapped inside the container which is the View component of the react-native. In react-native, we are provided with the Stylesheet where we can style our component we can say it comes as an analogy of CSS or abstraction to CSS stylesheets.





## The Custom Button Component

As we have now done with the home page set up with the general button component and in this, you can see how it appears different on different OS. Now to cope up with this we will make our custom button which will be a functional component.



```javascript
const CustomButton = () => (

)
```



Name the custom button as _CustomButton_

As we are going to make a custom button so we will make use of the TouchableOpacity component to make a touchable component and manipulate it as we need so for this we will be required to import certain components which are

`<TouchableOpacity/>` and we have to include `<Text/>`component to add text in it. So import them from react-native.



```javascript
import { View, Button, StyleSheet, TouchableOpacity, Text } from "react-native";
```



Now, let's code the custom button. In this, we need to add onPress to the TouchableOpacity and add the text we need to have on button.



```javascript
const CustomButton = ({ onPress, title }) => (
	<TouchableOpacity onPress={onPress} style={styles.customButton}>
		<Text style={styles.customButtonText}>{title}</Text>
	</TouchableOpacity>
);
```



`<TouchableOpacity/>` this component provides a robust behavior of change in opacity while clicking or touching we can customize that too with its properties one such property is activeOpacity. So we can control opacity by bypassing this prop to the component. Similarly, we can add various props to these components as per our needs and customize them. Go through the [doc](https://reactnative.dev/docs/touchableopacity) of the same for more props and its feature.



```javascript
const CustomButton = ({ onPress, title }) => (
	<TouchableOpacity
		activeOpacity={0.6}
		onPress={onPress}
		style={styles.appButtonContainer}
	>
		<Text style={styles.appButtonText}>{title}</Text>
	</TouchableOpacity>
);
```



## Styling

As our main motive is to make our UI consistent and seamless in both OS so let's start styling the custom button component.



```javascript
const styles = StyleSheet.create({
	customButton: {
		elevation: 10,
		backgroundColor: "#FFFE00",
		borderRadius: 15,
		paddingVertical: 10,
		paddingHorizontal: 10,
	},
	customButtonText: {
		fontSize: 25,
		color: "#000000",
		fontWeight: "bold",
		alignSelf: "center",
	},
});
```



It should look some what like this





![Demonstration on emulator](/blog/creating-custom-buttons-in-react-native/react-native-2.png)



Wondering how to give gradient or another styling to our buttons! Here react-native has a solution to it. React-native provides a library that gives us the option to apply linear gradient as there is no by default API to include linear gradient in our button so we need to import the library for it of linear-gradient, do the following for importing the same





```jsx
npm i react-native-linear-gradient
```





Now we have to import `<LinearGradient/>` library from react-native-linear-gradient

We just need a little tweaking to our previous code in `<CustomButton/>` we have to wrap the `<TouchableOpacity/>` component by `<LinearGradient/>` and add some props to it. Basically, we will add color props to it which will define the gradient of the button. Basically, the color prop in LinearGradient accepts an array of colors through which a gradient is created.

```jsx
const CustomButton = ({ onPress, title }) => (
	<TouchableOpacity onPress={onPress}>
		<LinearGradient
			colors={["#FFFE00", "#C5C417"]}
			style={styles.appButtonContainer}
		>
			<Text style={styles.appButtonText}>{title}</Text>
		</LinearGradient>
	</TouchableOpacity>
);
```

It should now look somewhat like this-

![With gradient](/blog/creating-custom-buttons-in-react-native/react-native-3.png)
Full Source code of the tutorial is here given below,

```jsx
import React from "react";
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
import LinearGradient from "react-native-linear-gradient";

const CustomButton = ({ onPress, title }) => (
	<TouchableOpacity onPress={onPress} activeOpacity={0.6}>
		<LinearGradient colors={["#FFFE00", "C5C417"]} style={styles.customButton}>
			<Text style={styles.customButtonText}>{title}</Text>
		</LinearGradient>
	</TouchableOpacity>
);

const App = () => {
	return (
		<View style={styles.screenContainer}>
			<CustomButton title="Hi dev!" backgroundColor="#312D2D" />
		</View>
	);
};

const styles = StyleSheet.create({
	customButton: {
		elevation: 10,
		backgroundColor: "#FFFE00",
		borderRadius: 15,
		paddingVertical: 10,
		paddingHorizontal: 10,
	},
	customButtonText: {
		fontSize: 25,
		color: "#000000",
		fontWeight: "bold",
		alignSelf: "center",
	},
});

export default App;
```

## Epilogue

Here, I would like to conclude by just stating that as a developer it's our core responsibility to make the user interface look-alike irrespective of OS a user is using so this stands to be of utmost importance to have learned the process of making look button similar to each and every platform in react-native. There’s so much more you can do, but the steps in this blog will help you find your footing as you start creating custom UI components with React Native.

Reach out to us on [](https://twitter.com/kartikey_yadav7)[Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Thank You for your time

Keep learning, Keep coding :)

Creating a custom button gives you a great and seamlessly consistent UI irrespective of OS. This becomes of utmost importance to implement as the core UI button of react-native looks different in different OS.

Creating Custom Buttons In React Native


Hey guys,

So execution context, lexical scope, and scope chain are sort of fundamental topics in JS so it's important to learn about it

Let's get started

## **Execution Context**

Now we know about the call stack (if you don't please refer to the last blog post [here](https://www.aviatecoders.com//javascript/how-javascript-works)) and we know that functions that are called goes onto the call stack and after returning the functions they are popped off the call stack and it gets empty

_We can say that every function that goes into the call stack has its execution context_

```javascript
function hello() {
	return "Hey guys";
}

function greetings() {
	return hello();
}

greetings();
```

Let's see this with an example

So in the above example when the JS engine encounters the function call greetings( ) it makes an execution context of that function and puts it into the call stack and after that, it encounters hello( ) and makes its execution context and puts it into the stack and finally, it returns "Hey Guys" and everything pops off one by one.

**A new execution context is created whenever a function is executed as the JS engine goes through the code**

![Execution Contect](/blog/execution-context-lexical-environment-scope-chain/c1.png)

But always the very first execution context is the "Global Execution Context" which is defined even before any code is written in the JS file

The Global execution context has the global object which is the window object, the "this" keyword, and hoisting.

It has two phases the creation phase and the execution phase

In the creation phase, there is the window object, "this" keyword, and hoisting and

In the execution phase, the code is executed

As you might know at the beginning the "this" keyword and the window object are the same

![Global Execution Context](/blog/execution-context-lexical-environment-scope-chain/c2.png "Global Execution Context")

## **Lexical Environment**

Before going into the lexical environment, let's understand what lexical means well it means where you write something or define something

So, as we know that when our program runs we have execution context of functions on the call stack and you can understand the lexical environment as each function has its planet where its variable is located and no one outside of the planet can use those variables

Let's understand this with an example

```javascript
function hello() {
	console.log("hell");
	const a = 10;
}

function greet() {
	console.log("greet");
	const b = 20;
	hello();
}

function start() {
	console.log("starting greet");
	const c = 30;
	greet();
}

const d = 40;

start();
```

Here as you can see when the start() function is called, it starts execution each function one by one, now if you want to see this in action please go to this ([latentflip](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)) website and copy-paste the code

So as you can see the hello function has variable a but the function hello doesn't have access to other variables like the variable b or c because they exist in another function but it does have access to variable d because it's in the global scope or environment

Similar is the case with variable b or c because they are both inside their respective functions and only have access to their variables and that's what lexical environment means

That's why I said to image each function that goes onto the call stack and an execution context is created and it has its own planet where no one other than creator function can access it.

![Lexical Environment](/blog/execution-context-lexical-environment-scope-chain/c3.png "Lexical Environment")

The same thing can be done with the functions as well we can define functions inside of each other and things related to it, lets understand it in the scope chain

So just remember that when we say lexical environment it just means where is that variable or function written in our code

## **Scope chain**

Let's see and learn about what scope chain is

What it does is that when the Js engine first parses through the code it just links functions and variables around it on where they are written

Now how it does that well depends majorly on where the function is defined so if the function is defined like this eg

```javascript
function hello() {
	console.log("hell");
}

function greet() {
	console.log("greet");
	hello();
}

function start() {
	console.log("starting greet");
	greet();
}
```

Now as you can see in this example the functions are defined on the main body of the program that means they are linked or their execution context is linked directly to the global execution context

So that means where ever if we define a variable in the global execution context every function will have the access to it

Every function is individually linked to the global execution context

But in this example

```javascript
function start() {
	console.log("hell");
	var a = "a";
	return function hello() {
		var b = "b";
		return function greet() {
			var c = "c";
			return "Ok";
		};
	};
}

start(); // this will invoke function hello()
start()(); // this will invoke function greet()
start()()(); // this will return Ok
```

As you can see in the above example we are defining the function one inside the another and that means the scope chains of the functions will be linked to each other, and that is the most important thing to understand in the scope chain

Here you can also understand each function as an individual planet

— So the bigger planet global has the planet start inside of it and the planet start will have hello inside of it and finally, we will have planet greet inside of it

Always remember that the planet greet which is inside of everybody will have access to every variable but no one has access to the variables of greet

For the planet hello it will have access to every variable except for greet's variable environment

For the planet start it will have access to the global variables but not the planet's inside of it

For more explanation:-

1. Let me explain how these functions are linked to each other - so the last function or the last child named greet( ) will have access to both var a and var b because they are their parent
2. Now for hello( ) it has access to var a but it doesn't have the connection with greet( ) which is variable c so if you try to console.log(c) then it will throw a reference error
3. For a start( ) it only has access to var its variable but not b or c and similarly it will give a reference error if we try to access those

But the common thing is that every function has access to the global scope and its variables

That's what scope chain is in Javascript

Before I leave here is an important difference between functional and block scope which I guess you should also know

Function scope and block scope

Initially, Js could only use function scoping as we have studied before and most of the other programming languages have block scoping

eg

```javascript
if (5 > 4) {
	var secret = "555";
}

function secret() {
	var secret2 = "555";
}

//In javascript we can access the secret variable from here like outside of the if statement
//but we can't access secret2 and thats why Js is called function scoped

console.log(secret); // "555"
console.log(secret2); // reference error

// But in many other programming languages we can't access that the secret variable
// because they are block scoped
```

But if we use let and const instead of var in the If statement then Js will also be able to use block scoping and we won't be able to access the variable secret from outside of the if statement

Well these are concepts and theory of execution context, lexical scope, and scope chain, I hope you enjoyed learning it and understanding the stuff

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

Reach out to us on [Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Thank You for your time

Keep learning, Keep coding :)


Understanding the fundamentals of execution context, lexical environment and scope chain

Lets dive deep into the concept of execution context, lexical environment and scope chain

Execution Context | Lexical Environment | Scope Chain


We have used Javascript many times but do we really know, how it works and how powerful language it is

Well for some of that curious fellow who wants to know everything about Javascript and how it works under the hood, this article will really help you, lets go step by step and understand it, Let's go.

So starting with the basics, we all know that the computer knows only 1's and 0's so how are we able to communicate with the computer using Js, any guesses, yeah we use the Javascript Engine to do so

### JavaScript Engine

Now that I have told you about the engine you might have also heard of the famous Chrome's V8 engine which is written in C++ and it is responsible to make the computer understand what we write in Javascript and convert it into language that computer can understand.

Are you wondering what Chrome's V8 engine does? , are there any other engines for other browsers like firefox or safari?

Ok so, first of all, there are many engines out there and every browser uses a different engine and every engine is slightly different from each other like they have a different architecture like Mozilla Firefox uses Spidermonkey and its kind of has a different approach but in the end, they all solve the same problem.

But the fun part is that everyone can build a Js engine and yes even you can build that engine but always understand that you have to abide by the rules and regulations which are set by EcmaScript which is the governing body which tells how to use JS and how it is standardized and it governs the engine creators how JS should work, but internally how you build your engine is entirely up to you as long as it is in within the standards.

## Working of V8 Engine

We will talk a bit about how the V8 engine works and how it works under the hood, the main reason we are talking about that particular engine is that it is very popular and one the most used engine and also because all other engines that exixts are mostly the same with little changes here and there

![Javascript Engine](/blog/how-javascript-works/js-engine.png "Javascript Engine")

In the above-given pic, the Js file goes inside the engine and there is a long process there and it finally comes out of the engine as an optimized code that the computer can understand which is awesome.

## Parser And AST

So first the Js file is broken into packets and separated into different parts using the Parser and then the packets goes into the AST ( Abstract Syntax Tree ) which makes the packets into an organized tree-like structure after that it is passed into the Interpreter.

For those who don't have a clue about interpreter let me explain it in comparison to a compiler so it's easy to understand, if you want to know about it in crisp and to the point you can refer to our post on[ Instagram](https://instagram.com/aviatecoders)

Now there are two ways a code in whichever language can be changed to machine code or a code which machine understands using the interpreter or a compiler, some languages use the interpreter to do it and others use the compiler and some use both.

## Interpreter

The interpreter translates and executes the program line by line as it runs by outputting bytecode and so you might have heard that Js is an Interpreted language but is not an entirely true statement, it actually depends, read ahead and you will find out.

## Compiler

The compiler on the other hand first scans the code that is it goes through your code till the last line and changes that code into something called Machine code and then it executes the program.

## Interpreter Vs Compiler

Now, why would we use something like interpreter over compiler, well interpreter can start fast because it just translates them on the fly and is quick to do so and as the browser uses Js we can understand that it is important for it runs fast because the user of the browser is waiting for the page to load or do something and if it doesn't it will create a bad user experience.

But a problem arises when the code is big enough and it has loops to do certain tasks it would take time as it goes line by line and that thing got really messy and very slow.

But in the case of a compiler we know it took some time to start up because it had to go through the entire code once and convert it into a different language altogether but it used to do so many optimizations into the code which made it work faster on a long run

## JIT Compiler

So the question is should we use an interpreter or a compiler because now we know there are pros and cons to both of them and then what happened is the engineers at the big companies thought of mixing the pros of both the worlds and make a JIT compiler or you may have heard as Just-in-time compilers to make their engine work faster

Well now that we know about the compiler and interpreter, we move onto the next process that is when the code is transferred from AST to Interpreter it changes that code into byte code and what happens is that whenever there can be some optimizations done with the code which is checked by the Profiler it is then passed down to the compiler or the JIT compiler which takes the code and outputs an optimized version of code and this process runs in a loop again and again and eventually our code in Js becomes faster because optimizations are done again and again

This is how the V8 engine works

Now if you have noticed in the above figure there is a section of the Call Stack and the Memory Heap, you might have wondered what are the function of these things so let's have a look.

## Call Stack

First, let's see what a stack is, so Stack is a Data Structure that you can visualize like an array where you can only push and pop like remove and add elements from the top.

We know what call is, it's just the calling of a function. Briefly, CallStack is the list of functions that are supposed to run by the interpreter for visual content we have a [post](https://www.instagram.com/p/CHNtqjiA-8z/) about this you might like to check that out.

The Call Stack you can imagine it as the place where a function is executed one by one that is it forms a stack of functions that are to be executed in the program, you can go and visualize this in the Chrome browsers inspect tool and then to the sources tab where you can add a snippet and then run the code and there is a column to the right where you can see the Call Stack and it displays each process.

How the call stack works is that when you start to execute a program and a function is called and goes onto the call stack after that the function returns something and then it is popped off the stack, after that another function is put on the stack and the same process continues until the whole program is executed.

There are certain limitations to the call stack for adding functions and when the limit is over there is a stack overflow.

## Memory Heap

The Memory Heap is the block of place where you can store the variables, objects, arrays, and other stuff that is, it is just a place to store things. Similarly, when we start writing code the memory will get filled and because memory is limited which will cause memory leaks.

## Single-Threaded

You might have heard of Js being a single-threaded language that means it is synchronous (it can only perform one task at a time ) it can't perform multiple tasks at one time as we have seen in the call stack. But the problem with that is we can't do multiple things simultaneously and this will create a lot of difficulties if only one task a user can perform on a browser at a time.

## JavaScript Runtime

To resolve this issue we use something called a JavaScript Runtime which helps in running Asynchronous code and it comes along with the Js engine with the browser. From the image given, there are a lot of things happening in this particular picture and we are going to understand the complete picture of how things are going to be done.

![Javascript Runtime](/blog/how-javascript-works/js-runtime.png "Javascript Runtime")

We already know about the call stack and the memory heap and how it does the thing, now let's talk about Web API

## Web API

So Web Api's are shipped along with the browser as a part of JS Runtime, now to be very clear you might have heard of the window object which you would have used a couple of times while writing applications for the browser when you type window in the console you will be able to know all the web API's that are in your service

The web APIs can do many things like sending HTTP requests, do changes to the DOM, delay an execution using the setTimeout() method, and many other things, using the web API we can make our code asynchronous that is we can let the web API do something in the background while we execute our JS code using the call stack and when the background process is finished we can put that into the call stack and finally get the result desired.

## Callback Queue And Event Loop

Now, what is the role of the callback queue and the event loop, so the callback queue is the place where the process of the web API goes after it is finished execution, after it is placed on the callback queue we need to check if we can move to the call stack and for doing this specific task event loop is required because for moving that task to the call stack we have to first check if the call stack is empty and secondly we have to see if the whole program is executed.
And finally, when there is nothing on the call stack it is pushed and executed and popped off

![Celebrating](/blog/how-javascript-works/3.png "Celebrating")

And that's it, these are the things that goes under the hood of JS and it's really interesting how things work together for giving us the best possible result and with such great speed, the normal user doesn't even know what happens when they search for something or just click a button but we as developers have the privilege of understanding these things.

## Summary

How can knowing these can help us, well by knowing these things you are aware and understand and can write better code that is well optimized for the engine and make it faster and in the end making the user experience much better.

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

Reach out to us on [](https://twitter.com/kartikey_yadav7)[Twitter](https://www.instagram.com/aviatecoders/) and [Instagram](https://www.instagram.com/aviatecoders/) where we try to provide more value in threads and carousal formats

Happy Coding and keep learning :)


Understanding the inside mechanism of Javascript works

All you need to know about how the language of Javascript works under the hood

How Javascript Works

Hey guys,

The 'this' keyword is one of the important concepts in JS and is used everywhere and so it becomes very important for us to understand "_this_"

But I know there is a lot of confusion regarding the "_this_" keyword and I did too when I was learning about it so don't worry it's ok if you don't understand it in the first go but I will try to hopefully make you understand what it is.

Let's start simple

I am assuming that you guys know what the "window" object is, because the "_this_" keyword is all revolving around objects and things like that so if you don't please learn about it and come back

Now when you type in your console

```javascript
this === window; // true
```

This statement will be true,

So does that mean that the "_this_" keyword is just the window object and nothing else?

Well, you see the _"this"_ keyword depends on where it is written i.e in which object it is defined.

In whichever object it is defined it will refer to that particular object

Let's understand this a little better by an example

```javascript
function hello() {
	console.log(this);
}
hello(); // the output will be the window object window.hello()
```

In the above example as you can see

We have made a function hello() and inside the function, we have console.log(this),so what do you think should be the output?

The output will be the window object, but how?

See the _"this"_ keyword always refers to the object in which it is to be defined so the

_"this"_ keyword is the object the function is property of"

Here as you can see the function hello is the property of the window object and if _"this"_ is used inside the function it will refer to the window object

As a tip always remember that whatever is to the left of the method is the object the _"this"_ keyword is referring,so here as you can see window.hello() is present so to the left of hello there is the window object and so the _"this"_ keyword is referring to the window object

Let's see another example

```javascript
const singer = {
	name: "Joy",
	sing() {
		return "ullaa " + this.name;
	},
};
singer.sing(); // ullaa Joy
```

By seeing this example I hope you might have understood it a little better

In this example here, we have made an object name "singer"

The object singer has two properties name and sing, we have used the _"this"_ keyword in the sing method

Now if you remember from the previous example, the function was defined in the window object but here the function sing is defined inside the singer object so it's obvious that the _"this"_ keyword is referring to the singer object

Here too you can apply our tip of seeing the left side of the method, which in this case is the singer object and it's what the _"this"_ keyword is referring to.

Here is another example for you to understand better

```javascript
const singer = {
	name: "Joy",
	sing() {
		return "ullaa " + this.name;
	},
	singAgain() {
		return this.sing() + "hahaha";
	},
};
singer.sing(); // ullaa Joy
singer.singAgain(); // ulla Joy hahaha
```

Here as you can see it is the extension of the previous example

As you can see that we have referred to the sing function from the singAgain function using the this keyword, so instead of writing the whole function again I have just used the _this_ keyword to refer to that piece of code and that helps in writing DRY code

The two main important benefits of using the _"this"_ keyword are

1. Giving methods access to their objects
2. Executing the same code for the multiple objects

We have understood the first part in the above examples where we saw that the singAgain and sing function had access to their object

Now, Let's see the second part

Example

```javascript
function getHelper() {
	console.log(this.name);
}

const name = "Jasprit";
const worker = {
	name: "Jessica",
	helper: helper,
};

const worker1 = {
	name: "Jason",
	helper: helper,
};

getHelper(); //Jasprit
worker.getHelper(); //Jessica
worker1.getHelper(); //Jason
```

As you can see from the above code, we have made a reusable function getHelper which returns the helper from the object on which it is called

In the object named worker, the _"this"_ keyword defined in the getHelper function is referring to the name Jessica and in worker1 it's referring to Jason and in the global object its referring to the global variable name - Jasprit

Now we can see that _this_ keyword is helping us write better code

Some Important concepts regarding _*this*_ keyword

For understand the first concept we need to a little bit about the lexical and dynamic scope,

I have covered these concept in details in our other blog but just for recap here it is in brief

> _In JS our lexical scope ( available data + variables where the function is defined) determines our available variables not where the function is called which is called dynamic scope_

What I mean here is, in JS we have lexical scope which means the available data and variable are defined where the function is defined and it doesn't matter where the function is called , but in dynamic scope it does matter where the function is called

If you want to know more about the lexical scope check out this blog [here](https://www.aviatecoders.com/javascript/execution-context-lexical-environment-scope-chain)

But there is an exception to this rule which is that the _"this"_ keyword doesn't follow it

Let's see how

```javascript
const singer = {
	name: "Joy",
	sing() {
		console.log("1", this);
		var singAgain = function () {
			console.log("2", this);
		};
		singAgain();
	},
};

singer.sing();
```

Now what do you think will be the outcome of the first and the second console.log( )

OK let's check it out

The output of the first console.log( ) is "singer" but the output of the second console.log( ) is the "window" object which is weird

As you can see function singAgain( ) is called inside the sing( ) function, it is not called inside the object "singer" it is called inside the sing() function, and by default, the _"this"_ keyword is the window object

Now if you remember I wrote a statement above and said that the _"this"_ keyword is an exception to this rule which means that the " this" keyword is dynamically scoped and it doesn't matter where it is written but where the function is called and because of this property of _this_ keyword that we have such behaviour

But there are ways to tackle this problem

1. Using arrow function
2. Declaring _"this"_ keyword at the start and using the substitute in place of _"this"_
3. Using bind

Let's see each one by one

1.Using arrow function which are lexically bound and what that means is in ES6 we can use the arrow function to bind the _"this"_ keyword to that specific object

Using the previous example

```javascript
const singer = {
	name: "Joy",
	sing() {
		console.log("1", this);
		var singAgain = () => {
			console.log("2", this);
		};
		singAgain();
	},
};

singer.sing();
```

Here the first and the second console.log( ) will have the same value which is equal to the object "singer"

2.Redefining the _this_ keyword

```javascript
const singer = {
	name: "Joy",
	sing() {
		console.log("1", this);
		var self = this;
		var singAgain = function () {
			console.log("2", self);
		};
		singAgain();
	},
};

singer.sing();
```

As you can see from the above example we have stored the value of the _"this"_ keyword inside the variable self when it was still referring to the singer object and used the declared variable self instead of the _"this"_ keyword inside the singAgain function and it solves the issue kind of like Juggad

3.Using the Bind method

```javascript
const singer = {
	name: "Joy",
	sing() {
		console.log("1", this);
		var singAgain = function () {
			console.log("2", this);
		};
		return singAgain.bind(this);
	},
};

singer.sing()();
```

The bind method, you read about it [here](https://www.aviatecoders.com/javascript/what-is-call-bind-apply-in-javascript) for more info, but here we are just binding the _"this"_ keyword to the object "singer" and returning the function, also notice that we have to call singer.sing()() twice because then only it will return the second function

So these were a few important concepts related to the _"this"_ keyword, if you think that I might have missed something than please let us know and we will add it right away

I hope you understood the main concept of the _"this"_ keyword and what it is, always remember the line

_"this"_ keyword is the object that the function is the property of"

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

Reach out to us on [Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Thank You for your time

Keep learning, Keep coding :)

Learn about one of the most notorious topics in Javascript  THIS

Understanding the "this" keyword in Javascript is important and most developers struggle with it, learn why it is useful and awesome

THIS Keyword In JavaScript


So you have learned the required skills for web development and want to know what can be the best way to start a project

### **Doubts?**

How to basically structure my project? How can I make it more organized and efficient? How to not get messed up with all the things when into a project? I know I know these kinds of questions pop up into every developer's mind when they start making big projects, but don't worry I will help you get rid of most of them so keep reading.

If you are a beginner don't worry I know at the beginning stage of your journey you don't really care about structuring your project but for becoming more efficient in your project, I recommend you start applying the process I am going to talk about in this blog post right away and you will the results for yourself.

Now let's begin the process of making your project the best suited to your needs.

### **Process**

So there are five steps I am going to talk about in this video so let's go

![Thinking of project](/blog/how-to-start-a-web-development-project/1.png "Understanding the project")

#### 1. Understanding the project

a. It's very important to understand the project you want to build, not every minute detail is needed but you need to have a bigger picture in your mind of what you are gonna build.

So let's start by deciding the aim for your project if it's your personal project or your clients it will have some motive behind it so always work with that keeping that in mind.

Ex. If you want to sell something with that project or you want to make social media kind of project

b. Next is the target audience for the project, when you know who is your target audience you can clearly make your project best suited for those kinds of people

Ex. If your target audience is marketers then you will have a different approach and different features but if they are developers then it will differ.

c. Requirements for the project i.e the stack you are going to use and other technologies and illustrations and other stuff that you wanna include in your project.

![Designing the project](/blog/how-to-start-a-web-development-project/2.png "Designing the project")

#### 2. Design your website

a. Now I know you are excited to start building your awesome project but first, let's start by designing the project how will it look, and what all can be the features to be added on the website.

b. Well, you can use any software like Adobe Xd, Figma, Sketch, etc for doing the same.

c. I know what you are thinking why should I do this I am no designer but you know what it's not about designing each piece it's just about sketching it roughly like wireframing so that you don't get lost in your process of building the project. It will also help you to make UI elements for your frontend.

![Coding the project](/blog/how-to-start-a-web-development-project/3.png "Coding the project")

#### 3. Coding

a. Finally, we are on the part that you all love and enjoy doing because we are developers right, so now quickly set up your web development environment, the IDE you are gonna use, the libraries, and all the other stuff required.

b. There is one important thing always set up your Github repo before starting and commit on anything you add or remove like a feature or bugs because it will help you document and are many other benefits of starting a Github repo at the start of the project which will be covered in next blogs (shameless promotion)

c. Well, you could also check out other projects similar to which you are gonna make that also might help you.

d. Also, everyone has their own workflow so don't just get intimidated by others.

![Managing the project](/blog/how-to-start-a-web-development-project/4.png "Time management")

#### 4.Managing

a. So now to keep everything organized you can also use project management tools they are really simple to use and some are also free for personal use. Eg. notion, ClickUp, Evernote, etc

b. Well if you can, you must try to document each and everything you do while doing a project so that it will instill confidence in the future projects you will build.

![Deploying the project](/blog/how-to-start-a-web-development-project/5.png "Deploying the project")

#### 5. Testing and Deployment

a. Well by now you have completed your project and are ready to deploy it but a very crucial thing beginner developers forget is testing, testing is really important for any project if you really want to make industry-ready apps then you have to test.

b. Also, test on different OS and different browsers that will help you find if there any vulnerability in your project and enable you to create a real masterpiece

c. Now you can deploy your project, if you have made a static site then you can host it on many platforms like Netlify, Vercel, etc, or if its a full-stack website with a backend and the frontend you have to use services like Heroku, Digital Ocean, etc

That's it guys I have told you the way in which you can make your projects more organized and efficient, now I know some of you are thinking that I don't do these things, man, then to my projects are awesome well these are my personal opinions through which I try to make things a slightly better, everybody has different approach if you think you can help us improve we would be glad to hear it and we can grow into a better community.

### Summary

1. Understanding the project.
2. Designing the project.
3. Coding the project.
4. Managing the project.
5. Testing and Deployment of the project

### Get In Touch

Have you learned something new today let us know

Reach out to us at [Twitter](https://twitter.com/aviatecoders) or [Instagram](https://www.instagram.com/aviatecoders/) where we provide a lot of content in simple and carousal form which you can enjoy


An indept look at how you can start your own projects in the world of web development

Don't start a web development project before knowing these 5 fundamental things, build your web development project using these, and see the difference confident.

How to start a web development project

In this article, I am going to explain what is frontend development and why you should give it a go and how to get started with a front end development

Have you ever wondered how there are so many awesome looking websites with animations, videos, and what not to make them more user friendly and easier to navigate for people and who builts these types of designs and who codes them? So are you interested to know about who are the people do that kind of stuff, yes you guessed it right they are the frontend developers

## Why Become A Frontend Developer?

To begin with, I will first explain to you why you should choose a career in front end development and who should pursue it

So frontend development is basically how your site looks like and what is the design, how the user should interact with the website or web application, and other similar stuff everything related to visual, that you can see and what looks beautiful on these sites.

You can argue that a UI/UX designer make the design for a web app but that is the case in large companies only and if you are working as a freelancer than its highly likely that you will only make the design and convert that part into code and so because of this a front end developer should have the basic knowledge about how a web page or landing page should look like and how one should design such apps

Now here are some of the stats that will definitely help you to know the market value of a frontend developer and how learning such an in-demand skill will post up your career and help you become more efficient in your life.

## 1.Job Market

![Job Market](/blog/road-to-become-a-frontend-developer/road-1.png "Job Market")

Now that you have seen the demand, let us motivate you by showing you the salaries of front end developer if you are really good at what you are doing

## 2.Salary

![Payscale of frontend developer](/blog/road-to-become-a-frontend-developer/road-2.png "Payscale of frontend developer")

I hope this has motivated you enough and these are just that stats on what companies are paying you for your work but when you start helping people through your skill by freelancing then you truly will understand the money people are willing to pay if you make their customers convert through your web design and development skills

Just as they say you have to be good at one thing and if you are awesome in one particular domain then you can really go forward

## 3.Freelance

![Freelancer prices](/blog/road-to-become-a-frontend-developer/road-3.png "Freelance prices of frontend developers")

## How To Get Started ?

Let's start with knowing what are all the things or weapons in your arsenal are needed to become a frontend developer, yeah so basically you will be needing HTML, CSS, JS are the main things that are required for just starting out with web development and to build a basic web page or landing page, well you can use it to build advance sites as well but there is a better option like frameworks which I will explain later in this article

So what is HTML, CSS, and JavaScript, well they are basically what makes a web page so if I were to give an analogy so the HTML is the noun, CSS is the adjective and JS is the verb the does the functionality or the action part, don't worry I will explain then in detail

### 1.HTML

Html is the barebone of a webpage and it stands for hypertext markup language it is not a programming language but yeah you need to learn it and what it gives is just everything you need like header, links, paragraphs, images, list items, etc everything is HTML

### 2.CSS

And when in that barebone you add something like some styling, like how will the buttons look what should be their width and many other features and this is all provided by something called a CSS which stands for cascading style sheets whose work is to make things look good

### 3.JavaScript

And when those things perform an action like when we press a button we need something to happen like submit a form or any other things the possibilities are many in that case, we use JS as in Javascript it is a programming language and is one of the top languages out there with the most demand in the market if you master this language you can pretty much change everything on the web

### Topics For HTML

Some basic topics you need to cover in HTML are tags in HTML which can be header, paragraph, anchor, forms, tables, buttons, these are basic topics of HTML you can learn

### Topics For CSS

In CSS some basic topics are selectors like the universal and element selector, classes, ids, specificity, inheritance, box model, media queries, and flexbox

### Topics for JS

JS is a programming language so you have to learn everything which you basically learn in any programming so there everything is important to learn and also do remember to learn the latest syntax as it has different versions

### Frameworks For CSS

So the order of learning will be like first learn HTML and then move onto CSS after that you can learn any CSS framework like Bootstrap, Tailwind, etc what CSS frameworks are that they make our life easier in writing CSS as it starts to get tricky as a number of elements start to grow but basically you have to learn the CSS from the basics and once you are convinced about that you can start using frameworks.

Learn JS with all the latest syntax and everything from beginner to pro and then you will find yourself in a comfortable position further in the journey of web development

### What Is DOM?

After JS you can start learning DOM (Document Object Model) which is more of the things you can control it's like everything comes together when you use dom the HTML, CSS, JS everything is used and you are able to start changing stuff and adding functionalities like what happens when the button is clicked, how you what things to change when certain events happen in the webpage eg when you scroll or something like that so that what dom does.

### Frontend Frameworks

Now if you want to further go into the depths of things you can always learn frontend frameworks like Angular, React, Vue, etc there are many of then, what a framework does is it really makes the process of making web pages and web apps super easy and every framework has its own learning curve and my advice would start learning and using one and understand what suits you the best

Yay! So you are basically ready to call yourself a frontend developer

### Some Personal Advice

Join a community where you can ask doubts, I would recommend some discord or telegram group of web developers and lastly, if you want to buy any courses on web dev so on Udemy there are instructors like [Colt Steele](https://www.udemy.com/course/the-web-developer-bootcamp/), Andrei Neagoie, Dr. Angela Yu, etc they teach web dev in a proper manner you can have a look at them and find yourself an awesome course

Hope you found this article useful

Do let me know if any feedback through [Twitter](https://www.instagram.com/aviatecoders/) and [Instagram](https://www.instagram.com/aviatecoders/)

Happy coding

Understanding the fundamentals of becoming a web developer

Learn your best way to become a first class frontend developer

Road to become a frontend developer

IIFE (Immediately Invoked Function Expression)

ONE of the important concepts of JavaScript is IIFE and so we will try to make you guys understand what it is and how it is useful

From the things we have learned about execution context and scoping (refer to the previous blog [here](https://www.aviatecoders.com/javascript/execution-context-lexical-environment-scope-chain)) you might have noticed some issue and the problem is that whenever we define a variable we have to be careful to not repeat the same name twice or in other words avoiding namespace collisions in the global execution context

Now this is not a big problem if you consider a small size application but when our application becomes big and when we have multiple developers working on the same project and we have multiple JS files, this problem can be faced very frequently.

Let's see why global variables are bad

1. First, if we define too many variables into the global scope we might end up filling our memory heap with so much data and it could crash our browser
2. The second reason is that even if we don't have many variables there comes a problem like if we define the name of the variable same because it might happen so it will lead to other problems like changing the previous names actual data and this results to many bugs

Even if we use different script tags and different JS files it all comes down to a single file and having the same names for the variable will lead to many bugs and problems which pollutes the global namespace

But that's where IIFE comes which are Immediately Invoked Function Expression

by reading the full form you might have thought what the heck is this so let me explain what it exactly is,

```javascript
//IIFE
(function () {
	//code
})();
```

As you can see this is an IIFE and it is also a function expression,

You might ask why it is a function expression, well when the JS engine parses through the code it doesn't encounter _function_ keyword instead it encounters "(" and so it is a function expression

Now whatever you will write inside the IIFE will not be accessible to the outside function expression and because of that, it doesn't pollute the global namespace as simple as that.

Remember that a function declaration can't be used as an IIFE and it can't be directly invoked if you do that then you will have a syntax error

```javascript
function(){
  //code
}()  // This will give syntax error
```

This idea of IIFE became very popular back in the day and many libraries still use it like jQuery use IIFE and its just a popular way to avoid namespace collisions

But with the introduction of ES6 Modules and things like that not many applications now don't use IIFE, but it really is a very intriguing concept and is often asked in interviews so there is no harm in learning them

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

Reach out to us on [Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Thank You for your time

Keep learning, Keep coding :)

IIFE ( Immediately Invoked Function Expression) are an important concept we are going to understand exactly what problem does it solves in JS

What are IIFE in Javascript

Hey guys,

So you might have heard about these famous methods especially the bind method as it used so much, let's try and understand about these methods

## Call and Apply

```javascript
function greeting() {
	console.log("hello");
}
greeting(); // hello
greeting.call(); // hello
greeting.apply(); // hello
```

This is a very simple code that I have written

I have used the call and apply method on the function greeting, and the output of these will be _hello_

The first function call that we regularly use is the normal function call and it outputs hello, but the next is also a function call which we do using the call method and it gives the same output as hello and lastly using apply method which also gives the same output

Well under the hood, JS uses .call() method when a function is invoked that means greeting.call() is always used and greeting() is just the shortcut way to write

And when we use apply it gives the same result

We have seen the result of using call and apply but now let's see how they can be useful

```javascript
const student1 = {
	name: "Harry",
	percent: 60,
	increment() {
		return (this.percent = 100);
	},
};
student1.increment();
```

What I have done here is that I have defined an object named student1 and given name and percent and also an increment method to it, what the increment method does is that it increments the percent whenever the method is called( if you don't know about the "this" keyword please refer to [this](https://www.aviatecoders.com/javascript/how-this-keyword-works-in-javascript) article

Now what I want to do is to use increment method of the student1 on another object named student2

```javascript
const student1 = {
	name: "Harry",
	percent: 60,
	increment() {
		return (this.percent = 100);
	},
};

const student2 = {
	name: "Marry",
	percent: 30,
};

student1.increment();
student1.increment.call(student2);
```

If you run this code in your editor, you will find out that the percent of student2 has increased to 100, and that is the benefit of using the call method that we don't have to repeat the method in every object that needs it and this helps in writing DRY code

Also, the call method can accept parameters like so

```javascript
const student1 = {
	name: "Harry",
	percent: 60,
	increment(num1, num2) {
		return (this.percent += num1 + num2);
	},
};

const student2 = {
	name: "Marry",
	percent: 30,
};

student1.increment(10, 20);
console.log(student1.percent); //90
console.log(student2.percent); //30
student1.increment.call(student2, 20, 50);
console.log(student2.percent); //100
```

And the output will be 100 for student2

Let's see what apply does differently from the same example

```javascript
const student1 = {
	name: "Harry",
	percent: 60,
	increment(num1, num2) {
		return (this.percent += num1 + num);
	},
};

const student2 = {
	name: "Marry",
	percent: 30,
};

student1.increment(10, 20); //90
console.log(student2.percent); //30
student1.increment.apply(student2, [20, 50]);
console.log(student2.percent); //100
```

Well as you can see apply doesn't do anything much different, it just changes the way we pass argument using apply we pass arguments through an array but it returns the same result

Now if you want to choose whether to use call or apply it depends on how you want to pass the arguments, if you want to pass them as an array then use apply, if you want to pass normally use call

Also as you can see from the above example the method increment has the "this" keyword which helps us to use it in other objects as well, if a method doesn't have that we can't use it on other objects

## Bind method

Moving on to the bind method

Well unlike call and apply which instantly give the output, bind on the other hand return a function

```javascript
const student1 = {
	name: "Harry",
	percent: 60,
	increment(num1, num2) {
		return (this.percent += num1 + num2);
	},
};

const student2 = {
	name: "Marry",
	percent: 30,
};

student1.increment(10, 20); //90
console.log(student2.percent); //30
const incrementedStudent2 = student1.increment.bind(student2, 20, 50);
incrementedStudent2();
console.log(student2.percent); //100
```

So bind helps us to store the borrowed method for later use in form of a new function

You might have seen the bind method being used for the 'this' keyword, which is a common thing that bind method is used for

Let me explain the bind method passes the "this" keyword which refers to a certain object as an argument to itself, it's like storing the "this" keyword for later use and returning a function

```javascript
const singer = {
	name: "Joy",
	sing() {
		console.log("1", this);
		var singAgain = function () {
			console.log("2", this);
		};
		return singAgain.bind(this);
	},
};

singer.sing()();
```

So in this, as you can see I have used the bind method to store or bind the "this" keyword which refers to the object singer because if you see carefully it is not inside the function singAgain() it's inside the sing function where the "this" keyword still refers to the object singer

Now as we know that the bind function stores the value for later use and binds it to the particular function it is attached to and then returns a function

If you run this code inside the console, you will see that both the first console.log and second refer to the same object which is the singer object

And if any of you are wondering why is singer.sing()() is called twice well because if you only do like singer.sing() then it just returns the singAgain function it doesn't invoke it, so to invoke we have to again call it

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

Reach out to us on [Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Thank You for your time

Keep learning, Keep coding :)

Many developers get confused or don't understand the basics of call, bind, and apply, in this article, you will understand everything related to call, bind and apply

Call, Bind and Apply In Javascript

Closures is an important topic when it comes to JS so let's understand it in detail

To understand closure we first need to have a good knowledge of functions and lexical scoping because closure is dependent on these concepts

To start I will explain about functions and higher-order functions so if you already know about it you can directly go to the closure part

Let's start by revising what we know about functions

We know how to call functions

1. Normally calling a function

   ```javascript
   function hello(){
    console.log("hi)
   }
   hello()
   ```

2. Calling with an object

   ```javascript
   const obj = {
   	name: "Jett",
   	speed() {
   		console.log("Woos");
   	},
   };
   obj.speed();
   ```

3. Using the call method

   ```javascript
   function hello(){
    console.log("hi)
   }
   hello.call()
   ```

4. We can also use "new" operator

   ```javascript
   const four = new Function("num", "return num");

   four(4);
   ```

We know that whenever a function is invoked it creates an execution context and that execution context consists of the "this" keyword, the "arguments" keyword, and finally the variable environment, if you want to know more about execution context do refer my article [here](https://www.aviatecoders.com/javascript/execution-context-lexical-environment-scope-chain)

A important thing to know about functions is that

> **_Functions are a special type of object which are called callable objects in JS_**

Why you ask, because if you imagine a box with the name of the function and some code with three properties - call, apply and bind

![Function](/blog/what-is-closures-in-javascript/closure-1.png "Inside of the function")

If you now go to your text editor and type a function and then see by the intelligence you will see something like this

![Functions are objects](/blog/what-is-closures-in-javascript/closure-2.png "Functions are objects")

It will give you the options or the methods that you can use with the function itself so that means it behaves like an object

Now how does this concern us, well if functions are objects then we can store them around like objects, move them and pass them to another function

> **_Functions are first-class citizens in JS_**

What does that means is

1.We can store a function into a variable

```javascript
var greet = function () {};
```

2.We can pass a function as an argument to another function

```javascript
function greet(fn) {
	fn();
}
greet(function () {
	console.log("hello");
});
```

3. We can also return a function

```javascript
function greet() {
	return function () {
		console.log("Hi there");
	};
}

greet()();
```

So basically what I am trying to say is function can do pretty much everything other data types can do in JS

### Higher-Order Functions (HOF)

A HOF is a function that can return a function or a function that can take function as an arguments

And we also know about the lexical scoping in JS and if you don't, then you can refer to [here](https://www.aviatecoders.com/javascript/execution-context-lexical-environment-scope-chain) article but in brief,

Lexical scoping or static scoping means the available variable data and functions are dependent on where the function is defined and with that we are now ready to understand the concept of closures

## Closures

```javascript
function hello() {
	console.log("greetings");
	var a = "hi";
	return function b() {
		var b = "hi there";
		return function c() {
			var c = "hello there";
			return `${a} ${b} ${c}`;
		};
	};
}

hello()()(); // hi hi there hello there
```

Let's understand how the code works here

Well as you guys know that when function hello is called it is pushed onto the stack and after it returns another function it gets popped off the stack (and if a function gets popped off the stack then their variable environment gets destroyed) then function b comes onto the stack return a function and again pops off the stack

Finally, function c comes and return all the variables that were defined while in function hello and b

But didn't I just said that those functions were popped off the stack , so how does function c has the values of the variables inside it , because as we know that when ever the function gets popped off the stack we don't have access to their variable environment

And this concept of accessing the variables even if the function is popped off the stack which returning a function is called _*closure*_

Let dive deep

What happens is that the first time when the JS engine parses the code it sees that the variables are mentioned even inside the function which is being returned and so because of that it just stores the variable into a contained called closure and when the function is being called which other functions are returned then when the JS engine gets the values of the varialbes from the closure box and returns the function

Now this allows us to have uses such as memory efficiency and encapsulation

Let's see how things can be memory efficient

### Memory efficient

```javascript
function work(index) {
	const arr = new Array(7000).fill(":)"); // create new array with 7000 elements of :)
	console.log("created");
	return arr[index];
}

work(55); // created
work(99); //created
work(800); // created :)
```

Here we have created a function that creates a new Array of 7000 elements with ":)" and finally return it, well this process takes time if we call it again and again and is not very memory efficient

What we can do instead is

```javascript
function work(index) {
	const arr = new Array(7000).fill(":)"); // create new array with 7000 elements of :)
	console.log("created");
	return function () {
		return arr[index];
	};
}

const workHard = work();
workHard();
workHard();
workHard();
// created :)
```

Here even if we call the workHard function many times it will give only one output and that saves a lot of time and memory instead of creating an array every single time on invocation

### Encapsulation

Also with the help of closure, we can use encapsulation which means is a process of bundling the data (i.e. variables) and methods within the functions

We have covered the most part here , but if you think we missed something or we have some error then please suggest and give us feedback, we would love to know your thoughts and ideas

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

Reach out to us on [](https://twitter.com/kartikey_yadav7)[Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Thank You for your time

Keep learning, Keep coding :)

Learn about the famous closures and understand Javascript on an even deeper level here with examples and advantages of closures

Closures In Javascript

Hey guys,

Hoisting is an important topic from the perspective of Javascript Interviews so lets understand it in this article

What is hoisting?

We know that the JS engine parses the program once before running the code (see my previous article on how the JS engine works) and also we know that each program consists of variables and functions

Lets understand hoisting with an example,

```javascript
console.log(greet); //----1

var greet = "Hi";

console.log(greet); //----2
```

Explanation of the code

1.Console.log(greet)

So what do you think will be the output of the first console.log( ), well var greet is defined after the first console.log( )

— The answer is "undefined" but why ?

This is the concept of hoisting, in which as the JS engine parses through the code if it encounters the "var" keyword word then it immediately stores the value of that particular variable in the memory heap but as undefined

And when it runs the code, if it encounters something like console.log(greet) before even greet is defined then the stored value comes into the play and we get undefined which is the case with the first console.log( greet)

2.Console.log(greet)

Here the output second console.log(greet) is "Hi" because till then the var greet is defined as "Hi" and the undefined is replaced with "Hi" in the memory heap

**Note: This is important that the partial hoisting only appears if the variables are declared using the "var" keyword, the JS engine only performs hoisting in case of the variable when there is a "var" keyword, it won't perform hoisting when the variables are declared using let or const**

Also in the case of variables, there is partial hoisting

Let's see an example

```javascript
console.log(sing()); //----1

function sing() {
	console.log("uhh lalala");
}

console.log(sing()); //----2
```

1.Console.log(sing())

Now you know that in the first console.log( ) there will be hoisting but this time its a function, so what will be the output of it

— Well the answer is "uhh lalala"

Because function in Javascript which start with the keyword function are fully hoisted

When the JS engine parses the code before running if it encounters the "function" word it directly stores the whole function into the memory heap unlike in the case of variables and that's why they are partially hoisted

2.Console.log(sing( ))

And this one is obvious the output of second console.log( sing( )) "uhh lalala" because it comes after the function is declared

> **_"Function are fully hoisted and variables are partially hoisted"_**

But the important thing to remember in functions is that the function keyword in Js is important for it to get hoisted if we use function expression rather than function declaration it won't be hoisted

let's see what function declaration and function expressions are

```javascript
console.log(hello())---1
console.log(hi())---2
console.log(hi)---3

//Function declaration
function hello(){
 console.log("greetings")
}

//Function expression
var hi = function(){
 console.log("casual")
}
console.log(hi())---4
```

1.Console.log( )

Now after reading everything if you understood some things you will be able to answer the first console.log( hello( ))

— Well the answer is "greetings"

This is Fully hoisting the function hello

2.Console.log( )

This one is a little tricky because the function hi is a function expression and a function expression starts with var but in the second console.log(hi( )) the function hi( ) is called inside the console.log( ) and if the function expression is called before it is declared then the answer will be

— "Typeerror"

That will throw an error because it doesn't think of it as a function at the second console.log( ), it thinks of it as a variable

3.Console.log( )

But in the third console.log( ) the JS engine know that it started with var so it is stored inside of the memory heap as
— "undefined"

Alright, so here as I explained earlier if the JS engine encounters the "var" word it will keep it undefined even if it's a function

4.Console.log( )

And the last and fourth console.log( ), the function is already defined and declared so the output will be

— "casual"

As it is called after being defined it will show the output as casual

Some key points to remember

1.Every time there is execution context there are two are two phases, a creation phase and execution phase, in the creating phase there is hoisting and it is for a very single function on the call stack.

2.Functions are fully hoisted and variables are partially hoisted

3.Variables defined with let and const are not at all hoisted

4.Function declarations are hoisted, function expression is not

These are the things you need to keep in mind while we are talking about hoisting and I hope you have understood the concept of hoisting and as you encounter questions regarding hoisting it will get a lot clearer

Do you have any points to add or do you thing we made any error so

Reach out to us on [Twitter](https://twitter.com/aviatecoders) and [Instagram](https://instagram.com/aviatecoders) where we try to provide more value in threads and carousal formats

Keep learning, keep coding

Thank you

Understanding one of the hotest topic in Javascript - Hoisting

Web Development