JavaScript and Node.

js Tutorial

Saravanan Vijayakumaran

Associate Professor
Department of Electrical Engineering
Indian Institute of Technology Bombay

March 11, 2024

1 / 20
 JavaScript and Node.js
• JavaScript
• A language created in 1995 to add interactivity to webpages
• First shipped as part of the Netscape Navigator browser
• Supported by all browsers today
• Has little connection to Java; name chosen for marketing reasons
• Node.js is a JavaScript runtime released in 2009
• Runtime = Execution environment
• Allows running JavaScript programs outside the browser
• Enabled the creation of many web frameworks to write server
applications using JavaScript instead of PHP
• Basis for many popular frontend frameworks like React, Vue
• Our needs
• Learn enough JavaScript and Node.js to use Hardhat
• Hardhat is a Node.js package for Ethereum smart contract
development

2 / 20
JavaScript Tutorial
 Hello World
• Using the browser
• Open Developer Tools in a browser
• Type the following in the Console tab
console.log("Hello, world!")

• Using Node.js runtime

• Install Node.js using instructions given here (nvm method is
recommended for Linux/macOS)
• Create file hello.js containing the same string you typed above
• Run node hello in a terminal

4 / 20
 Variables
• Variables can be declared using the let keyword
let x = 5;
let y;
y = 'Hello';

• Statements have a optional semicolon at the end

• Semicolons are useful when we want to place multiple statements
on a single line
• Variable declaration and initialization can be done separately
• Uninitialized variables evaluate to undefined
• The type of variables is automatically inferred
• The same variable can be reassigned to a value of a different
type (dynamic typing)
let x = 5;
let y = 'Hello';
x = y;

• Immutable variables can be declared using the const keyword

const z = 5;

5 / 20
 Data Types
• JavaScript has 8 basic data types
• number: integers in the range ±(253 − 1) or floating-point
numbers, Infinity, -Infinity, NaN
• bigint: arbitrary-precision integers; denoted with an n suffix
• string: a string of zero or more characters
• boolean: true or false
• undefined: unassigned variables
• null: can be used to set a variable to an unknown value
• object: Complex data structures
• symbol: Unique identifiers that can be used as keys in objects
• The typeof operator returns the data type of a variable

6 / 20
 Control Flow
• if statement
if (x % 2 == 0) {
console.log("Even")
} else if (x % 3 == 0) {
console.log("Odd and divisible by 3")
} else {
console.log("Not divisible by 2 or 3")
}
• Conditional operator ?
let accessAllowed = (age > 18) ? true : false;
• switch statement
switch (a) {
case 3:
console.log( 'Too small' );
break;
case 5:
console.log( 'Too big' );
break;
default:
console.log( "I don't know such values" );
}
7 / 20
 Loops
• while loop
while (condition) {
// code
}

• for loop
for (let i = 0; i < 3; i++ ) {
console.log(i);
}

8 / 20
 Functions
• Funcion declaration
function sum(a, b) {
return a + b;
}

• The types of arguments are not specified

• The types of return values type are not specified
• Functions can return different types depending on its input
function getHostel(strName, num) {
if (strName) {
return `Hostel No. ${num}`;
} else {
return num
}
}

• Aside: Strings enclosed in backticks can be used for variable

interpolation

9 / 20
 Functions as Values
• Functions can be passed as arguments to other functions
function showMessage(predicate, yes, no) {
if (predicate) yes()
else no();
}

function yesFunction() {
console.log("Predicate is true.");
}

function noFunction() {
console.log("Predicate is false.");
}

showMessage(true, yesFunction, noFunction);

• Useful for defining callbacks

10 / 20
 Arrow Functions
• Functions can also be defined using arrow notation
let func = (arg1, arg2,...
, argN) => expression;

• Example
let sum = (a, b) => a + b;

• Rewriting earlier example with arrow functions

function showMessage(predicate, yes, no) {
if (predicate) yes()
else no();
}

showMessage(
true,
() => console.log("Predicate is true."),
() => console.log("Predicate is false.")
);

11 / 20
 Arrays
• List of possibly differently typed values
let arr = [1, 2, 'Hello']

• The ith element can be accessed as array[i]

• Elements can added and removed at the end of the array using
push/pop
arr.push(1)
arr.push('Hello')
arr.pop()

• Elements can added and removed at the beginning of the array

using unshift/shift
let fruits = ["Orange", "Pear"];

fruits.unshift('Apple');

console.log( fruits ); // Apple, Orange, Pear

12 / 20
 Objects
• Keyed collections of data; key-value pairs are called properties
let user = {
name: "John",
age: 30
};

• Property values can be accessed using key names in two ways

console.log(user.name);
console.log(user["age"])

• Properties can be added by assignment, removed using

delete, and checked for existence using in
user.isAdmin = true
delete user.age
console.log("age" in user)

• We can iterate over keys using a for loop

for (let k in user) {
console.log(k, user[k])
}

13 / 20
 Promises
• Many JavaScript functions are asynchronous
• Results of the function are not immediately available
• Example: fetch gets the contents at a URL
let result = fetch("https://example.com/")
console.log(result)

• The above code prints Promise { <pending> }

• A Promise will eventually contain the return value or an error
• We can wait for the asynchronous operation to complete using
the then method
result
.then((response) => response.text())
.then(console.log)
.catch((e) => {
console.log("Something went wrong!!!!")
console.log(e)
})

14 / 20
 Async/await
• async/await is a better syntax for working with promises
• The async keyword indicates that the function returns a
Promise
async function f() {
return 1;
}

f().then(console.log);

• We can use await inside async functions to wait for a promise

to be fulfilled
async function getText(result) {
let response = await result;
let text = await response.text();
console.log(text)
}

let result = fetch("https://example.com/")

getText(result)

15 / 20
Node.js
 Node.js
• Enables JavaScript use outside the browser
• Has a large collection of open-source packages
• Enter Node.js REPL using node command
• Run scripts using node script-name.js
• npm = Node package manager
• Install packages using npm install package-name
• Package files are installed in node_modules subdirectory of
current directory
• For global installation, use npm install -g
• package.json and package-lock.json files contain details of
installed packages

17 / 20
 Example: Accepting Command-Line Input
• The inquirer package can be used to accept input from the
command line
• Run npm install inquirer
• Contents of package.json
{
"dependencies": {
"inquirer": "^9.2.15"
}
}

• Add a property with key type and value module

{
"type": "module",
"dependencies": {
"inquirer": "^9.2.15"
}
}

• This is a hack for demo purposes; not the default workflow

18 / 20
Example: Accepting Command-Line Input
import inquirer from "inquirer";

const questions = [
{
name: 'name',
type: 'input',
message: "What's your name?",
},
{
name: 'program',
type: 'list',
choices: ["BTech", "Dual Degree", "MTech", "IDDP", "PhD"
],
message: "Which program are you in?",
},
];

inquirer.prompt(questions).then(answers => {
console.log(`Name: ${answers.name}`);
console.log(`Program: ${answers.program}`);
});

19 / 20
 References
• JavaScript Wikipedia page
https://en.wikipedia.org/wiki/JavaScript
• Node.js Wikipedia page https://en.wikipedia.org/wiki/Node.js
• JavaScript Tutorial https://javascript.info/
• JavaScript for NodeJS
• fetch https://developer.mozilla.org/en-US/docs/Web/API/fetch
• Response of fetch
https://developer.mozilla.org/en-US/docs/Web/API/Response
• Accepting command-line input in Node.js

20 / 20