JavaScript For Testers
Tags: javascript, testing, beginners, tutorial
Published: 2020-05-14 09:10:31


JavaScript is one of the most popular programming languages today. Here is  a StackOverflow Survey Result showing popularity of various languages:

![StackOverflow Developer Survey Results 2019](https://dev-to-uploads.s3.amazonaws.com/i/m4si571q40ny3rm1jk33.png)

Testers might feel they won't be impacted by this but there are a lot of automation testing tools coming in the market which are based on JavaScript like Cypress, Protractor, Nightwatch, Puppeteer to name a few. You will have to learn JavaScript sooner or later. And I say, the sooner - the better. 


---

>If you prefer to watch and learn, hop on to my [JS For Testers series on Youtube] (https://bit.ly/2zoanJh)
Subscribe to my Youtube Channel - [QA Camp](https://www.youtube.com/channel/UC6dkzt_Q4i5h8NUJmZideFQ/playlists)!

-----
{% youtube 0sG1ToNspLA %}


-----

### Table of Contents <a name="toc"></a>
   * [What is JavaScript?](#WhatJS)
   * [Install Node.js and Code Editor] (#Install)
   * [JavaScript Basics] (#Basics)
      * [Variables] (#Variables)
      * [Constants] (#Constants)
      * [Conditional Operators] (#Cond)
      * [Loops] (#Loops)
      * [Functions] (#Functions)
   * [NPM - Node Package Manager] (#NPM)
      * [package.json] (#pkg)
      * [NPX] (#NPX)
   * [Arrow Functions] (#ArrowFunctions)

---


#What is JavaScript? <a name="WhatJS"></a>

JavaScript was initially created to “make web pages alive” and it was capable of running only in a web browser. Because browsers have JavaScript engine to execute JavaScript code. 
But now, with the development of <B>Node.js</B>, JavaScript isn't restricted to only browsers.
Node is a JavaScript runtime environment that executes JavaScript code outside of a browser. Node.js is built on top of Chrome's open-source V8 JavaScript engine.

So now JS could be used as front-end (client-side) as well as back-end (or the server-side) language. 

{% youtube -Ymanf9jqy0 %}

---

#Install Node.js and Code Editor <a name="Install"></a>

Installing Node.js is essential and having a code editor provides so much of ease.

You can download Node.js from here: [https://nodejs.org/en/download/] (https://nodejs.org/en/download/)

For code editor, you have got a number of options to choose from. But I recommend using Visual Studio Code.
You can download VS Code from here: [https://code.visualstudio.com/download] (https://code.visualstudio.com/download)

To see installation in action you can follow my video:
{% youtube uasUpiX1nMk %}

---

#JavaScript Basics <a name="Basics"></a>

Let's learn how to create variables, constants, conditional operators, loops and functions in JS.

### Variables <a name="Variables"></a>
Variables are like named boxes that can hold value. These values can also be updated.

Variables in JS can be created using <I>let</I> keyword

```js
let age = 30
```

Note that we haven't mentioned any datatype and so our variable 'age' isn't bound to any datatype. And so, we can have it hold value of any data type.

```js
age = 'thirty'
```

Now, the variable holds a string instead of a number and JS won't complain.

### Constants <a name="Constants"></a>
Constants are variables whose value can't be updated. Constants can be created using <I> const </I> keyword.

```js
const firstName = 'John'
```

### Conditional Operators <a name="Cond"></a>
Conditional Operators are used when you would like to execute a piece of code only when a condition satisfies.

<B> 1. IF </B>
```js
let ageMoreThank18
if (age > 18){
    ageMoreThank18 = true
}
else{
    ageMoreThank18 = false
}
```

<B> 2. ? </B>
```js
ageMoreThank18 = (age > 18) ? true : false
```

Here, in both the cases, the variable 'ageMoreThank18' would be set to true if the variable 'age' has value greater than 18 else the variable 'ageMoreThank18' would be set to false.

### Loops <a name="Loops"></a>
Loops are used when you would like to execute a piece of code as long as the condition stays true.

<B> 1. WHILE LOOP </B>
```js
let i = 0
while (i < 5){
    console.log('i is now : '+ i)
    i++
}
```

<B> 2. FOR LOOP </B>
```js
for (i=0; i<5; i++){
    console.log('i is now : '+ i)
}
```

Here, in both the cases, the code in the loop body would be executed until   i has value less than 5. As soon as i is set to 5, the loop condition would return false and the loop body wouldn't execute.

### Functions <a name="Functions"></a>
Functions are essential in any programming language. They take an input, process it and return an output.

```js
function product (a,b){
   return a * b
}
```
This is a function named 'product' that takes two values as input, multiplies them and return the result i.e. the product of two numbers.

To call the function:
```js
product(5, 4)
```

{% youtube uodOTTeoJ4M %}


-----

# NPM - Node Package Manager <a name="NPM"></a>

NPM is a very important concept in JavaScript and NPM is one of the most crucial factors behind the success of JavaScript.

NPM is Node Package Manager. Before understanding NPM, let's understand what a package manager is and before that - what are packages?

So, when you start a new project.. be it a development or testing project, you will almost never start from the blank slate and just never would you finish the project with having written 100% of the code yourself. 
Imagine this.. you need to test an application.. the first things that you do is pick a tool, select a framework, think what reporting plugin you could use and so on. So these tools, frameworks, plugins that are available for you to pick and use in any project are <B>Packages</B>.  

Now, there could be hundred or thousands of such packages in a language. So to manage how they would be published, installed, where would be store and things of that sort we need a <B>Package Manager</B>.

JS has many package managers. The two most popular are: NPM and Yarn.
NPM is the default package manager for JS. NPM is the world's largest software repository having more than a million packages.

NPM consists of three things:
- <B>the registry:</B> for storing open-source JS projects
- <B>the command line interface:</B> for publishing and installing packages
- <B>the website:</B> for searching packages - [https://www.npmjs.com](https://www.npmjs.com)


NPM is installed along with Node.js. 
To verify NPM is installed, run:
```bash
npm -v
```
If you see a version then NPM is installed on your machine.

{% youtube YcMRYEird4M %}


## package.json <a name="pkg"></a>

package.json is the heart of NPM. It is a JSON format file that contains the list of packages that your project depends on. 

A 'package.json' file provides these benefits:
- it contain the list of packages your project depends on
- it specifies the versions of those packages
- it makes your build reproducible

Add package.json file to your project
```bash
npm init
or
npm init -y
```

Install a package
```bash
npm install <packageName>
```

Following things happen when you install a package:
1. an entry is made in the package.json
2. the package and its dependencies are downloaded in the node modules folder
3. package-lock.json file makes entries of all the dependencies of package installed and their versions

To understand these concepts better, I highly recommend to watch the video (https://youtu.be/Yj4CNIMHn5E) [https://youtu.be/Yj4CNIMHn5E].


To install all the dependencies listed in package.json
```bash
npm install
```

To install dependencies as devDependencies:
```bash
npm install <packageName> --save-dev
```
devDependencies: packages that are necessary only while development and not necessary for the production build 

{% youtube Yj4CNIMHn5E %}


## NPX <a name="NPX"></a>

NPX could be though as Node Package Runner. It is a very powerful concept. Here are a few benefits it provide:
- Easily run local commands 
- Installation-less command execution
- Run some code using a different Node.js version
- Run arbitrary code snippets directly from a URL

Watch the video for more details on these benefits:

{% youtube w6G5HLjXl0A %}

----

# Arrow Functions <a name="ArrowFunctions"></a>

Arrow Functions are a very popular concept of JavaScript and they are very commonly used. If you are unaware of the syntax then they might confuse you and so it's better to familiarize yourself with them.

![Arrow Function Syntax](https://dev-to-uploads.s3.amazonaws.com/i/qaulzmg9lxbdwc2f33nz.png)

Follow the video for examples on each of these syntax:

{% youtube fnKRSKYTPRM %}


----

<B>More content to be added soon...</B>
<B>
> <B>Please suggest topics that you would like to see in this series.</B>

If you prefer to watch and learn, hop on to my [JS For Testers series on Youtube] (https://bit.ly/2zoanJh)
Subscribe to my Youtube Channel - [QA Camp](https://www.youtube.com/channel/UC6dkzt_Q4i5h8NUJmZideFQ/playlists)!
</B>

-----