JavaScript Explained: The Language That Runs the Whole Web

Introduction

JavaScript is the only language that runs natively in every web browser, and thanks to Node.js (covered in an earlier post) it also runs on servers. That makes it the most widely deployed programming language in the world. The earlier async/await post covered waiting for things; this one covers the fundamentals everything else is built on.

Variables: let, const, and the var you should avoid

Modern JavaScript has two ways to declare a variable, and the choice matters:

let score = 0;
score = 10; // Fine — let can be reassigned
const name = "Sara";
// name = "Ali"; // Error — const cannot be reassigned
// var exists for historical reasons. Avoid it: it leaks out of blocks
// in surprising ways that let and const do not.

Use const by default, let when you know the value will change, and forget var exists. That single habit prevents a whole class of bugs.

Functions: the building blocks

Functions in JavaScript are values, just like numbers and strings — you can store them, pass them around, and return them from other functions. That one idea powers callbacks, event handlers, and most of modern web development:

function greet(name) {
  return `Hello, ${name}!`;
}
const greetArrow = (name) => `Hello, ${name}!`;
console.log(greet("Sara"));       // Hello, Sara!
console.log(greetArrow("Ali"));   // Hello, Ali!

Arrow functions (=>) are a shorter way to write the same thing, and they are now the standard style in React and most modern codebases. The backtick template literal (`Hello, ${name}!`) inserts variables directly into text — the same interpolation idea as C# and Swift.

Arrays and objects: the two containers

Almost all JavaScript data lives in two shapes. Arrays hold ordered lists; objects hold named values:

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2); // [2, 4, 6]
const user = { name: "Sara", age: 25 };
console.log(user.name); // Sara

map transforms every item in an array with a small function — the same idea as LINQ's Select in C# and Python's list comprehensions. Learn map, filter, and find, and you can read most modern JavaScript.

The event loop, in thirty seconds

JavaScript runs one thing at a time, yet web pages stay responsive. The trick is the event loop: slow work (like fetching data) is handed off, and when it finishes, its callback is queued to run. That is why async/await works, why buttons stay clickable during a download, and why you should never write a long blocking loop on the main thread.

Takeaway

const by default, let when it changes, functions as values, arrays and objects as your two containers, and the event loop keeping everything responsive. Those five ideas are the foundation under React, Vue, Angular, Node, and every framework in this series.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and — unusually for a systems language — genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally us...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls — everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them — each a widget, composed by nesting. Layout widgets (like Row, Column, ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small — fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy — threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait — it st...
Read more