DEV Community: vandna kapoor

JavaScript’s Role in Web Development: A Comprehensive Introduction

vandna kapoor — Sun, 27 Jul 2025 14:55:29 +0000

JavaScript (JS) Possibly the most popular programming language in the world, JavaScript underpins the web by enabling dynamic and interactive pages. But its flexibility and versatility are available on a wide range of platforms beyond the browser, from servers and smartphones to embedded systems, and it has emerged as a way of creating rich, engaging applications on all those devices. Annual updates to the language introduce new features and improvements to the functionality, readability and performance of JavaScript. These updates also increase developer productivity, ensuring it’s a language that is fast to write and easy to get started with, keeping it relevant for increasingly challenging scenarios.

A Brief History & Origins
JavaScript was created by Brendan Eich in just 10 days for the Netscape browser and was originally called Mocha, then LiveScript. Despite its quick start, it was inspired by languages like Scheme and Java, making it powerful and flexible. It became an official standard (ECMAScript) in 1997.

Though updates slowed after ES5 in 2009, a strong community kept it evolving through libraries and frameworks. In 2015, ES6 brought major improvements and kicked off yearly updates that continue to enhance the language.

JavaScript also expanded beyond the browser. With the release of Node.js in 2009, it became a full-stack language, running on servers and powering everything from web apps to backend systems.

Standardized as ECMAScript in 1997, evolving through versions ES5, ES6 (2015), and annual updates.

Where JavaScript Runs
Client-side: Every major browser includes a JS engine (V8, SpiderMonkey, JavaScriptCore).

Server-side: With Node.js, JavaScript runs outside the browser, enabling full-stack development.

Key Features That Drive Popularity
Versatile and ubiquitous: Works across all major platforms.

Multi-paradigm: Supports procedural, object-oriented, and functional programming.

Rich ecosystem: npm, React, Angular, Vue, and more.

It also has powerful tooling support, especially when used with TypeScript, a popular superset of JavaScript that adds static typing and better developer tooling. TypeScript enhances JavaScript with type safety, making it easier to manage large codebases and catch errors early during development.

What You Can Build with JavaScript

Interactive web apps
Single-page applications using React js
APIs and backends using Node.js
Mobile and desktop apps using React Native and Electron
Games, AI tools, and browser extensions
With the combination of JavaScript, React.js for the UI layer, and TypeScript for type safety, developers can create high-performance, scalable apps for virtually any platform.

Community & Ecosystem

Largest package ecosystem via npm
Strong community support, frequent updates
Supported by major companies like Google (Angular), Facebook (React), and Microsoft (TypeScript + VS Code)
Modern editors and dev tools (like VS Code) are optimized for JavaScript and its ecosystem, including frameworks like React and languages like TypeScript.

Comparison with Other Languages

JavaScript vs Java: Java is statically typed and compiled; JS is interpreted and dynamic.
JavaScript vs Python: Both are beginner-friendly, but JS dominates the browser space.
JavaScript + TypeScript: Many developers now prefer combining JS with TypeScript to get the best of both worlds — flexibility and structure.
JavaScript + React: Developers can build highly responsive UIs with less code and better state control compared to older methods.

Looking Ahead

With growing support for WebAssembly, serverless computing, and modern runtimes like Deno and Bun, JavaScript (along with tools like React and TypeScript) continues to shape the future of software development across browsers, servers, and beyond.

Conclusion

JavaScript remains the backbone of the web, and with modern enhancements like React.js for UI and TypeScript for structure, the ecosystem is more powerful and developer-friendly than ever. Whether you’re just starting or building enterprise-grade applications, JavaScript is a must-learn skill for today’s tech world.

Difference between HTML and React event handling

vandna kapoor — Sun, 23 Jan 2022 04:20:37 +0000

In terms of syntax and standards, HTML and React handle events differently because React is built on the notion of a virtual DOM, whereas HTML always has access to the Real DOM.

The following are the significant distinctions we will discuss:

In HTML, event names are written in lowercase, however in React, they are written in camelCase.
In HTML, we may avoid default behavior by returning false, but in React, we must call preventDefault() explicitly
In HTML, the function is called by inserting "()" to the function name. If we don't want to utilize this way, we may use addEventLisener to provide events and listeners, however in React, we require the method name without the "()" appended.

1) In HTML, event names are written in lowercase,

Let us take a example where we would like to invoke click event on the button:

<button onclick='handleEvent()'>

however in React, they are written in camelCase.

<button onClick={handleEvent}>

2) In HTML, we may avoid default behavior by returning `false`, but in React, we must call `preventDefault()` explicitly

Let's start by making a simple form and giving the input text a name. After submitting the form, we must call the 'onsubmit' event, and the form must not be refreshed.

HTML Example

<form onsubmit="console.log('You clicked submit.'); return false">
   <input  type="text" name="name" />
   <button type="submit">Submit</button>
</form>

React Example

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
 return (
   <form onsubmit="{handleSubmit}">
    <input  type="text" name="name" />
    <button type="submit">Submit</button>
   </form>
  );
}

3) In HTML, the function is called by inserting "()" to the function name. If we don't want to utilize this way, we may use addEventLisener to provide events and listeners, however in React, we require the method name without the "()" appended

HTML Example

 <button onclick='activateLasers()'>

React Example

<button onClick={activateLasers}>

NPM vs. YARN: Basic Commands

vandna kapoor — Wed, 24 Nov 2021 21:16:05 +0000

Here is a quick reference guide for basic commands that we can use when dealing with Node and requiring the use of NPM or YARN.

Install dependencies from package.json:

npm install == yarn
Install a package and add to package.json:

npm install package --save == yarn add package
Install a devDependency to package.json:

npm install package --save-dev == yarn add package --dev
Remove a dependency from package.json:

npm uninstall package --save == yarn remove package
Upgrade a package to its latest version:

npm update --save == yarn upgrade
Install a package globally:

npm install package -g == yarn global add package

Understanding the"this” Keyword in JavaScript

vandna kapoor — Thu, 10 Sep 2020 15:32:20 +0000

The this keyword is a fundamental concept in JavaScript, and also an incredibly confusing one to both new developers and those who have experience in other programming languages. In JavaScript, this is a reference to an object. The object that this refers to can vary, implicitly based on whether it is global, on an object, or in a constructor, and can also vary explicitly based on usage of the Function prototype methods bind, call, and apply.

Here we will cover

this in Global Environment
this inside Functions
this in Methods
this With the Call and Apply Methods
this With the Bind Method
this With the Fat-Arrow Function

1) this in Global Environment

By default, the execution context for any execution is global, which means if we are running any simple function, then this refers to a global object.

"As we know window is the global object in the case of the browser, However, if we are using NodeJS, then a special object global is the global object."

On Browser

function foo () {
        console.log("Simple function call");
    console.log(this === window); 
}

foo();  //prints true on console

When a function is invoked with the new keyword, then the function is known as a constructor function and returns a new instance. In such cases, the value of this refers to a newly created instance.

function foo () {
    console.log("Simple function call");
    console.log(this === window); 
}

const result = new foo(); //prints false on console

Using Node

> this === global
true

2) this inside Functions

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= Hero("Superman", "Clark Kent");
console.log(superman);

Note that this function is not written in strict mode. Running this code in the node will not get us the value of Superman and Clark Kent as we expected, but it will instead just give us an undefined.

The reason behind this is that since the function is not written in strict mode*, this refers to the global object.

If we run this code in strict mode, we will get an error because JavaScript does not allow us to assign properties realName and "heroName to undefined. This is a good thing because it prevents us from creating global variables.

Lastly, writing the function’s name in uppercase means that we need to call it as a constructor using the new operator. Replace the last two lines of the above code snippet with this:

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= new Hero("Superman", "Clark Kent");
console.log(superman);

3) this in Methods

const hero = {
  heroName: "Batman",
  dialogue() {
    console.log(`I am ${this.heroName}!`);
  }
};
hero.dialogue();

4) this With the Call and Apply Methods

call and apply are very similar-they invoke a function with a specified this context and optional arguments.

The only difference between call and apply is that call requires the arguments to be passed in one-by-one, and apply takes the arguments as an array.

const book = {
  title: 'Brave New World',
  author: 'Aldous Huxley',
}

function summary() {
  console.log(`${this.title} was written by ${this.author}.`)
}

summary()

Since summary and book have no connection, invoking summary by itself will only print undefined, as its looking for those properties on the global object.

const book = {
  title: 'Brave New World',
  author: 'Aldous Huxley',
}
let title = 'abc';
let author = 'test';
function summary() {
  console.log(`${this.title} was written by ${this.author}.`)
}
summary.call(book);
// or:
summary.apply(book);

summary();

5) this With the Bind Method
The bind method returns a new method with this referring to the first argument passed. We’re going to use the above example to explain the bind method.

function Person(fn, ln) {
    this.first_name = fn;
    this.last_name = ln;

    this.displayName = function() {
        console.log(`Name: ${this.first_name} ${this.last_name}`);
    }
}

let person = new Person("John", "Reed");
person.displayName(); // Prints Name: John Reed
let person2 = new Person("Paul", "Adams");
person2.displayName(); // Prints Name: Paul Adams

let person2Display = person.displayName.bind(person2);  // Creates new function with value of “this” equals to person2 object
person2Display(); // Prints Name: Paul Adams

6) this With the Fat-Arrow Function
unlike Regular functions, the arrow function does not have their own this keyword.

The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

The Difference Between Regular Functions and Arrow Functions

vandna kapoor — Wed, 12 Aug 2020 02:28:12 +0000

Arrow function — also called fat arrow function — is a new feature introduced in ES6 that is a more concise syntax for a writing function expression.

Following are the main differences:

Syntax
Arguments binding
Use of this keyword
Using a new keyword
No duplicate named parameters

1) Syntax:

A developer can get the same result as regular functions by writing a few lines of code using arrow functions.

Curly brackets are not required if only one expression is present.

let add = (x, y) => x + y;

If there’s only one argument, then the parentheses are not required either:

let squareNum = x => x * x;

2) Arguments binding

Arrow functions do not have arguments binding.

Regular Function

// Object with Regular function.
let getData = {
// Regular function
    showArg:function(){
      console.log(arguments);
    }  
}
getData.showArg(1,2,3); // output {0:1,1:2,2:3}

Output

Arrow Function:

// Object with Arrow function.
let getData = {
// Arrow function
    showArg:()=>console.log(arguments)
}
getData.showArg(1,2,3); // Uncaught ReferenceError: arguments is not defined

Output

3) Use of this keyword

unlike Regular functions, arrow function does not have their own "this" keyword.

The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

4) Using a new keyword

Regular functions created using function declarations or expressions are constructible and callable. Regular functions are constructible; they can be called using the new keyword.

However, the arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions.

Regular function

Arrow function

let add = (x, y) => console.log(x + y);
new add(2,3);

5) No duplicate named parameters

Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode.

However, We can use duplicate named parameters for regular function in non-strict mode.

DEV Community: vandna kapoor

JavaScript’s Role in Web Development: A Comprehensive Introduction

Difference between HTML and React event handling

The following are the significant distinctions we will discuss:

1) In HTML, event names are written in lowercase,

however in React, they are written in camelCase.

2) In HTML, we may avoid default behavior by returning false, but in React, we must call preventDefault() explicitly

HTML Example

React Example

3) In HTML, the function is called by inserting "()" to the function name. If we don't want to utilize this way, we may use addEventLisener to provide events and listeners, however in React, we require the method name without the "()" appended

HTML Example

React Example

NPM vs. YARN: Basic Commands

Install dependencies from package.json:

Install a package and add to package.json:

Install a devDependency to package.json:

Remove a dependency from package.json:

Upgrade a package to its latest version:

Install a package globally:

Understanding the"this” Keyword in JavaScript

Here we will cover

The Difference Between Regular Functions and Arrow Functions

Following are the main differences:

1) Syntax:

2) Arguments binding

Regular Function

Output

Arrow Function:

Output

3) Use of this keyword

4) Using a new keyword

5) No duplicate named parameters

2) In HTML, we may avoid default behavior by returning `false`, but in React, we must call `preventDefault()` explicitly