what is javascript essay

• United States
• United Kingdom

What is JavaScript? The full-stack programming language

Javascript is the most in-demand programming language for developer jobs and one of the most versatile languages for full-stack development. here's what you need to know about javascript..

Contributing writer, InfoWorld |

A brief history of JavaScript

What is javascript used for, advantages of using javascript, javascript libraries and frameworks, typescript: a superset of javascript, resources for learning javascript, get started with javascript.

JavaScript is a wildly popular interpreted scripting language that was the most in-demand language of 2023 , with 29% of job offers requiring programming experience with JavaScript or TypeScript. There are various reasons for JavaScript's success, starting from the fact that it's an open standard, not controlled by any single vendor, with numerous implementations and a syntax that is easy to learn.

Just about anything interactive or animated on a webpage today is rendered in JavaScript. Thanks to server-side frameworks such as Node.js , Deno , and bun , the language also extends beyond the browser. It is used to write code for anything from clients to servers to cloud-based applications.

This is an overview of JavaScript, including a brief history, what kinds of applications it is used for, tools for working with JavaScript, and resources for learning JavaScript.

As its name implies, JavaScript is a scripting language. Traditional languages such as C++ are compiled before they’re run into executable binary form, with the compiler checking for errors in the entire program before the process is complete. Scripting languages, by contrast, are executed one line at a time by another program called an interpreter. Scripting languages started out as a series of shell commands used to execute other programs. Their flexibility and ease of use made them a popular type of programming language in their own right, and languages like JavaScript became important with the rise of the web.

Many developers new to JavaScript wonder about the Java part of its name. The short story is that Java and JavaScript emerged during the same historic moment, and both were key to the birth of the web. Their history is intertwined, but the two languages are separate. Brendan Eich, JavaScript's creator, explained why JavaScript was considered an important complement to Java in the original Netscape browser:

There were people who argued strongly that Java’s fine for programmers who build components, but there’s a much larger audience of people who write scripts or maybe copy a script from somebody else and tweak it. These people are less specialized and may be paid to do something other than programming, like administer a network, and they write scripts part-time or on the side. If they’re writing small pieces of code, they just want to get their code done with the minimal amount of fuss.

Originally called LiveScript, the language was created with syntax that was superficially similar to Java in order to tap into the emerging Java developer community. Even though its usage grew in tandem with Java and early web development, JavaScript was long considered a lesser sidekick to the more robust Java programming language.

In 1997, the ECMA (European Computer Manufacturers Association) issued a standard defining the language that anyone could implement. The reason for this move was that “Java” remained a Sun trademark that only Netscape had a license to use. The new, standardized version of JavaScript was dubbed ECMAScript , but in practice, most people know the language as JavaScript.

JavaScript was developed to help create interactive websites, and this remains one of its primary uses today. Developers incorporate JavaScript into their website code, where it is executed by the interpreter built into the user's browser. The JavaScript code creates or modifies HTML on the fly to produce dynamic content and interact with back-end data stores. When used this way, JavaScript is called a client-side language, with one of its most lucrative applications being mobile games. Server-side frameworks like Node.js extend JavaScript for more scalable and event-driven applications.

You won't hear anyone arguing that JavaScript is a perfect language, but it is a very useful one. It's easy to write workable code quickly in JavaScript, and while interpreted languages often don't perform well compared to compiled code, JavaScript has a special advantage here because it was initially created for web browsers. Three of the biggest software companies in the world—Microsoft, Apple, and Google—compete to produce high-performance JavaScript interpreters. As a result, JavaScript is a remarkably robust and scalable language, even given its humble beginnings.

Once non-browser viable JavaScript runtimes became widely available, the army of web developers well-versed in JavaScript suddenly found themselves crowned as full-stack developers . The JavaScript tooling ecosystem boosts developer productivity with code that gets the job done from the browser to the server. Due to its popularity, the language is also frequently updated. It's a classic example of a virtuous cycle of popularity driving adoption.

You'll sometimes hear people refer to vanilla JavaScript . This, in a nutshell, means you're working with an application that was written in JavaScript from the ground up. This is fine for small bits of functionality, but once you start working at scale, it quickly becomes untenable, as any enterprise developer will tell you. Most JavaScript developers make frequent use of the vast array of available JavaScript libraries —prewritten third-party code, usually free and open source, that solves a common problem and can be integrated into your project. (The ECMAScript standard refers to JavaScript modules , but library is the more commonly used term in practice.)

Most JavaScript developers turn to libraries for basic application plumbing rather than reinventing the wheel. There are also frameworks , which are collections of libraries designed to work together to provide the scaffolding for enterprise-scale applications. Using frameworks lets developers focus on the technical aspects of their programs. Probably the most famous JavaScript framework is Angular . Others include React and Vue .

An important aspect of the JavaScript ecosystem is TypeScript , which is similar to JavaScript but has features that the basic language lacks, like strong typing of variables and other data structures. TypeScript and languages like it are often designed to bring to JavaScript concepts that make it easier to build sprawling enterprise-scale applications efficiently; TypeScript in particular was created at Microsoft when the company was developing a web-based version of its flagship Office suite.

TypeScript is said to be a superset of JavaScript because its syntax includes everything in JavaScript,  and then some : good JavaScript is always good TypeScript, but TypeScript has syntax that isn't part of JavaScript. TypeScript code is transpiled into ordinary JavaScript, allowing it to run in browsers and on standard JavaScript runtimes. Learn more about the similarities and differences between TypeScript and JavaScript .

If you are serious about becoming a JavaScript developer you’ll want to go deeper than this article. The W3Schools JavaScript tutorial is great for your first dive into JavaScript syntax. Here are some additional articles and tutorials to help you get started:

• The Modern JavaScript Tutorial is a comprehensive resource that takes you step by step from a simple Hello, World! program to ways to build sophisticated interactive functionality into the browser.
• JavaScript Examples at Tutorial Republic offer a wealth of short JavaScript programs that escalate in difficulty so you can see how JavaScript code works in action.
• InfoWorld's Matthew Tyson writes frequently about JavaScript frameworks and programming techniques. Popular recent articles include  Using JavaScript and forms ,  Using JavaScript's built-in objects , and Building JavaScript tables in React .

JavaScript Snake is a live example of what you can do with JavaScript. It's a classic game that can be built to run in the browser using only JavaScript, HTML, and CSS. This tutorial from Panayiotis Nicolaou shows you how.

Are you ready to start playing around with JavaScript today? Because it’s an interpreted language, you don't need to download JavaScript. You can just fire up your favorite text editor (or better yet, a JavaScript editor or IDE) and start typing code! A JavaScript interpreter is built into any web browser that executes commands, so you can simply embed your JavaScript into an HTML document and load it up to test.

If you want to run JavaScript code in a desktop environment—which will give you access to the filesystem, among other things—then you can download Node.js .

Next read this:

• Why companies are leaving the cloud
• 5 easy ways to run an LLM locally
• Coding with AI: Tips and best practices from developers
• Meet Zig: The modern alternative to C
• What is generative AI? Artificial intelligence that creates
• The best open source software of 2023
• Software Development
• Programming Languages

Josh Fruhlinger is a writer and editor who has been covering tech since the first dot-com boom. He’s interested in open source, changes in the development landscape, and what happens when tech theory meets practice in the real world.

Copyright © 2024 IDG Communications, Inc.

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter
• JavaScript Tutorial

JavaScript Basics

Introduction to javascript.

• JavaScript Versions
• How to Add JavaScript in HTML Document?
• JavaScript Statements
• JavaScript Syntax
• JavaScript Output
• JavaScript Comments

JS Variables & Datatypes

• Variables and Datatypes in JavaScript
• Global and Local variables in JavaScript
• JavaScript Let
• JavaScript Const
• JavaScript var

JS Operators

• JavaScript Operators
• Operator precedence in JavaScript
• JavaScript Arithmetic Operators
• JavaScript Assignment Operators
• JavaScript Comparison Operators
• JavaScript Logical Operators
• JavaScript Bitwise Operators
• JavaScript Ternary Operator
• JavaScript Comma Operator
• JavaScript Unary Operators
• JavaScript Relational operators
• JavaScript String Operators
• JavaScript Loops
• 7 Loops of JavaScript
• JavaScript For Loop
• JavaScript While Loop
• JavaScript for-in Loop
• JavaScript for...of Loop
• JavaScript do...while Loop

JS Perfomance & Debugging

• JavaScript | Performance
• Debugging in JavaScript
• JavaScript Errors Throw and Try to Catch
• Objects in Javascript
• Introduction to Object Oriented Programming in JavaScript
• JavaScript Objects
• Creating objects in JavaScript
• JavaScript JSON Objects
• JavaScript Object Reference

JS Function

• Functions in JavaScript
• How to write a function in JavaScript ?
• JavaScript Function Call
• Different ways of writing functions in JavaScript
• Difference between Methods and Functions in JavaScript
• Explain the Different Function States in JavaScript
• JavaScript Function Complete Reference
• JavaScript Arrays
• JavaScript Array Methods
• Best-Known JavaScript Array Methods
• What are the Important Array Methods of JavaScript ?
• JavaScript Array Reference
• JavaScript Strings
• JavaScript String Methods
• JavaScript String Reference
• JavaScript Numbers
• How numbers are stored in JavaScript ?
• How to create a Number object using JavaScript ?
• JavaScript Number Reference
• JavaScript Math Object
• What is the use of Math object in JavaScript ?
• JavaScript Math Reference
• JavaScript Map
• What is JavaScript Map and how to use it ?
• JavaScript Map Reference
• Sets in JavaScript
• How are elements ordered in a Set in JavaScript ?
• How to iterate over Set elements in JavaScript ?
• How to sort a set in JavaScript ?
• JavaScript Set Reference
• JavaScript Date
• JavaScript Promise
• JavaScript BigInt
• JavaScript Boolean
• JavaScript Proxy/Handler
• JavaScript WeakMap
• JavaScript WeakSet
• JavaScript Function Generator
• JavaScript JSON
• Arrow functions in JavaScript
• JavaScript this Keyword
• Strict mode in JavaScript
• Introduction to ES6
• JavaScript Hoisting
• Async and Await in JavaScript

JavaScript Exercises

• JavaScript Exercises, Practice Questions and Solutions

What is JavaScript ?

JavaScript is a lightweight, cross-platform , single-threaded, and interpreted compiled programming language. It is also known as the scripting language for webpages. It is well-known for the development of web pages, and many non-browser environments also use it.

JavaScript is a weakly typed language (dynamically typed) . JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript is both an imperative and declarative type of language. JavaScript contains a standard library of objects, like Array , Date , and Math , and a core set of language elements like operators , control structures , and statements . 

• Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks , form input , and page navigation . Useful libraries for the client side are AngularJS , ReactJS , VueJS, and so many others.
• Server-side: It supplies objects relevant to running JavaScript on a server. For if the server-side extensions allow an application to communicate with a database, and provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. The useful framework which is the most famous these days is node.js .
• Imperative language – In this type of language we are mostly concerned about how it is to be done. It simply controls the flow of computation. The procedural programming approach, object, oriented approach comes under this as async await we are thinking about what is to be done further after the async call.
• Declarative programming – In this type of language we are concerned about how it is to be done, basically here logical computation requires. Her main goal is to describe the desired result without direct dictation on how to get it as the arrow function does.

How to Link JavaScript File in HTML ?

JavaScript can be added to HTML file in two ways :

• Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.
• External JS : We can write JavaScript code in another files having an extension.js and then link this file inside the <head> tag of the HTML file in which we want to add this code.

Output: The output will display on the console.

History of JavaScript

It was created in 1995 by Brendan Eich while he was an engineer at Netscape. It was originally going to be named LiveScript but was renamed. Unlike most programming languages, JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world. The most common host environment is the browser. 

Features of JavaScript

According to a recent survey conducted by Stack Overflow , JavaScript is the most popular language on earth.  With advances in browser technology and JavaScript having moved into the server with Node.js and other frameworks, JavaScript is capable of so much more. Here are a few things that we can do with JavaScript: 

• JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly static, after JS was created dynamic Web sites were made.
• Functions in JS are objects. They may have properties and methods just like other objects. They can be passed as arguments in other functions.
• Can handle date and time.
• Performs Form Validation although the forms are created using HTML.
• No compiler is needed.

Applications of JavaScript

• Web Development: Adding interactivity and behavior to static sites JavaScript was invented to do this in 1995. By using AngularJS that can be achieved so easily.
• Web Applications: With technology, browsers have improved to the extent that a language was required to create robust web applications. When we explore a map in Google Maps then we only need to click and drag the mouse. All detailed view is just a click away, and this is possible only because of JavaScript. It uses Application Programming Interfaces(APIs) that provide extra power to the code. The Electron and React are helpful in this department.
• Server Applications: With the help of Node.js, JavaScript made its way from client to server and Node.js is the most powerful on the server side.
• Games: Not only in websites, but JavaScript also helps in creating games for leisure. The combination of JavaScript and HTML 5 makes JavaScript popular in game development as well. It provides the EaseJS library which provides solutions for working with rich graphics.
• Smartwatches: JavaScript is being used in all possible devices and applications. It provides a library PebbleJS which is used in smartwatch applications. This framework works for applications that require the Internet for their functioning.
• Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5 canvas, and make the sound more effective also can be used p5.js library.
• Machine Learning: This JavaScript ml5.js library can be used in web development by using machine learning.
• Mobile Applications: JavaScript can also be used to build an application for non-web contexts. The features and uses of JavaScript make it a powerful tool for creating mobile applications. This is a Framework for building web and mobile apps using JavaScript. Using React Native, we can build mobile applications for different operating systems. We do not require to write code for different systems. Write once use it anywhere!

Limitations of JavaScript

•   Security risks: JavaScript can be used to fetch data using AJAX or by manipulating tags that load data such as <img>, <object>, <script>. These attacks are called cross-site script attacks. They inject JS that is not part of the site into the visitor’s browser thus fetching the details. 
• Performance: JavaScript does not provide the same level of performance as offered by many traditional languages as a complex program written in JavaScript would be comparatively slow. But as JavaScript is used to perform simple tasks in a browser, so performance is not considered a big restriction in its use.
• Complexity: To master a scripting language, programmers must have a thorough knowledge of all the programming concepts, core language objects, and client and server-side objects otherwise it would be difficult for them to write advanced scripts using JavaScript.
• Weak error handling and type checking facilities: It is a weakly typed language as there is no need to specify the data type of the variable. So wrong type checking is not performed by compile.

Why JavaScript is known as a lightweight programming language ?

JavaScript is considered lightweight due to the fact that it has low CPU usage, is easy to implement, and has a minimalist syntax. Minimalist syntax as in, has no data types. Everything is treated here as an object. It is very easy to learn because of its syntax similar to C++ and Java.

A lightweight language does not consume much of your CPU’s resources. It doesn’t put excess strain on your CPU or RAM. JavaScript runs in the browser even though it has complex paradigms and logic which means it uses fewer resources than other languages. For example, NodeJs, a variation of JavaScript not only performs faster computations but also uses fewer resources than its counterparts such as Dart or Java.

Additionally, when compared with other programming languages, it has fewer in-built libraries or frameworks, contributing as another reason for it being lightweight. However, this brings a drawback in that we need to incorporate external libraries and frameworks. 

Is JavaScript Compiled or Interpreted or both ?

JavaScript is both compiled and interpreted. In the earlier versions of JavaScript, it used only the interpreter that executed code line by line and shows the result immediately. But with time the performance became an issue as interpretation is quite slow. Therefore, in the newer versions of JS, probably after the V8, the JIT compiler was also incorporated to optimize the execution and display the result more quickly. This JIT compiler generates a bytecode that is relatively easier to code. This bytecode is a set of highly optimized instructions.  The V8 engine initially uses an interpreter, to interpret the code. On further executions, the V8 engine finds patterns such as frequently executed functions, and frequently used variables, and compiles them to improve performance.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples .

Please Login to comment...

Similar reads.

• javascript-basics
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

What Is JavaScript?

Have you ever wondered how websites can provide interactive features, respond to user actions in real time, and deliver a seamless browsing experience? The answer lies in a programming language that has become the backbone of modern web development – JavaScript.

From its humble beginnings to its ubiquitous presence on the web, JavaScript has transformed the way we interact with websites. Read on to learn more about what is JavaScript , its history, its integration with HTML and CSS, and the advantages it offers.

What is JavaScript?

JavaScript is a versatile, high-level programming language primarily used for client-side scripting on web pages. It enables developers to facilitate engagement and add versatile features to websites, enhancing responsiveness and user experience. Developed by Brendan Eich in 1995, JavaScript has evolved to become one of the most widely used languages in the web development domain.

Understanding the role of JavaScript in web development

JavaScript plays a pivotal role in web development, serving two essential functions: client-side scripting and server-side scripting.

On the client side, JavaScript empowers developers to respond to user interactions in real time. Whether it’s validating form inputs, creating interactive forms, or implementing user-friendly navigation menus, it provides the tools to enhance usability and responsiveness.

On the server side, JavaScript finds its place alongside frameworks like Node.js. This combination enables developers to handle server-side tasks efficiently, such as accessing databases, processing requests, and building robust APIs. JavaScript’s versatility allows developers to employ a unified language across both the client and server, streamlining the development process and enhancing code maintainability.

JavaScript also contributes to making dynamic websites. It creates interactive design elements, visual effects, animations, blocks, and other forms of interactivity that keep users engaged with a web page.

How JavaScript works with HTML and CSS

HTML (Hypertext Markup Language) defines the structure and content of a web page, while CSS (Cascading Style Sheets) governs its visual presentation.

JavaScript complements these two technologies by adding functionality and interactivity to the otherwise static elements. It lets developers to create responsive designs, handle events, manipulate the DOM (Document Object Model), and fetch data from servers, among other capabilities.

Together, JavaScript, HTML, and CSS form the core building blocks of a modern website.

Advantages of using JavaScript

There are multiple benefits to using JavaScript when developing a website or other online platform.

• Speed and efficiency : JavaScript executes on the client side, reducing the need for frequent server requests and enhancing the overall speed and efficiency of web applications. This results in a smoother user experience and faster loading times.
• Rich interfaces : With JavaScript, developers can create highly interactive and visually appealing user interfaces. It enables the creation of dynamic elements, animations, and effects, improving the overall aesthetic appeal of a website.
• Versatility : JavaScript is not limited to client-side scripting; it can also be used for server-side scripting. This versatility allows developers to use a single language for both frontend and backend development, streamlining the development process.
• WordPress integration : JavaScript can be seamlessly integrated into WordPress websites , providing enhanced functionality and customization options. It empowers developers to extend the capabilities of WordPress themes and plugins, creating unique and interactive web experiences.

JavaScript is an integral part of modern web development, empowering developers to create dynamic, interactive, and engaging web applications. With its ability to manipulate HTML, handle events, and execute complex tasks, JavaScript has become a cornerstone of the web development ecosystem.

Now that you know what is JavaScript and its benefits, you can unlock your online platform’s full potential and provide remarkable user experiences.

By Themeisle Editorial

Themeisle contributor.

We're the crew behind Themeisle Blog, where we eat, sleep, and breathe WordPress, website building, and all things blogging. Under the leadership of Karol K, our team is composed of WordPress wizards, web design junkies, and blogging enthusiasts. Between us, we've got a boatload of experience (like, 50+ years worth!) in making the digital world more accessible and fun.

Updated on:

Other glossary terms:, what is root directory (for a website), what is https, what is etsy, what is figma, what is substack, what is vps hosting, what is cloudflare, what is an image link, what is website authority, what is a backlink, what is localhost, what is bandwidth, what is website backup, what is wordpress database, what is php, what is ddos, what is web hosting, what is rss.

Or start the conversation in our Facebook group for WordPress professionals . Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

• Privacy Policy

Most Searched Articles

10 best free blogging sites to build your blog for free in 2024: tested, compared and reviewed.

Starting a blog without spending a penny is absolutely possible, and you’re in the right place to find out how to do it. Over the years, I’ve experimented with dozens of different blogging sites and tested how they perform for various purposes ...

How to Create and Start a WordPress Blog in 15 Minutes or Less (Step by Step)

Ready to create a WordPress blog? You've made an outstanding choice! Learning how to start a blog can be your path to an exciting new adventure. Lucky for you, WordPress is an excellent tool you can use for that. It's free, user-friendly, powerful, ...

The Complete Personal Blog Guide: How to Start a Personal Blog on WordPress

In this tutorial, we will lead you through all the steps you need to take in order to start a personal blog that is cheap, effective, good-looking, and that will set you up for future success. This is your ultimate guide to a personal WordPress blog ...

Handpicked Articles

How to make a wordpress website: step-by-step guide for beginners.

Even though it might not seem like so at first, knowing how to make a website from scratch is a must-have skill for today's small business owners. The following guide takes you by the hand and shows you all the steps to getting the job done with ...

7 Fastest WordPress Hosting Companies Compared (2024)

The web host you choose to power your WordPress site plays a key role in its speed and performance. However, with so many claiming to offer the fastest WordPress hosting out there, how do you decide which company to use? In this post, we'll look at ...

How to Install XAMPP and WordPress Locally on Windows PC

Installing XAMPP and WordPress to set up a local development site is a smart move when you need a private space for testing or experimenting. XAMPP allows you to host a website right from your own Windows PC. Once installed, launching a new ...

Share on Mastodon

JavaScript Articles

An introduction to abstract data types in javascript.

• Code Foundations ,

Build a 3D Environment with Three.js

Build a discord bot with node.js, comparison and logical operators, conditional statements, creating a react app.

• JavaScript ,
• Web Development

Creating Queues Using JavaScript

Deploying a back-end with heroku.

• Developer Tools ,

Developing Phaser 3 Games Locally

• Game Development ,
• HTML & CSS ,

Getting User Input in Node.js

How to generate qr code using javascript.

• Front-End Engineer ,

HTML5 Game Development with Phaser

• Mobile Development ,

HTTP Requests in Velo

Implementing modules using es6 syntax, implementing the redux store from scratch.

• Full-Stack Engineer ,

Intro to Mozilla Developer Network

Introduction to javascript runtime environments, javascript glossary, javascript guide: arrays, javascript guide: conditional statements, javascript guide: introduction to javascript, javascript versions: es6 and before, javascript: all the cool kids are doing it, methods and functions, mvc architecture for full-stack app.

• Computer Science ,

NextJs Deployment with Caprover and Github Actions

React developer tools, react: the virtual dom, reading tests with mocha and chai, running javascript in the browser console, setting up a backend, setting up node, setting up node locally, the tsconfig.json file, up next on velo, using arrays to group data, variables, data types, and mathematical operators, web programming on a chromebook, what are tuples, what is a spa, what is async and await, what is express.js, what is javascript, what is json, what is node, why learn asynchronous javascript, why learn javascript foundations, wix built-in methods and functions.

Should You Learn JavaScript? Advice for Newbie Web Developers

If you want to become a web developer, you’ll be wondering what programming languages to learn.  Do you start with the easiest ones ? Or the most useful ones? Both?

With so many options these days, why learn JavaScript?

You’ve no doubt heard that it’s an important web technology, but perhaps you’re not sure if JavaScript is all that relevant these days. With so many frameworks out there providing ready-to-use code, is it really necessary to learn JavaScript from scratch ?

In this guide, we’ll explore what JavaScript does and whether or not it’s still useful. We’ll then look at some of the main reasons for learning the language, and consider why it’s necessary to learn plain JavaScript first, before libraries and frameworks.

If you’d like to jump into it, get started learning JavaScript with our free coding short course .

If you want to skip ahead to a certain section, just use the clickable menu below:

• What is JavaScript and what does it do?
• Is it still worth learning JavaScript in 2024?
• Why learn JavaScript?
• Why learn vanilla JavaScript first?
• What’s the best way to learn JavaScript?

So—should you learn JavaScript? Let’s find out.

1. What is JavaScript and what does it do?

Before you start learning something new, it’s important to understand exactly what it is and what it does. This is especially useful when it comes to mastering a new programming language.

In simple terms, JavaScript is a programming language used to make websites interactive. If you think about the basic makeup of a website, you have HTML, which describes and defines the basic content and structure of the website, then you have CSS, which tells the browser how this HTML content should be displayed—determining things like color and font.

With just HTML and CSS, you have a website that looks good but doesn’t actually do much. JavaScript brings the website to life by adding functionality. It’s is responsible for elements that the user can interact with, such as drop-down menus, modal windows, and contact forms. It is also used to create things like animations, video players, and interactive maps.

Nowadays, JavaScript is an all-purpose programming language—meaning it runs across the entire software stack. The most popular application of it is on the client side (aka frontend), but since Node.js came on the scene , many people run JavaScript on the server side (aka backend) as well.

When used on the client side, JavaScript code is read, interpreted, and executed in the user’s web browser. When used on the server side, it is run on a remote computer. You can learn more about the difference between frontend and backend programming in our guide .

JavaScript isn’t only used to create websites. It can also be used to build browser-based games and, with the help of certain frameworks, mobile apps for different operating systems. The creation of new libraries and frameworks is also making it possible to build backend programs with the language, such as web apps and server apps.

If you’re interested in learning more, we’ve covered more examples of what is JavaScript used for , including code in more depth elsewhere. But now that we know some of the array of uses of this twenty five year-old language, why learn JavaScript right now?

2. Is it still worth learning JavaScript in 2024?

The world of web development is constantly moving. With so many new tools popping up all the time, not to mention the proliferation of generative AI and the programming tools that come with it it can be extremely difficult to know where you should focus your efforts.

As an aspiring developer, you’ll want to make sure that what you’re learning is still relevant in today’s industry.

If you’re having doubts about this language, don’t. It’s important to note that since its creation in 1995 JavaScript is pretty much everywhere on the web—and that’s not likely to change any time soon. According to the 2023 StackOverflow developer survey , it’s the most commonly used programming language for the 11th year in a row .

A glance at the PYPL index and the Tiobe Index show that JavaScript is right up there in terms of popularity and searches by coders.

It’s currently used by 94.5% of all websites and, despite originally being designed as a client-side language, JavaScript has now made its way to the server-side of websites (thanks to Node.js), mobile devices (thanks to React Native and Ionic) and desktop (courtesy of Electron). Package managers like npm make it even more powerful.

As long as people are interacting with the web, you can assume that JS is highly relevant—there’s no doubt that this is a language worth knowing! With that in mind, let’s look at some of the key benefits of becoming a JavaScript expert.

3. Why learn JavaScript?

The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer.

Even if you haven’t got your heart set on a tech career, being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today’s job market!

If you do want to become a web developer, here are some of the main reasons why you should learn JavaScript:

JavaScript experts are versatile

JavaScript is an extremely versatile language. Once you’ve mastered it, the possibilities are endless: you can code on the client-side (frontend) using Angular and on the server-side (backend) using Node.js.

You can also develop web, mobile, and desktop apps using React.js , React Native, and Electron, and you can even get involved in machine learning.

If you want to become a frontend developer , JavaScript is a prerequisite. However, that’s not the only career path open to you as a JS expert. Mastering this key programming language could see you go on to work in full-stack development, games development, information security software engineering, machine learning, and artificial intelligence—to name just a few!

Ultimately, if you want any kind of development or engineering career, proficiency in this language is almost a must. So the next step is to check out the range of JavaScript bootcamps out there and find the one which is best suited to your needs!

JavaScript experts are in-demand (and well-paid)

JavaScript is the most popular programming language in the world, so it’s no wonder that it’s one of the most sought-after skills in the web development industry today.

According to the Devskiller IT Skills and Hiring Report 2020 , 72% of companies are looking to hire JavaScript experts. Enter the search term “JavaScript” on job site Indeed and you’ll find over 81,000 jobs requiring this skill (in the US). Run the same search on LinkedIn and the results are in excess of 110,000.

At the same time, the global demand for the language seems to outweigh the expertise available on the market. According to this HackerRank report for 2023 , JavaScript is the fifth-most popular language that companies look for in a web developer, four times more than its nearest competitor, Bash.

The growing popularity of TypeScript also helps the popularity of JavaScript remain steady, as TypeScript is built on top of it.

Not only are JavaScript experts in demand—they are also well-paid. In the United States, JavaScript developers earn an average yearly base salary of $103,590 per year . We’ve covered this topic in more detail in our JavaScript salary guide , but as you can see, learning this language can really boost your earning potential as a developer.

JavaScript is beginner-friendly

Compared to many other programming languages, JavaScript offers one of the more beginner-friendly entry points into the world of coding.

The great thing about it is that it comes installed on every modern web browser —there’s no need to set up any kind of development environment, which means you can start coding with JavaScript right away!

Another advantage of learning JavaScript as your first programming language is that you get instant feedback; with a minimal amount of code, you’ll immediately see visible results. There’s also a huge JS community on sites like Stack Overflow , so you’ll find plenty of support as you learn.

Not only is it beginner-friendly; it will also set you up with some extremely valuable transferable skills.

JavaScript supports object-oriented, functional, and imperative styles of programming—skills which can be transferred to any new language you might learn later on, such as Python, Java, or C++.

The language provides a crucial introduction to key principles and practices that you’ll take with you throughout your career as a developer.

4. Why learn vanilla JavaScript first?

When deciding whether or not to learn this language, what you’re really asking is whether or not you should learn “vanilla” JavaScript.

Vanilla JavaScript just means the basic language without any libraries or frameworks. Let’s explore what this means in more detail now.

What is meant by vanilla JavaScript, libraries, and frameworks?

If you research the term “vanilla JavaScript”, you might run into some confusion; however, all you need to know is that vanilla JavaScript is used to refer to the native, standards-based, non-extended version.

There’s no difference between vanilla JavaScript and JavaScript—it’s just there to emphasize the usage of plain JavaScript without the use of libraries and frameworks.

So what are libraries and frameworks?

JavaScript libraries and frameworks both contain sets of prewritten, ready-to-use code—but they’re not the same thing.

You can think of a framework as your blueprint for building a website: it gives you a structure to work from, and contains ready-made components and tools that help you to build certain elements much quicker than if you were to code them from scratch. Some popular JavaScript frameworks include Angular, Ember, and Vue.

Read more:  8 of the Best JavaScript Frameworks for Beginners

Frameworks also contain libraries. Libraries are smaller than frameworks, and tend to be used for more specific cases. A JavaScript library contains sets of code which can be called upon to implement certain functions and features.

Let’s imagine you want to code a particular element into your website. You could write, say, ten lines of JavaScript from scratch—or you could take the condensed, ready-made version from your chosen library. Some examples of JavaScript libraries include jQuery , Lodash , and Underscore .

The easiest way to understand how frameworks and libraries work together is to imagine you are building a house. The framework provides the foundation and the structure, while the library enables you to add in ready-made components (like furniture) rather than building your own from scratch.

You can learn more about the relationship between languages and libraries in this post explaining the main differences between JavaScript and jQuery . For now, let’s go back to our original question: How important is it to learn vanilla JavaScript?

Should you learn vanilla JavaScript first?

When it comes to learning the language, it can be tempting to skip ahead to those time-saving frameworks and libraries we just talked about—and many developers do. However, there are many compelling arguments for learning plain JavaScript first.

While JavaScript frameworks may help you get the job done quicker, there’s only so far you can go if you don’t understand the core concepts behind these frameworks. Frontend developer Abhishek Nagekar describes how not learning vanilla JavaScript came back to bite him when he started learning the JavaScript frameworks Node and Express:

“As I went to write more and more code in Node and Express, I began to get stuck at even the tiniest problems. Suddenly, I was surrounded with words like callbacks, closures, event loop and prototype. It felt like I got a reintroduction to JavaScript, but this time, it was not a toddler playing in its cradle, it was something of a mysterious monster, challenging me on every other step for not having taken it seriously.”

If you want to become a developer who can innovate, not just execute, you need to understand the underlying principles of the web—not just the shortcuts. This means learning vanilla JavaScript before you move on to frameworks. In fact, understanding plain JavaScript will help you later on when it comes to deciding whether to use a framework for a certain project, and if so, which framework to use.

Ultimately, if you want to work as a web developer , it’s inevitable that you’ll encounter this web development language at almost every turn. Learning plain JavaScript first will make you a versatile engineer who can work on both the frontend and the backend, and it’ll equip you to solve complex problems independently—a key skill in the industry.

5. What is the best way to start learning JavaScript?

So: if you want to become any kind of web developer, you absolutely need to learn this language—and you should start with plain old vanilla JavaScript first.

If you’re to work out how long to give to get up to speed on the language, senior developer Marven shows you how long it should take to pick up JavaScript .

The best way to start learning JavaScript is to get hands-on. Once you’ve read up on what the language is and how it works, give it a go in your browser. If you’re using Google Chrome, just click “View” then select “Developer” from the drop-down menu. From there, select “JavaScript Console” and you’re good to go!

As with most things, there are plenty of good resources on the web for teaching yourself JavaScript. However, if you want a more structured approach, consider a mentored web development course .

Whichever route you take, make sure you spend enough time learning all the basics. Once you know JavaScript inside out, you’re well-equipped to tackle the more complex languages of the web, as well as to show the benefits to the next person who asks themselves why learn JavaScript when there are other coding options out there.

Further reading

As one of the most powerful web development languages out there, the future for JavaScript is bright. Along with Python for web development , expect budding coders to be starting out by learning these for many more years to come.

If you’d like to learn more about forging a career in web development or just what’s going on in the coding world at the moment, check out the following articles:

• How To Become A Web Developer: Everything You Need To Know
• The Most In-Demand Web Developer Skills in 2024
• What Qualifications Do You Need To Become A Web Developer?

Transform your testing process with: Real Device Cloud , Company-wide Licences & Accessibility Testing

App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

A detailed guide on JavaScript Web Development

By Mohit Joshi, Community Contributor - August 7, 2023

The most widely used programming language in the world, JavaScript has enriched the whole digital realm by enabling developers to build dynamic websites with visually appealing user interfaces . Web Developers that are just starting or seasoned pro developers, everyone is playing with JavaScript, a fundamental route for building successful web applications .

If you’ve lived through the early decade of the century or the pre-JavaScript era, you must have wondered how far things have come across. The websites back then were not only less pleasant but were not even handy. So you might claim that JavaScript does more than just give your websites a pretty face; it also improves their usability and accessibility . If it’s difficult for you to imagine a world without JavaScript, you may just disable JavaScript in your browser and see how you can’t endure the lifeless web pages for more than a few minutes.

In this guide, we are diving into the fundamental understanding of how to leverage JavaScript for web development .

StackOverflow

What is JavaScript for Web Development?

Different types of web development, top javascript frameworks for web development, getting started with javascript for web development: with example, 1. variables, 2. operators, 3. functions, 4. conditional statements, best practices for using javascript web development.

JavaScript is a high-level interpreted programming language that was initially launched in 1995 but came into wider public usage much later. It is an engine that is used for building interactive aspects in the websites that broadens the functionality .

If you come across components in any websites, that utilize animations, maps, graphics, etc., you can be confident that JavaScript is behind all those functionalities. It is a lightweight and object-oriented programming language that is being used by the majority of modern websites available on the internet. It is cross-platform compatible and is supported by all major web browsers.

Both the front end and the back end of websites may be developed using JavaScript, which, when done right, captures seamless communication between the client and the server. The potential of JavaScript to manipulate the DOM is its main benefit for use in modern web development.

Also Read: Understanding JavaScript design patterns in depth

Why is JavaScript Important for Web Development?

It is hard to imagine developing user-friendly websites without dealing with JavaScript.  It not only makes the entire development process easier, but it also adds features you wouldn’t get from any other technology. Let’s look at the three top-most important criteria for using JavaScript for web development.

• Cross-platform compatibility : JavaScript is supported on almost all modern web browsers present across the world. This has accepted JavaScript as one of the most essential and widely used client-side scripting languages. It not only ensures a seamless experience as a user but also ensures broader coverage of your website as a developer. 
• Community Support: Being among the most popular programming languages in the world, JavaScript also ensures a vast collection of resources, tools, documentation, and community support. As a developer, you can go through numerous active forums, tutorials, and open-source projects due to their wide acceptance as a programming language among web developers throughout the world.
• Client and Server side capabilities: JavaScript is well-known for building client-side webpages, enhancing the website’s user-friendliness, and adding cutting-edge interactive features. However, as the modern world evolved, JavaScript also expanded its capabilities of scripting the server side of the website with the help of NodeJS.

Also Read: How to test JavaScript in browsers

Typically, there are two steps involved in creating a website: front-end development and back-end development. In most cases, each part is developed by separate developers with different skill sets, however, When a single developer oversees the entire development of the website, they are known as full-stack developers. Let’s understand both parts of the development and what are their essential features.

• Front-end development: It is also known as client-side development, as the name suggests it focuses on the visible parts of the websites that are UI components of an application. This development assures the website is responsive , user-friendly, stylish, and visually appealing in all aspects.
• Back-end development: It is also known as server-side development, as it ensures the logic is properly applied on the website as intended by the developer. The developer here creates a behind-the-scene show that powers the website creates a connection of the front end of the website with the required servers and databases, and ensures a seamless transaction of data between them.

Read More: Front End Testing: A Beginner’s Guide

A large ecosystem of frameworks and libraries that use JavaScript and provide several modern features and enhancements essential for web development exists. Since all the frameworks we’re going to talk about are built on JavaScript, learning them won’t take much time if you know JavaScript well.

Let’s look at the top frameworks based on JavaScript for web development.

• NodeJS: NodeJS expands the capabilities of JavaScript, enabling programmers to build whole applications using only JavaScript. It allows to build a strong back end for any web application without having to learn any new programming language and leveraging JavaScript itself.
• ReactJS: It is an open-source UI development JavaScript library for developing the front end of websites. A ReactJS website is a collection of several reusable components, each being a building block of the website. The implementation of reusable components using JavaScript has reduced the development time and complexity of development.

Read More: React Testing: How to test React components?

• VueJS: VueJS is an open-source front-end framework used for creating dynamic user-interface and single-page applications (SPAs). Vue.Js enables developers to write code in JSX. However, the components are created in HTML components, therefore, allowing even beginner developers an easy-learning curve.
• AngularJS: Angular is an open-source full-fledged web application framework based on TypeScript used for creating single-page applications (SPAs). As soon as it was launched, it caught several eyes, due to its excellent features. Moreover, AngularJS gained the enormous trust of developers because it is backed by a tech giant, Google.

Also Read: Angular vs React vs Vue: Core differences

You don’t need to rely on any third-party services while using JavaScript for Web Development, and you don’t even need to install a lot of packages in order to start writing JavaScript code.

Prerequisite:

• Install any IDE of your choice. In this example, we are using VS code as our code editor. 

JavaScript Basics for Web Development

To begin with, JavaScript, just like we add CSS, we shall add the following code before the closing body tag in the HTML file to link the JavaScript file.

Note that, our JavaScript file name is “script.js” .

To make sure it works, insert the following line of code in your JavaScript file and view the output in the browser. The alert “hello world” will pop out.

Variables are containers of data that can be used to store data of different types such as numbers, strings, objects, and more. To define a variable you may use, ‘var’ , ’let’ , and ‘const’ keywords. Variables can be used anytime in a document when once define. Let’s understand with an example.

And the output goes as.

You can use JavaScript as a calculator. You can expect JavaScript to support all the basic arithmetic operators. These operators are used wildly in websites for several purposes. Let’s understand what I’m saying with an example.

Functions are reusable blocks of code that are assigned some name to use anywhere throughout the document. Let’s create a function that when given two numbers, returns the output as the sum of those numbers.

In a JavaScript file, every code is executed line by line, however, if in some instances, we wish that some code should only be executed under some conditions, otherwise skip the script. This can be achieved by applying conditions in our code with the help of ‘if..else’.

Let’s understand this with the help of an example.

JavaScript objects are simply key-value pairs or data containers that contain properties and methods. Let’s understand JavaScript objects with the help of an example.

These were some of the fundamental concepts of JavaScript. Now, let’s unleash the full potential of JavaScript with its most essential feature, which is manipulating DOM. 

Selecting HTML elements and adding an event listener

This part will show us how to really manipulate the DOM using JavaScript. To demonstrate that with an example whenever a button on the website is clicked, an alert is generated. This further demonstrates JavaScript’s dynamic nature. 

Create a button in your HTML file.

First, you have to get the button to operate any related action to it. To do so, there are several methods such as. 

• getElementById()
• getElementByClass()
• getElementByName()
• getElementByTagName()
• querySelector()

Further when the HTML element is selected you may use the event listener function to it so it records the event that occurred. For example, if the button is clicked the event listener will record that the button is being clicked.

Let’s create a JavaScript code that creates an alert when the button is clicked.

Now that we have come along so far, we have understood the capabilities of JavaScript, and how it has enhanced modern web development. Let’s now understand how to leverage JavaScript, so that we don’t lag in creating appealing websites. Here are some best practices you must follow to leverage JavaScript for web development.

• Constant code style: To maximize efficiency when working on a large JavaScript project that involves developer collaboration, you must ensure that a code pattern and style have been mutually agreed upon. A consistent coding approach makes your code easier to read and prevents misunderstandings with other team members. 
• Use proper testing strategies: The process of testing determines if the output product works as intended. If you follow the right testing procedures, your code becomes less susceptible to risks and doesn’t malfunction. Common JavaScript testing techniques include things like avoiding using mock, utilizing try..catch, adopting the BDD approach, and more. 
• Keep up with the latest trends: If you stay up to date with the rapid speed of modern web development, you may actively contribute to the creation of user-friendly websites.
• Proper Variable nomenclature: You must choose descriptive and meaningful names for variables, functions, and classes. This reduces misunderstanding among the project’s other participants and improves the readability of the code.

A website that engages well with the users stands out among the crowd. In this tutorial, we delved into a detailed discussion of using JavaScript for web development. JavaScript is the most popular and widely-used programming language across the globe. JavaScript has been able to completely change how websites are developed nowadays. 

This article also discussed a number of JavaScript-based frameworks that have altered the development environment by introducing features and tools that lessen the complexity and duration of development while enhancing output. You also got an understanding of different JavaScript code practices that will enable our website to reach a wider audience and work flawlessly in all popular operating systems and browsers.

We're sorry to hear that. Please share your feedback so we can do better

Related articles.

Understanding JavaScript Design Patterns In Depth

Want to reuse pieces of your JS code? Learn about JavaScript design patterns and their benefits.

How to test JavaScript in Browsers (with 5 Methods)

Learn to test JavaScript code in browsers with effective online tools such as JSFiddle, BrowserStack...

Angular vs React vs Vue: Core Differences

Picking the best web framework is crucial. This guide on Angular vs React vs Vue compares and help y...

Featured Articles

Ready to try browserstack.

Over 6 million developers and 50,000 teams test on BrowserStack. Join them.

Schedule a personalized demo.

Our team will get in touch with you within 12 hours

Get in touch with us

Please share some details regarding your query

Request received!

We will respond back shortly to

In the meantime, here are some resources that might interest you:

Meanwhile, these links might interest you:

Learn Web Development Basics – HTML, CSS, and JavaScript Explained for Beginners

If you are learning web development, you will come across terms like HTML, CSS, and JavaScript. These are often called the building blocks of the Web.

These three tools dominate web development. Every library or tool seems to be centered around HTML, CSS, and JS. So if you want to become a web developer, you need to learn them well.

You'll also discover that websites are mostly built from these three languages.

But you're probably wondering what each one is and what it's really used for. What makes these languages so special and important? And what makes them so ubiquitous that you can’t help but see them in every tutorial and topic based on web development?

Well, now you need wonder no more.

In this article, I will explain the basics of what HTML, CSS, and JavaScript are, how they make the Web work, and what they do on their own.

What is the Internet?

The internet is simply a network of computers that communicate with each other to send and receive data (information).

Each of these computers on the internet can be distinguished and located by a unique number called an IP Address. An IP Address looks something like this: 168.212.226.204

What is the Web?

The Web is a subset of the internet.

Like every other computer network out there, the Web is made up of two main components: the web browser client and the web server.

The client requests the data and the server shares or serves its data. To achieve this, the two parties have to establish an agreement. That agreement is called the Application Programming Interface or in short, the API.

But this data has to be arranged and formatted into a form that's understandable by end-users who have a wide range of technical experiences and abilities.

This is where HTML, CSS, JavaScript and the whole concept of web development come into play.

What is HTML?

HTML stands for Hyper Text Markup Language.

Dictionary.com defines a Markup as:

a set of detailed instructions, usually written on a manuscript to be typeset, concerning style of type, makeup of pages, and the like.

So you can think of HTML as the language used for creating detailed instructions concerning style, type, format, structure and the makeup of a web page before it gets printed (shown to you).

But in the context of web development, we can replace the term ‘printed’ with ‘rendered’ as a more accurate term.

HTML helps you structure your page into elements such as paragraphs, sections, headings, navigation bars, and so on.  

To illustrate what a page looks like, let's create a basic HTML document:

This is how you can format and structure a document with just HTML. As you can see, this markup contains some web elements such as:

• Level 1 heading h1
• Level 2 heading h2
• Level 3 heading h3
• A paragraph   p
• An unordered list with bullet points   ul li
• A button input input
• And the whole body of the page body

This is what that markup above renders on a web browser:

You can also add attributes to these elements which you can use to identify the elements and access them from other places in the site.

In our example, we set the id attributes to all of the three span elements. This will help us access them from our JavaScript as you will see later.

Think of this attribute the same way as your social media username. With this name, others can find you on social media. And someone can also refer to you or mention you with this name (you can get tagged in a post, and so on).

This page is very basic and unattractive, though. If you are building anything other than a demo, you will need to add some basic styling to make it more presentable. And we can do exactly that with CSS.

Want to learn more about HTML? You can start with freeCodeCamp's Responsive Web Design certification and this brand new full HTML course from Beau Carnes .

What is CSS?

While HTML is a markup language used to format/structure a web page, CSS is a design language that you use to make your web page look nice and presentable.

CSS stands for Cascading Style Sheets , and you use it to improve the appearance of a web page. By adding thoughtful CSS styles, you make your page more attractive and pleasant for the end user to view and use.

Imagine if human beings were just made to have skeletons and bare bones – how would that look? Not nice if you ask me. So CSS is like our skin, hair, and general physical appearance.

You can also use CSS to layout elements by positioning them in specified areas of your page.

To access these elements, you have to “select” them. You can select a single or multiple web elements and specify how you want them to look or be positioned.

The rules that govern this process are called CSS selectors .

With CSS you can set the colour and background of your elements, as well as the typeface, margins, spacing, padding and so much more.

If you remember our example HTML page, we had elements which were pretty self-explanatory. For example, I stated that I would change the color of the level one heading h1 to red.

To illustrate how CSS works, I will be sharing the code which sets the background-color of the three levels of headers to red, blue, and green respectively:

The above style, when applied, will change the appearance of our web page to this:

Cool, right?

We access each of the elements we want to work on by "selecting" them. The h1 selects all level 1 headings in the page, the h2 selects the level 2 elements, and so on. You can select any single HTML element you want and specify how you want it to look or be positioned.

Want to learn more about CSS? You can check out the second part of freeCodeCamp's Responsive Web Design certification to get started.

What is JavaScript?

Now, if HTML is the markup language and CSS is the design language , then JavaScript is the programming language.

If you don’t know what programming is, think of certain actions you take in your daily life:

When you sense danger, you run. When you are hungry, you eat. When you are tired, you sleep. When you are cold, you look for warmth. When crossing a busy road, you calculate the distance of vehicles away from you.

Your brain has been programmed to react in a certain way or do certain things whenever something happens. In this same way, you can program your web page or individual elements to react a certain way and to do something when something else (an event) happens.

You can program actions, conditions, calculations, network requests, concurrent tasks and many other kinds of instructions.

You can access any elements through the Document Object Model API (DOM) and make them change however you want them to.

The DOM is a tree-like representation of the web page that gets loaded into the browser.

Thanks to the DOM, we can use methods like getElementById() to access elements from our web page.

JavaScript allows you to make your webpage “think and act” , which is what programming is all about.

If you remember from our example HTML page, I mentioned that I was going to sum up the two numbers displayed on the page and then display the result in the place of the placeholder text. The calculation runs once the button gets clicked.

This code illustrates how you can do calculations with JavaScript:

Remember what I told you about HTML attributes and their uses? This code displays just that.

The displaySum is a function which gets both items from the web page, converts them to numbers (with the Number method), sums them up, and passes them in as inner values to another element.

The reason we were able to access these elements in our JavaScript was because we had set unique attributes on them, to help us identify them.

So thanks to this:

We were able to do this:

Finally, upon clicking the button, you will see the sum of the two numbers on the newly updated page:

If you want to get started with JavaScript, you can check out freeCodeCamp's JavaScript Algorithms and Data Structures certification. And you can use this great Intro to JS course to supplement your learning.

How to Put HTML, CSS, and JavaScript Together

Together, we use these three languages to format, design, and program web pages.

And when you link together some web pages with hyperlinks, along with all their assets like images, videos, and so on that are on the server computer, it gets rendered into a website .

This rendering typically happens on the front end, where the users can see what's being displayed and interact with it.

On the other hand, data, especially sensitive information like passwords, are stored and supplied from the back end part of the website. This is the part of a website which exists only on the server computer, and isn't displayed on the front-end browser. There, the user cannot see or readily access that information.

JavaScript Fundamentals

Let’s learn the fundamentals of script building.

• Hello, world!
• Code structure
• The modern mode, "use strict"
• Interaction: alert, prompt, confirm
• Type Conversions
• Basic operators, maths
• Comparisons
• Conditional branching: if, '?'
• Logical operators
• Nullish coalescing operator '??'
• Loops: while and for
• The "switch" statement
• Function expressions
• Arrow functions, the basics
• JavaScript specials

Sibling chapters

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

JavaScript is required to run Acrobat online services

AARP Members Edition is your daily source for tips to live well, members-only games, exclusive interviews, recipes and more.

AARP daily Crossword Puzzle

Hotels with AARP discounts

Life Insurance

AARP Dental Insurance Plans

AARP MEMBERSHIP 

AARP Membership — $12 for your first year when you sign up for Automatic Renewal

Get instant access to members-only products, hundreds of discounts, a free second membership, and a subscription to AARP the Magazine. Find how much you can save in a year with a membership.  Learn more.

• right_container

Work & Jobs

Social Security

AARP en Español

• Membership & Benefits
• AARP Rewards
• AARP Rewards %{points}%

Conditions & Treatments

Drugs & Supplements

Health Care & Coverage

Health Benefits

AARP Hearing Center

Advice on Tinnitus and Hearing Loss

Get Happier

Creating Social Connections

Brain Health Resources

Tools and Explainers on Brain Health

Your Health

8 Major Health Risks for People 50+

Scams & Fraud

Personal Finance

Money Benefits

View and Report Scams in Your Area

AARP Foundation Tax-Aide

Free Tax Preparation Assistance

AARP Money Map

Get Your Finances Back on Track

How to Protect What You Collect

Small Business

Age Discrimination

Flexible Work

Freelance Jobs You Can Do From Home

AARP Skills Builder

Online Courses to Boost Your Career

31 Great Ways to Boost Your Career

ON-DEMAND WEBINARS

Tips to Enhance Your Job Search

Get More out of Your Benefits

When to Start Taking Social Security

10 Top Social Security FAQs

Social Security Benefits Calculator

Medicare Made Easy

Original vs. Medicare Advantage

Enrollment Guide

Step-by-Step Tool for First-Timers

Prescription Drugs

9 Biggest Changes Under New Rx Law

Medicare FAQs

Quick Answers to Your Top Questions

Care at Home

Financial & Legal

Life Balance

LONG-TERM CARE

​Understanding Basics of LTC Insurance​

State Guides

Assistance and Services in Your Area

Prepare to Care Guides

How to Develop a Caregiving Plan

End of Life

How to Cope With Grief, Loss

Recently Played

Word & Trivia

Atari® & Retro

Members Only

Staying Sharp

Mobile Apps

More About Games

Right Again! Trivia

Right Again! Trivia – Sports

Atari® Video Games

Throwback Thursday Crossword

Travel Tips

Vacation Ideas

Destinations

Travel Benefits

Outdoor Vacation Ideas

Camping Vacations

Plan Ahead for Summer Travel

AARP National Park Guide

Discover Canyonlands National Park

History & Culture

8 Amazing American Pilgrimages

Entertainment & Style

Family & Relationships

Personal Tech

Home & Living

Celebrities

Beauty & Style

Movies for Grownups

Summer Movie Preview

Jon Bon Jovi’s Long Journey Back

Looking Back

50 World Changers Turning 50

Sex & Dating

Spice Up Your Love Life

Friends & Family

How to Host a Fabulous Dessert Party

Home Technology

Caregiver’s Guide to Smart Home Tech

Virtual Community Center

Join Free Tech Help Events

Create a Hygge Haven

Soups to Comfort Your Soul

AARP Solves 25 of Your Problems

Driver Safety

Maintenance & Safety

Trends & Technology

AARP Smart Guide

How to Clean Your Car

We Need To Talk

Assess Your Loved One's Driving Skills

AARP Smart Driver Course

Building Resilience in Difficult Times

Tips for Finding Your Calm

Weight Loss After 50 Challenge

Cautionary Tales of Today's Biggest Scams

7 Top Podcasts for Armchair Travelers

Jean Chatzky: ‘Closing the Savings Gap’

Quick Digest of Today's Top News

AARP Top Tips for Navigating Life

Get Moving With Our Workout Series

You are now leaving AARP.org and going to a website that is not operated by AARP. A different privacy policy and terms of service will apply.

Celebrate America

Join us in honoring the usa's 248th birthday.

Video Exclusive

A Patriotic Tribute From AARP

Actor Sam Waterston reflects on the profound impact of the Gettysburg Address, and a special message from Jo Ann Jenkins introduces members to AARP Members Edition.

Events & History

February 3, 1959: The Day the Music Died

Singer Don McLean on his hit song, ‘American Pie’

Meet One of the Original Rosie the Riveters

Mae Krier, 98 reflects on her life

12 Myths About the American Flag

Debunking myths about the Stars and Stripes

How the Medal of Honor Changed My Life

The story behind 'the real Forrest Gump'

Tiger Woods Connects With His Military Dad

An excerpt from James Patterson's book on the legendary golfer

Gary Sinise Salutes the Real Lt. Dans

Documentary: ‘The Battle I'll Never Forget’

Veterans’ personal stories burned into memories

Get instant access to members-only products and hundreds of discounts, a free second membership, and a subscription to AARP the Magazine.

CONTENT CONTINUES AFTER ADVERTISEMENT

Star Spangled Celebrations

Celebrate the Holiday With Red, White and Blue Cocktails

Party like its 1776!

Dollar Store Finds for a Patriotic Fourth Celebration

Affordable items to make the holiday sparkle

Your Secret to Better Barbecue This Season

Simple spice blends that add big flavor all summer long

Patriotic Movies to Celebrate the Fourth of July

Check out these 20 red-white-and-blue films

Top Veteran-Owned Distilleries and Breweries

Support veteran causes while having a great drink

7 Ways You Might Be Grilling Wrong this Summer

Don't let a simple mistake spoil your celebrations

Discover U.S.A.

Must-See Fourth of July Firework Displays

When, where and how to watch

The United States features many sites that attract visitors looking to travel with purpose

7 Great Options for a Summer Trip That Celebrates American History

These cities say: ‘You are welcome here’

How Much Do You Know About America?

How Much Do You Know About the Fourth of July?

Take America's birthday quiz and find out

Quiz: Test Your Knowledge of American Landmarks

How well do you know these famous structures?

Quiz: How Much Do You Know About U.S. Regions?

Test yourself on geography, history, attractions, more

AARP Value & Member Benefits

Coupons for Local Restaurants

Find delicious discounts at your favorite nearby restaurants

Weekly movie reviews, news and free screenings

SAVE MONEY WITH THESE LIMITED-TIME OFFERS

AARP Membership

$12 for your first year when you sign up for Automatic Renewal

Get instant access to members-only products and hundreds of discounts, a free second membership, and a subscription to AARP the Magazine . Find out how much you could save in a year with a membership. Learn more.

Learn and Earn with AARP Rewards

1 explore activities.

Take your pick from hundreds of good-for-you activities like health quizzes and savings tools to help you prepare for your life ahead.

2 Earn Points

Score points every time you tackle an AARP Rewards activity. AARP members earn 50% more points!

3 Redeem Rewards

Trade in your points for sweepstakes entries, local deals and discounted gift cards. Access exclusive offers as an AARP member.

Already enrolled? Log In

Stay Informed, Stay In Touch

%{ newsLetterPromoText  }%

%{ description  }%

• Privacy Policy
• See All Newsletters

• Skip to main content
• Skip to search
• Sign up for free

New JavaScript Set methods

New JavaScript Set methods are arriving! Since Firefox 127 , these methods are available in most major browser engines, which means you won't need a polyfill to make them work everywhere.

This article is a good read for people who are new to Set in JavaScript and are looking to find out how to use these new JavaScript methods. I'll highlight some advantages of using these methods with basic examples to show why you might reach for these instead of building your own implementations.

What's new in Set methods?

For those of you looking for the TL;DR, here's the gist of new methods that have cross-browser support:

• intersection() returns a new set with elements in both this set and the given set.
• union() returns a new set with all elements in this set and the given set.
• difference() returns a new set with elements in this set but not in the given set.
• symmetricDifference() returns a new set with elements in either set, but not in both.
• isSubsetOf() returns a boolean indicating if all elements of a set are in a specific set.
• isSupersetOf() returns a boolean indicating if all elements of a set are in a specific set.
• isDisjointFrom() returns a boolean indicating if this set has no elements in common with a specific set.

If you've read (or skimmed) through the above list and are confused, don't worry, we'll describe what they do in the following sections. Each of these methods are used to check what the contents of sets are compared to the contents of another specific set.

What is a JavaScript Set?

A set is similar to an Array , except that each value can only be stored once. For example, we can take a list of items, add them all to a set, and then inspect the results of the set. The list on the right is the contents of the <ol> list on the left, but converted to a set. We have all duplicates removed from the list because we're guaranteed that a set is unique:

This might not look like much in a small example such as this, but it's really convenient to have a built-in way to make unique collections of items, especially over larger data and more complex data types and objects. For example, consider that you can add elements to a set like so:

It's also typically faster to check if an element is in a set as opposed to in an Array, so this fits use cases where you need to keep an eye on performance in larger data sets. You can also compose new sets with specific logical properties based on existing sets, and we'll take a look at some examples of that below.

We'll be covering all of the new methods below, but if you want to see everything you can do with a Set , check the Instance methods documentation.

Union of two sets

This is a good example to start us off if you're not familiar with sets. With the union, we can check what elements are in 'either or both' sets. In the example below, we have two lists and we want to make a third one that contains all items from both lists, but without duplicates:

We're using the HTML textContent of each list item so we have sets of strings, but you can see how this can be powerful if we consider that sets can contain data types like arrays or objects.

This is helpful because we don't need any custom implementations to remove duplicates, do equality checks, or make other comparisons. Once we have elements in a set, we know they're all unique, and the union method is an optimized way to make a third set of (unique) items that appear in 'either or both' sets.

Set intersection

With set intersection, we can check what elements occur in both sets to see what the overlap is. In this example, instead of displaying the intersection set as a third list like we did with union above, we can use it to highlight elements that are 'both sets only':

Set symmetric difference

Before we look at difference, let's look at symmetricDifference which might sound complex, but hopefully the example below demystifies that. What the symmetric difference does is lets us check which elements are in either set, but not both .

If this is all new and you're struggling to understand, compare the symmetric difference with the intersection example. You should see that the symmetricDifference method does the opposite logical operation of the intersection .

Set difference

With set difference, we can check which elements are in one set but not in another. For this example, we are creating two new sets instead of one. The first one ( set1only ) is created with set1.difference(set2) and what we get back is a new set of items that are 'set one only'. We do the same with the new set set2only to find items that are in set two but not in the first one. For each list, we can use the sets created with difference to highlight list items that don't appear in the other list.

Subset, superset, and disjoint from

The last of the new methods and concepts that we can explore are subset, superset, and 'disjoint from' methods. By now, you're familiar with the set operations that return new sets. The subset, superset, and disjoint from methods don't return new sets, but a Boolean value to indicate certain state or logical checks.

The first two we can look at are subset and superset . Instead of highlighting list items, we have some statements or assertions like "Set one is a subset of set two". We then add some text ( TRUE / FALSE ) to the list item depending on the result of a check like if (set1.isSupersetOf(set2)) :

So with subset , we can check if all the items from a set appear in another set or not. With superset , we're doing the opposite, to see if a set has all items from another set, plus some additional items.

The last method for us to look at is isDisjointFrom() where we can find out if two sets have no common elements . The first and second sets below are not disjoint from each other as they have one element ("C") in common. The third set is disjoint from the other two as it has no items in common with either set:

I hope you enjoyed this post about Set methods and why I think sets are an interesting concept to understand. Do you know different ways to use these methods in real-world examples? Feel free to get in touch with us and let me know what you think or if I've missed something! You should be all Set for your next project, so see you next time!

Previous Post Securing APIs: Express rate limit and slow down

Next post static site generation (ssg) with next.js, stay informed with mdn.

Get the MDN newsletter and never miss an update on the latest web development trends, tips, and best practices.