Learn JavaScript Basics Explained — Complete Beginner's Guide

Q: What is the difference between `let` and `const`?

let variables can be reassigned. const variables cannot be reassigned after declaration. Use const by default, let when you need to reassign.

Q: How do I check a variable's type?

Use the typeof operator: typeof variable === 'string'.

Q: What is the difference between `console.log` and `document.write`?

console.log outputs to the browser’s developer console (for debugging). document.write writes to the HTML page but is destructive — it overwrites the page if called after loading.

Programming Languages

JavaScript Tutorials

JavaScript Basics Explained — Complete Beginner's Guide

DodaTech Updated Jun 6, 2026 8 min read

JavaScript is the programming language that brings web pages to life — it controls interactivity, animations, form validation, and dynamic content in every modern browser.

What You’ll Learn

What JavaScript is and where it runs
How to write JavaScript inline, inside <script> tags, or in external files
Variables (var, let, const) and the seven data types
Console output, comments, and strict mode
How to build a mini interactive project

Why JavaScript Basics Matters

JavaScript powers everything from simple form validation to full-featured web apps like Gmail and Google Maps. At DodaTech, the Doda Browser uses JavaScript extensively for extension support and dynamic tab management, while the Durga Antivirus Pro dashboard uses JavaScript to display real-time threat data and system status. Without JavaScript basics, you cannot build modern web applications.

Learning Path

    flowchart LR
  A[HTML & CSS] --> B[JavaScript Basics]
  B --> C[Operators & Control Flow]
  C --> D[Functions & Arrays]
  D --> E[DOM & Async JS]
  B --> F[You Are Here]

Prerequisites: You should know basic HTML (how to create a web page) and CSS (styling elements). No programming experience needed.

What Is JavaScript?

Think of a web page like a house:

HTML is the structure — walls, doors, rooms
CSS is the decoration — paint colors, furniture style
JavaScript is the electricity and plumbing — it makes things happen

When you click a button and a form validates, or a page loads new content without refreshing, that’s JavaScript at work.

Where Does JavaScript Run?

JavaScript originally ran only in browsers. Now it runs almost everywhere:

Environment	How to Run	Example
Browser	Inside `<script>` tag	Form validation, animations
Node.js	Command line: `node file.js`	Web servers, build tools
Mobile apps	React Native, Ionic	Cross-platform apps
Desktop apps	Electron	VS Code, Slack

Your First JavaScript

Let’s write real code. Open any HTML file and add a <script> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My First JS</title>
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <script>
    // This is a single-line comment
    /* This is a
       multi-line comment */
    
    // Get the element and change its text
    const heading = document.getElementById('greeting');
    heading.textContent = 'Hello, JavaScript!';
  </script>
</body>
</html>

Line by line explanation:

const heading = document.getElementById('greeting'); — Find the HTML element with id="greeting" and store it in a variable called heading. Think of a variable like a labeled box where you store things.
heading.textContent = 'Hello, JavaScript!'; — Change the text inside that element. The .textContent property holds the text you see on screen.

When you open this page in a browser, the <h1> text changes from “Hello” to “Hello, JavaScript!”. Magic? No — JavaScript.

Variables: Labeled Boxes for Data

Variables store data so you can use it later. In real life, you put socks in a drawer labeled “socks”. In JavaScript, you put a number in a variable named age.

Three Ways to Declare

// var — old way, avoid this
var name = 'Alice';

// let — can change later
let age = 25;
age = 26;  // Reassigning — the box now holds 26

// const — cannot change (constant)
const birthYear = 1999;
birthYear = 2000;  // TypeError! Can't reassign a constant

Which one should you use? Always start with const. If you later need to change the value, switch to let. Never use var — it has confusing scoping rules (like a drawer that’s accessible from every room in the house).

Variable Naming Rules

Must start with a letter, _, or $
Cannot contain spaces or hyphens
Use camelCase for multi-word names: firstName, lastLoginDate
Names are case-sensitive: age and Age are different variables

Data Types: The Seven Primitives

JavaScript has seven primitive data types. Think of each type as a different kind of item you can put in your labeled boxes:

const name = 'Alice';            // string — text, in quotes
const age = 25;                  // number — integers and decimals
const isStudent = true;          // boolean — true or false
const value = null;              // null — intentionally empty
let city;                        // undefined — not yet assigned
const id = Symbol('id');         // symbol — unique identifier
const big = 9007199254740991n;   // bigint — very large numbers

Notice let city; — we declared the box but didn’t put anything in it. Its value is undefined. That’s different from null, which means “I deliberately set this to nothing.”

Checking Types with `typeof`

console.log(typeof 'hello');     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" — this is a known JavaScript bug!
console.log(typeof Symbol());    // "symbol"

Anticipating confusion: Why is typeof null returning "object"? It’s a bug from the early days of JavaScript that can’t be fixed without breaking existing websites. Just remember: null is a primitive, not an object.

Console Output

The console is your best friend for debugging. Think of it as a private notepad where JavaScript writes messages that only developers can see:

console.log('Regular message');     // General info
console.error('Error!');            // Red error message
console.warn('Be careful');         // Yellow warning
console.table([1, 2, 3]);           // Display as a table

To open the console in your browser: Right-click → Inspect → Console tab. Or press F12.

Strict Mode

'use strict';

x = 3.14;  // ReferenceError: x is not defined

Without strict mode, JavaScript silently creates a global variable x. That’s like accidentally putting your socks in the neighbor’s house. Strict mode catches these mistakes and throws errors instead of failing silently. Always use it.

Common Mistakes

1. Using `var` instead of `let` or `const`

var ignores block scoping. This causes bugs in loops and conditionals:

var x = 1;
if (true) {
  var x = 2;  // Same variable! Overwrites the outer x
}
console.log(x);  // 2 — probably not what you expected

2. Confusing `=` (assignment) with `===` (comparison)

if (x = 5) { }  // Assigns 5 to x, then checks if 5 is truthy — always runs!
if (x === 5) { } // Correct comparison

3. Forgetting to declare variables

x = 10;  // Creates a global variable — accessible everywhere, bug-prone

Always use const or let.

4. Thinking `const` means “immutable”

const arr = [1, 2, 3];
arr.push(4);  // Works fine — const prevents reassignment, not mutation
// arr = [5];  // TypeError! This IS prevented

5. Using `==` instead of `===`

5 == '5'   // true — JavaScript converts types (loose equality)
5 === '5'  // false — strict equality, no conversion

Always use === and !==.

6. Confusing `undefined` vs `null`

undefined means “this variable was never assigned a value.” null means “I explicitly set this to nothing.” They are different values.

Practice Questions

What’s the difference between let and const? let allows reassignment; const does not. Use const by default.
What will typeof null return and why is it surprising? "object" — it’s a legacy bug in JavaScript that returns the wrong type.
What happens if you use a variable before declaring it with let? You get a ReferenceError because let is hoisted but in the Temporal Dead Zone.
Which output method is best for debugging? console.log() — it shows messages in the developer console without affecting the page.

Challenge: Create three variables: firstName, lastName, and birthYear. Use const for birth year and let for the others. Log a sentence like “Alice Smith was born in 1999.” Then try changing birthYear and observe the error.

FAQ

What is the difference between let and const?

let variables can be reassigned. const variables cannot be reassigned after declaration. Use const by default, let when you need to reassign.

Do I need semicolons in JavaScript?

Not strictly — JavaScript has Automatic Semicolon Insertion (ASI). But adding them explicitly avoids edge-case bugs.

What does 'use strict' do?

Enables strict mode, which catches common mistakes like undeclared variables and throws errors instead of failing silently.

What is the TDZ (Temporal Dead Zone)?

The period between entering a scope and the variable’s declaration where let and const cannot be accessed. Accessing them throws a ReferenceError.

How do I check a variable’s type?

Use the typeof operator: typeof variable === 'string'.

What is the difference between console.log and document.write?

console.log outputs to the browser’s developer console (for debugging). document.write writes to the HTML page but is destructive — it overwrites the page if called after loading.

Try It Yourself

Here’s a complete HTML page you can save and run. It demonstrates variables, data types, and console output:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Basics Playground</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 2rem; }
    .output { background: #f4f4f4; padding: 1rem; border-radius: 5px; }
  </style>
</head>
<body>
  <h1>JavaScript Basics Sandbox</h1>
  <div class="output" id="output"></div>
  <script>
    // Your variables
    const firstName = 'Alice';
    let age = 25;
    const isDeveloper = true;

    // Get output element
    const out = document.getElementById('output');

    // Display data types
    out.innerHTML = `
      <p><strong>Name:</strong> ${firstName} (${typeof firstName})</p>
      <p><strong>Age:</strong> ${age} (${typeof age})</p>
      <p><strong>Is Developer:</strong> ${isDeveloper} (${typeof isDeveloper})</p>
    `;

    // Console demo
    console.log('Name:', firstName);
    console.log('Age:', age);
    console.table([firstName, age, isDeveloper]);
  </script>
</body>
</html>

What’s Next

Now that you understand JavaScript basics, move on to operators and expressions:

Lesson	Description
JavaScript Home	Back to the JavaScript hub
https://tutorials.dodatech.com/programming-languages/javascript/js-operators/	JavaScript Operators — arithmetic, comparison, logical
https://tutorials.dodatech.com/programming-languages/javascript/js-control-flow/	Control Flow — if/else, loops, switch
https://tutorials.dodatech.com/programming-languages/javascript/js-strings-numbers/	Strings, Numbers & Math — text and number manipulation
Node.js for Beginners	Run JavaScript outside the browser

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.

What’s Next

Congratulations on completing this Js Basics tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Next JavaScript Operators Explained — Step-by-Step Guide with Examples

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse JavaScript Tutorials

JavaScript Basics Explained — Complete Beginner's Guide

What You’ll Learn

Why JavaScript Basics Matters

Learning Path

What Is JavaScript?

Where Does JavaScript Run?

Your First JavaScript

Variables: Labeled Boxes for Data

Three Ways to Declare

Variable Naming Rules

Data Types: The Seven Primitives

Checking Types with typeof

Console Output

Strict Mode

Common Mistakes

1. Using var instead of let or const

2. Confusing = (assignment) with === (comparison)

3. Forgetting to declare variables

4. Thinking const means “immutable”

5. Using == instead of ===

6. Confusing undefined vs null

Practice Questions

FAQ

Try It Yourself

What’s Next

What’s Next

Checking Types with `typeof`

1. Using `var` instead of `let` or `const`

2. Confusing `=` (assignment) with `===` (comparison)

4. Thinking `const` means “immutable”

5. Using `==` instead of `===`

6. Confusing `undefined` vs `null`