JavascriptReact js

JavaScript Basics Explained: Variables, Data Types & Functions with Examples

Javascript·21 March 2026

Share this article on social platforms or copy the direct link.

JavaScript Basics: Variables, Data Types and Functions Explained Simply

When you start learning JavaScript, everything comes down to a few core concepts. Variables, data types, and functions are the foundation of almost every piece of code you will write.

Whether you're preparing for interviews or building real projects, having a clear understanding of these basics makes everything easier later — especially when you move into React or backend development.

Strong fundamentals in JavaScript help you write better, cleaner, and more reliable code.

Understanding Variables (var, let, const)

Variables are used to store data. In JavaScript, you can declare variables using var, let, and const. Each of them behaves slightly differently, so it's important to know when to use which one.

Using var

var is function-scoped and allows re-declaration. Because of this flexibility, it can sometimes create unexpected bugs.

var name = "John";
var name = "Doe";

console.log(name); // Doe

Using let

let is block-scoped and is safer than var. You can update its value, but you cannot declare it again in the same scope.

let age = 25;
age = 30;

// let age = 40; // Error

Using const

const is also block-scoped, but its value cannot be changed once assigned.

const pi = 3.14;

// pi = 3.15; // Error

Data Types and Operators

JavaScript supports different types of data. Understanding these types helps you write correct and predictable code.

Common Data Types

String — text values like "Hello"
Number — numeric values like 10 or 3.14
Boolean — true or false
Array — list of values
Object — key-value pairs
Undefined — declared but not assigned
Null — intentionally empty

let name = "Divyansh";
let age = 22;
let isStudent = true;

Operators in JavaScript

Operators help you perform operations like calculations, comparisons, and logical checks.

Arithmetic: +, -, *, /
Comparison: ==, ===, !=, >, <
Logical: &&, ||, !

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a > b); // true
console.log(a === 10 && b === 5); // true

Functions in JavaScript

Functions allow you to reuse code. Instead of writing the same logic again and again, you can define it once and call it whenever needed.

Normal Function

function greet(name) {
  return "Hello " + name;
}

console.log(greet("Divyansh"));

Arrow Function

Arrow functions provide a shorter and cleaner syntax.

const greet = (name) => {
  return "Hello " + name;
};

const add = (a, b) => a + b;

Callback Function

A callback function is passed into another function and executed later.

function processUser(name, callback) {
  console.log("Processing...");
  callback(name);
}

function greetUser(name) {
  console.log("Hello " + name);
}

processUser("Divyansh", greetUser);

By understanding variables, data types, and functions clearly, you build a strong base for advanced JavaScript concepts and frameworks like React.

JavaScript Basics JavaScript Variables Data Types JavaScript JavaScript Functions JS Interview Questions

Explore more Javascript articles

Read more articles from the same category or open the full category archive directly.

Javascript

JavaScript ES6+ Interview Questions & Concepts (Destructuring, Spread, Rest)

Modern JavaScript is not about writing more code, it's about writing smarter code.

Javascript

JavaScript Arrays Explained with Examples Part 2 (Complete Beginner Guide)

Learn advanced JavaScript array methods with simple explanations and examples. This part covers flat, flatMap, findIndex, fill, copyWithin, Array.from, Array.isArray, and more.

Javascript

JavaScript Arrays Explained with Examples (Complete Beginner Guide)

Learn JavaScript Arrays step by step with simple explanations and examples. This cheat sheet covers array basics, methods, loops, searching, filtering, mapping, and common interview topics.

Javascript