AI-Assisted "Hello, World" in JavaScript

Introduction

Welcome to the final lesson of our foundational module. In our last session, you became proficient with the integrated terminal, learning to navigate your filesystem and manage files using command-line operations. You created a project folder my-first-app and an empty JavaScript file within it, index.js, setting the stage for today's work.

This lesson focuses on our next learning outcome: Utilize inline AI autocompletion to write a basic 'Hello, World' program in JavaScript. We will finally bring together your development environment and your AI assistant. You'll see firsthand how GitHub Copilot acts as a pair programmer, suggesting code as you type and helping you write your first program. This is the core workflow you'll use to bridge your existing programming knowledge with modern development practices.

What is Inline Autocompletion?

Before we start coding, let's clarify what we mean by "inline autocompletion." GitHub Copilot's primary feature is providing suggestions directly in your editor as you type. These suggestions appear as dimmed, greyed-out text, often called "ghost text." It feels like the AI is anticipating your next move and completing your thoughts.

This feature is designed to be seamless. You simply start typing, and Copilot analyzes the context—your current file, other open files, and the code you've just written—to offer the most relevant completion.

For a formal definition and a look at the mechanics, please review the official documentation.

Writing Your First "Hello, World"

The "Hello, World" program is a time-honored tradition for learning any new programming language. It's a simple program that outputs the text "Hello, World!" to a display. In modern JavaScript running on a backend environment like Node.js, the standard way to do this is with the console.log() function. Given your experience, you can think of this as being analogous to printf in C or, more recently, Logger.log in Google Apps Script.

Let's use Copilot to write this program.

1. If you closed your editor, open the my-first-app folder.
2. Open the index.js file you created in the last lesson. It should be empty.
3. In the file, start typing console.l
4. As you type, you should see Copilot offer a ghost text suggestion, likely completing the line to console.log("Hello, World!");.

This is the magic of inline completion. To accept the suggestion, simply press the Tab key. To dismiss it, press Esc.

The following short video from the official Visual Studio Code channel demonstrates these core mechanics clearly.

Running Your Program

Now that you've written the code, let's execute it. This is where your new terminal skills come in handy.

1. Make sure your index.js file contains only the line console.log("Hello, World!"); and is saved.
2. Open the integrated terminal in VS Code (Ctrl+` or View > Terminal).
3. Because you opened the my-first-app folder, your terminal should already be in the correct directory. You can verify this by typing pwd (or cd on Windows) and ls (or dir on Windows) to see index.js listed.
4. To run your JavaScript file using the Node.js runtime, type the following command and press Enter:

   node index.js
   

5. You should see the output Hello, World! printed directly below your command in the terminal.

Congratulations! You have successfully written and executed your first JavaScript program with the help of an AI assistant.

Guiding Copilot with Comments

Simple autocompletion is powerful, but the true potential of AI-assisted coding is unlocked when you guide the AI. Instead of typing code, you can write a natural language comment describing what you want the code to do, and Copilot will generate the implementation for you.

Let's try this. First, delete the console.log line from your index.js file.

Now, type the following comment into your file and press Enter:

// create a function that greets a person by name

After you press Enter, Copilot should immediately provide a ghost text suggestion for a complete JavaScript function that matches your description. It will likely look something like this:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

Press Tab to accept the suggestion. Notice that Copilot has generated a function, complete with a parameter and a modern JavaScript template literal for string formatting. Now, on a new line below the function, you need to call it. Start typing greet( and Copilot will likely suggest a full line, like greet("Alex");. Accept it, and run your program again with node index.js. You should see your personalized greeting in the terminal.

This comment-to-code workflow is a fundamental technique for leveraging AI. It allows you to focus on the what (your intent) and lets the AI handle the how (the specific syntax).

This video provides an excellent demonstration of this exact technique.

Conclusion

In this lesson, you've bridged the gap between setting up your environment and writing your first lines of code. You've experienced the core workflow of AI-assisted development, moving from a simple idea to a running program with minimal typing.

Here are the key takeaways:

• Inline Suggestions (Ghost Text): Copilot's primary way of helping is by suggesting code as dimmed text directly in your editor.
• Core Interactions: You can Tab to accept a suggestion, Esc to dismiss it, and even view alternatives with Ctrl/Cmd + Enter.
• Guiding with Comments: You can direct Copilot to generate entire functions or blocks of code by writing a descriptive comment in plain English.
• Execution: You can run your JavaScript files from the integrated terminal using the command node <filename>.js.

You've now completed the entire first module, from setting up your editor to writing and running a program. You have a solid foundation to build upon.

In our next lesson, we will begin Module 2 by introducing version control with Git. We'll learn why it's essential for any software project and use our "Hello, World" application as the starting point for our first repository. You'll even use your AI assistant to help write commit messages.