## Introduction

In general, you declare functions and variables before you use them in your program.
 For example, we declared addTwo function before we called it in the code.
**Example:**

```javascript
function addTwo(x){
	return x+2;
}

//Output: 4
addTwo(2);
```

But in javascript, the functions and variables can be called before they are declared in the program. This concept is called **hoisting**. 



```javascript
//Output: 4
addTwo(2);

function addTwo(x){
	return x+2;
}
```



In the above example, **addTwo** is called before it is declared, but it returned the same value **4** instead of undefined. What exactly happened in the above example? Is the declaration being moved to the start of the code? It appeared as if declarations has been moved to the start of the program.

No, but the answer is quite simple, keep reading...

During compilation, the javascript engine first reads the function and variable declarations and put them into the memory. For this reason, during the program execution, they are accessible and can be used before they are declared in the program. Thus, appearing as if the declarations have been moved to the starting of the program magically.

> Function and variables declared anywhere in the file are available for the use at the very top of the file. This behavior is called hoisting.

## Variable Hoisting

Let's consider below example,

```javascript
//Output: undefined
console.log(test);

var test = 3;

//Output: 3
console.log(test);
```

You would have thought that the first **console.log** should have given **3** as the output.
But instead **console.log(test)** resulted in undefined because **only declarations are hoisted to the starting of the program and not initializations**. For more clarity, let's expand the above example,  

> Declarations are hoisted to the starting of the program and not the initializations.

```javascript
//Output: undefined
console.log(test);

var test;
test = 3;

//Output: 3
console.log(test);
```

 Here, **var test;** is moved to the start of the program and the assignment to **3** happened after the execution of the first **console.log**. For this reason, the output of the first **console.log** is **undefined**.

## Best Practice

Hoisting can create some confusion in declaring variables and functions, therefore it is considered best practice to declare all variables in starting of the program. 

## What about let and const?

Are variables declared using let and const are not hoisted? We will discuss hoisting in case of let and const in the next article.


----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**




Variable and Function Hoisting in Javascript


The purpose of this article is to provide you with a basic understanding of how the internet works and its history. Let's start by learning how it all started and construction of the Internet began.

## History of The Internet

When computers first arrived in the 1960s, wired and dedicated connections were used to exchange data between them. This type of communication was limited to short distances only because of signal loss and infrastructure limitations. Back in the days’ many organizations were working to develop the required technology for effective communication between computers.

The **packet-switching** concept was invented by Paul Baran in the early 1960s and is used in ARPANET, the world’s first packet-switching network.

TCP/IP, the protocol used in early packet switching networks like ARPANET and the Internet itself was introduced by Vint Cerf and Bob Kahn in 1974 in the IEEE paper titled A Protocol for Packet Network Intercommunication.

We will discuss core concepts and design philosophy that helped the internet not only survive the boom but also flourish and scale accordingly as millions of new users join it daily.

## IP Address

When you send a post using the postal service, you write down your own address and the destination address on the envelope and put it in a mailbox. The postal service then takes your mail and delivers it to the destination. Postal service encapsulates all the underlying technology and infrastructure it uses to deliver your mail to the destination. Thus providing you with a hassle-free service.

![Postal Address is similar to Internet Address on Packets (Pixabay)](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/0_OFT-6S6uCgQSHmGU.png?alt=media&token=7f1b927e-cedb-43d9-a2b7-fe3cb1d287c1)

In the same way, on the Internet, each device has a unique address that is required for any type of communication over it. These addresses are called **IP addresses**. 

When you send data over the internet, the messages are first divided into manageable chunks called **packets**. To each packet, source and destination addresses are added. An offset is also added to packets for reassembly at the destination incorrect order.

![Information is divided into packets (Pixabay)](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/0_QQT9kD3qr7jL3JIt.png?alt=media&token=7628b82b-50cd-43d6-8426-a5ec84a7ce4c)

The packets move through the network, guided by the routers towards their destination. Routers are computing devices that specialize in moving packets across the network. The protocol responsible for moving packets from source to destination is Internet Protocol. We will discuss routers and routing in detail in this series.

![Visualization of Routing Paths through a portion of the Internet(Image from Wikipedia)](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/0_Fwn1Uml-TrRNnQyx.png?alt=media&token=304a4b1a-6d33-4077-9022-7c50e90bfdb9 "Visualization of Routing Paths through a portion of the Internet -Image from Wikipedia")

Packets can follow different paths and arrive at the destination out of order. It is the responsibility of  **TCP — Transmission Control Protocol** to put packets in the correct order and check if all packets arrive correctly at the destination computer. If a packet is lost in transmission, TCP requests the source computer to send it again. Once all packets are accounted for, TCP assembles them back to form the original message and transmission is complete.

## See Also

[What is the Internet - Part 1](https://www.hackinbits.com/articles/misc/what-is-the-internet---part-1-2)



What is the Internet — How the Internet works - Part 2

![What is internet - cover image](https://firebasestorage.googleapis.com/v0/b/hackinbits-e2468.appspot.com/o/assets%2Fwhat-is-internet-part-1%2Finternet-cv.png?alt=media&token=622b1a02-9ca8-452e-afe4-4652469e0b31)

The **Internet** is a global network that is designed to move information. It links billions of devices (desktops, laptops, mobile phones, wristwatches, video game consoles, thermostats, etc.) together all around the world and enables information sharing between them. Let’s see how the Internet works under the hood.

Internet connects devices across the world! So, it must be a very complex system and have a very complex infrastructure! Right? Yes and No. To understand any complex system we hack it into understandable bits. We can follow the same approach to understanding The Internet.

In this article, we will learn about the underlying infrastructure that makes the Internet possible.

## Connecting computers

The Internet is all about connecting computers with each other. So, let’s start by connecting two computers. We can easily connect two computers with a cable. But can we do the same thing with eight computers? How about a hundred? How many cables and connections would be required to connect all the computers to each other?

![connecting computers using cables](https://firebasestorage.googleapis.com/v0/b/hackinbits-e2468.appspot.com/o/assets%2Fwhat-is-internet-part-1%2Finternet1.png?alt=media&token=42f843ca-4a28-4b97-955b-8110ecc73653)

If we try to add more computers to this network, the wires required increase enormously. Also, the length of cable to achieve this become quite long if the computers are far away from each other. 

## Router

This is where we take the help of a special device called **the Router**. The Router will make sure that the message sent by a given computer reaches the right destination computer.  

Let’s connect all computers to a router. The router will now take care of forwarding the message to the right destination computer in our network. Now, if we visualize the network, it becomes quite manageable as it grows bigger.

![connecting computers using router](https://firebasestorage.googleapis.com/v0/b/hackinbits-e2468.appspot.com/o/assets%2Fwhat-is-internet-part-1%2Finternet2.png?alt=media&token=3aeabb1f-6376-4582-8d4c-093579e3fe50)

Our home network is ready now! Oh, wait, how can I connect this network with my friend's network living in another city? 🤔 Can we make use of already existing infrastructure like the telephone network?  

## Modem

For connecting our home network to the already existing telephone infrastructure, we can take the help of a special device called the Modem. The Modem transforms your message into a format that can be transmitted and managed over the telephone infrastructure.

![computer network connected to telephone line using modem](https://firebasestorage.googleapis.com/v0/b/hackinbits-e2468.appspot.com/o/assets%2Fwhat-is-internet-part-1%2Finternet3.png?alt=media&token=68bda53f-0f30-4f78-80d6-5d3cd9cecd29) 

Now our message can travel far! Wow, but wait, I need to send it across the world to another country, how can we do that? 🤔 We take the help of an Internet Service Provider(ISP) for this. 

## ISP

ISPs are organizations that provide services for accessing and using the Internet. ISP manages special routers that connect with other ISPs, thus facilitating information exchange between them. ISPs are further divided into different tiers, we will look into it in a different article.  

Our message to a friend in another country would travel from our home network to different ISP networks until it reaches the destination network to our friend’s computer.  

Finally, my friend in another country can receive my message. But wait, how are we 100% sure that only my friend’s computer will receive my message and not my aunt’s or some other unknown person connected to the network? We will answer these questions in our next article.


## See also

[What is the Internet — How the Internet works](https://www.hackinbits.com/articles/misc/what-is-the-internet-%E2%80%94-how-the-internet-works)

























What is the Internet? - Part 1

This quiz has 12 multiple-choice questions. Only one answer is correct for all questions. 

----

   
1. CSS is used for __________ .  
    a. describing the structure of Web pages  
    b. describing the presentation of Web pages  
    c. making Web Pages interactive  
    d. sending data to the server  

> **b. describing the presentation of Web pages**

----
  
2. Which is a valid property for changing text color?  
    a. font-color  
    b. color  
    c. text-color  
    d. None of the above  

> **b. color**

----

3. CSS is a ___________.  
    a. Programming Language  
    b. Scripting Language  
    c. Markup Language  
    d. Stylesheet Language  

> **d. Stylesheet Language **

----

4. Which tag is used to link external stylesheets?  
    a. <link>  
    b. <a>  
    c. <style>  
    d. <meta>  

> **a. <link> **

----

5. Which ruleset will be applied to all HTML elements?  
    a. body { color: blue;}  
    b. \* { color: blue;}  
    c. div { color: blue;}  
    d. .container { color: blue;}  

> **b. \* { color: blue;} **

----

6. Which tag is used to define internal stylesheet ?  
    a. <link>  
    b. <a>  
    c. <style>  
    d. <meta>  

> **c. <style>**

----

7. Which CSS property is used to change text size ?  
    a. font-size  
    b. text-size  
    c. font-family  
    d. None of the above  

> **a. font-size **

----

8. Which attribute is used to define inline styles?  
    a. styles  
    b. font  
    c. style  
    d. target  

> **c. style**

----

9. Which is a valid CSS Declaration?  
    a. color = 'blue'  
    b. color : blue  
    c. 'color' : 'blue'  
    d. 'color' = 'blue'  

> **b. color : blue**

----

10. External Stylesheets are defined in file with ________ extension.  
    a. .css  
    b. .js  
    c. .design  
    d. None of the above  

> **a. .css**

----

11. Which attribute value should be unique in the whole document to avoid unpredictable behavior?  
    a. id  
    b. class  
    c. style  
    d. data-*  

> **a. id**  

----

12. How a comment is written in CSS?  
    a. ~ This is a valid comment ~  
    b. \# This is a valid comment  
    c. // This is a valid comment  
    d. /\* This is a valid comment \*/  

> **d. /\* This is a valid comment \*/**

----

Test Your Knowledge - CSS Basics Quiz

To start with if you do not have any knowledge about cloud computing, let me brief you a little. Cloud computing is providing computing resources over the internet. Simplifying it more for you; you can have storage, power,  IT solutions and much more without getting complex physical servers.

![cloud computing](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/cloud-computing-1989339_1280.png?alt=media&token=07027189-5b9f-47aa-aeef-eee3310b081e)

----

Now, moving on to AWS; it is a platform that helps you use cloud computing effectively for your projects. It is a service provider that helps you deploy any application in the cloud. The **“S”** in AWS is significantly important and we will now talk about the services in detail. These services are **compute, storage, databases, migration, networking and content delivery, developer tools, management tools, security, identity and compliance, application services, mobile services, desktop, and app streaming, business productivity, artificial intelligence, augmented reality(AR) and virtual reality(VR), customer engagement, game development and internet of things(IoT)**. Yes, that is a lot of support for your venture or project. 

----

> AWS is a platform that helps you use cloud computing effectively for your projects. It is a service provider that helps you deploy any application in the cloud.

AWS helps you to store your files in the cloud so that they can be accessible from anywhere. It maintains the security and privacy of your files as well. It helps you to host dynamic websites by allowing you to run servers on the cloud.

A lot of companies use AWS because of its flexibility and reliability for example - Instagram, Pinterest, Netflix, Dropbox, etc.

## Pros and Cons

AWS is cost-effective, ie you only pay for what you use and there are no hidden charges or agreements. Altogether it provides a great platform that is easy to use. Moreover, there is some hindrance that occurs while using the cloud-like you cannot have complete control over operations and you have to have backup protection. Because it is the cloud and available everywhere, one can deploy its application in multiple places with just a few clicks but the fact that not everything is available everywhere also has to be kept in mind. For example, some images may be restricted for use in a particular region. 

Having an overview of AWS will help you to understand the power of cloud computing. The next articles in the series will go in-depth on core AWS services. See you next time!


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**

Introduction To Amazon Web Services - AWS

Linux kernel is the core of any Linux Operating System. A Linux Distribution consists of a Linux Kernel and other supporting software/tools which are required for file operations, user management, system management, etc. Each of these software/tools performs small tasks of the complete system.

Kernels, in general, are classified on the basis of whether they perform critical system tasks in Kernel Space or User Space. They are classified as Monolithic, Microkernel and Hybrid Kernel. Linux is a Monolithic Kernel. Let's discuss them in little detail to have a better understanding of their working principles.

## User Space and Kernel Space

System Memory consists of RAM (Random Access Memory) cells, which are accessed at extremely high speed but data in them are retained for a very short period of time. RAM holds programs and data that are currently in use by CPU because access time to main storage (Hard drives) is very high. Therefore RAM acts as a high-speed intermediary between system CPU and hard drive.

![Linux Architecture](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/linux_architecture.png?alt=media&token=235db5ed-ede8-4f8d-bcee-1d0d7c7c8035 "Linux Architecture")

System Memory is divided into two distinct areas - Kernel Space and User Space:

### User Space

In Userspace, user applications are executed. All user processes run in this space. A process is a running instance of a program. The kernel manages user processes in user space to prevent them from interfering with each other.

GNU C Library (glibc) also resides in User Space. It provides the System Call Interface which provides the mechanism to transition between the user-space application and the Kernel. More on it later.

### Kernel Space

Kernel space is where core operating system codes are executed. The kernel provides its services using this space.

## Linux is a Monolithic Kernel

![Monolithic Kernel](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/monolithic_kernel.png?alt=media&token=272a1ebb-fec9-47de-a595-0f17c5f90e4a "Monolithic Kernel")

A monolithic kernel is an operating system architecture where the entire operating system is running in kernel space. In a monolithic kernel, the OS runs in supervisor mode and the applications run in user mode. Supervisor mode enables the execution of all instructions, including privileged instructions. As more code is executed in supervisor mode, the monolithic kernel has a larger memory and install footprint.

In Linux, however, developers found a way to solve this problem by creating dynamically loadable modules. Modules can be loaded dynamically at runtime. These modules allow easy extension of the operating system's capabilities as per user requirement. A module typically adds functionality to OS for things like devices, file systems, and system calls.

Third-party drivers and software are not installed by default in many distributions because they are closed source. These drivers and software are made available by there developers as pre-compiled modules. These modules are free as in beer but are not free as in speech. For these reasons, they are not pre-loaded into the kernel for most of the Linux distributions.

## Microkernel

Microkernel whereas only perform critical tasks in kernel space. Pretty much everything else is executed in userspace. For that reason, Microkernel has less memory footprint and is more secure. We will have a discussion about different types of the kernel and their architecture in another article.

Linux kernel is constantly evolving. Thousands of people around the world are contributing to its development daily. You can find information about current and previous releases of the kernel at www.kernel.org.

## Useful Resources

- [Monolithic Kernel - Wikipedia](https://en.wikipedia.org/wiki/Monolithic_kernel)
- [Linux Kernel - IBM](https://www.ibm.com/developerworks/library/l-linux-kernel/index.html)

Linux Kernel Explained I

Java uses **if/else** statement for conditional control flow. It is used to test the conditions and based on the Boolean result (true or false) of the condition the control of the execution is decided.

There are 4 ways to write an if-else statement:
- if statement
- if-else statement
- if-else if statement
- nested if statement

## if statement

Java if statement tests the condition and executed only if the condition is true. It has only if block, no else block.

Syntax:

```java
if(condition) // enter the condition in the parenthesis
{
	// code to be executed when the condition is true.
}
```

![if-else-flowchart](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/image1.png?alt=media&token=76388faa-33c8-442f-96a4-6dd1d95897e1)

**Example:**

```java
public class example{
	public static void main(String arg[]){
		int n = 10;
		if(n > 11){ // condition is false so the if block is not fired
			System.out.println(“Number is greater”);
		}
	}
}
```

## if-else Statement

Java if-else statement tests the condition where if block is fired when the condition is true, if not then the else block is executed.

**Syntax:**

```java
if(condition){
	//code to be executed when the condition is true
}
else{
	//code to be executed when the condition is false
}
```

![if-else-flowchart](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/image2.png?alt=media&token=3e22298f-9187-4e8d-877a-2e87e47e3505)

**Example:**

```java
public class example{
	public static void main(String arg[]){
		int n = 10;
		if( n % 2 == 0){ // condition to check if number is divisible by 2
			System.out.println(“Number is even”);
		}
        else{
	        System.out.println(“Number is odd”);
        }
	}
}
```

## if-else if Statement

Java if-else if ladder executes one block among multiple conditional blocks. This is used when there are different code to be executed based on the conditions.

**Syntax:**

```java
if(condition1){
	//code to be executed when the condition1 is true
}
else if(condition2){
	//code to be executed when the condition2 is true
}
else if(condition3){
	//code to be executed when the condition3 is true
}
…
else{
	//code to be executed when all conditions are false
}

```

![if-else if flowchart](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/image4.png?alt=media&token=0a39312c-7955-4d9c-a033-0d537ddcc75e)

**Example:**

```java
public class example{
	public static void main(String arg[]){

		int marks =55;
		if( marks < 50){
			System.out.println(“Fail”);
		}
else if( marks >= 50 && marks < 60){
			System.out.println(“D grade”);
		}
else if( marks >= 60 && marks < 70){
			System.out.println(“C grade”);
		}
else if( marks >= 70 && marks < 80){
			System.out.println(“B grade”);
		}
else if( marks >= 80 && marks < 90){
			System.out.println(“A grade”);
		}
else if( marks >= 90 && marks < 100){
			System.out.println(“A+ grade”);
		}
else{
	System.out.println(“Invalid”);
}
	}
}
```

## Nested if statement

Java nested if statement represents if block within another if block. Here, the inner if block is executed only if the outer if block condition is true.

**Syntax:**

```java
if(condition){
	// code to be executed
	if(condition){
		// code to be executed
	}
}
```

If you like this article, please click on recommend and share it.

Java If Else Conditional Control Statements 

When a value is **truthy** in Javascript, it does not means that the value is equal to **true** but it means that the value **coerces to true** when evaluated in a **boolean context**.

```javascript
function truthyOrFalsy(value){
  if(value){
    console.log("Truthy Value");
  } else {
    console.log("Falsy Value");
  }
} 
```

The above function evaluates the passed value in a Boolean Context(if condition) and checks if whether the passed value is truthy or falsy.
 
## Falsy Values
Most of the values in javascript are Truthy, so it is better to list the Falsy value where we have only a limited number of cases. There are a total of **8 falsy values** in Javascript:

- undefined
- NaN
- null
- false
- "" (Empty String)
- 0 (0 is an alias for +0)
- -0
- 0n (BigInt)

We can validate whether the above values are falsy or not by passing them as a parameter to the **truthyOrFalsy function** we defined at the starting of this article.

```javascript
truthyOrFalsy(undefined); // Falsy Value 
truthyOrFalsy(NaN);       // Falsy Value
truthyOrFalsy(null)       // Falsy Value
truthyOrFalsy("");        // Falsy Value
truthyOrFalsy(false)      // Falsy Value
truthyOrFalsy(0);         // Falsy Value
truthyOrFalsy(-0);        // Falsy Value
truthyOrFalsy(0n);        // Falsy Value
```

## Truthy Values
Despite we might think that the **empty array( [] ) or empty object( {} )**should be falsy values, but they are actually truthy values in Javascript.

```javascript
truthyOrFalsy([]);  // Truthy Value
truthyOrFalsy({});  // Truthy Value

//some more truthy values

truthyOrFalsy(42);          // Truthy Value
truthyOrFalsy(new Date());  // Truthy Value
truthyOrFalsy(“Welcome”);   // Truthy Value
```

---

I hope this article helped you learn about truthy and falsy values in javascript. Please share your experience in using these in your codebase which may help everyone get some more clarity of the concept.


Truthy and Falsy Values in Javascript

In Javascript, using **Object.is()** you can determine if two values are equal or not. **Object.is()** helper function is introduced in **ES6**.

## Syntax

> **Object.is(val1, val2)**

### Parameters
Values to compare **val1** and **val2**.

### Return Value
**Object.is()** returns a Boolean which indicates if **val1** is having the same value as **val2** or not.

## Value Comparision
**val1** and **val2** are same in case of Object.is() in case of following conditions:

### val1 and val2 are both null
```javascript
let val1 = null;
let val2 = null;
Object.is(val1, val2)
// true
```
### val1 and val2 are both undefined.
```javascript
let val1 = undefined;
let val2 = undefined;
Object.is(val1, val2)
// true
```

### val1 and val2 are both NaN
```javascript
let val1 = NaN;
let val2 = NaN;
Object.is(val1, val2)
// true
```

### val1 and val2 are both of the same Boolean value i.e. true or false.

```javascript
let val1 = true;
let val2 = true;
Object.is(val1, val2)
// true

let val3 = false;
let val4 = false;
Object.is(val3, val4)
// true

let val5 = true;
let val6 = false;
Object.is(val5, val6)
// false
```

### val1 and val2 are referencing the same object.
```javascript
let val1 = { name: "Object comparison" };
let val2 = val1;
Object.is(val1, val2)
// true

let val3 = { name: "Object comparison" };
let val4 = { name: "Object comparison" };
Object.is(val3, val4)
// false

```

### val1 and val2 are both non-zero numbers and have the same value.
```javascript
let val1 = 42;
let val2 = 42;
Object.is(val1, val2)
// true

```
### val1 and val2 are both either +0 or -0.
```javascript
let val1 = +0;
let val2 = +0;
Object.is(val1, val2)
// true

let val3 = -0;
let val4 = -0;
Object.is(val3, val4)
// true

let val5 = +0;
let val6 = -0;
Object.is(val5, val6)
// false
```

## Note on Object.is(), "==" and "==="

- Object.is() works differently than "==" operator as it does not apply coercions before comparing the values.

```javascript
console.log(1 == [1]);
// true
console.log(1 == "1");
// true

console.log(Object.is(1, [1]));
// false
console.log(Object.is(1, "1"));
// false
```

- Object.is() also works differently than "===" operator as the "===" operator treats +0 and -0 as equals and NaN as not equal to itself.
```javascript
console.log(+0 === -0);
// true
console.log(Object.is(+0, -0));
// false

console.log(NaN === NaN);
// false
console.log(Object.is(NaN, NaN));
// true

```
---
**Cover Image**: Image by [Martin Pyško](https://pixabay.com/users/MartinHarry-1411929/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=941625) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=941625")

---

Comparing values using Object.is() in Javascript

In Javascript, using spread syntax we can expand iterables such as arrays into its contents where zero or more elements are required. 

## Syntax
The spread syntax is similar to the **rest parameter(...rest)**. But instead of composing arguments into an array, the spread syntax is used to expand iterables into its contents in the required places.

```javascript
[...iterableObject]
{...obj}
func(...iterableObject)
```

We will go through each of the above examples in detail in this article. Let's work with some examples and scenarios where the spread is useful.

## Using spread in function calls

Let's consider the greeting function we wrote in the article Rest Parameter in ES6. 

```javascript
function greetings(...names){
  for(let name of names){ 
    console.log(`Hello, ${name}!`);
  }
}
```

Suppose we have a list of 100 people in an array to whom we need to greet using the above function. To achieve that, we need to pass person names as arguments to the greeting function. 

This can be achieved using the spread syntax, which will expand the array into its elements at the place of the call. 

```javascript
let namesArr = ['John Doe', 'Harry Potter', 'Dr. Strange'];
// For simplicity we are considering only 3 names

greetings(...namesArr);
//Output:
// Hello John Doe!
// Hello, Harry Potter!
// Hello, Dr. Strange! 
```

## Using spread in arrays
we can use the spread to do a lot of things with an array. Let's discuss some of the common use cases. 

### Adding elements in an array
We can use the spread syntax to add new elements in an array. Always remember that the spread returns a new array and does not modify the existing arrays. 

```javascript
let fruits = ["orange", "kiwi", "watermelon"];

//Add a new fruit at start of the array.
let newStartFruits = ["banana", ...fruits];
console.log(newStartFruits);
// ["banana", "orange", "kiwi", "watermelon"]

//Add a new fruit at end of the array.
let newEndFruits = [...fruits, "banana"];
console.log(newEndFruits);
// ["orange", "kiwi", "watermelon", "banana"]
```

###  Cloning an array
```javascript
let fruitArr = ["orange", "apple", "kiwi"];
let fruitArrClone = [...fruitArr];
console.log(fruitArrClone);
// ["orange", "apple", "kiwi"]

console.log(fruitArr === fruitArrClone);
// false

### Concatenating arrays
let fruitArr = ["orange", "apple", "kiwi"];
let vegetableArr = ["carrot", "tomato"];

let fruitAndVegArr = [...fruitArr, ...vegetableArr];
console.log(fruitAndVegArr);
// ["orange", "apple", "kiwi", "carrot", "tomato"]
```

## Using spread in objects
The spread syntax is added to objects in ES 2018. Using Spread syntax you can now shallow clone the object and also merge objects.

### Shallow Clone Object
```javascript
let orange = {name:"orange", type:"fruit"};
let newOrange = {...orange};
// creates a new object with properties of orange object.
// {name: "orange", type: "fruit"}
```

### Merging Objects
```javascript
let orange = {name:"orange", type:"fruit"};
let color = {color: "orange"};
let newOrange = {...orange, ...color};
// creates a new object by merging properties of 
// orange and color objects.
// {name: "orange", type: "fruit", color: "orange"}
```

We will love to see examples and scenarios where you have used the spread syntax. Feel free to add them in the comments below :).

Spread Syntax in Javascript

In javascript, you can call a function with an arbitrary number of arguments. A function can be defined with any number of arguments. If extra arguments are present, it does not matter and will be simply ignored. 

```javascript
function greetings(name){
console.log(`Hello ${name}!`);
}

greetings("John Doe", "Harry Potter", "Dr. Strange");
// Hello John Doe!
```

The above function will not give any error. But it will only use the first parameter **"John Doe"** and ignore the remaining ones.  

Many built-in functions also support an arbitrary number of arguments. For example, **Math.max()** and **Math.min()** accepts an arbitrary number of arguments and returns the maximum and minimum of the values passed to it.

```javascript
Math.max(1, 2, 4, 9, 100, 6);
// 100

Math.min(1, 2, 4, 9, 6);
// 1
```

## The ...rest parameter

To support an arbitrary number of arguments in our function like Math.min() and Math.max() instead of ignoring them as our **greetings function** did in the previous example, we can use the rest parameter(...rest) to collect some or all the arguments in an array. 

```javascript
function greetings(...names){
  for(let name of names){ 
    console.log(`Hello ${name}!`);
  }
}

greetings("John Doe", "Harry Potter", "Dr. Strange");
// Output: 
// Hello John Doe!
// Hello Harry Potter!
// Hello Dr. Strange!
```

In the above example, "names" is the name of the array in which all the parameters are collected.

As the **rest** returns a pure array, you can do all the array related operations on the names array. For example,

```javascript
names.length;
// 3

names.join(', ');
// John Doe, Harry Potter, Dr. Strange
```

## Supporting fixed and variable arguments
Using the rest parameter, we can also create a function that supports fixed and variable arguments. 

```javascript
function greetings(greeting, ...names){
  for(let name of names){ 
    console.log(`${greeting}, ${name}!`);
  }
}

greetings("How are you!", "John Doe", "Harry Potter", "Dr. Strange");
// Output:
// How are you!, John Doe!
// How are you!, Harry Potter!
// How are you!, Dr. Strange!
```
## Rest parameter must be last
As the rest parameter collects all the remaining arguments, it must be the last argument in the list. 

**Correct:**
```javascript
function func(arg1, arg2, ...rest){};
```

**Wrong:**
```javascript
function func(arg1, ...rest, arg2){};
```

We will love to see examples and scenarios where you have used the rest parameters. Feel free to add them in the comments below :).

Rest Parameter in ES6 - Supporting an arbitrary number of arguments

React is a Javascript library used for building fast and interactive user interfaces. It is developed by Facebook in 2011. Today, React is very popular with **144k** stars on [Github](https://github.com/facebook/react).

> **React** is a Javascript library used for building fast and interactive user interfaces.

React is used to build single-page applications or mobile applications. You can create complex user interfaces using small isolated pieces of code called components.

## Components in React

Components are building blocks of a React App. A component represents a piece of User Interface like buttons, textbox, etc. It is a javascript function or class which accepts properties(props) and returns a react element that describes how a section of UI should appear.

![React Component](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react.png?alt=media&token=381453c0-293b-4e14-ab83-a3c43c52af03)

> A Component is a javascript function or class which accepts properties(props) and returns a react element that describes how a section of UI should appear.

## Props and State

There are two types of "**modal**" data in React:
- props and,
- state

**Props:** Props are used to send data to the component, it is equivalent to the arguments of the javascript function. Parent component can pass data to the child component using props.

**State:** State is a javascript object that is initialized and managed by the component. It is like a data store for the react component.

# Virtual DOM

When the state or props of a component change, react renders the component using new data(props and state). However, react does not work on the DOM directly. Instead, it creates a virtual DOM in the memory and compares it with the original DOM. If there is a difference, react updates the real DOM to sync with the virtual DOM.

![Real and Virtual DOM](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react2.js.png?alt=media&token=bd69b0c6-8c57-43ee-b9fc-e6dc1c8de78f)

React updates only the part of DOM which is modified instead of rendering the whole page again.

In the next article, we will discuss some of the core features of React JS.

## Additional Resources
- [**React Hiring Guide (Toptal)**](https://www.toptal.com/react#hiring-guide)
- [**Intro To React (reactjs.org)**](https://reactjs.org/tutorial/tutorial.html)


----

**If you liked this article, please upvote and recommend it. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 

What is React JS - Introduction

In Javascript, we use **Array.concat()**  to concatenate/merge two or more arrays. Array.concat() returns a new array and does not modify the existing arrays. 

Example: 

```javascript
const fruits = ["apple", "orange", "kiwi"];
const vegetables = ["carrot", "tomato", "potato"];

const fruitsAndVegetables = fruits.concat(vegetables);
// ["apple", "orange", "kiwi", "carrot", "tomato", "potato"]
```

If no parameters are passed on to the **Array.concat() method**, it returns the shallow copy of the existing array on which it is called.

## Array.concat() on Object References

Before working on concatenating arrays, let's look into Object references. 

### Object Reference
In Javascript, Objects are a reference type. When you assign an object to a variable, variable store a reference to the object and not the object itself. For example,

```javascript
let watermelon = {
 name: "Watermelon",
 taste: "Sweet",
 shape: "round"
 };
```

Here, variable watermelon stores a reference to the assigned object. Now, let's store it into the fruit array and use Array.concat() over it. 

``` javascript
const fruits = ["apple", "orange", "kiwi", watermelon];
const vegetables = ["carrot", "tomato", "potato"];

const fruitsAndVegetables = fruits.concat(vegetables);
// ["apple", "orange", "kiwi", {…}, "carrot", "tomato", "potato"]

```
Here, Watermelon is **shallowly copied** and the reference to the original object is only copied and not the object itself. Now, the watermelon in both the fruits array and the fruitsAndVegetables array are **pointing to the same object**.  So, if any value of the **watermelon object** is changed, it will be changed in fruitsAndVegetables array as well. 


## Array.concat on primitive data types
Array.concat() copies values of primitive data types such as string, number, and boolean into the new array.

```javascript
let mixedArray1 = ["str", true, 1];
let mixedArray2 = ["str2" , false, 5];
let newMixedArray = mixedArray1.concat(mixedArray2);
// ["str", true, 1, "str2", false, 5]
```
## Concatenating multiple arrays

To concatenate multiple arrays, we call Array.concat() on one array and pass the rest arrays as arguments. 

``` javascript
const num1 = [ 1, 2, 3];
const num2 = [ 4, 5, 6];
const num3 = [ 7, 8, 9];

const num = num1.concat(num2, num3);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

We will love to see examples and scenarios where you have used Array.concat(). Feel free to add them in the comments below :). Have a nice day. 


Understanding Array.concat() method in Javascript

Array.slice() method returns a shallow copy of a part of an array into a new Array Object. 

The part is selected on the basis of the start index and the end index passed as a parameter to the slice method. 

## Syntax
> **arr.slice(\[start_index\[, end_index\]\])**

**start_index:** specifies the start index from where the array is selected for copying.
**end_index:** specifies the end index until where the array will be copied. The element at end_index is not selected. 



**Note:** The original array is not modified by the slice method.

**Example:**
```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
arr.slice(0,3);
// [ 0, 1, 2 ]
// The element at the end_index is not selected
```

Let's learn about the slice method with a few more examples.

## The start index is undefined

When the start_index is undefined, start_index will be taken as 0.

```javascript
let arr = [0,1,2,3,4,5];
start_index = undefined;
end_index = 3
arr.slice(start_index, end_index);
// [0, 1, 2]
```

## The start index is negative

The negative start_index will be used as an offset from the end of the original array and the element is taken as the start. 

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = -4;
end_index = 4;
arr.slice(start_index, end_index);

/* Counting 4 (the offset) from last of 
the original array is the element at index 2.*/

//last element that will be selected is at index before the end index ie. at index 3 of the original array. 

// output : [2, 3]
```

## The start index is greater than the end_index

If the start_index is greater than the end_index, an empty array will be returned by the slice method.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 4;
end_index = 2;
arr.slice(start_index, end_index);
// []
```

## The end index is omitted
When the end_index is not specified, the array will be selected till the end.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 4;
arr.slice(start_index);
// [4, 5]
```

## The end index is negative
As seen for the start_index, if the end_index is negative, it will be treated as an offset from the end of the array for the last element that needs to be copied to the new array.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 1;
end_index = -2;
arr.slice(start_index, end_index);

/* Counting 2 (the offset) from last of 
the original array is the element at index 4.*/

//The array will be selected from the index 1. 
// output : [1, 2, 3]
```

## The end index is greater than the length of the array
When the end_index is greater than the end index of the array, the array will be selected until the last element for copying.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 1;
end_index = 8;
arr.slice(start_index, end_index);
//[1, 2, 3, 4, 5]
```


----

**If you liked this article, please upvote and recommend it to your friends and family. Feel free to ask any questions or share any useful information in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 



Understanding Array.slice() method in Javascript

In Javascript, **Array.sort()** is a built-in method of the Array Object. Using Array.sort(), we can sort arrays in descending or ascending order.  The default sort order is ascending order for the sort method. 

Different browsers use different sorting algorithms for Array.sort(). Mozilla uses merge sort while chrome's javascript V8 engine uses quicksort and insertion sort.  

## Syntax
```javascript
arr.sort([compareFunction]);
```
**[compareFunction]** is an optional argument of the sort method. It determines the sort order. If omitted, the values of the array will be converted to strings and compared based on their  Unicode code point values. 

```javascript
let arr = [9, 70, 44];
arr.sort(); 
// As no compare method is provided, 
// the array elements will be converted to strings("9", "70", "44") and // their unicode code point value will be compared.

console.log(arr);
// 44, 70, 9
```

## Compare Function

Compare Function takes two values in the array as parameters for comparing and deciding the sort order. You can define the condition for comparing the values, which will decide the sort order. 

```javascript
// A simple compare function to sort
// an array of numbers in ascending order.

function (a, b) {
  return a - b;
}
```

Compare Function decides the order of values based on the following conditions: 

- If it returns a negative number, the index of "a" will be lower than "b".
- If it returns a positive number, the index of "a" will be higher than "b".
- If it returns 0, it leaves the element at its place.


> Note: The array is sorted in place and the sort method also returns the sorted array.

Example: 
```javascript
let arr = ["a", "c", "b"]
let sortedArr = arr.sort()
console.log(arr);
// ["a", "b", "c"]
console.log(sortedArr);
// ["a", "b", "c"]
```

Let's work with a few examples to understand Array.sort() better.

## Sorting numbers without compare function

```javascript
let arr = [9, 70, 44];
arr.sort();
// [44, 70, 9]
```

## Sorting numbers with compare function
```javascript
let compareFunc = (a,b) => a-b;
 
arr.sort(compareFunc);
//[9, 44, 70]
```

## Sorting strings

```javascript
let arr = ["John Doe","love","javascript"];
arr.sort();
//["John Doe", "javascript", "love"]
// Unicode code point value of first letter of every word is compared 
// and ordered in ascending order.
```

## Sorting an array of numbers and strings

```javascript
arr = ["John Doe", "eats", 3, "apples"]
arr.sort();
[3, "John Doe", "apples", "eats"]
// Number is converted to string and Unicode code point values of all
// elements are compared and ordered in ascending order.
```

## Sorting an array having undefined as an element
```javascript
// All undefined elements are sorted to the end of the array. 
// Compare function is not called for undefined. 

let arr = ["zoo","have", 4, "dino", undefined, "mammoth"];
//[4, "dino", "have", "mammoth", "zoo", undefined]
```



----

**I hope this article helped you learn a new concept, please upvote and recommend it to your friends and family. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 

Sorting an array using Array.sort() in Javascript

In this article, we will learn about the Javascript Date Object. Date Object stores the date-time and also provides methods for working with them.

In Javascript, the Date is stored as the number of milliseconds elapsed since 1st January 1970 midnight. This date is also known as UNIX Epoch.

## Creating a Date Object

We use the new keyword to create a Date Object. There are several ways to create Javascript dates using the Date Object: 

```javascript
new Date()
new Date(milliseconds)
new Date(date string)
new Date(year, month, date, hours, minutes, seconds, milliseconds)
```

## new Date()

new Date() without any arguments will return the current date-time. 

```javascript
let date = new Date();
console.log(date);
//return current date-time
// format: Thu May 14 2020 00:41:03 GMT+0530 (India Standard Time)
```

## new Date(milliseconds)

new Date(milliseconds) creates a Date object with date-time equal to the total number of milliseconds elapsed since 1st January 1970 UTC+0.

The time elapsed in milliseconds from 1st January 1970 is known as a **timestamp**.

```javascript
let unixEpoch = new Date(0);
console.log(unixEpoch);
// Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)

let unixEpochAnd2Days = new Date(2 * 24 * 3600 * 1000);
console.log(unixEpochAnd2Days);
// Sat Jan 03 1970 05:30:00 GMT+0530 (India Standard Time)
```

To create a Date object with a date earlier than 1st January 1970, we pass negative timestamp to the Date constructor.

```javascript
let ADayBeforeUnixEpoch = new Date(- 24 * 3600 * 1000);
console.log(ADayBeforeUnixEpoch);
// Wed Dec 31 1969 05:30:00 GMT+0530 (India Standard Time)
```


## new Date(year, month, date, hours, minutes, seconds, milliseconds)

You can create a Date object for a given year, month, and other parameters using Date constructor. The first two parameters are mandatory.

```javascript
let date = new Date(2019, 00, 30, 01, 01, 01, 0);
console.log(date);
// Wed Jan 30 2019 01:01:01 GMT+0530 (India Standard Time)

let date = new Date(2019, 00)
console.log(date)
// Tue Jan 01 2019 00:00:00 GMT+0530 (India Standard Time)
``` 

> If you have passed only one parameter, Date object will take it as milliseconds. 

Parameters: 
- year: year must have 4 digits, for example, 2016. 
- month: In javascript month starts from 0, so January will be 0, February will be 1, and so on. 
- date: date of the month, if not provided, default is set to 1.
- Defaults for all other parameters: hours, minutes, seconds, and milliseconds are taken as 0 if not provided. 



## new Date(date string)
new Date(date string) creates a Date object from the date string.
We will discuss the date string in detail in the next article.
 
## Exercise
Let's practice what you have learned above. 

1. Create a date object with the date equal to one week hence 1st January 1970.
2. Create a date object with the date equal to one week before 1st January 1970. 

Let us know your answers in the comments. Have a nice day.




Date Object in Javascript

In this article, we will learn about four array methods i.e. push(), pop(), shift() and unshift() which allow us to add and remove elements from beginning and end of an array. 

## push(): Add elements to the end of an Array
![Array Push](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/arr_push.png?alt=media&token=263a2906-3a69-4291-9462-68b9566bc6dd)

Using push() we can add elements to the end of an array.

```javascript
let arr = [ 1, 2, 3 ];
arr.push(4);
console.log(arr);
// [ 1, 2, 3, 4 ]
```
push() returns length of the new array.

```javascript
let arr = [ 1, 2, 3, 4 ];
let arrLength = arr.push( 5, 6, 7 );
console.log(arrLength);
// 7
```
  
## pop(): Remove an element from end of an Array 

![Array Pop](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/arr_pop.png?alt=media&token=8c14a2d2-fd6a-4910-8609-3670656874d0)

Pop remove the last element in an Array. 



```javascript
let arr = [1, 2, 3, 4];
arr.pop();
console.log(arr);
// [ 1, 2, 3 ]
```

pop() returns the removed element. 

```javascript
let arr = [ 1, 2, 3, 4 ];
let removedElement = arr.pop();
console.log(removedElement);
// 4
```

## shift(): Remove an Element from the front of an Array

![Array Shift](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/arr_shift.png?alt=media&token=7b6b860a-974c-440b-b2ec-ac26f45af66f)

Shift remove the first element in an Array.

```javascript
let arr = [ 0, 1, 2, 3 ];
arr.shift();
console.log(arr);
// [ 1, 2, 3 ]
```

shift() returns the removed element from the array.

```javascript
let arr = [ 0, 1, 2, 3 ];
let removedElement = arr.shift();
console.log(removedElement);
// 0
```

## unshift(): Add elements to the front of an Array
![Array Unshift](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/arr_unshift.png?alt=media&token=cfe48f02-347a-4975-bb0d-c00466f61918)

Using unshift() we can add elements to the front of an array.

```javascript
let arr = [ 1, 2, 3 ];
arr.unshift(0);
console.log(arr);
// [ 0, 1, 2, 3 ]
```
unshift() returns length of the new array.

```javascript
let arr = [ 4, 5, 6 ];
let arrLength = arr.unshift( 0, 1, 2, 3 );
console.log(arrLength);
// 7
```

Push, Pop, Shift and Unshift Array Methods in JavaScript

In Javascript, getters and setters are used for defining Object Accessors(Computed Properties).  Accessor uses a function to get or set the value of an Object. Accessors are useful when some operations are needed to be performed automatically before setting or retrieving an object’s value, like reformating strings, accessing private properties, triggering events, etc. 

## Getter
To keep it simple, let’s consider a common scenario, where we wanted to get a user’s full name from the below object.

```javascript
let user = {
  firstName: 'John',
  lastName: 'Doe',
}
```

We can achieve this by concatenating the firstName and lastName properties of the user object.

```javascript
let fullName = `${user.firstName} ${user.lastName}`;
console.log(fullName);
// 'John Doe'
```

The above code works fine, but there is a better way to achieve the same. Let’s look at the example below: 

```javascript
let user = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName () {
 return `${user.firstName} ${user.lastName}`;
  }
}  
```

We defined a getter named fullName in the above object to return the complete name of the user. Now full name can be accessed like any other properties of the object. 

```javascript
console.log(user.fullName)
// 'John Doe'
```
So, in the above example, we achieved our requirement of concatenating two properties of an object before retrieving the required value i.e. fullName.

## Setter

The setter is used to do some required operations before setting the value of an object. 

For example, you have an input field for the user’s name. But, the object in which the value needs to be stored is having firstName and lastName. 

```javascript
let user = {
  firstName: 'John',
  lastName: 'Doe'
}
```

To achieve this, we will use setter. 

```javascript
let user = {
  firstName: 'John',
  lastName: 'Doe',
  set fullName (name) {
    let [fName, lName] = name.split(' ');
    this.firstName= fName; 
    this.lastName = lName;
  }
};
```

Now to set the value of firstName and lastName, we can simply assign fullName like an object property and our setter function will handle the rest. 

```javascript
user.fullName = 'Peter Parker'

console.log(user.firstName);
//Peter
console.log(user.lastName);
//Parker
```

In the next article, we will learn how to define setter and getters for already defined objects using Object.defineProperty(). Have a nice day! 



Introduction to Getter and Setter in Javascript

The symbol is a primitive datatype introduced in ECMAScript 2015. It is different from other data types in Javascript as its value is always unique and kept private for internal use. Symbols are only accessible from its reference after it is created. 

## Creating a Symbol

A symbol is created by calling **Symbol()** global factory function.

```javascript
const mySym = Symbol();
```

Symbol() takes one optional parameter, which is a description of the symbol itself. Specifying a description while creating Symbols helps identify it during debugging. 

```javascript
const mySym = Symbol('name of person');
//Symbol(name of person)
```

The **new** keyword is not supported by Symbol(). The below code will throw a type error.

```javascript
let sym = new Symbol();

// Uncaught TypeError: Symbol is not a constructor
// at new Symbol (<anonymous>)
```

## Equality

Symbols are unique identifiers and are never equal to each other.

```javascript
console.log(Symbol() === Symbol());
//false  
```

Symbols are useful for creating object properties as they are always unique, never equal to each other, thus **avoiding name clashes**.

```javascript
const LESSON = Symbol();
const subject = {
  [LESSON]: 'Symbols on javascript'
}

subject[LESSON];
// "Symbols on javascript"
```

The symbol also prevents the overwriting of properties, intentionally or unintentionally as values created by Symbol() method is always unique.


## Iterating over Symbol

Symbols are not enumerable i.e. they are not accessible by for...of or for...in methods. They will not be listed.

```javascript
let obj = {};
obj[Symbol('one')] = 1;
obj[Symbol('two')] = 2;
obj['three'] = 3;
for (let i in obj) { 
console.log(i);
// three
}
```

## Using typeof operator on Symbol

Using typeof operator you can identify symbols.

```javascript
let sym = Symbol();
typeof sym;
// 'symbol'
```

## Summary

In this article, we learned:
- The symbol is a primitive datatype.
- Symbols are always unique.
- You can create a symbol by using Symbol() factory function.
- Symbols are not enumerable.
- You can use typeof operator to identify symbols.




Introduction to Javascript Symbol Type

Set is a new Object type introduced in ES6. The Set allows you to create a collection of unique values. Values stored in a set can be of any type - primitive or object. 

> **Set is a collection of unique values.**    

You can also store **NaN** and **undefined** in a Set. Although in javascript, \[NaN!==NaN\], but a Set will equate it and store only unique values. 

## Creating a Set

Set is created using the **new** keyword. You can pass an iterable to the Set constructor and, it will copy the passed elements in the newly created Set.

```javascript
let set = new Set();
// Set(0) {}

let set = new Set([1,2,1,2]);
// Set(2) {1, 2}

let set = new Set([NaN, undefined, Nan, undefined]);
// Set(2) {NaN, undefined}
```


## Adding an element to a Set
To add a new element to a set, you can use **set.add(value)** method.
The **add method** add the passed value to the set and returns the set itself.

```javascript
let set = new Set([1,2,3,4]);
set.add(5);
console.log(set);
// Set(5) {1, 2, 3, 4, 5}

let newSet = set.add(6);
console.log(newSet);
// Set(6) {1, 2, 3, 4, 5, 6}
```

## Deleting an element from a Set
Set has a method **set.delete(value)** to delete the value passed to it from the set. It returns true if the set has the value passed to it prior to the call and false otherwise.

```javascript
let set = new Set([1,2,3,4,5]);
let isDeleted = set.delete(5);

console.log(set);
// Set(4) {1, 2, 3, 4}

console.log(isDeleted);
// true
```

## Checking if a value exists in a Set
To check if a value is present in a Set, we can use **set.has(value)** method. It returns true if the value is present in the set and false if it does not exist.

```javascript
let set = new Set([1,2,3,4,5]);
let isPresent = set.has(3);
console.log(isPresent);
// true
```

## Removing all elements from a Set
Set also provides a method **set.clear()** to delete all elements from the set.

```javascript
let set = new Set([1,2,3,4,5]);
console.log(set);
// Set(5) {1, 2, 3, 4, 5}


set.clear();
console.log(set);
// Set(0) {}
```

## Get count of elements in a Set
To get the count of element in the Set, we can use **set.size** property of the Set.

```javascript
let set = new Set([1,2,3,4,5]);
console.log(set.size);
// 5
```
 
## Summary
In this article we learned:
- Set is a collection of unique values. 
- We can use the new keyword to create a new Set.
- We can add an element to a set using set.add(value).
- We can delete an element from a set using set.delete(value).
- We can check if a value exists in a set using set.has(value).
- We can remove all elements from a set using set.clear().
- We can get the count of elements in a set using the set.size property.


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
  


Introduction to Set in Javascript

In our previous articles on Map, we learned [how to create a Map and use its properties and methods](https://hackinbits.com/articles/understanding-map-in-javascript---part-1) and [iterate over it](https://hackinbits.com/articles/how-to-iterate-a-map-in-javascript---map-part-2). In this article, we will learn how we can convert a Map to array and object and vice versa. Let’s get started.


## Creating a Map using Array
Let’s create a Map using the new keyword and put elements in it using the map.set() method.

```javascript
let map = new Map();
map.set("1","first element");
map.set(1, "second element");
map.set(true, "hello world");
```

Instead of adding elements using **map.set()**, we can pass an **array of key-value pairs** to initialize a Map.

```javascript
let map = new Map([
  ["1", "first element"],
  [1, "second element"],
  [true, "hello world"]
]);
```

If we have to put a large number of elements in a Map, initializing a Map by passing an array of key-value pairs is more intuitive than initializing it with map.set().

## Creating an Array from Map

To create an Array from Map, we can use **map.entries()** method.

```javascript
let newIterable = map.entries(map);
//return iterable with [key,value] pairs

let newArray = Array.from(newIterable)
// We will get a 2D array having [key, value] pairs.
```

We can also pass a Map directly to **Array.from()** as Map returns an **iterable of \[key,value\] pairs** by default.

```javascript
let newArray = Array.from(map)
// We will get a 2D array having [key, value] pairs.
```

To get an array of Map keys and values, we can use the same approach as above. 

```javascript
let newKeysIterable = map.keys()
let newValuesIterable = map.values()

let keysArray = Array.from(newKeysIterable);
let valuesArray = Array.from(newValuesIterable);
```

## Creating a Map from an Object

To create a Map from Object, we can convert an object into an array of \[key, value\] pairs and then create a Map using it.

```javascript
let obj = {
	"name": "hackinbits",
	"type": "website"
}
```

To get an array of key-value pairs from the above object, we can use Object.entries().

```javascript
let newArray = Object.entries(obj)

let map = new Map(newArray);
```

## Creating An Object from a Map

If we want to convert the Map in our previous example, back to Object it was created from(obj) we can use **Object.fromEntries()** method. 

> Object.fromEntries() takes an array of \[key, value\] pairs and returns a plain javascript object.

```javascript
let newArray = map.entries();

let newObject = Object.fromEntries(newArray);
```

We can pass the Map directly to **Object.fromEntries()** and we will get the same result Map returns an iterable of \[key, value\] pairs by default.

```javascript
let newObject = Object.fromEntries(map);
```

## Summary
In this article, we learned
- How to create a Map using the new keyword and using a \[key, value\] array.
- How to get a \[key, value\] 2d array from a Map.
- How to create a Map from a plain Javascript Object.
- How to create a plain javascript Object from a Map.

Thanks for reading. Have a nice day!


----

**If you liked this article, please upvote and recommend it. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**



How to create a Javascript Map from an Array or an Object and vice versa - Map Part 3

If you missed reading the first article in which we discussed how to do basic operations over a Map, you can read it [here](https://hackinbits.com/articles/understanding-map-in-javascript---part-1).

In this article, we will learn how to iterate over a Map using different methods available. So, let’s dive in and learn how to loop over a Map. 

## Iterating a Map

For iterating over a Map, we can use the following javascript constructs:
- **for..of**
- **forEach()**

Let's create a Map first to loop over from the knowledge gained in our [previous article](https://hackinbits.com/articles/understanding-map-in-javascript---part-1). 

```javascript 
let map = new Map()

map.set("one", "first element");
map.set("two", "second element");
map.set(3, "third element");
```

## Iterating map with for..of 

We can use for..of to iterate a Map in Javascript.

```javascript
for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element
```

Map also provides these three methods, which comes in handy while iterating over a Map.
 
- **map.keys()** - Returns an iterable for keys
- **map.values()** - Returns an iterable for values
- **map.entries()** - Returns an iterable of [key,value]

```javascript
for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element
```


## Iterating Map with forEach()

We can also iterate through a Map using forEach().

```javascript
map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element
```

> Map preserves the order in which values are inserted. So, while iterating over a Map, elements will be in the same order in which they are inserted. 

## Summary

- To iterate over a Map, we can use **for..of** and **forEach()** loop constructs.
- Map provides three methods that return iterable: **map.keys(), map.values() and map.entries()**.
- Iteration over Maps is always in **insertion order**. 


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
  

How to iterate a Map in Javascript - Map Part 2

## What is Map

Map is a collection of key and value pairs, similar to Object. The main difference between a Map and an Object is that Map allows key on any type either primitive or an object.  

Let’s learn how to create a Map and do operations on it.


## Creating a Map

You can create a Map by using the new keyword

```javascript
let map = new Map();
```

This will create an empty Map. 

## Add a new element to Map

To set a key with the value we use **map.set(key, value)**

```javascript
map.set("1", "my key is a string");
map.set(1, "my key is a Number");
map.set(true, "my key is a boolean");
```

Map allows keys with different datatype rather than converting them to string. So, in the above example,  "1" and 1 are two distinct keys. 

> **We can also use objects as keys in Map.**

```javascript
let myObj = {name: "John Doe"};
map.set(myObj, "my value");
```

## Access an element in a Map

To get the value, we use **map.get(key)** method.

```javascript
//output: "my key is a string"
console.log(map.get("1"));

//output: my key is a Number
console.log(map.get(1));
```

> **We should not access Map using object syntax: map\[key\]. This will make Map behave similar to a javascript object with all the limitations of an object.** 

## Remove a key-value pair in Map

To delete a key-value pair from a Map we use **map.delete(key)**.

```javascript
map.delete(true)
```

## Remove all key-value pairs from Map

To remove all key-value pairs from Map we use **map.clear()**

```javascript
map.clear()
```

## Count number of elements in a Map

To count the number of elements in Map we use **map.size**

```javascript
let map = new Map();
map.set(1, "one");
map.set(2, "two");

//output: 2
console.log(map.size)
```

## Check if a key exists in a Map

To check if a key-value pair exists in Map we use **map.has(key)**

```javascript
//output: true
map.has (1);
```

In this article, we learned what is Map and basic operations that we can perform on Map. In the next article, we will learn how to iterate over Map and convert it to array and object and vice versa.


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
  


Understanding Map in Javascript - Part 1

The Canvas API is used for creating graphics using javascript and <canvas> element. You can use canvas for drawing graphics, manipulating photos, creating animations, developing games, visualizing data, etc. 

The Canvas API is mainly used for  2D graphics. For creating 3D graphics, WebGL API is used which also uses <canvas> element internally. So let’s get started right away and learn how to create cool graphics for your next projects using canvas.

## The <canvas> element

```javascript
<canvas id="myCoolGraphics" width="150" height="150"></canvas>
```

The canvas element has two attributes **width** and **height**. Both of these attributes are optional and can be set using javascript. If none of the attributes are set, the initial width of the canvas element will be set to 300px and the initial height of the canvas element will be set to 150px. 

You can also use CSS to set the width and height of the canvas but it should respect the dimensions of your drawing else it will appear distorted. 

The **id** attribute is used to uniquely identify the canvas element so that it will be easy for us to refer to it in our script.

## Rendering Context

The HTML Canvas element <canvas> creates a drawing surface for you. But to create graphics on it, javascript is used. For drawing on the canvas, a rendering context should be selected first. To create a 2d drawing, we need to set rendering context to "2d". By doing so, we will get access to different properties and methods for creating a 2d drawing. 

We can set the rendering context using the **getContext()** method of the canvas element. 

```javascript
var canvas = document.getElementById(‘myCoolGraphics’);
var ctx = canvas.getContext(‘2d’);
```

To check for browser support for Canvas API in the script, we can do so by just checking the presence of the getCotext() method.

```javascript
var canvas = document.getElementById('coolGraphics'); 
if (canvas.getContext) {
  var ctx = canvas.getContext('2d'); 
  // graphics code 
} else {
 // fallback code 
}
```

## Creating your first canvas drawing

Let's create a simple rectangle to start with. 

```javascript
var canvas = document.getElementById('canvas'); 
if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green'; 
  ctx.fillRect(10, 10, 50, 50); 
}
```
We have used fillStyle and fillRect in the above code to create a rectangle, we will learn more about them in the next article.


## Fallback and Support
 
The support of the canvas element in modern browsers is excellent. You can refer [caniuse.com]() to see the complete list of browsers and their support level for the canvas element.

It is also very easy to provide fallback content for the canvas element. Unlike an <img> alt attribute which allows only text to be provided when the image fails to load, in canvas, you can provide an image of your graphics as fallback content. 

```html
<canvas id="myCoolGraphics" width="150" height="150"> 
  <img src="images/coolGraphics.png" width="150" height="150" alt=""/> 
</canvas>
```

For this reason, the closing tag in the canvas element is not optional.
 
We will learn more about canvas in the next article. Have a nice day :)


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**



An Introduction to HTML5 Canvas API

Javascript was created for adding functionality to web pages, hence it was developed to run in web browsers. But as time passed,  javascript evolved and developed into a full-fledged programming language.

The platform on which javascript runs, here, web browsers also provides platform-specific functionality. To access these functionalities using javascript, host environment(web browser) provides objects and functions.  

**Browser Object Model(BOM)** refers to the objects provided by the web browser for manipulating properties and objects associated with it. The objects and properties provided by the Browser Object Model allow javascript to interact with the browser.

Some of the important **BOM(Browser Object Model) objects** which are available while executing javascript are:

- window 
- window.document
- window.navigator
- window.screen
- window.history
- window.location

> You can drop window prefix for all the above properties and access it directly as document, navigator, screen, history, and location.

Let’s learn briefly about all the above objects. We will learn about them in greater detail in their dedicated articles. 

You can open the browser console(CTRL + SHIFT + J) in this window to run the code examples in this article.

## window

The window object represents the browser’s window containing the web document. It is the root object of the BOM hierarchy. To view properties and objects it contains execute the below code in your browser console.

```javascript
//window object
console.log(window)
```

## window.document

The document object represents and returns the reference of the document loaded in the browser’s window. 

```javascript
//title of the loaded document in the window
console.log(window.document.title)
```

## window.navigator

The window.navigator object returns the reference to the Navigator Object. Navigator Object contains information about the user agent(browser) and the operating system.

```javascript
//To get the User-Agent
console.log(window.navigator.userAgent)
```

## window.screen 

 The window.screen object returns information about the user’s screen.

```javascript
//get screen width
console.log(window.screen.width)

//get screen height
console.log(window.screen.height) 
```

## window.history

The window.history returns a reference to the History Object. You can use it for manipulating browser session history(pages visited in the same tab). 

```javascript
// go to previous web page, equivalent to clicking back button
window.history.back(); 
```

## window.location

You can get the current page address(URL) or redirect the browser to a new web address using the window. location object.

```javascript
//current page web address
console.log(window.location.href)
```

We will learn about all the important BOM objects and their properties in another article.


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 



Browser Object Model - BOM in Javascript

BigInt is the newest datatype in Javascript that will soon be supported by all browsers. 

**So, why we need a new data type in the first place?** Aren't Numbers sufficient for all the use cases?

To answer the above question, let's look at the Number Datatype in little depth. 

Numbers in Javascript are represented in a **double-precision floating-point 64-bit format** as defined in [IEEE 754-2008](https://en.wikipedia.org/wiki/IEEE_754-2008_revision) standard. According to this standard, any number bigger than **2^53** cannot be represented accurately and are rounded off. So the number loses precision. Therefore, the Number data type is not suitable for very large calculations. Javascript provides two constants which stores maximum and minimum supported values of Number type:

- **Number.MAX_SAFE_INTEGER (9007199254740991)**
- **Number.MIN_SAFE_INTEGER (-9007199254740991)**

```javascript
//9007199254740991
console.log(Number.MAX_SAFE_INTEGER)
//-9007199254740991
console.log(Number.MIN_SAFE_INTEGER)
```

To solve the above problem, BigInt is introduced in Javascript. **BigInt is capable of representing numbers of arbitrary length without losing precision.** Thus, it is helpful in many scenarios where large numbers are a necessity.  

## Creating BigInt

You can create BigInt by appending n to the end of the number or using the BigInt constructor.

```javascript
let bigNumber1 = 100n;

//output: 100n
console.log(bigNumber1);

let bigNumber2 = BigInt(300);

//output: 300n
console.log(bigNumber2);
```

## Operators that work on BigInt

Addition, multiplication, subtraction, exponentiation, modulus and bitwise operators work in the same way as they work with Numbers.

```javascript
console.log(1n + 2n); // 3n
console.log(2n - 1n); // 1n
```

BigInt does not support unary (+) operator. The reason behind this is that the unary (+) operator is used for implicit typecasting to Numbers in a lot of codebases which will create confusion and misunderstanding.

Division operations are also rounded towards 0 as BigInts are integers and not decimals.

```javascript
//output: 2n
console.log(5n/2n)
```

**BigInt is the same as numbers and is truthy unless it is not 0n.**

```javascript
if(0n){
//code will not execute
}

if(5n){
//code will execute
}
```

## Operations between bigInt and Number

### Arithmetic Operations

Arithmetic Operations with a mix of BigInt and Numbers are not allowed as information loss could occur during implicit typecasting.


```javascript
//Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
console.log(1n + 2)
```

### Equality

BigInt is not strictly equal to Number as they are not of the same data type. 

```js 
let a = 3n;
let b = 3;
//output: false
console.log(a === b);
```

Though, they are loosely equal to Numbers.

```js 
let a = 3n;
let b = 3;
//output: true
console.log(a == b);
```

### Comparision

You can compare a number and a BigInt same as two numbers are compared.

```js
//output: true
10n > = 4
```



Browser Support
BigInt is pretty new to the Javascript language and hence support for it in major browsers may not be uniform right now. You can see which browser supports BigInt at [**Can I use dot com**](https://caniuse.com/#search=bigint).


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).** 

BigInt-The Newest Datatype in Javascript

React is developed on the fact that **rendering logic** should be coupled with other **UI logic(events, state management)** and should be **managed together**. 

For this reason, instead of separating technologies(separate files for HTML and javascript), react uses a syntax extension of javascript, **JSX - Javascript XML**. Using JSX, you can write markup inside Javascript, providing you with a superpower to write logic and markup of a component inside a single .jsx file.

```js
function greeting(user) {
  //warning: JSX in next line...
  return <h1>{user}, How are you!!!</h1>;
}
```

In the above example, 

```js
    return <h1>{user}, How are you!!!</h1>;
```

**"<h1>{user}, How are you!!!</h1>"** looks like HTML but is actually JSX.  

> All JSX returns a react element which will be rendered as a DOM node by virtual DOM. 

You can write/embed a javascript expression inside JSX using **"{}"** curly brackets. In the above example, **{user}** will be evaluated before returning the react element. 

JSX are also **javascript expressions**, which compiles to **React.createElement()** function calls. And these functions(React.createElement()) return javascript objects. The returned objects describe what will be rendered on the screen and are called **react elements**. 

Here is the three-step process from JSX to react element.

1. Let's consider the following code written in JSX:
```js
<div className="greeting">Hello, how are you?</div>
```

2. JSX compiles to React.createElement() function calls:

```js
React.createElement(
  "div", 
    {
      className: "greeting"
    }, 
    "Hello, how are you?"
);
```

*We will get into the details of the React.createElement() in another article.*

3. React.createElement function calls returns react element: 

```js	
{ 
  type: 'div',
  props: {
    children: 'Hello, how are you?', 
    id: 'greeting' 
  }
}
```

> A **react element** is a javascript object representing a piece of UI on the screen.

When the above react element is rendered by the virtual DOM to the DOM, the following node will be created and attached to the DOM:

```js
<div class="greeting">Hello, how are you?</div>
```

React virtual dom uses react elements to decide what will be rendered on the screen and thus manipulate the real dom. 

*Remember, JSX is not required for writing a react application but is recommended by the official documentation.* 

## Summary

In this article we learned:

- What is JSX?
- Why React use JSX?
- What is React Element?
- What are the steps involved from writing JSX to creating a node on the DOM?



----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**


JSX - Javascript XML in React

**Scope** in javascript refers to the part of your code in which variables, functions, and objects are visible and can be used. It refers to the context in which the declared variables are accessible. 

> In general, scope determines whether, in a particular part of the program, the declared variable, function or object is available for use or not. 

## Types of Scope

- Global Scope
- Local Scope

## Global Scope

The global scope is the **outermost scope** in your program. Global scope is already accessible to you when you start writing a new javascript program. Anything you declare in the global scope is available for use throughout the program.

Variables declared outside functions or code blocks(if, while, for, {}) are in the global scope of the program. 

```js
//global scope
var globalVar = "I am a global var";

function newFunc(){
	console.log(globalVar);
}

//Output: I am a global var
console.log(globalVar); 

//Output: I am a global var
newFunc();
```

## Local Scope

 In javascript, the local scope is created by functions and blocks(if, while, for, {}). Any variable declared inside a local scope is available in that scope only.

> For var, the local scope is only created by functions whereas let and const respects block scoping as well.

### Function Scope
A function creates a local scope in javascript. Any variables declared using var, let and const are locally scoped inside a function and is accessible only inside of it.

```js
//global scope
function func(){
 var funcVar = 'I am function var';
 let funcLet = 'I am function let';
}

//output:  Uncaught ReferenceError: funcVar is not defined
console.log(funcVar);

//output: Uncaught ReferenceError: funcLet is not defined
console.log(funcLet);
```

### Block Scope

Block statements also create local scope in Javascript. Variables declared using let and const are placed inside the block scope. But for var, the local scope is created by functions only. 

```js
//global scope
{
	var blockVar = 'I am block var';
	let blockLet = 'I am block let';
	const blockConst = 'I am bock const';
}
//output:  I am block var
console.log(blockVar);

//output: Uncaught ReferenceError: blockLet is not defined
console.log(blockLet);

//output: Uncaught ReferenceError: blockConst is not defined
console.log(blockConst);
```

## Lexical Scope
 
Functions declared separately do not have access to each other's scope in a program. But how does scope works when a function is declared inside other functions? 

When functions are nested, the inner function has access to the scope of the parent function. Thus, the inner function can access variables defined inside parent function, but the opposite is not true. The parent function cannot access variables declared inside the inner function.  In this case, inner function is said to have lexical scope.  

```js
// GLOBAL SCOPE
var globalVar = 'I am global var';

function outerFunc(){
	// function scope 1
  	var funcVar = 'I am function var';
   	var innerFunc = function(){
    		// function scope 2
    		//output: I am global var 
		console.log(globalVar);
		//output:  I am function var
    		console.log(localVar);
 	}
}
```


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 




Understanding Scope in Javascript

Variables are like containers that are used to store values. It acts as a **temporary storage** unit in which you can store data and recall it multiple times in your program. In short, you can keep track of information using variables. The values stored in a variable can be of any data type that javascript supports. You can go through [this article](https://hackinbits.com/articles/javascript-data-types-explained) for a refresher on Javascript Datatypes.  

## Variable Declaration

You can declare a variable in Javascript using **var**, let and const keywords followed by the name of the variable. Javascript defines precise rules which you need to follow while naming them. We will discuss them later in the sperate section in this article.

```js
var myVar;
let myVar;
```

## Variable Initialization

In the above example, we created a variable but haven't initialized it with any value. To initialize a variable, you need to assign it to a value using the assignment "=" operator. 

```js
var myVar = "Hello World";
```

If you declare a variable using **let** and **var** and did not initialize it, it will be automatically assigned an **undefined** value.

```js
var myVar;
//undefined
let myLetVar;
//undefined
```

**const** is used to define **constant/immutable** value, so declaration and initialization have to take place together. 

```js
const myConstVar = "Hello World";
//Hello World
```

Javascript will throw an error if you will try to declare a variable without initializing it.

```js
const myConstVar;
//Uncaught SyntaxError: Missing initializer in const declaration
```

## Naming Variables

Following are the rules which we should keep in mind while **naming variables in javascript**:

- Variable names are case sensitive.
- Variable names can only consist of letters (a-z, A-Z), numbers (0-9), dollar sign ($), and underscores (_).
- Cannot begin with numbers or only consists of numbers
- It cannot contain whitespaces.
- [Reserved Keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Reserved_keywords_as_of_ECMAScript_2015) cannot be used as variable names.

## Examples

```js 
let firstVar;
//undefined

let secondVar = 100;
//100

let thirdVar = secondVar
//100

let fourthVar, fifthVar;
//both undefined

const constVar;
//Error

const constVar = 100;
//100
```


----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 




Understanding Variables in Javascript

![Machine Learning Robot](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/ml.png?alt=media&token=9ba163e5-5b38-4450-b5ad-5a311feb18ce)

To begin with the buzzword **“Machine Learning(ML)”**, you will first need to focus on another word **“Artificial Intelligence(AI)”**. Yes, both are related. Machine learning is a part of AI.

The bigger term, AI is about creating an environment where you do not have to command the computer to do a certain thing, the computer can think and understand on its own.
 
Think of the air conditioner which turns off when there is no one in the room. It is programmed or designed in such a way that no external medium is required to turn it off. A lot of basic and everyday used technology are examples of AI. Like your phone adjusting the brightness of the screen according to the natural light.
 
Your cell phones and your personal computers are evolving every day. With the help of AI, they are becoming more intelligent and efficient.

In order to be flawless, one needs to remember and correct their flaws. Like, remembering your mistakes and not repeating them further or correcting them. Similarly, your cell phone which is a machine can now remember the words you use very often and predict them while you are typing a message or suggest you a new horror movie because you watch horror movies a lot. This amazing way of the machines to learn, adapt, improvise and improve themselves without explicitly feeding them programs to do the same is known as **“machine learning”**.

> This amazing way of the machines to learn, adapt, improvise and improve themselves without explicitly feeding them programs to do the same is known as **“machine learning”**.

Now, the question is how the machines get to learn themselves. Just like your brain, which stores the information that you read in your books and use them when you are writing an exam. These machines store the data or information such as the words that you type and the number of times you use the word in a single sentence. This information is later used to predict the word that you want to use.

Similarly, the air conditioner records the temperature of the room at different hours throughout the day and adjust its temperature setting accordingly without you explicitly adjusting it with a remote. 

It is true that now you don’t have to explicitly write a program to identify a person’s face, whenever he tries to unlock his phone. But there has to be some programming done to capture the facial features of a person in the beginning, After that those captured features must be stored as information which is later used to unlock the phone whenever needed. 

Now, some method is used to match or compare the facial features stored, with the one that is currently available while unlocking the phone. These methods are known as algorithms which help in machine learning. These are categorized as

- **Supervised machine learning algorithms**
- **Unsupervised machine learning algorithms** 
- **Semi-supervised machine learning algorithm**
- **Reinforcement machine learning algorithms** 

We will discuss these algorithms in later articles.



An Introduction to Machine Learning

In this series, we will look into some of the notable features of React from which React gets its power and simplicity. This article is a formal introduction to all of them, diving more into the concept rather than the code. We will discuss all of them in detail with lots of examples later in this series. 

## Key Features of React
- JSX
- Composition of Components
- Virtual DOM
- One way data-binding
- Lifecycle Methods

## JSX (Javascript XML Notation)

React is developed on the fact that rendering logic should be coupled with other UI logic(events, state management) and should be managed together. For this reason, instead of separating technologies(HTML and javascript into separate files), react manages complexity by dividing concerns into loosely coupled units called components.

**"Javascript XML"** is a syntax extension of Javascript. Using JSX, you can **write markup inside Javascript**, providing you with a superpower to write logic and markup of a component inside a single .jsx file. 

```javascript
function greeting(user) {
//warning: JSX in next line...
  return <h1>{user}, How are you!!!</h1>;
}
```

## Composition of Components

Know what! React has yet another superpower, which allows you to reuse your code in a very subtle way. This superpower allows you to compose small components to form a complex component.

For example, you can create separate components for like, share and comment encapsulating their logic. Later, you can combine them to form a complex component like cards.

![Component Composition](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react_3.png?alt=media&token=bf498655-9216-45eb-9252-d955b9cb6190)

## Virtual DOM

React is very performant. To achieve it, react **creates a  virtual representation of UI in the memory** known as **Virtual DOM**. Instead of updating DOM directly, React sync the Virtual DOM with the real DOM. Virtual DOM updates only those components in real DOM for which the state has changed and thus needs a re-render to show the updated data on the screen.

![Virtual DOM](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react2.js.png?alt=media&token=bd69b0c6-8c57-43ee-b9fc-e6dc1c8de78f)

## One-way data binding

In React, **data flows from parent to child unidirectionally**. The parent component passes its state to the child component using props. Child, in turn, can communicate to parents for updating the state using callbacks. This one-way communication between parent and child makes developing complex applications easier. It also helps in making debugging a lot less painful.

![one-way data binding](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react2.png?alt=media&token=bbaf1ece-e29d-449a-b116-952d8df23b1c) 

## Lifecycle Methods

Lifecycle methods are hooks which let you run different code at different point of a component's life. Thus, making it easy for you to manage components in React application during their lifetime.

## Different phases of react components are:

### Mounting

When the react component is added to the DOM Tree, it is said to be mounted. After mounting, the component becomes visible on the screen.

**Methods**
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()


### Updating

When a component receives a new state or props, the component is re-rendered.  React provides different lifecycle methods to hook into the update event. 

**Methods**

- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()

### Unmounting

When a component is removed from the DOM tree, it is said to be unmounted. 

**Methods** 

- componentWillUnmount()

We will discuss lifecycle methods in detail in later articles. 

----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 



Key Features of React JS

Symbols that are used to perform a certain operation are known as operators. Examples: +,-,/,* etc.

Different types of operators available in Java are:

- Arithmetic Operator
- Assignment Operator
- Logical Operator
- Bitwise Operator
- Relational Operator
- Shift Operator
- Unary Operator, and
- Ternary Operator

![java operators](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/java_operators.png?alt=media&token=1c81fe50-22a2-437b-9786-6a32734f356d)


## Examples to understand different operators

### Arithmetic Operator

```java
class ArithmeticOperator {
 public static void main(String[] args) {
  int a = 15;
  int b = 5;
  System.out.println(a + b); //20
  System.out.println(a - b); //10
  System.out.println(a * b); //75
  System.out.println(a / b); //3
  System.out.println(a % b); //0
 }
}

class ArithmeticOperatorExpr {
 public static void main(String[] args) {
  System.out.println(10 * 10 / 5 + 3 - 1 * 4 / 2); //21
 }
}
```

### Assignment Operator

```java
class AssignmentOperator {
 public static void main(String[] args) {
  int a = 15;
  int b = 5;
  a += 4; //a=a+4
  b -= 4; //b=b-4
  System.out.println(a); //0
  System.out.println(b); //0
 }
}

class AssignmentOperator {
 public static void main(String[] args) {
  int a = 15;
  a += 4;
  System.out.println(a);
  a -= 4;
  System.out.println(a);
  a *= 2;
  System.out.println(a);
  a /= 2;
  System.out.println(a);
 }
}

class AssignmentOperator {
 public static void main(String[] args) {
  short a = 15;
  short b = 5;
  a = a + b; //Should throw Compile time error because 10+10=20 wiz int
  System.out.println(a);
 }
}
```

### After type casting

```java
class AssignmentOperator {
 public static void main(String[] args) {
  short a = 15;
  short b = 5;
  a = (short) a + b; //20 which is now converted to short
  System.out.println(a);
 }
}
```


### Logical Operator

```java
class LogicalOperator {
 public static void main(String[] args) {
  int a = 10;
  int b = 5;
  int c = 20;
  System.out.println(a < b && a++ < c); //false && true = false
  System.out.println(a); //10 because second condition is checked
  System.out.println(a > b || a++ < c); //true || true = true
  System.out.println(a); //10 because second condition is checked
 }
}
```

### Bitwise Operator

```java
class BitwiseOperator {
 public static void main(String[] args) {
  int a = 10;
  int b = 5;
  int c = 20;
  System.out.println(a < b & a++ < c); //false & true= false
  System.out.println(a); //11 because second condition is checked
  System.out.println(a > b | a++ < c); //true | true = true
  System.out.println(a); //12 because second condition is checked
 }
}
```

![bitwise operator](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/java_operators_2.png?alt=media&token=4f75438e-e228-4a05-88b6-83ed0a029365)

### Relational Operator

```java
class RelationalOperator {
 public static void main(String[] args) {
  int a = 10;
  int b = 5;
  int c = 20;
  if (a >= b)
   System.out.println(a);
  If(b < c)
  System.out.println(b);
  If(a != c)
  System.out.println(c);
 }
}
```

### Shift Operator

- **Left Shift:** << operator is used to shift all bits in the value to the left, the specified number of times.
- **Right Shift:** >> operator is used to shift all bits in the value to the right, the specified number of times.

```java
class ShiftOperator {
 public static void main(String[] args) {
  System.out.println(10 << 2); //10*2^2=10*4=40
  System.out.println(10 << 3); //10*2^3=10*8=80
  System.out.println(20 << 2); //20*2^2=20*4=80
  System.out.println(15 << 4); //15*2^4=15*16=240
  System.out.println(10 >> 2); //10/2^2=10/4=2
  System.out.println(10 >> 3); //10/2^3=10/8=1
  System.out.println(20 >> 2); //20/2^2=20/4=5
  System.out.println(15 >> 4); //15/2^4=15/16=0
 }
}
```

### Unary Operator

**Uses:**

- Incrementing/decrementing a value by one
- Negating an expression
- Inverting the value of a boolean

```java
class UnaryOperator {
 public static void main(String[] args) {
  int a = 10;
  int x = 10;
  int y = -10;
  boolean c = true;
  Boolean d = false;
  System.out.println(x++); //10(11)
  System.out.println(++x); //12
  System.out.println(x--); //12(11)
  System.out.println(--x); //10
  System.out.println(x++ + ++x); //10+12=22
  System.out.println(x++ + x++); //12+13=25
  System.out.println(~x); //-11 (minus of total positive value which starts from 0)
  System.out.println(~y); //9 (positive of total minus, positive starts from 0)
  System.out.println(!c); //false (opposite of Boolean value)
  System.out.println(!d); //true
 }
}
```

### Ternary Operator

```java
class TernaryOperator {
 public static void main(String[] args) {
  int a = 2;
  int b = 5;
  int min = (a < b) ? a : b;
  System.out.println(min);
 }
}
```

----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**

Different types of operators in Java

Java switch statement executes one statement out of multiple conditions. Java switch statement is similar to **if-else if** ladder.

The switch statement supports multiple data types in the condition like byte, short, int, long, enumerations, some wrapper types like Byte, Short, Integer, Long. Since, the release of Java 7, the use of Strings is also supported in the switch conditions.

## Points to remember about a Switch Statement

- Switch statement works by comparing the equality of a variable against multiple values.

- You can have N number of case statements within a switch. Each case is followed by the value to be compared to and a colon (‘:’).

- The value for a case must be the same data type as the variable in the switch and it must be a constant or a literal. It doesn’t allow variables.

- When the variable being switched on is equal to a case, the statements following that case will execute until a break statement is reached.

- When a break statement is reached, the switch terminates, and the flow of control jumps to the next line following the switch statement.

- Not every case needs to contain a break. If no break appears, the flow of control will fall through to subsequent cases until a break is reached.

- A switch statement can have an optional default case, which must appear at the end of the switch. The default case can be used for performing a task when none of the cases is true. No break is needed in the default case.

## Syntax

```java
switch(expression){
	case value1:
		//code to be executed;
		break;
	case value2:
		//code to be executed;
		break;
	……..
	default:
		//code to be executed when all cases are unmatched;
}
```

![Switch statement](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/switch_statement.png?alt=media&token=40113a72-04cb-4540-baaf-cc8b1687edff)

## Examples

### Finding the month

```java
public class example {
 public static void main(String[] args) {
  int month = 7;
  String monthString = "";
  switch (month) {
   case 1:
    monthString = "1 - January";
    break;
   case 2:
    monthString = "2 - February";
    break;
   case 3:
    monthString = "3 - March";
    break;
   case 4:
    monthString = "4 - April";
    break;
   case 5:
    monthString = "5 - May";
    break;
   case 6:
    monthString = "6 - June";
    break;
   case 7:
    monthString = "7 - July";
    break;
   case 8:
    monthString = "8 - August";
    break;
   case 9:
    monthString = "9 - September";
    break;
   case 10:
    monthString = "10 - October";
    break;
   case 11:
    monthString = "11 - November";
    break;
   case 12:
    monthString = "12 - December";
    break;
   default:
    System.out.println("Invalid Month!");
  }
  System.out.println(monthString);
 }
}
```

### Switch with fall-through

The **case** will be executed until a break statement is encountered.

```java
public class example {
 public static void main(String[] args) {
  int number = 20;
  switch (number) {
   case 10:
    System.out.println("10");
   case 20:
    System.out.println("20");
   case 30:
    System.out.println("30");
   default:
    System.out.println("Not in 10, 20 or 30");
  }
 }
}
```

### Switch with String expression since Java SE 7

```java
public class example {
 public static void main(String[] args) {
  String levelString = "Expert";
  int level = 0;
  switch (levelString) {
   case "Beginner":
    level = 1;
    break;
   case "Intermediate":
    level = 2;
    break;
   case "Expert":
    level = 3;
    break;
   default:
    level = 0;
    break;
  }
  System.out.println("Your Level is: " + level);
 }
}
```

### Nested Switch Statement

```java
public class example {
 public static void main(String args[]) {
  char branch = 'M';
  int collegeYear = 3;
  switch (collegeYear) {
   case 1:
    System.out.println("English, Maths, Science");
    break;
   case 2:
    switch (branch) {
     case 'C':
      System.out.println("Operating System, Java, Data Structure");
      break;
     case 'E':
      System.out.println("Micro processors, Logic switching theory");
      break;
     case 'M':
      System.out.println("Drawing, Manufacturing Machines");
      break;
    }
    break;
   case 3:
    switch (branch) {
     case 'C':
      System.out.println("Computer Organization, MultiMedia");
      break;
     case 'E':
      System.out.println("Fundamentals of Logic Design, Microelectronics");
      break;
     case 'M':
      System.out.println("Internal Combustion Engines, Mechanical Vibration");
      break;
    }
    break;
   case 4:
    switch (branch) {
     case 'C':
      System.out.println("Data Communication and Networks, MultiMedia");
      break;
     case 'E':
      System.out.println("Embedded System, Image Processing");
      break;
     case 'M':
      System.out.println("Production Technology, Thermal Engineering");
      break;
    }
    break;
  }
 }
}
```

### Switch statement with Enumeration

```java
public class JavaSwitchEnumExample {
 public enum Month {
  Jan,
  Feb,
  Mar,
  Apr,
  May,
  Jun,
  Jul,
  Aug,
  Sept,
  Oct,
  Nov,
  Dec
 }
 public static void main(String args[]) {
  Month[] monthNow = Month.values();
  for (Month Now: monthNow) {
   switch (Now) {
    case Jan:
     System.out.println("January");
     break;
    case Feb:
     System.out.println("February");
     break;
    case Mar:
     System.out.println("March");
     break;
    case Apr:
     System.out.println("April");
     break;
    case May:
     System.out.println("May");
     break;
    case Jun:
     System.out.println("June");
     break;
    case Jul:
     System.out.println("July");
     break;
    case Aug:
     System.out.println("August");
     break;
    case Sept:
     System.out.println("September");
     break;
    case Oct:
     System.out.println("October");
     break;
    case Nov:
     System.out.println("November");
     break;
    case Dec:
     System.out.println("December");
     break;
   }
  }
 }
}
```

### Switch with wrapper classes

Java switch statement uses Byte, Short, Integer and Long wrapper classes.

```java
public class example {
 public static void main(String args[]) {
  Integer number = 35;
  switch (number) {
   case (16):
    System.out.println("You are under 18.");
    break;
   case (18):
    System.out.println("You are eligible for vote.");
    break;
   case (65):
    System.out.println("You are senior citizen.");
    break;
   default:
    System.out.println("Please give the valid age.");
    break;
  }
 }
}
```

----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**


Java Switch Statement in Detail

## What is IIFE? 

**Immediately Invoked Function Expression** (IIFE) is a javascript function that is invoked just after its declaration. It is a simple function with just one strict condition, i.e., anything inside the function block must be executed immediately. This design pattern is also known as **Self Executing Anonymous Function**.

**Example:**

```javascript
(function () {
	alert('I will be executed immediately!!!');
})();
```

Don't worry about syntax right now. Just read the example once or twice to make yourself familiar with IIFE syntax. 

## How to create an IIFE

Creating an IIFE involves two steps:

- Creating a function expression.
- invoking the function expression immediately.

### Creating a function Expression

In Javascript, **an expression** always returns a value and can be used in any place where a value is expected. 

- 2*2
- AddFunc(a, b)
 
In most cases, when javascript parser encounters the function keyword, it interprets it as a function declaration and not as a [function expression](https://hackinbits.com/articles/what-is-function-expression-in-javascript). So, a general way to create a function expression is to enclose the function declaration in the **grouping operator** (parenthesis). Enclosing inside **"( )"** tells the parser explicitly to expect an expression. In this case, the expression is the function.

**Example:**

```javascript
(function () { /* function body */ });
```

### Invoking the function expression immediately

To invoke the function expression created in the above example, we just need to add a couple of parentheses at the end.

```javascript
(function () {
	/* function body */
}();
```
----


The above example is the same as the first example in this article.

----

**Other Examples:**
 
```javascript
(function () { /* function body */ }());

//es6 syntax with arrow function
(() => { /* function body */ })();
```

## Why IIFE

Now we know the code, the question remains, why should we use IIFE? What do we gain from using it? Is the simple javascript function not good enough?

The answer to the above questions is explained below in several points: 

### IIFE prevents global namespace pollution
The scope of the function name and the variables defined inside IIFE are local to the IIFE itself. Therefore, preventing function and variable names from taking space in the global namespace. It also helps in preventing **namespace collision**.  

### Variables defined inside IIFE remains inside IIFE

Variables defined inside IFFE are local to IFFE itself and does not exist outside of it.

**Example:**

```javascript
(function () {
    var privateVar = "I am private to IIFE";

    // Output: "I am private to IFFE"
    console.log(privateVar);
})();

// ReferenceError: privateVar is not defined
console.log(privateVar);
```

### IIFE helps keep the memory clean

The required functions and variables are created and used when the IIFE is invoked. As soon as IIFE finishes its execution, the functions and variables created are available for Garbage Collection, helping in keeping the memory clean.

## Passing Parameters to IIFE

We can pass parameters to IIFE inside the last pair of parentheses separated by a comma. 

```javascript
(function(name, greeting){
	alert("Hello" + name);
	console.log(greeting);
})("John Doe", "How are you");
```

## Different ways of creating IIFE

We can create IIFE wherever a function expression can be created in javascript.

Following IIFE's are enforced from valid function expressions:

```javascript
!function () { /* ... */ }();
~function () { /* ... */ }();
-function () { /* ... */ }();
+function () { /* ... */ }();
void function () { /* ... */ }();
```

In other words, in the context where a function expression is created, enclosing in parenthesis is not required. 

```javascript
var f = function () { /* ... */ }();
true && function () { /* ... */ }();
```

**But do exercise caution is using these.**

----

IIFE is a design pattern that offers a lot of benefits if used correctly. I hope this article helped you in understanding it better. 

If you liked this article, don't forget to upvote and recommend it. Feel free to ask any questions in the comments below. 


IIFE in Javascript

To understand Function Expression lets explore functions in Javascript first. 

## Functions

In general, Functions are **subprograms** which may, or may not take parameters(input) and return a value. 

----

![Function](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/function_expression_pic1.png?alt=media&token=b368170c-a628-42ec-894b-cf266c836d75)

----

## Functions in Javascript

A javascript function does the same thing. It takes parameters as input and returns a value. 

```javascript
function addTwoNumbers(a, b) {
	return a+b;
}
```

Javascript function definition starts with the function keyword, followed by:

- name of the function
- parameters if any, wrapped with parenthesis and separated by a comma
- the function body - series of statements inside curly brackets { }.

```javascript
function greetings(name) {
	alert('Hi' + name);
}
```

If you have experience in other programming languages, the above function definitions will look very familiar to you.

## Function Expression

**Functions are first-class objects** in Javascript. For that reason, they can be assigned to a variable as an expression, passed as a parameter, and much more.

A function expression is defined by assigning a function definition to a javascript variable.

```javascript
var addTwoNumbers = function (a,b) {
	return a + b;
}
addTwoNumbers(2, 3);
```

### Anonymous Function Expression

In the previous example, the function assigned to variable "addTwoNumbers" has no name. Therefore, it is called an anonymous function. 

```javascript
var multiplyTwoNumbers = function (a,b) {
	return a * b;
}
multiplyTwoNumbers(2, 3);
```

 Anonymous Function Expressions are used to create callback functions. We will save **callback** for another time.

## Named Function Expression

To create a named function expression, assign a function with a name to a variable.  In this case, the scope of the function name is the function itself. 

```javascript
var newSeries = function fibonacci(num) {
  if (num <= 1) return 1;

  return fibonacci(num - 1) + fibonacci(num - 2);
}
```

Named Function Expressions are useful for creating recursive functions. 


Function Expression is quite useful in the real world. It is also used to create a coding pattern called IIFE(Immediately Invoked Function Expression). We will discuss the IIFE in the next article.

If you like this article, please upvote and share it. 







What is Function Expression in Javascript

In the last article [What is CSS and how to use it](https://hackinbits.firebaseapp.com/articles/-what-is-css-and-how-to-use-it), we learned basic CSS syntax and different way of including CSS in an HTML document. We also learned about CSS declaration, ruleset, and CSS Selectors.

In this article, we will discuss the CSS Selectors in detail. We will explore Simple CSS Selectors that can be used to target desired elements for styling.

## Simple CSS Selectors

As it is said learning by doing is the best way to learn anything. In this article, we will learn Simple CSS Selectors by designing a Profile Card. Below is the final design.

----

![Profile Card using Simple CSS Selectors](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/blog_b_10_2.png?alt=media&token=b2d6da41-4627-4439-9874-97f71b32c2d8 "Profile Card using Simple CSS Selectors")

----

Simple CSS Selectors directly select one or more elements on the basis of the type of element, class or id. We will start learning different types of CSS selectors by editing below example document:

**index.html:**

```html
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div id="container">
    <div id="card">
      <img src="https://hackinbits.com/images/blog/john_doe.png" class="img-profile" alt="profile pic" />
      <p>John Doe</p>
      <div>
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_3.png" alt="facebook icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_4.png" alt="linkedin icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_5.png" alt="twitter icon" />

      </div>
    </div>
  </div>
</body>

</html>
```
[Example Link](https://codepen.io/SRIJAN1709/pen/QBYbLL)

----

**style.css:**

```css
/* We are going to apply our CSS knowledge as we learn about Simple CSS Selectors in this article to design the profile card */
```

**Following are Simple CSS Selectors:**

- Type/Element selector
- Class selector
- Id Selector
- Universal Selector


## Type Selectors or Element Selectors

Type Selector or Element Selector matches elements on the basis of tag names. For example, to match all div elements, we will write,

```css
div {
   .......
}
```

For the profile card we will add following type selectors in style.css file:

**style.css:**

```css
/* Center align content inside div */
div {
   text-align:center;
   margin:auto;
}
/* Setting font properties - color, size, family and weight for paragraph */
p {
   font-size:32px;
   font-weight: bold;
}
```

**The above styles will be applied to all div and paragraph elements as matched by the selectors.**

## Class Selectors

```css
.social-icon{
   height:50px;
   padding:20px;
   cursor:pointer;
}
```

Class selector consists of a prefixed "." dot before the class name. The class name is defined in class attribute in an HTML element. Multiple HTML elements are allowed to have the same class value. The class selector matches all HTML elements with the same class name.

```html
<img class="social-icon" src="./social/facebook.png" alt="facebook icon"/>
<img class="social-icon" src="./social/linkedin.png" alt="linkedin icon"/>
<img class="social-icon" src="./social/twitter.png" alt="twitter icon"/>
```


A single HTML element can also have multiple classes separated by white space.

```html
<img class="social-icon img-profile" src="./social/facebook.png" alt="facebook icon"/>
```

For the profile card we will add following class selectors in 'style.css' file:

```css
.img-profile{
   max-width: 100%;
   height: auto;
}
.social-icon{
   height:50px;
   padding:20px;
   cursor:pointer;
}
```

The **.img-profile class** defines the style for profile image and **.social-icon class** styles the social icons i.e. Facebook, LinkedIn, and Twitter icons.


## Id Selectors

```html
#container{
   width: 100%;
   padding:5px;
}

<div id="container">
```

Id selector consists of a prefixed "#" pound symbol before the id name of the HTML element. Id name is defined in id attribute in an HTML element. The id should be unique in the whole document. Duplicated ids can cause unpredictable behavior.


For the profile card we will add following id selectors in 'style.css' file:

```css
#container{
   width: 100%;
   padding:5px;
}

#card{
   max-width:320px;
   padding:5px;
   border-radius:8px;
   box-shadow:0px 1px 6px 0px #00000033;
}
```

These rulesets will apply unique styles to div having 'container' and 'card' id values.

```css
Universal selectors
* {
   color:grey;
}
```

Universal selector '*' selects all elements in a document.

For the **profile card** we will add following universal selector in 'style.css' file:

```css
* {
   font-family:sans-serif;
   color:grey;
}
```

## Completed Profile Card

**index.html:**
```html
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div id="container">
    <div id="card">
      <img src="https://hackinbits.com/images/blog/john_doe.png" class="img-profile" alt="profile pic" />
      <p>John Doe</p>
      <div>
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_3.png" alt="facebook icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_4.png" alt="linkedin icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_5.png" alt="twitter icon" />

      </div>
    </div>
  </div>
</body>

</html>
```

----

**style.css:**

```css
#container {
  width: 100%;
  padding: 5px;
}

#card {
  max-width: 320px;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0px 1px 6px 0px #00000033;
}

div {
  text-align: center;
  margin: auto;
}

p {
  font-color: grey;
  font-size: 32px;
  font-family: sans-serif;
  font-weight: bold;
}
.img-profile {
  max-width: 100%;
  height: auto;
}
.social-icon {
  height: 50px;
  padding: 20px;
  cursor: pointer;
}
```
[Example Link](https://codepen.io/SRIJAN1709/pen/gjqOXw)

In the next article, we will explore attributes and pseudo selectors.

## Useful Resources

- [CSS Selectors(MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

CSS Selectors - Simple CSS Selectors in detail

## Introduction

In this article, we are going to discuss CSS Attribute selectors in detail. We are going to design a web page that will contain links to some famous websites. The websites we are considering for this example are :

- Facebook
- Linkedin
- edX
- Khan Academy

Following are the design requirements for the example page:

- If the website under consideration is a professional social network, like LinkedIn, it should have a dashed border and for a casual social network like Facebook, it should have a solid border.

- For a social website, the background color should be blue and the text color should be white.

- If the link uses https, it should have an orange outline.

- For all .org domain, text-color should be red.

Below is the final layout :

![Example Image](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/blog_b_15_2.png?alt=media&token=98e70f89-8e80-4021-b346-0a068fd10d11)

The Skeleton HTML code for the example page is given below:

```html
<h1 id="main-heading" style="text-align:center">Website Links</h1>

<div style="text-align:center">
  <a data-link="social-casual" class="networking" href="https://www.facebook.com">Facebook</a>
  <a data-link="education-open" class="mooc" href="https://www.khanacademy.org">Khan Academy</a>
  <a data-link="education-open" class="mooc" href="https://www.edx.org">EdX</a>
  <a data-link="social-professional" class="networking" href="https://www.linkedin.com">Linkedin</a>
  <a data-link="More-links">More Links</a>
</div>
```
[Example Link](https://codepen.io/SRIJAN1709/pen/WgeMVz)

We will apply the required styles using attribute selectors for the above document.

## Attribute Selectors

CSS Attribute selectors select elements on the basis of attributes and their values. For example, we can match an element based on whether a particular attribute is present in an element or not.

```css
p[lang='en']{
   color:blue;
}
```

In the above example, the paragraph having lang attribute with value 'en' will be selected and text color is set to blue.

We can match elements using the following attribute selectors:

### \[attribute\]

It matches all the elements having the attribute named 'attribute'.

For links in our example document, we will add the following styles :

```css
a[href]{
  text-decoration:none;
}
```

It will select all *<a>* tags with href attribute and set their text-decoration to none(as we don't want default styles for links).

### \[attribute=value\]

It matches all the elements having the attribute named 'attribute' with a value of 'value'.

For our example document we will add the following styles :

```css
h1[id="main-heading"]{
  font-family:sans-serif;
  color:darkslategrey;
}
```

The above ruleset will select <h1> tag with an id of 'main-heading' and apply styles to it.

### \[attribute~=value\]

It matches all the elements having the attribute named 'attribute' whose value is a whitespace-separated list of words, one of which is the exact value.

For our example document, we will add the following styles which will fulfill part of our first requirement:

```css
a[class~='networking']{
   border:8px darkslategrey solid;
}
```

### \[attribute|=value\]

It matches all the elements having the attribute named 'attribute' whose value can be exactly 'value' or can begin with 'value' immediately followed by a hyphen (-).

For our example document, we will add the following styles which will fulfill our second requirement :

```css
a[data-link|='social']{
  background-color:blue;
  color:white;
}
```

### \[attribute^=value\]

It matches all the elements having the attribute named 'attribute' whose value is prefixed by 'value'.

For our example document we will add the following styles which will fulfill our third requirement :

```css
a[href^='https']{
  outline:8px orange solid;
}
```

### \[attribute$=value\]

It matches all the elements having the attribute named 'attribute' whose value is appended(followed) by 'value'.

For our example document, we will add the following styles which will fulfill our fourth requirement :

```css
a[href$='.org']{
  color:red;
}
```

### \[attr*=value\]

It matches all the elements having an attribute named 'attribute' whose value contains at least one occurrence of 'value'.

For our example document, we will add the following styles which will fulfill part of our first requirement:

```css
a[data-link*='professional']{
   border-style: dashed!important;
}
```

### \[attribute operator value i\]

Adding 'i' before closing bracket as shown in the below example, will match the value case-insensitively.

```css
a[data-link='more-links' i]{
   color: blue;
}
```

## Final layout - after applying all styles

**html:** 

```html
<h1 id="main-heading" style="text-align:center">Website Links</h1>

<div style="text-align:center">
  <a data-link="social-casual" class="networking" href="https://www.facebook.com">Facebook</a>
  <a data-link="education-open" class="mooc" href="https://www.khanacademy.org">Khan Academy</a>
  <a data-link="education-open" class="mooc" href="https://www.edx.org">EdX</a>
  <a data-link="social-professional" class="networking" href="https://www.linkedin.com">Linkedin</a>
  <a data-link="More-links">More Links</a>
</div>
```

----

**css:**

```css
a{
  padding:12px;
  margin:12px;
  display: inline-block;
  font-size:20px;
  font-family:sans-serif;
}


a[href]{
 text-decoration:none;
}

h1[id="main-heading"]{
  font-family:sans-serif;
  color:darkslategrey;
}

a[href$='.org']{
  color:red;
}


a[href^='https']{
  outline:8px orange solid;
}

a[class~='networking']{
  border:8px darkslategrey solid;
}

a[data-link|='social']{
  background-color:blue;
  color:white;
}

a[data-link*='professional']{
  border-style: dashed!important;
}

a[data-link='more-links' i]{
  color: blue;
}
```

[Example Link](https://codepen.io/SRIJAN1709/pen/vzBRNg)

We will discuss pseudo-selectors in the next article of this series.

## Useful Resources

- [Attribute selectors(MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

 CSS Selectors - Attribute Selectors in detail

In the last article - [Introduction to DOM](https://hackinbits.com/blog/introduction-to-dom), we saw how a DOM tree is constructed by the browser for further processing of the web page. In this article, we will discuss some common node types that are present in almost all HTML documents and also look into their associated properties.

## DOM Nodes

A tree is constructed from nodes. There are **12 node types** available for the construction of a DOM Tree. DOM nodes are implemented as an object with their properties and methods. Four frequently used node types which are present in almost all HTML documents are:

- document node
- element node
- text node
- comment node
- Document Node

## Document Node

Document Node is the root of DOM Tree. It represents the entire document that is loaded in the browser window. It is the *entry point to the document*. We can access all nodes in the DOM tree from the document node.

![DOM TREE TOP](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_tree_top_7.png?alt=media&token=3420976f-e18f-4dfd-9a99-40bdf150b3ec)

Top level nodes in a document (html, head, body) can be directly accessed using properties of document node:

- document.documentElement - **<html>**
- document.head - **<head>**
- document.body - **<body>**

### Example

**html:**
```html
<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <h1>
      Output:
    </h1>
    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="op1">
        document.documentElement :
      </p>
      <p id="op2">
        document.head :
      </p>
      <p id="op3">
        document.body :
      </p>
    </div>
  </body>

</html>
```
----
**javascript:**
```js
var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;

//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById('op1');
var headOp = document.getElementById('op2');
var bodyOp = document.getElementById('op3');

//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
```

We used Node.tagName property in the above example which returned the name of the selected node.

## Element Node

HTML tags become element nodes in the DOM tree. We can get node type by using Node.nodeType property. Node.nodeType returns a numeric value corresponding to the type of node. Below table shows numeric value and node type they represent:

|Value | Constants |
|------|----------|
| 1 |	Node.ELEMENT_NODE |
| 9 |	Node.DOCUMENT_NODE |
| 3 |	Node.TEXT_NODE |
| 8 |	Node.COMMENT_NODE |

### Example

**html:**
```html
<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <h1 id="heading">
      Welcome to hackinbits.com
    </h1>
    <hr>
    <h2>
      Output:
    </h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      </p>
    </div>
  </body>

</html>
```
----

**javascript:**

```javascript
var heading_node = document.getElementById('heading');

//showing output
var out_p = document.getElementById("output");
out_p.innerHTML = heading_node.nodeType;
```

As shown in above example, Node.nodeType returned "1" for h1 element showing that h1 is of type element node.

## Text Node

![TEXT NODE](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/text_node_7.png?alt=media&token=d10ce116-1028-46f2-bb6b-45a158101267)

A text node is always a leaf of the DOM tree. An HTML element consists of an element node and a text node in general.

----
**html:**
```html
<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <h1 id="heading">
      Welcome to hackinbits.com
    </h1>
    <hr>
    <h2>
      Output:
    </h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      </p>
    </div>
  </body>

</html>
```
____
**javascript**:
```javascript
var heading_node = document.getElementById('heading');

//showing output
var out_p = document.getElementById("output");
out_p.innerHTML = heading_node.childNodes[0].nodeValue +
  ": " + heading_node.childNodes[0].nodeName;
```

In the above example, we used the following new properties:

| Property |	Description |
|----------|----------------|
| Node.nodeName |	Returns name of the current node as a string. For a text node, it will return "#text".      |
| Node.nodeValue | Returns or sets the value of the current node. For text node and comment node, it will return the content. For document and element node it will return null. |
| Node.childNodes |	Returns a live NodeList of child nodes of the given element. Particular Children can be selected by specifying an index that starts at '0' for the first element. Nodelist is a collection of nodes and "live" here means that NodeList will reflect any changes in DOM instantly. |

## Comment Node

HTML comments are represented by comment nodes in a DOM tree. Comment node can also be accessed using javascript.

----
**html:**
```html
<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <p id="para">A comment containing text "Comment for demonstration" is inserted just before this text node in a paragraph element. </p>
    <hr>
    <h2>
      Output:
    </h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      </p>
    </div>
  </body>

</html>
```

----
**javascript:**

```javascript
var paragraph_node = document.getElementById('para');

//showing output
var out_p = document.getElementById("output");
out_p.innerHTML = 
"Comment Content: \""+ paragraph_node.childNodes[0].nodeValue + "\"<br>"+
  "Node Name: "    + paragraph_node.childNodes[0].nodeName + "<br>"+
  "Node Type: "    + paragraph_node.childNodes[0].nodeType;
  // At '0' index comment node is present and at '1' text node.
```
In next article we will discuss different types of relationship between DOM nodes.

## Useful Resources

- [Understanding the dom tree and nodes - Digital Ocean](https://www.digitalocean.com/community/tutorials/understanding-the-dom-tree-and-nodes)
- [Introduction to DOM - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
- [DOM4 Node Interface specification - w3.org](https://www.w3.org/TR/dom/#interface-node)

DOM Tree and Nodes

## Introduction

Cascading Stylesheet (CSS) is a stylesheet language. Stylesheet languages like CSS describe the presentation of a document.

CSS is mostly used to style web pages written in HTML. All aspects of presenting an HTML document can be controlled using CSS including font, color, size, spacing, animations, etc.

## CSS Syntax

CSS syntax is optimized for declaring sets of styles you want to apply to HTML elements.

### CSS Declaration

----

![CSS Declaration](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/css_b_9_1.png?alt=media&token=1796e7ee-61c7-48c6-99f4-a19a7fdb3362)

-----

A CSS declaration consist of property and value pairs:

- **Property:** It is the aspect or feature of elements that we want to style using CSS like font color or border color.
- **Value:** Value describes how the feature will affect the presentation of elements. Each property has a set of values. For example, font and border color can be set to any color like green, blue or yellow.

**CSS declarations are case-insensitive.**

```css
color: blue     /*set font color to blue*/
font-family: helvetica     /*set font family to helvetica*/
border-width: 2px      /*set width of border equal to 2 px */
```

### Declaration Block

CSS Declarations can be grouped into blocks, delimited by opening '{' and closing '}' braces. Declarations inside a block are separated by a semi-colon.

----

![CSS Declaration Block](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/css_b_9_2.png?alt=media&token=b8108ed2-0734-4ca5-aa5f-37e7ffb5809b)

----

A Declaration block is not very useful when used alone (without CSS Selectors) as the styles defined inside it will be applied to the whole document.

```css
{
font-family : helvetica;
font-size : 12px;
}
```

The above example sets the style for the whole document.

### Using CSS Selector

We can target a specific element or group of elements using CSS Selector and can apply a set of styles to it using-declaration block as shown below.

```css
p {
font-family : helvetica;
font-size : 12px;
}
```

Here p is a CSS Selector that selects all paragraph in the document and apply properties defined inside a declaration block. We will discuss different types of CSS Selectors in another article.

### CSS Ruleset

CSS Selector along with declaration block forms the CSS Ruleset.

----

![CSS Ruleset](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/css_b_9_3.png?alt=media&token=1924bbed-0a15-4695-9424-9f9f97092ce9)

----

Using CSS ruleset we can easily set the style of all elements in a document according to our requirement.

## Adding CSS in an HTML document

CSS can be added in three different ways :

- Inline styles
- Internal stylesheet
- External stylesheet

### Inline Styles

CSS can be added inline in HTML elements using the style attributes.

```css
<p style="color : blue; font-family : helvetica"> Paragraph goes here...
</p>
```

In the above example, we are using CSS to change the paragraph's font color to blue and font family to Helvetica.


### Internal Stylesheets

Instead of adding CSS inline to each HTML element, we can add CSS using **<style>** tag in **<head>** section. We can make use of CSS Selectors to apply specific styles to different elements.

```css
<head >
...
<style>
p {
color : blue;
font-family : helvetica;
}
</style>
...
</head>
```


Here **p** is a selector that selects all p elements in the document. There are CSS selectors that are more specific and allow us to select a particular paragraph instead of selecting all of them. We will discuss CSS selectors in detail in another article.

### External Stylesheets

We can also write CSS in a separate CSS file(.css). CSS files defined in this way are added to the HTML document using <link> tag in <head> section.


**index.html:**

```css
<head>
...
<link rel="stylesheet" type="text/css" href="./css/mystyle.css" /> ...
</head>
```
----

**mystyle.css:**

```css
p {
color: blue;
font-family: helvetica;
}
```

The link tag is used here to include an external CSS document. The attributes used are:

href specify the path of the linked document.
rel attribute in <link> tag specifies that the linked resource is a CSS file for the current document.
In the next article, we will explore different CSS Selectors that can be used to select elements in a document.

## Useful Resources

[Introduction to CSS(MDN)](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)


 What is CSS and how to use it

Linux is an **Open Source Operating System**. 

>An operating system is the set of basic programs and utilities that make your computer run. 

It was created by Linus Torvalds back in 1991 when he was studying computer science at the University of Helsinki. For understanding Linux better lets first discuss Linux Kernel and its distributions.

## Linux kernel

>In an operating system, "Kernel" is like a middleman sitting between computer hardware and application programs. It receives requests from the application programs and provides access to requested hardware, acting as an interface between them. 

The required programs, tools and utilities to serve Linux as a fully functional OS totally depend on you. So it is more accurate to consider **Linux as a kernel**. You are free to configure Linux OS with tools and programs of your choice and requirement.

## Linux Distributions

![Linux distributions](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/linux_intro.jpg?alt=media&token=c0910128-bab7-46f7-9f53-dd9d3897d102 "Image from Pixabay")

Programmers and Organizations started designing their own custom operating systems using the Linux Kernel. You can also build your own custom operating system by having Linux Kernel as the backbone and selecting tools, utilities, and programs as per your requirement. Doing so is a very complex task and the resulting system may not function as you would have expected.

Many popular operating systems were already developed using Linux Kernel like Ubuntu, Fedora, Debian and the list goes on. They have a large community that actively provides support, so instead of creating your own flavor of Linux, you can use an existing one that suits your requirement. We will discuss different distributions in detail in another article. 

For a beginner, the following distributions are a good choice:

- Ubuntu
- Linux Mint
- Zorion OS
- Elementary OS
- Manjaro Linux

## GNU/Linux

Linux Kernel is generally bundled with GNU tools and utilities to provide a full set of functionality an operating system should have. **GNU is also an open-source project and all software created by them are free and released under their own Open Source License like GPL License**. For that reason, the operating system created with GNU tools and utilities is often referred to as GNU/Linux. However, not all Linux distributions use GNU components as part of their System. For example, Android relies very little on GNU tools and yet uses the Linux kernel at its core.

## Advantages of Using Linux
- **Linux is free. Free as in beer.** You don't need to spend a dime to install Linux and you are free to configure your system as Linux source code is open. It is generally released under GPL License(GNU Public License).

- **Linux is Portable to any hardware platform.** You are free to make changes to the Linux kernel according to your hardware requirements. All the documentation and help are available free of cost.

- **Linux does not need the frequent reboot.**

- **Linux is secure and versatile.** Linux security model is based on that of UNIX, which has proved to be robust and secure over time, again and again.

- **Linux OS and applications have very short debugged times.** It has a vast community of developers and testers around the globe, for that reason very few bugs live to see another day and they are generally fixed within hours of discovery.

Linux development is far from over, and developers are working around the clock to make it more reliable and secure with time. If you are a developer and Linux is on your list, install a distribution that suits your requirement and start learning it today.

## Useful Resources for Learning Linux

There are many resources available online for learning Linux. I will mention a couple of them here:
- [Linux Documentation Project - TLDP.ORG](http://www.tldp.org/guides.html)
- [LinuxCommand.org](http://linuxcommand.org/)

Introduction to Linux

The Document Object Model(DOM) is an **application programming interface** for HTML and XML documents. It defines the logical structure of documents and how a document can be accessed and manipulated using it.

The DOM is an object-oriented representation of the web page. Documents are represented in DOM using nodes and objects which facilitates changing its structure, style, and content with a programming language like javascript. All HTML tags and even text inside tags are represented as objects so that they can be easily accessed and modified according to the requirement.

From the beginning, DOM is designed in such a way that it can be used with any programming language. In this series, we will be using Javascript for all operations using DOM.

## DOM Tree
The HTML Document, when parsed by the browser, is converted into DOM for all further operations. The DOM represents HTML Document as a tree structure of tags as shown below. For example:

```html
<!DOCTYPE HTML>
<html>
<head>
<title>DOM | Hackinbits</title>
</head>
<body>
<h1>Welcome to hackinbits<h1>
<p> Learn programming and technology in bits.<p>
</body>
</html>
```

> You can edit the example document and see the tree structure at this link [hixie.ch](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20HTML%3E%20%0A%3Chtml%3E%20%0A%3Chead%3E%20%0A%3Ctitle%3EDOM%20%7C%20Hackinbits%3C%2Ftitle%3E%20%0A%3C%2Fhead%3E%20%0A%3Cbody%3E%20%0A%3Ch1%3EWelcome%20to%20hackinbits%3C%2Fh1%3E%20%0A%3Cp%3E%20Learn%20programming%20and%20technology%20in%20bits.%3C%2Fp%3E%20%0A%3C%2Fbody%3E%20%0A%3C%2Fhtml%3E%20)

## Parsing of HTML Document by Browser

![DOM generation from raw data](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_parsing.png?alt=media&token=c919489e-2b18-4db5-9154-7afc5d059a5c)

Let's discuss briefly how the HTML document is parsed by the browser and DOM is generated. When the browser processes the HTML document, it performs the following steps:

----

![Recieved Raw Data](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_bytes.png?alt=media&token=27900a87-9eaa-4406-8fae-098aea6542b1)

----

1. Conversion: The browser first converts received data into individual characters based on specified character encoding of the document( ex.UTF-8).

----

![Characters obtained from Raw Data](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_char.png?alt=media&token=df7996c8-fd97-4534-9506-498d80418bc4)

----

2. Tokenizing: In the next step, browser read strings of characters obtained from the first step and convert them into distinct tokens as specified by the W3C standards; for example "<html>" is a token.

----

![Tokens generated from characters](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_tokens.png?alt=media&token=bc300b5d-801d-4865-b7ff-b5f6304c77d6)

----

3. Lexing: The tokens produced in the second step are converted into "objects", which define their properties and rules.

----

![Nodes](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_nodes.png?alt=media&token=942a0d79-cb66-486b-a242-76deb908def0)

----

4. DOM construction: The objects created in this way are then linked to a tree data structure which also captures the relationship between HTML tags as defined in the original document. For example, The HTML object is the parent of body object, the body object is the parent of paragraph object and so on.

----

![DOM Tree](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/dom_tree.png?alt=media&token=6efb4b77-35dd-4a4b-9df8-43fba873963e)

----

The DOM generated by the above steps is used by the browser for all further processing.

In the next article, we will see DOM tree in detail and how we can use javascript to modify the structure, content, and style of an HTML document.

## Useful Resources
[DOM Introduction - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

[DOM Specification - whatwg.org](https://dom.spec.whatwg.org/)

[DOM Introduction - w3.org](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html)

## Recommended Reading
[Doctype and its purpose in HTML Document](https://hackinbits.com/blog/doctype-html-and-its-purpose-in-html-document)



Introduction to DOM

Doctype is required in HTML document for legacy reasons. Its main purpose is to prevent the browser from entering 'Quirks Mode' while rendering the document. Doctype declaration ensures that the browser will make its best effort to follow relevant specifications while rendering the document, rather than using a different rendering mode that is incompatible with some specifications.

## What is Quirks Mode?

In the old days, pages were written separately for supporting different browsers. It means that if you were developing a website in the early days of the internet, you would have written code separately for chrome and firefox. To solve this problem, standards were developed by W3C but browsers could not have started supporting the new standards at once as it would have broken most of the websites at that time. Therefore, different rendering modes were developed for supporting new standard-compliant sites as well as old legacy sites.

Layout Engine now uses three different rendering modes in web browsers:

1. **Quirks modes:** Layout emulates non-standard behavior as supported by old browsers.
2. **Almost standard modes:** A small number of quirks/old behavior are supported while rendering the layout.
3. **Full standard modes:** Layout emulates standard behavior as described by HTML and CSS specifications. 

## Including <!Doctype html> in your Document

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Including Doctype in HTML Document</title>
  </head>
  <body>
    <h1>
      Including Doctype in HTML Document
    </h1>
    <p>
      Welcome to hackinbits.com
    </p>
   </body>
</html>
```
**Edit example at:** [Example Link](https://jsfiddle.net/srijan1709/us9p63g5/?utm_source=website&utm_medium=embed&utm_campaign=us9p63g5) 

Including the DOCTYPE in a document ensures that the browser makes the best-effort to follow standard specifications. The doctype should be included at the beginning of the HTML document as shown in the above example. In HTML5, Doctype's only purpose is to activate the full standard mode.

> **Note:** Anything before Doctype declaration can trigger quirks mode in IE 9 and older browsers.

Previous versions of the HTML standard gave additional meaning to DOCTYPE, but it was never used by browsers for any other purpose than switching between different modes. We will have this topic for another article.

## Summary
When you are writing HTML Document next time, don't forget to add <!DOCTYPE html> at starting of the document. If you do, be prepared to debug any unusual behavior or so-called quirks in your document.



Doctype and its Purpose in HTML Document

## Introduction
When you are ordering food online, you select food by their "name" from the online menu, let's say you selected 'Cheese Burger' which is of type string used to represent text. 'Cheese Burger' will have an associated cost say '$5' which is a numeric value. As you proceed to checkout, option for 'extra cheese' pops in, which you can answer in either yes or no, or in technical terms true or false.

In a similar way, values in a program are expressed in different representations based on what you are using it for. These different representations for values are called data types in programming terminology.

* **Cheese Burger:** Value can be displayed on the screen using a string.
* **$5:** can be represented as a number, so when you add more items, calculations can be done on them.
* **yes or 'no':** A decision can be represented using a boolean (true or false).

## Data Types in Javascript

The data types in javascript can be further divided as **Primitive and Object**. There is a total of 6 primitive types defined by the latest ECMAScript standard:

1. boolean
2. null
3. undefined
4. number
5. string
6. symbol(new in ECMAScript 2015)
7. **Object Type**.

## Primitive Types
In Javascript, all values except Objects are defined as immutable values (values that cannot be changed or modified).

### Boolean
Boolean represents a logical entity that can only have two values, true or false. It is useful in controlling program flow and decision making using conditional statements.

```js
var bool = true;
if ( bool ) {
//then some action;
}
```
### Null
null represents absense of any value ie empty or non-existent value. null explicitly means nothing. Content of variable can be erased without deleting it, by assigning it to null.

```js
var num = 45;
num = null; //num contains no value now
```
### Undefined
Undefined means variable has been declared but is not yet assigned to any value.

```js
var exp;

//Print Output
document.getElementById("output").innerHTML = exp;
```
[Link to Example](https://jsfiddle.net/srijan1709/31nfvm9q/?utm_source=website&utm_medium=embed&utm_campaign=31nfvm9q)

### Number
According to the ECMAScript standard, there is only one Number Type in Javascript. It serves for both integer and floating-point. The number type has three special numeric values: +Infinity, -Infinity, and NaN(not-a-number).

**Infinity and -Infinity** are special values that represent mathematical infinity and are greater than or smaller to any number respectively.

```js
var exp = 1 / 0;

//Print Output
document.getElementById("output").innerHTML = exp;
```
[Link to Example](https://jsfiddle.net/srijan1709/n2yw3dgj/6/?utm_source=website&utm_medium=embed&utm_campaign=n2yw3dgj)

**NaN** represents a computational error. It is a result of failed or incorrect mathematical operations.

```js
var exp = "hackinbits" / 45;

//Print Output
document.getElementById("output").innerHTML = exp;
```
[Link to Example](https://jsfiddle.net/srijan1709/fb38mpqu/1/?utm_source=website&utm_medium=embed&utm_campaign=fb38mpqu)

Any further operations on NaN will give NaN

```js
var exp1 = "hackinbits" / 2;
var exp2 = exp1 + 3;
//Print Output
document.getElementById("output").innerHTML = exp2;
```
[Link to Example](https://jsfiddle.net/srijan1709/413kjnhb/?utm_source=website&utm_medium=embed&utm_campaign=413kjnhb)

### String
Strings are used to represent text. Javascript strings are immutable, that means once a string is created, it is not possible to modify it.

```js 
var exp = "Welcome to hackinbits.com";

//Print Output
document.getElementById("output").innerHTML = exp;
```
[Link to Example](https://jsfiddle.net/srijan1709/a87zv09y/?utm_source=website&utm_medium=embed&utm_campaign=a87zv09y)

### Symbol
Symbols are new to Javascript. Symbols are unique and immutable primitive values. They are used to create unique identifiers for objects (more on it in another article, as it can be explained better after discussing a few topics first).

### Object Type
Object type refers to a compound value that can be seen as a collection of properties. Properties are key/value pairs. Keys are strings (or Symbols) and values can be of any type, including other objects.

```js
var obj = {
  name: 'Cheese Burger',
  cost: 5,
  extra_cheese: true
};
```
You would have noticed that the key extra_cheese is written with '_' rather than using a space. Space can be used as well but then the key should be quoted in "" (double quotes like "key"), example:

```js
var obj = {
  name: 'Cheese Burger',
  cost: 5,
  "extra cheese": true
};
```

### Using typeof operator for determining types
The typeof operator helps in finding the type of value that your variable is storing. It returns a string indicating the type of argument. It supports two syntaxes:

1. As an operator: typeof v.
2. As a function: typeof (v).

```js
var exp = typeof "Welcome to hackinbits.com";

//Print Output.
document.getElementById("output").innerHTML = exp;
```
[Link to Example](https://jsfiddle.net/srijan1709/admm7x6f/1/?utm_source=website&utm_medium=embed&utm_campaign=admm7x6f)

### Dynamic Typing

Variables in javascript are not directly associated with any particular data type. Only values have **types** in javascript. Variables are simple containers for values. You can say, javascript has typed values and not typed variables.

```js
var exp = 45; // exp is a Number
var exp = 'hackinbits.com'; // exp is now a String
var exp = true; // exp is now a Boolean
```

### Summary
- There are seven basic data types in Javascript :

  1. boolean
  2. null
  3. undefined
  4. number
  5. string
  6. symbol(new in ECMAScript 2015)
  7. and Object Type
- Javascript has typed values instead of typed variables. Variables are simple containers for values.
- We can use typeof operator for knowing the type of value a variable is storing.
