JavaScript 101: Concepts Every Developer Should Know

Ever feel like JavaScript is speaking a different language? You're not alone. After years of writing JS, I still discover concepts that make me go "Oh, THAT'S why it works that way!" Here are 101 fundamentals that actually matter.

JavaScript can be weird. It's the language where '5' + 3 equals '53' but '5' - 3 equals 2. But once you understand these core concepts, everything starts making sense. Think of this as your JavaScript survival guide.

Part 1: The Foundation (What JavaScript Actually Is)

1. JavaScript - The programming language of the web, now running everywhere from browsers to servers to mobile apps.

2. Web Browser - The environment where most JavaScript lives, handling user interactions and rendering web pages.

3. HTML - The markup language that structures web content. JavaScript makes it interactive.

4. ECMAScript (ES) - The standard that JavaScript follows. Think of it as the rulebook that gets updated every year.

5. Runtime - The environment where JavaScript code actually executes (browser, Node.js, etc.).

6. Scripting Language - A language that automates tasks within a runtime environment (as opposed to compiled languages).

7. Interpreted Language - JavaScript code is executed line-by-line by an interpreter, not pre-compiled.

8. V8 Engine - Google's powerhouse JavaScript engine that runs Chrome and Node.js.

9. Just-In-Time (JIT) Compilation - How modern JS engines optimize code while it's running for better performance.

10. Script Tag - The HTML element (<script>) that includes JavaScript in web pages.

Part 2: Variables & Data Types (The Building Blocks)

11. var - The old way to declare variables (function-scoped, avoid this).

var name = "Old school"; // Don't use this anymore

12. let - Block-scoped variable declaration (use this for variables that change).

let age = 25; // Can be reassigned

13. const - Block-scoped, read-only constant (prefer this when possible).

const isAwesome = true; // Cannot be reassigned

14. CamelCase - JavaScript's naming convention: firstName, getUserData, isLoggedIn.

15. Dynamically Typed - Variables can hold any type and change types during execution.

16. Primitive Types - The basic data types: undefined, null, boolean, number, string, symbol, bigint.

17. undefined - A variable that has been declared but not assigned a value.

let x; // x is undefined

18. null - Explicitly assigned "no value" (different from undefined).

let data = null; // Intentionally empty

19. string - Text data wrapped in quotes.

const message = "Hello World!";

20. number - Represents both integers and floating-point numbers.

const age = 25; const pi = 3.14159;

21. boolean - Represents true or false.

const isReady = true;

22. symbol - Unique and immutable primitive values (rarely used day-to-day).

const id = Symbol('user');

23. bigint - For integers larger than Number.MAX_SAFE_INTEGER.

const huge = 123456789012345678901234567890n;

24. object -– A data structure that stores key-value pairs and includes more complex types like arrays, functions, dates, and custom objects.

const person = { name: "John", age: 30 };

25. typeof - Operator to check the type of a variable.

typeof "hello"; // "string" 
typeof 42; // "number"

Part 3: Functions (The Workhorses)

26. Function Declaration - The traditional way to define functions (hoisted).

function greet(name) {
    return `Hello, ${name}!`;
}

27. Function Expression - Functions defined within expressions (not hoisted).

const greet = function(name) {
    return `Hello, ${name}!`;
};

28. Arrow Functions - Concise syntax with different this behavior.

const greet = (name) => `Hello, ${name}!`;

29. Anonymous Functions - Functions without names.

setTimeout(function() { console.log("Hello!"); }, 1000);

30. Parameters - Variables listed in the function definition.

function add(a, b) { // a and b are parameters  return a + b; }

31. Arguments - Actual values passed when calling a function.

add(5, 3); // 5 and 3 are arguments

32. Return - Exits a function and optionally returns a value.

function double(x) {  
  return x * 2; // Exits here and returns the value 
}

33. Scope - The context in which variables are accessible.

34. Global Scope - Variables accessible everywhere in your program.

const globalVar = "I'm everywhere!";

35. Local Scope - Variables only accessible within their function.

function myFunc() {  
  const localVar = "Only here!"; 
}

36. Block Scope - Variables declared with let/const within {} blocks.

if (true) {
    const blockVar = "Only in this block!";
}

37. Hoisting - JavaScript's behavior of moving declarations to the top.

console.log(myVar); // undefined (not error!) 
var myVar = 5;

38. Lexical Environment - The context in which a function was created.

Part 4: Advanced Function Concepts

39. Higher-Order Functions - Functions that take other functions as arguments or return them.

const numbers = [1, 2, 3];
numbers.map(x => x * 2); // map is a higher-order function

40. Closures - Functions that remember their lexical scope.

function createCounter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

41. Call Stack - Where JavaScript keeps track of function calls.

42. Heap - Memory region for dynamic allocation (where objects live).

43. this - Refers to the current execution context (tricky in JavaScript!).

const obj = {
    name: "John",
    greet() {
        console.log(`Hi, I'm ${this.name}`);
    }
};

44. bind - Creates a new function with a specific this value.

const boundGreet = obj.greet.bind(obj);

45. call - Invokes a function with a specific this value.

obj.greet.call(anotherObj);

46. apply - Like call, but takes arguments as an array.

Math.max.apply(null, [1, 2, 3]);

Part 5: Objects & Prototypes

47. Object - Collection of key-value pairs.

const person = {
    name: "John",
    age: 30,
    greet() { return "Hello!"; }
};

48. Prototype Chain - How objects inherit properties and methods.

49. Inheritance - Objects taking on properties/methods from other objects.

50. Object-Oriented Programming (OOP) - Programming paradigm based on objects.

51. Classes - Blueprints for creating objects (ES6 syntax sugar).

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

52. Constructor - Special method for creating and initializing objects.

class Dog {
    constructor(name) {
        this.name = name; // Constructor logic
    }
}

53. new - Keyword to create new object instances.

const dog = new Dog("Rex");

54. instanceof - Checks if an object is an instance of a class.

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}
MathUtils.add(2, 3); // 5

Part 6: Arrays & Data Structures

56. Array - Ordered collection of values.

const fruits = ["apple", "banana", "orange"];

57. Array Methods - Built-in functions for array manipulation.

58. push - Adds elements to the end of an array.

fruits.push("grape");

59. pop - Removes and returns the last element.

const last = fruits.pop();

60. map - Creates a new array by transforming each element.

const doubled = numbers.map(x => x * 2);

61. filter - Creates a new array with elements that pass a test.

const evens = numbers.filter(x => x % 2 === 0);

62. reduce - Reduces an array to a single value.

const sum = numbers.reduce((acc, x) => acc + x, 0);

63. forEach - Executes a function for each array element.

fruits.forEach(fruit => console.log(fruit));

64. find - Returns the first element that matches a condition.

const found = fruits.find(fruit => fruit.startsWith('a'));

65. Set - Collection of unique values.

const uniqueNumbers = new Set([1, 2, 2, 3]); // {1, 2, 3}

66. Map - Collection of key-value pairs where keys can be any type.

const userRoles = new Map(); userRoles.set("john", "admin");

67. WeakMap - Like Map, but keys must be objects and can be garbage collected.

68. WeakSet - Like Set, but only holds objects and allows garbage collection.

Part 7: Asynchronous JavaScript

69. Event Loop - JavaScript's mechanism for handling asynchronous operations.

70. Callback Functions - Functions passed as arguments to be executed later.

setTimeout(() => console.log("Hello!"), 1000);

71. Callback Hell - Nested callbacks that create hard-to-read code.

getData(function(a) {
    getMoreData(a, function(b) {
        // This gets messy quickly!
    });
});

72. Promises - Objects representing eventual completion of async operations.

const promise = fetch('/api/data'); promise.then(response => console.log(response));

73. Promise States - pending, fulfilled, or rejected.

74. then - Method to handle promise resolution.

promise.then(data => console.log(data));

75. catch - Method to handle promise rejection.

promise.catch(error => console.error(error));

76. Promise.all - Waits for all promises to resolve.

Promise.all([promise1, promise2, promise3])
    .then(results => console.log(results));

77. async - Keyword to declare an asynchronous function.

async function fetchData() {  // This function returns a promise }

78. await - Keyword to wait for a promise to resolve.

async function getData() {
    const response = await fetch('/api/data');
    return response.json();
}

79. try/catch - Error handling for async/await.

try {
    const data = await fetchData();
} catch (error) {
    console.error(error);
}

Part 8: Modern JavaScript Features

80. Destructuring - Unpacking values from arrays or objects.

const [first, second] = [1, 2, 3];
const { name, age } = person;

81. Spread Syntax - Expands iterables into individual elements.

const newArray = [...oldArray, 4, 5];
const newObj = { ...oldObj, newProp: 'value' };

82. Rest Parameters - Collects remaining arguments into an array.

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

83. Template Literals - String interpolation with backticks.

const message = `Hello, ${name}!`;

84. Optional Chaining - Safe property access with ?..

const street = user?.address?.street;

85. Nullish Coalescing - Default values with ?? (only for null/undefined).

const username = user.name ?? 'Anonymous';

86. Default Parameters - Default values for function parameters.

function greet(name = 'World') {
    return `Hello, ${name}!`;
}

Part 9: DOM & Web APIs

87. DOM (Document Object Model) - Interface for interacting with HTML.

88. document - The root object representing the web page.

console.log(document.title);

89. querySelector - Selects the first matching element.

const header = document.querySelector('h1');

90. querySelectorAll - Selects all matching elements.

const paragraphs = document.querySelectorAll('p');

91. getElementById - Selects element by ID.

javascript

const element = document.getElementById('myId');

92. addEventListener - Attaches event handlers to elements.

javascript

button.addEventListener('click', handleClick);

93. Event Object - Contains information about the triggered event.

function handleClick(event) {
    event.preventDefault();
    console.log(event.target);
}

94. innerHTML - Gets/sets HTML content of an element.

element.innerHTML = '<strong>Bold text</strong>';

95. textContent - Gets/sets text content (safer than innerHTML).

element.textContent = 'Safe text';

Part 10: Modules & Tools

96. ES Modules - JavaScript's official module system.

// export
export const PI = 3.14159;
export default function multiply(a, b) {
    return a * b;
}

// import
import multiply, { PI } from './math.js';

97. Default Export - One main export per module.

javascript

export default class MyClass {}

98. Named Exports - Multiple exports from a module.

export { add, subtract, multiply };

99. Dynamic Imports - Loading modules conditionally at runtime.

const mathModule = await import('./math.js');

100. Node.js - JavaScript runtime for server-side development.

101. npm - Node Package Manager for installing and managing dependencies.

npm install package-name

The Big Picture: Why These 101 Concepts Matter

Understanding these fundamentals isn't just about passing interviews—it's about writing code that actually works reliably. Here's the progression:

(1-25): Know what JavaScript is and how data works Functions

(26-46): Master the building blocks of JavaScript logic

(47-55): Organize and structure your code Arrays & Data

(56-68): Handle collections and data manipulation

(69-79): Deal with real-world timing and APIs

(80-86): Write cleaner, more readable code

(87-95): Make interactive web pages

(96-101): Organize larger applications

Final Thoughts

JavaScript might seem chaotic at first, but it's actually quite logical once you understand these 101 core concepts. The language has evolved tremendously—modern JavaScript is cleaner, more predictable, and more powerful than ever.

☕ Like this blog?

If this helped you master JavaScript fundamentals or just made you feel less confused about closures and hoisting, consider buying me a coffee:

coff.ee/ashishgogula

(I promise not to spend it all on JavaScript courses and VS Code extensions.)