Imagine you're using your favorite app, whether it's Instagram, YouTube, WhatsApp, or Amazon. Every time you interact with these apps, a simple process happens behind the scenes. You provide some information, the application processes it, and then it shows you the result. This communication between the user and the program is known as Input and Output.

As the infographic illustrates, Input receives information, while Output displays information. You can think of JavaScript as a messenger standing between you and the computer. You send a message to JavaScript, JavaScript processes it, and then delivers a response back to you. Almost every JavaScript program follows this same workflow, whether it's a simple calculator or a complex social media platform.

Understanding Input and Output

Let's understand these two terms separately before looking at the JavaScript functions.

Input is any information that the user provides to a program. This information can come from typing on a keyboard, clicking a button, touching a mobile screen, selecting an option from a menu, uploading a file, or even speaking into a microphone.

For example, when you search for "JavaScript Tutorial" on Google, the search text is your input. When you enter your username and password on a login page, those details are also inputs.

Output, on the other hand, is the information that the program returns after processing the input. It could be a message displayed on the screen, search results, an image, a notification, or even an error message.

For example, after entering your login credentials, seeing "Login Successful" or "Invalid Password" is the output produced by the program.

How Input & Output Work

The infographic explains this entire communication process using a simple flow.

User
   ↓
Input
   ↓
JavaScript Program
   ↓
Output
   ↓
User

Let's imagine a simple example.

A user enters their name into a website.

Alex

JavaScript receives this input, processes it, and then displays a greeting.

Welcome Alex!

This entire process—from receiving information to displaying a result—is what we call Input and Output.

console.log()

The first function introduced in the infographic is console.log(). This is one of the most commonly used JavaScript functions, especially while learning the language.

Its purpose is simple—it prints information inside the browser's Developer Console.

The infographic uses this example:

console.log("Hello JavaScript");

When you run this code, the browser console displays:

Hello JavaScript

One thing beginners often misunderstand is where this message appears. It does not appear on the webpage itself. Instead, it appears inside the browser's Developer Console, which developers use for debugging and testing code.

You can open the console in most browsers by pressing F12 or Ctrl + Shift + I and selecting the Console tab.

Why is console.log() Important?

Imagine you're creating a calculator application, but the answer isn't coming out correctly. Instead of guessing where the problem is, you can print the values of your variables.

let price = 500;
let discount = 100;

console.log(price);
console.log(discount);

Output:

500
100

Now you can verify whether the variables contain the correct values. This is why console.log() is one of the most powerful debugging tools available in JavaScript.

Developers use it every day to inspect variables, API responses, objects, arrays, and function outputs.

alert()

The next function shown in the infographic is alert().

Unlike console.log(), which is meant for developers, alert() displays a popup directly to the user.

The infographic demonstrates it using the following example:

alert("Welcome!");

When this code runs, a popup window appears with the message:

Welcome!

along with an OK button.

The browser pauses the execution of the program until the user clicks OK.

Think of it as someone ringing a bell to grab your attention before delivering an important message. That's exactly why the infographic uses a character holding a bell—it represents an important notification that the user must acknowledge before continuing.

When is alert() Used?

alert() is useful for displaying important information such as:

• Login successful

• Payment completed

• Invalid password

• Form submitted successfully

Although modern websites usually use beautifully designed popup windows instead of the browser's default alert box, understanding alert() helps you learn how JavaScript communicates with users.

prompt()

So far we've learned how JavaScript displays information.

Now let's learn how JavaScript receives information from the user.

The infographic introduces prompt(), which displays a dialog box asking the user to enter some text.

Here's the example shown in the infographic:

let name = prompt("Enter your name");

When this code executes, a popup appears asking the user to enter their name.

Suppose the user types:

Alex

After clicking OK, JavaScript stores the entered value inside the variable.

name

now contains:

"Alex"

You can use this value anywhere in your program.

For example:

alert("Welcome " + name);

Output:

Welcome Alex

This simple example demonstrates how JavaScript receives information from the user and immediately uses it to generate personalized output.

What Does prompt() Return?

One important thing to remember is that prompt() always returns text, even if the user enters a number.

For example, if the user enters:

25

JavaScript actually stores:

"25"

Notice the quotation marks. That means the value is a String, not a Number.

If you need a number for calculations, you should convert it.

let age = Number(prompt("Enter your age"));

Now the returned value becomes a Number instead of a String.

What Happens When the User Clicks Cancel?

The infographic also mentions that prompt() can return null.

Suppose the user closes the dialog or clicks Cancel instead of OK.

let name = prompt("Enter your name");

Instead of returning text, JavaScript returns:

null

This is why professional developers usually check whether the user actually entered something before using the value.

confirm()

The last function covered in the infographic is confirm().

While prompt() asks the user to enter text, confirm() simply asks the user to make a decision.

The infographic uses this example:

confirm("Delete File?");

A popup appears with two buttons:

• OK

• Cancel

If the user clicks OK, JavaScript returns:

true

If the user clicks Cancel, JavaScript returns:

false

Since the returned value is a Boolean, confirm() is often used with conditional statements.

For example:

if(confirm("Delete File?")){
    console.log("File Deleted");
}else{
    console.log("Deletion Cancelled");
}

If the user clicks OK, the console displays:

File Deleted

Otherwise, it displays:

Deletion Cancelled

This makes confirm() very useful whenever an application needs the user's approval before performing an important action.

Quick Comparison

The infographic also provides a helpful comparison of these four functions.

Real-World Examples

These functions may seem simple, but they help explain how communication works between users and JavaScript.

• Developers use console.log() to debug applications and inspect variables while writing code.

• alert() can notify users when a payment succeeds or a form has been submitted.

• prompt() can ask users for their name, age, or any basic information during small learning projects.

• confirm() is commonly used before deleting files, removing products from a shopping cart, or logging out of an application.

Modern JavaScript Note

Although alert(), prompt(), and confirm() are excellent learning tools, they're not commonly used in professional websites because their appearance depends on the browser and they interrupt the user's experience.

Modern applications usually create custom dialog boxes using HTML, CSS, and JavaScript or UI libraries like Bootstrap, Material UI, or Tailwind CSS. However, understanding these built-in functions is still important because they teach the core concepts of user interaction and are frequently used in beginner tutorials and interview questions.

Common Beginner Mistakes

One common mistake is expecting console.log() to display text on the webpage. Remember, it only prints inside the browser's Developer Console.

Another mistake is forgetting that prompt() always returns a String. If you need to perform calculations, convert the value using Number().

Finally, always remember that prompt() can return null if the user clicks Cancel, so it's good practice to check the returned value before using it.

Quick Revision