Internet Programming : May 23 Solution

Q1A] i) How to declare variables in ES6? ii) Differentiate between ES5 and ES6.
Ans.
i) How to declare variables in ES6? :
ES6, also known as ECMAScript 2015, introduced let and const to address several
limitations and potential issues of var. ES6 brought many new features to
JavaScript, including new variable declaration keywords that help improve code
clarity and robustness.
1. let keyword:

● let variables have block scope. This means they are only accessible within
the block (code wrapped in curly braces {}) where they are declared.
● The below code shows how to declare a variable using let and where it is
accessible.

● In the above code both variables, x and y are declared using let. But x is a
global variable so it can be accessed from anywhere within the code.
● But y is declared inside a block so it can be accessed within the block. If we try
to access it outside the block a ReferenceError occurs.

2.const keyword:

● The const keyword is also block-scoped, but it is used to declare variables

that are constants. This means that the value of a const variable cannot be
reassigned after its initial assignment.
● However, if the const variable is an object or array, the properties or
elements can still be modified.
 ● The below code shows how to declare a variable using const.

● In the above code, variables x and y are declared using const. They follow the
same rules of accessibility as let.
● Though, once x=10 and y=20 are declared their value cannot be changed.
● But if we declare a const array we can push a new element in it but cannot
change the existing ones.

ii) Differentiate between ES5 and ES6.

Parameter ES5 ES6

It's the 5th edition of ECMA It's the 6th edition of ECMA
Edition
script script

Introduced in the year 2009 2015

It has a lower performance It has a higher performance

Performance
as compared to ES6. as compared to ES5.

Variable declaration var let, const

Scope of variables Function scoped Block scoped

Symbol is supported which

Symbols Not supported
is a type of unique identifier
 Variables are hoisted and Variables are hoisted but
Hoisting
initialised with undefined not initialised

Arrow function () => {} Not supported Supported

Provide default parameter

Default parameters Not supported
values in functions

Promises Not supported Supported

Rest Parameters Not supported Supported

Q1B] Explain React component life cycle.

Ans.
React component:
A React component is a fundamental building block of a React application. It
encapsulates a piece of the user interface (UI) and its associated logic, making it
reusable
React component life cycle:
In React, a component goes through several lifecycle phases from creation to removal
each phase is explained with help of the below code as follows:
 1. Initialization :
● This phase occurs when the component is created.
● In this phase, the props and initial state of the component is defined in
the constructor of the component.
● We set the initial state (count: 0) in the constructor.

2. Mounting :
● Mounting is the phase of the component lifecycle when the initialization
of the component is completed and the component is mounted on the
DOM and rendered for the first time on the webpage
● componentDidMount(): This method gets called after the component
is mounted. Here, we simply log a message to the console to illustrate
this phase.
● render(): This method defines the component's UI with a paragraph
displaying the count and a button to increment it.

3. Updating :
● Updating occurs when the component's state or props change, causing
a re-render.
● handleClick (event handler): This function increments the state's
count by 1 using setState.
● When the button is clicked, handleClick is called, triggering a state
update.
● Since the state has changed, React will re-render the component.

4. Unmounting :
● Unmounting is the final phase of the lifecycle where the component is
removed from the DOM.
● componentWillUnmount() is invoked immediately to unmount and
destroy the component.
● This is the place to perform cleanup, such as invalidating timers,
cancelling network requests, or cleaning up subscriptions.

Thus, by understanding and properly utilising these lifecycle methods, we can

manage the React component's behaviour throughout its existence.

Q2A] Explain Flux Architecture in detail.

Ans.
Flux Architecture:
● Flux is an architectural pattern used for building client-side web applications.
● It was introduced by Facebook alongside their React library to address the
complexity of managing state and data flow in large-scale applications.
 ● Flux is not a framework or a library, but rather a design pattern that
emphasises a unidirectional data flow.
Key Components of Flux :
Flux architecture consist of 4 key components as follows:
1. Action
2. Dispatcher
3. Stores
4. Views (React Components)

Action :
● Actions are simple objects or methods that send data from the application to
the dispatcher.
● They are the primary source of information for the dispatcher and often
originate from user interactions, such as button clicks, form submissions, or
server responses.
● Each action typically contains a type property that identifies the action and
any relevant data payload, associated with it.

Dispatcher :
● The dispatcher is a central hub that manages all actions. There is typically a
single dispatcher in a Flux application.
● The dispatcher’s role is to ensure that every action reaches the appropriate
stores in a controlled manner.
● It does not have much logic of its own and mainly acts as a traffic controller.
Stores :
● Stores hold the application’s state and logic.
● They listen to the dispatcher for incoming actions and update their internal
state based on the action type and payload.
● Stores also emit events to notify views when their state changes.

Views :
● Views are React components that render the application’s UI.
● They listen to changes in stores, and whenever a store emits a change event,
the view re-renders itself with the updated state.

Unidirectional Data Flow :

● One of the core principles of Flux is unidirectional data flow. This means that
data flows in a single direction.

● Here’s how the data flows in Flux:

1. User interacts with the view (e.g., clicks a button).
2. View dispatches an action to the dispatcher.
3. Dispatcher dispatches the action to all registered stores.
4. Stores update their state based on the action and emit a change
event.
5. Views listen to the change event and re-render themselves based on
the new state from the stores.

Thus, by enforcing a unidirectional data flow, Flux helps developers build more
maintainable and scalable applications.

Q2B] Explain promises in ES6 with an example.

Ans.
Promises :
 ● Promises in ES6 (ECMAScript 2015) are objects that represent the eventual
completion (or failure) of an asynchronous operation and its resulting value.
● They provide a cleaner and more intuitive way to handle asynchronous
operations compared to traditional callback-based approaches.
● A promise can be in one of three states:
1. Pending: The initial state, means operation is neither fulfilled nor
rejected.
2. Fulfilled: The operation completed successfully.
3. Rejected: The operation failed.

Promises Creation: Promise creation and handling is done as follows:

1. Promise Creation:
● You use the Promise constructor to create a promise object.
● This constructor takes an executor function with two arguments:
resolve and reject.
2. Executor Function:
● The executor function defines the asynchronous operation.
● It calls resolve with the resulting value when the operation succeeds.
● It calls reject with an error object if the operation fails.
3. Promise Handling:
● .then(): This method is executed when the promise is fulfilled
(resolved). It receives the result passed to resolve.
● .catch(): This method is executed when the promise is rejected. It
receives the reason passed to reject.
● .finally(): This method is executed regardless of whether the
promise was fulfilled or rejected. It is often used for cleanup or final
steps that should run in both cases.
Example: Basic Usage of Promises
Here’s a promise that simulates a simple asynchronous task, like checking if a
number is even or odd, after a short delay.
Explanation :
1. Promise Creation:
● The checkEvenNumber function returns a promise that resolves if the
given number is even and rejects if it's odd.
2. Using the Promise:
● We call checkEvenNumber(4) to check if 4 is even or not.
● As 4 is even, the promise is fulfilled (resolved) and we use .then() to
display “4 is an even number” in the console.
● If it wouldn't have been even, the promise would be rejected and we
would have used .then() to display “4 is an odd number” in the
console.
● Now we use .finally() to display “Promise handling completed” in
the console.

Q3A] Explain the file system of nodeJS in detail.

Ans.
Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js helps
developers to write JavaScript code to run on the server-side, to generate dynamic
content and deliver to the web clients.

Node.js file system:

● The Node.js file system module (fs) provides an API to interact with the file
system on your computer.
● It allows you to perform various operations such as reading, writing,
appending, deleting files, and working with directories.
● The module supports both synchronous and asynchronous methods, giving
you flexibility in how you handle file operations.

1. Synchronous vs. Asynchronous Operations

● Synchronous Operations: These methods block the execution of code until the
operation is completed. They are simpler to use but can cause performance
issues in a large-scale application as they halt the execution of other code.
○ Example: fs.readFileSync(), fs.writeFileSync()
● Asynchronous Operations: These methods do not block the execution of
code. Instead, they accept a callback function that is called once the operation
is completed. This is more efficient and recommended for I/O-intensive tasks.
○ Example: fs.readFile(), fs.writeFile()

2. Reading and Writing Files

 ● Reading Files : You can read the contents of a file either synchronously or
asynchronously. This is useful for loading configuration files, reading user data,
etc.
● Writing Files : You can create or overwrite files with new content. This can be
done synchronously or asynchronously as well. This is useful for logging,
saving user input, and more.

3. Appending to Files : Appending allows you to add data to the end of a file without
overwriting the existing content. This is often used for logging purposes where you
need to keep a record of events or transactions.

4. Deleting Files : The module provides methods to delete files from the file system.
This can be done synchronously or asynchronously. This is useful for cleaning up
temporary files, managing storage, etc.

5. Open a File : The fs.open() method is used to create, read, or write a file. The
fs.readFile() method is only for reading the file and fs.writeFile() method is only for
writing to the file, whereas the fs.open() method does several operations on a file.

Q3B] Write a stepwise process to create an app using ReactJS to print “Hello World!”
Ans.
Step-wise Process to Create a React App to Print "Hello World!" is given as follows
Step 1 : Prerequisite
● To create a react project, node.JS and npm must be installed in your machine.
● We can check if it's already installed or not by running node -v for node.JS
and npm -v for npm in your terminal.

Step 2 : New Folder

● Create a new folder named “Hello” (name can be anything) in your computer.
● Open the folder you created in your preferred code editor.

Step 3 : Create React App

● Open the terminal of the code editor and run the following code to create a
react app. npx create-react-app hello-world
● This will create a new directory named hello-world with basic react project
setup.

Step 4 : Modify app component

● Now navigate to the src/App.js inside your react project and replace the
existing code with the following code
 ● import React from 'react': Imports the React library, which is essential
for creating React components.
● function App() react component named App that returns a JSX element
(div) containing an h1 element displaying the "Hello World!" message.
● export default App;: Makes the App component available for use in other
parts of your React application.

Step 5 : Running the App

● Now run npm start in the terminal of your code editor. Your react project will
start running on http://localhost:3000
● Your browser should open it automatically, or you can manually navigate to
http://localhost:3000 to see "Hello World!" displayed.
By following these steps, we’ll have created a simple React application that prints
"Hello World!" to the browser. This process introduces us to the basics of setting up
and modifying a React project.

Q4A] What is ExpressJS? Explain Features of ExpressJS.

Ans.
ExpressJS :
● Express.js is a minimal and flexible Node.js web application framework that
provides a robust set of features to develop web and mobile applications

Example Code:
Here's a simple example of an Express application
In this example, We create an Express application, define a route for the homepage,
use middleware to parse JSON bodies and start the server on port 3000.

Key Features of Express.js:

1. Minimal and Lightweight : Express.js provides a thin layer of fundamental

web application features, without obscuring Node.js features. This minimalism
makes it highly flexible.

2. Middleware : Middleware are functions that execute during the lifecycle of a

request to the server. They can modify the request and response objects, end
the request-response cycle, and call the next middleware function. This
modular approach makes it easy to add functionalities like logging,
authentication, etc.

3. Routing : Express.js has a powerful and intuitive routing mechanism. It allows

developers to define routes for different HTTP methods and URLs. The routing
system helps in organising the application effectively.

4. Template Engines : Express supports various template engines like Pug, EJS,
and Handlebars. These engines enable dynamic content generation and allow
you to use HTML templates with embedded JavaScript.

5. Static Files : Serving static files, such as images, CSS, JavaScript, etc., is
straightforward with Express. A simple middleware function,express.static
is used to serve static assets.
 6. Debugging : Express provides a detailed error handling mechanism, which
helps in debugging. Middleware functions can be used to catch and handle
errors in the application effectively.

7. Database Integration : While Express itself is database-agnostic, it can be

easily integrated with various databases such as MongoDB, MySQL,
PostgreSQL, and others through appropriate Node.js modules.

8. Scalability : Express is designed to build single-page, multi-page, and hybrid

web applications. Its modular structure and middleware system make it
scalable and suitable for large-scale applications.

9. REST API Development : Express is commonly used to build RESTful APIs due
to its simplicity and flexibility in handling HTTP requests and responses. It
supports all standard HTTP methods and status codes.

10. Community and Ecosystem :Being one of the most popular frameworks for
Node.js, Express.js has a large and active community. There are numerous
middleware and plugins available, developed by the community, which can be
easily integrated into Express applications.

Q4B] What is DNS? Explain Working of DNS.

Ans.
● DNS stands for Domain Name System. It is a hierarchical and decentralised
naming system used to translate human-readable domain names (like
www.google.com) into machine-readable IP addresses (like 192.0.2.1).
● This system is essential for the functioning of the internet, allowing users to
access websites and other resources using easy-to-remember names instead
of numerical IP addresses.
Working of DNS : The below flowchart shows the working of DNS
1. User Request:
● When a user types a domain name into their web browser, the request
to access that domain is initiated.
2. Local DNS Resolver:
● The request first goes to a local DNS resolver (often provided by the
user's Internet Service Provider). This resolver is responsible for handling
the query.
3. Cache Check:
● The local DNS resolver checks its cache to see if it already has the IP
address for the requested domain name. If it does, it returns this
information to the user's device, completing the request.
● If the IP address is not in the local resolver's cache, the resolver starts a
recursive query, contacting other DNS servers in a hierarchical order to
find the IP address.
4. Root DNS Servers
● The resolver first contacts the root DNS servers. These servers are
responsible for directing queries to the appropriate top-level domain
(TLD) servers. There are a relatively small number of root DNS servers
distributed worldwide.
5. TLD DNS Servers
● The root DNS servers respond to the resolver with the IP address of the
TLD DNS server responsible for the specific top-level domain (e.g., .com,
.org, .net) of the requested domain name.
6. Authoritative DNS Servers
● The resolver then contacts the TLD DNS server and requests the IP
address of the authoritative DNS server for the domain name.
● The authoritative DNS servers are responsible for storing and providing
the DNS records for specific domain names.
7. DNS Records
● The authoritative DNS server receives the query and checks its records
for the requested domain name. If the IP address is found, it is sent back
to the resolver.
8. Caching
● The resolver receives the IP address from the authoritative DNS server
and stores it in its cache for future reference.
● This caching helps to speed up subsequent DNS resolution requests for
the same domain name.
9. Response to Requester
● The resolver sends the IP address back to your computer, which can
then establish a connection with the website’s server using the provided
IP address.
10. Connection Establishment
● Your web browser uses the obtained IP address to connect to the web
server hosting the requested website.
 ● The server then delivers the website content back to your browser, and
you can view the website in your browser window.

Importance of DNS

● User Convenience: Makes the internet user-friendly by translating domain

names into IP addresses.
● Scalability: DNS is designed to handle the vast number of queries on the
internet efficiently.
● Flexibility: DNS records can be updated to change the IP addresses without
affecting the domain names.

Overall, DNS is a crucial component of the internet's infrastructure, enabling

seamless and efficient access to websites and online services.

Q5A] What is Rest API? What are the principles of REST API?
Ans.
REST API
● A REST API (or RESTful API) stands for REpresentational State Transfer
Application Programming Interface.
● At the most basic level, an API is a mechanism that enables an application or
service to access a resource within another application or service.
● The application or service that accesses resources is the client, and the
application or service that contains the resource is the server.
● Some APIs, such as SOAP or XML-RPC, impose a strict framework on
developers. But developers can develop REST APIs using virtually any
programming language and support a variety of data formats.
● The only requirement is that they align to these six REST design principles -
also known as architectural constraints

Principles of REST API

● Statelessness : Each HTTP request from a client to the server must contain all
the information the server needs to fulfill the request. The server should not
store any client context between requests, making each request independent.

● Client-Server Architecture : There should be a clear separation between the

client and the server. This separation improves the scalability and portability of
the server components. The client handles the user interface and user
experience, while the server handles data storage and processing.

● Uniform Interface :This principle simplifies and decouples the architecture,

enabling each part to evolve independently. It is defined by four constraints:
 1. Identification of resources: Resources (like users, data, etc.) are
identified using URIs.
2. Manipulation of resources through representations: Clients interact
with resources through representations (e.g., JSON, XML).
3. Self-descriptive messages: Each message includes enough information
to describe how to process the message.
4. Hypermedia as the engine of application state (HATEOAS): Clients
interact with resources via hypermedia provided dynamically by
application servers.
● Cacheability : Responses must define themselves as cacheable or
non-cacheable to prevent clients from using stale or inappropriate data in
response to further requests. This improves performance by reducing the need
for repetitive server-side processing.

● Layered System : A client cannot ordinarily tell whether it is connected

directly to the end server or an intermediary along the way. Intermediary
servers (like gateways, proxies) can improve scalability by enabling load
balancing, providing shared caches, or implementing security policies.

● Code on Demand (optional) : Servers can temporarily extend or customize

client functionality by transferring executable code (e.g., JavaScript). This is an
optional constraint and is used to simplify clients.

Q5B] What is Web BrowserI? Explain working of Web Browser.

Ans.
A web browser is a software application used to access information on the World
Wide Web. When a user enters a website address or URL (Uniform Resource
Locator), the web browser retrieves the necessary content from a web server and
displays it on the user's device.
Common examples of web browsers include:

● Google Chrome
● Mozilla Firefox
● Safari
● Microsoft Edge
● Opera

How Does a Web Browser Work?

1. User Input: The process begins when you type a website address (URL) into
the browser's address bar and press Enter.
2. DNS Lookup: The browser converts the domain name (e.g., [invalid URL
removed]) into a numerical IP address using Domain Name System (DNS).
 3. Connection Establishment: The browser initiates a connection with the web
server associated with the IP address using the Hypertext Transfer Protocol
(HTTP) or its secure version HTTPS.
4. Request Sending: The browser sends a request to the server for the specific
web page you want to access.
5. Server Response: The server processes the request and sends back the
requested web page data, including HTML, CSS, JavaScript, images, and other
files.
6. Rendering: The browser receives the data and interprets the HTML code to
build the structure of the webpage. It then applies CSS styles to determine the
appearance and layout. JavaScript code is executed to add interactive
elements and functionality.
7. Display: The browser displays the rendered webpage on your screen, allowing
you to view and interact with its content.

Key Components of a Web Browser

● User Interface: Provides a visual environment for interacting with the

browser, including address bar, tabs, buttons, and menus.
● Rendering Engine: Interprets HTML, CSS, and JavaScript code to display web
pages accurately.
● Network Layer: Handles communication with web servers and manages data
transfer.
● JavaScript Engine: Executes JavaScript code for interactive features.
● Plugin Support: Enables integration of additional software components for
specific functionalities (e.g., video players, PDF viewers).
● Security Features: Protects user data and privacy through encryption,
malware detection, and other security measures.

In essence, a web browser acts as a translator, converting the complex code of web
pages into a visual representation that you can understand and interact with. It's a
fundamental tool for exploring the vast world of information available on the
internet.
Q6A] Write a short note on JSON.
Ans.
JSON (JavaScript Object Notation)

● JSON, or JavaScript Object Notation, is a lightweight data-interchange format

that is easy for humans to read and write and easy for machines to parse and
generate.
● Despite its origin in JavaScript, JSON is a language-independent format,
widely used in data exchange between servers and web applications, and
supported by most modern programming languages.

Key Features of JSON:

1. Human-Readable: JSON's text format is easy to understand and visually

simple, using a syntax similar to JavaScript object notation.
2. Efficiency: JSON's concise format makes it efficient for data storage and
transmission, particularly useful in web services and APIs where bandwidth
and performance are critical.
3. Text-based: JSON data is written in plain text, making it easy to read, edit,
and transmit.
4. Language-independent: JSON can be used with any programming language,
regardless of syntax or data types.
5. Self-describing: The data structure and values are evident within the JSON
text, simplifying data interpretation.
6. Lightweight: JSON is compact, using minimal characters to represent data,
making it efficient for transmission.

Data Structures in JSON: JSON uses two primary data structures:

1. Objects: Represented by curly braces {}, objects store key-value pairs. Keys
are typically strings in quotes, and values can be strings, numbers, booleans,
arrays, or even nested objects.

2. Arrays: Represented by square brackets [], arrays hold an ordered collection

of values. These values can be any valid JSON data type, including strings,
numbers, booleans, or other arrays.
Common Uses of JSON:

● Web APIs: JSON is a popular format for exchanging data between web servers
and applications. APIs (Application Programming Interfaces) often use JSON to
send and receive data in a structured and efficient way.
● Configuration Files: JSON can store application settings or configuration data
in a human-readable format that's easy to modify.
● Data Interchange: JSON is a versatile format for transferring data between
different systems and applications, regardless of programming language.
● Database Communication: Some NoSQL databases use JSON-like document
structures, making it a natural fit for storing and retrieving data.

Overall, JSON's simplicity, readability, and language independence make it a widely

adopted data format for various web and data exchange applications.

Q6B] Write a short note on NPM

Ans.
NPM, which stands for Node Package Manager, is essentially a giant toolbox for
JavaScript developers. It's actually two things working together:

1. A giant online repository: This repository stores a massive collection of

pre-written JavaScript code snippets, called packages. These packages contain
reusable code that performs all sorts of tasks, from data manipulation to
working with the web. There are millions of these packages available, so you
can find something for almost any need.

2. A command-line tool: This tool lets you search for, download, and install
these packages directly into your project. It also keeps track of which packages
your project depends on (dependencies) and automatically installs them as
well. This saves you a ton of time by avoiding having to write all this code
yourself.

Basic Commands
● npm init:
○ Initialises a new Node.js project and creates a package.json file through
a series of prompts.
 ● npm install (or npm i):
○ Instals all the dependencies listed in the package.json file into the
node_modules directory.
○ npm install <package-name> install a specific package.
○ Adding --save or -S will add the package to the dependencies in
package.json.
○ Adding --save-dev or -D will add the package to the
devDependencies in package.json.
● npm update:
○ Updates the installed packages to their latest versions based on the
version ranges specified in the package.json file.
● npm uninstall:
○ Removes a package from the node_modules directory and optionally
from the dependencies/devDependencies in package.json.
● npm publish:
○ Publishes a package to the NPM registry, making it available for others
to use.
● npm run:
○ Executes a script defined in the package.json file under the "scripts"
section.

Features
● Free to use: Anyone can browse the package registry and download packages
for free.
● Open-source: Many of the packages are open-source, which means the code
is freely available for anyone to see and modify.

● Huge community: Millions of developers use NPM, so there's a good chance

you'll find a package for what you need.

Q6C] Write a short note on JSX

Ans.
JSX is an essential part of the React ecosystem, providing a syntactical sugar for
writing HTML-like elements within JavaScript. It may look like HTML, but it comes
with the full power of JavaScript.
1. Basic Syntax:
2. Embedding JavaScript: You can embed JavaScript expressions within JSX by
enclosing them in curly braces {}. This allows you to dynamically include variables
and functions directly in your UI code.

3. JSX Elements: JSX elements are transformed into JavaScript objects that React
can understand. Tools like Babel compile JSX into calls to React.createElement(),
which constructs these objects.

4. Attributes and Props: JSX allows you to pass attributes to elements using a
syntax similar to HTML. Attributes in JSX are written in camelCase.

5. Component Rendering:JSX is used to render React components, which can be

functions or classes. Components encapsulate logic and UI, and JSX makes it easy to
nest and manage these components.

JSX enhances the development experience by combining the visual familiarity of

HTML with the power of JavaScript, making it easier to build and maintain complex
user interfaces.

Q6D] Difference between let and const keyword.

Ans.
let and const variable were introduced in the ES6 (ECMAScript 2015)
Sr. No. let const

1 let variables can be updated. const variables cannot be updated.

let variable can be declared const variable can be declared

2
without initialization without initialization

Used when the value of the Used when the value of the variable
3
variable might change will not change

Q6E] Difference between let and const keyword.

Ans.
An arrow function in ES6 (ECMAScript 2015) is a concise way to write function
expressions. Here are the key features and syntax of arrow functions

Features:
1. Concise Syntax: Arrow functions are shorter and cleaner.
2. Implicit Return: If the function body has a single expression, it can return the
value implicitly without using the return keyword.
3. No this Binding: Arrow functions do not have their own this context. They
inherit this from the parent scope. This makes them particularly useful in
certain situations like event handlers or in methods where this needs to be
consistent.