Javascript Day 2: Syntax, Variables, and Comments

JavaScript Day 2: Syntax, Variables, and Comments

Niotechone Marketing Team
December 4, 2025
11:30 am

Introduction

We will learn the basics of programming: syntax, variables, and comments. You can think of these as the grammar of coding, the toolbox, and the sticky notes of programming!

It is important to get these basics down, because this is the basis of all you will build with JavaScript! Just as you learned the alphabet before you learned how to write sentences, you need to find out what variables are and what syntax is before you can build amazing web applications. Once you complete this lesson, you will be able to store data, write clean code, and add helpful notes to your code!

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

First, we will build a simple website in order to display our outputs from the JavaScript explained in this lesson:

🌐

<title>JavaScript Day 2 - Variables & Comments</title>


    <h2>JavaScript: let, const, var with Comments</h2>

    <p id="nameOutput">Name will appear here.</p>
    <p id="ageOutput">Age will appear here.</p>
    <p id="schoolOutput">School will appear here.</p>
    <p id="updateOutput">Updated info will appear here.</p>
    <p id="sum"></p>
    <p id="demo2"></p>
    <p id="multiplication"></p>
    <p id="var"></p>

What the code does:

Creates a simple HTML page with headings and a few paragraphs that are left blank
Each paragraph is assigned an id so that JavaScript can access and modify it
Includes a link to our external JavaScript file (Index.js)

How the structure works:

An ID makes it easy to point at specific element
The external JavaScript file keeps our code organized
The script tag is at the bottom of our HTML so it loads last after the content and elements

Pro Tip: When labeling your elements with ids, it is a good idea to give it a meaningful id, this will make your code easier to read and maintain!

Step 2: Understanding Variables - var, let, and const

Now let’s talk about the three ways to declare variables in JavaScript:

📄

// Single-line comment: Declare a variable using var, let, const
var studentName = "Arya";
document.getElementById("nameOutput").innerHTML = "Student Name (var): " + studentName;

let studentAge = 14;
document.getElementById("ageOutput").innerHTML = "Student Age (let): " + studentAge;

const schoolName = "B.A.P.S. Gurukul";
document.getElementById("schoolOutput").innerHTML = "School Name (const): " + schoolName;

What the code does:

Declares three variables with different keywords
var studentName declares a variable that can be reassigned
let studentAge declares a variable within a block scope
const schoolName declares a variable that cannot be reassigned
Displays each variable value in the appropriate HTML element

Why are there three types of variables:

var – The original way (older), not as common anymore
let – Modern block scoped variables
const – variables that should not change

Common Mistake: Trying to assign a const variable will throw an error! If it should not change, you should probably use const.

Step 3: Using Comments to Explain Your Code

Comments are notes for yourself and other developers. Here’s how the comments work:

📄

/*
 Multi-line comment:
 This section demonstrates how to update variable values
 and display the updated information
*/

studentName = "yashvi";
studentAge = 21;

document.getElementById("updateOutput").innerHTML = 
    "Updated Name: " + studentName + "<br>" + 
    "Updated Age: " + studentAge;

What the code does:

Uses a multi-line comment which will help explain the following code
Updates the values of the previously declared variables
Combines both value into the same output with a line break (<br>)

Why are the comments important:

They can explain what your code does
They will help another developer understand your logic
They can be used to disable code temporarily
They will facilitate debugging

Note: Good comments explain why you are doing something, not just what you are doing!

Step 4: Declaring Multiple Variables at Once

JavaScript allows you to declare multiple variables in one line:

📄

let carName = "bmw", person = "Niotechone", price = 200000;
document.getElementById('var').innerHTML = person;

What this code does:

Makes three declarations in a single statement
Each declaration get its own number
Outputs one declaration in the HTML

Why you might use this:

Saves lines of code when declaring similar variables
Makes code more compact

Pro Tip: While you can do this, it’s usually best to declare variables on separate lines for clarity!

Step 5: Basic Math Operations and Console Output

Let’s turn our attention to doing math operations and some debugging features:

📄

document.getElementById('demo2').innerHTML = 10.20;

let x, y, z;
x = 3;
y = 3;
z = x + y;
document.getElementById("sum").innerHTML = "The value of z is " + z + ".";
document.getElementById("multiplication").innerHTML = 5 * 10;

let name = "Niotechone";
console.log(name);

What this code does:

Output a decimal value just as it is
Adds and saves the result of that operation into variable z
Multiply and display that result directly in the output
Use console.log() to output something to the browser developer tools

Why these techniques matter:

Mathematical operations are fundamental to programming
Use of console.log() is an important debugging tool
Direct calculations in output are useful for simple operations

Debugging Tip: You can always check to see console.log() outputs in your browser console (F12 → Console)!

Code Explanation Sections

Variable Declaration and Scope

📄

var studentName = "Niotechone";
let studentAge = 14;
const schoolName = "B.A.P.S. Gurkul";

How these work differently:

var – Scope of Function, can be redeclared, hoisted.
let – Block Scope, cannot be redeclared in the same scope.
const – Block Scope, cannot be reassigned.

The Significance of Scope: Scope determines where your variables can (or cannot) be accessed. Block Scope is more predictable than Function Scope.

Comment Syntax and Best Practices

📄

// Single-line comment

/*
 Multi-line comment
 Can span multiple lines
*/

How comments work:

Single-line comments start with // and continue to end of line.
Multi-line comments begin with /* and end with */.
Comments are ignored by JavaScript – they are only for humans.

When to use comments:

To explain complex logic;
To describe function purposes;
To comment out code for testing purposes;
To leave a note for yourself in the future.

String Concatenation and HTML Output

📄

document.getElementById("updateOutput").innerHTML = 
    "Updated Name: " + studentName + "<br>" + 
    "Updated Age: " + studentAge;

How this connects elements:

+ operator combines strings and variable names.
<br> creates a line break in HTML.
The complete expression builds a complete string of HTML.
The innerHTML will insert the HTML for you.

The Importance of Strings: Most web development is all about text data and displaying it in various ways!

Tables of Key Concepts

A. Components / Keywords Used

Name	Description
var	Declares a function-scoped or globally-scoped variable
let	Declares a block-scoped local variable
const	Declares a block-scoped constant that can’t be reassigned
//	Single-line comment syntax
/* */	Multi-line comment syntax
console.log()	Outputs messages to the browser console

B. Key Properties / Parameters / Features

Name	Description
Variable Scope	Determines where a variable can be accessed in code
String Concatenation	Combining strings using the + operator
Block Scope	Variables accessible only within {curly braces}
Reassignment	Changing a variable’s value after declaration
Constant	A variable whose value cannot be changed
innerHTML	Property that sets or gets HTML content

Useful References

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Interactive-JS-Tutorials/Day%202%20-%20JS%20-%20Syntax%2C%20Variables%2C%20and%20Comments

Summary – What You Learned

In day 2, you will learn the basic concepts of JavaScript, which include syntax, variables and comments as these are the essential components of every JS program. You will learn about how to write JavaScript statements and how semicolons, whitespace and indentation can help you write clear and maintainable code. You Also learn about naming conventions and how they help others understand your programs When you want to write effective JavaScript statements, you need to become familiar with variables (var, let, const) and how they are used to create and manage data in memory. Finally, you will learn how to use comments to create and organize your code Is Being Effective at documenting your code. By the end of day 2, you should have a solid foundation for writing simple JavaScript statements, defining variables, selecting appropriate variable types, and writing comments for clarity.

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is JavaScript syntax?

JavaScript syntax is the set of rules that determines how JS code must be written and structured. It includes statements, keywords, braces, parentheses, and operators.

Are semicolons required in JavaScript?

Semicolons are optional because of JavaScript’s automatic semicolon insertion (ASI), but using them is considered good practice for clean and predictable code.

Which variable type should I use most often?

Use let for values that change and const for values that don’t. Avoid var unless required for legacy code.

What are comments in JavaScript?

Comments are notes in your code that are ignored by the browser and help make your code easier to understand.

Why are comments important?

Comments explain complex code, improve readability, help teamwork, and make future updates easier.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

JavaScript Day 2: Syntax, Variables, and Comments

JavaScript Day 2: Syntax, Variables, and Comments

Table of Contents

Introduction

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

Step 2: Understanding Variables - var, let, and const

Step 3: Using Comments to Explain Your Code

Step 4: Declaring Multiple Variables at Once

Step 5: Basic Math Operations and Console Output

Code Explanation Sections

Tables of Key Concepts

Useful References

Summary – What You Learned

Output

Categories

Related Articles

Resilient Distributed App Systems

The Rise of Adaptive UX in 2025

JavaScript Day 7: Events, Strings & String Methods

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers

India

Canada