JavaScript Features

In this tutorial, we will walk through the core features that make JavaScript practical and powerful. You will keep seeing these concepts throughout your learning journey, so this overview will make upcoming topics much easier.

Note: Each feature is explained in depth in later lessons. Treat this page like your quick reference whenever you need a refresher.

JavaScript is a high-level language, which means it provides abstractions that let you focus on what your program should do instead of managing hardware details such as memory addresses or CPU instructions.

Other high-level languages include Python, Java, and C#. They hide many low-level details, although each language still has its own syntax, rules, and learning curve.

// JavaScript reads almost like plain English
let ages = [12, 25, 17, 30, 15];

// Find all adults (18 and over) in one readable line
let adults = ages.filter(function(age) {
  return age >= 18;
});

console.log(adults); // [25, 30]

// A low-level language would require you to manually
// manage memory addresses and CPU register values.
// JavaScript handles all of that for you automatically.

When your JavaScript code runs, it uses memory. Sometimes, it creates things that are no longer needed. Garbage collection is how JavaScript engines automatically manage memory and clean up memory that is no longer reachable.

Imagine a self-cleaning kitchen. You cook (write code), and the leftovers (unused memory) get cleaned up for you. You do not manually free memory in JavaScript, which helps you avoid a whole category of bugs related to memory management.

// Step 1: Create an object and memory is allocated
let user = { name: "Alice", age: 30 };
console.log(user.name); // Alice

// Step 2: Remove the only reference to it
user = null;

// The object { name: "Alice", age: 30 } is now unreachable.
// JavaScript's garbage collector can reclaim that memory automatically.
// You do not control exactly when that cleanup happens.
console.log(user); // null

JavaScript does not require a manual compile step before you run it. It is executed by a JavaScript engine, which may interpret and compile code at runtime. Browsers use engines such as V8 (Chrome), SpiderMonkey (Firefox), and JavaScriptCore (Safari), and JavaScript also runs outside the browser in environments such as Node.js.

To improve speed, engines may use Just-In-Time (JIT) compilation. Frequently used code can be optimized while your program is running, so you get simple execution with better performance.

// JavaScript runs without a manual compile step

console.log("Line 1 runs first");
console.log("Line 2 runs second");
console.log("Line 3 runs third");

// JIT may optimize frequently used code behind the scenes.
// From your perspective: just write the code and run it.
let score = 42;
console.log("Score:", score); // Score: 42

JavaScript supports multiple programming styles (called "paradigms"). You are not locked into one way of writing code.

You can write procedural code (step-by-step instructions), object-oriented code (organizing code into reusable objects), or functional code (using small, reusable functions). This flexibility is one of JavaScript's biggest strengths.

// Three programming styles, all produce the same result: 120

// 1. Procedural: step-by-step instructions
let price = 100;
let tax = price * 0.2;
console.log("Procedural:", price + tax); // 120

// 2. Object-Oriented (OOP): data and logic grouped together
let order = {
  price: 100,
  taxRate: 0.2,
  total() { return this.price + this.price * this.taxRate; }
};
console.log("OOP:", order.total()); // 120

// 3. Functional: small, reusable pure functions
function addTax(p, rate) { return p + p * rate; }
console.log("Functional:", addTax(100, 0.2)); // 120

In JavaScript, objects can inherit properties and behaviors from other objects through something called a prototype. A prototype is essentially a template that an object can look up to.

Every object has a hidden link to its prototype (accessed via __proto__). When you try to use a property that doesn't exist on an object, JavaScript automatically checks its prototype, then that prototype's prototype, and so on. This chain is called "prototype-based inheritance." We'll cover this in detail later.

// Every object can inherit from another via its prototype

let animal = {
  type: "Animal",
  describe() {
    return "I am a " + this.type;
  }
};

// dog inherits from animal via the prototype chain
let dog = Object.create(animal);
dog.type = "Dog";
dog.bark = function() { return "Woof!"; };

console.log(dog.describe()); // "I am a Dog"  (inherited from animal)
console.log(dog.bark());     // "Woof!"        (dog's own method)

// Confirm the prototype link
console.log(Object.getPrototypeOf(dog) === animal); // true

In JavaScript, functions are treated like any other value. You can store a function in a variable, pass it as an argument, or return it from another function. This is what "first-class functions" means.

This makes powerful patterns possible, like higher-order functions and closures. We'll explore both in detail in the functions tutorial.

// Define a function
function greet(name) {
  return "Hello, " + name + "!";
}

// Assign the function to a variable
var myFunction = greet;

// Call the function using the variable
var result = myFunction("John");

// Output the result
console.log(result);

In JavaScript, variables do not have fixed types. Values have types, and a variable can hold a number now and a string later. The type is determined while the program runs, not when you write the code. This is called dynamic typing.

In languages like Java or C, once you say a variable is a number, it stays a number. In JavaScript, the same variable can later hold a different kind of value. This gives you flexibility, but it also means you need to be careful about unexpected type changes.

let x = 10; // x currently holds a number
x = "SimplyJavascript"; // now x holds a string
x = false; // now x holds a boolean

JavaScript code on the main thread runs one piece at a time. It is like a single-lane road: only one piece of JavaScript runs on that thread at any moment.

Other environments can use multiple threads, but JavaScript can still handle delayed work without blocking the main thread. Browsers and runtimes provide Web APIs, asynchronous programming, and Web Workers for waiting tasks and work that should run on a separate thread.

// On the main thread, JavaScript runs one step at a time

console.log("Task 1: Start");

let total = 0;
for (let i = 1; i <= 5; i++) {
  total += i; // each step happens one at a time
}

console.log("Task 2: Sum =", total); // Sum = 15
console.log("Task 3: Done");

// Output is always in this exact order:
// Task 1: Start
// Task 2: Sum = 15
// Task 3: Done

Even though JavaScript on the main thread runs one thing at a time, it does not always freeze when it encounters a slow task (like fetching data from a server). This is thanks to the event loop.

The event loop works like a queue coordinator. When a slow task is handed off to browser or runtime APIs, JavaScript can keep running other code. After the current JavaScript finishes, queued callbacks get their turn to run. This is part of "asynchronous programming", and it's what makes JavaScript feel fast and responsive.

// The event loop gives queued work a turn after current code finishes

console.log("1 - Start");

// setTimeout schedules work for later and does not block execution
setTimeout(function() {
  console.log("3 - Runs after a 2-second delay");
}, 2000);

console.log("2 - Runs immediately, doesn't wait for setTimeout");

// Output order:
// 1 - Start
// 2 - Runs immediately, doesn't wait for setTimeout
// 3 - Runs after a 2-second delay  (arrives 2 seconds later)

JavaScript runs in browsers, and it can also run outside browsers in environments such as Node.js. Code can work across many devices and operating systems when the environment provides a compatible JavaScript engine and the APIs that code uses.

// This browser example can run in many browsers and operating systems

// Read runtime info about the user's browser and platform
console.log("Browser:", navigator.userAgent);

// Detect if the user is on a mobile device
let isMobile = /Mobi|Android/i.test(navigator.userAgent);
console.log("Mobile device?", isMobile);

// This can work unchanged on:
// Chrome on Windows, Safari on iPhone,
// Firefox on Linux, Edge on Mac

• High-level: Reads like English. No need to manage hardware details.
• Garbage collected: Engines automatically manage memory and can reclaim unreachable values.
• Executed by an engine: JavaScript engines may interpret and compile code at runtime for speed.
• Multi-paradigm: Supports procedural, object-oriented, and functional programming styles.
• Prototype-based: Objects can inherit from other objects through a prototype chain.
• First-class functions: Functions can be stored in variables, passed to functions, and returned from functions.
• Dynamically typed: Variables do not have fixed types, so they can later hold different kinds of values.
• Single-threaded: On the main thread, JavaScript runs one piece at a time, while async APIs and workers help with other tasks.
• Non-blocking event loop: Coordinates when queued work gets a chance to run after current JavaScript finishes.
• Platform independent: Can run across environments that provide a compatible JavaScript engine and relevant APIs.

What's next? Now that you know what makes JavaScript special, let's start writing actual code in the next tutorial.

• Explain all the JavaScript features in detail?
• Explain the concept of automatic memory management through garbage collection. How does it benefit developers in languages like JavaScript?
• Differentiate between interpreted and compiled languages.
• How does JavaScript support multiple programming paradigms?
• Explain the concept of prototype-based inheritance in JavaScript. How does it differ from classical inheritance in languages like Java or C++?
• Define first-class functions in programming languages. How does JavaScript treat functions as first-class citizens, and what advantages does it offer?
• How does JavaScript's dynamic typing differ from statically typed languages?
• Explain what it means for JavaScript to be single-threaded. What are the implications of this for concurrency and performance in web applications?
• What is the event loop, and how does it help with asynchronous programming?
• Explain the significance of JavaScript being platform-independent.
• What is Just-In-Time compilation ? Explain benefits.