JavaScript Glossary for Beginners

JavaScript Glossary for Beginners

1. Variable A container for storing data values that can be changed.

let age = 25;
age = 26; // Value can be changed

2. Constant A container for storing data values that cannot be changed after declaration.

const PI = 3.14159;
PI = 3.14; // This would cause an error

3. Data type The classification of data that tells the compiler or interpreter how to use that data.

// JavaScript has several data types:
let stringType = "Hello"; // String
let numberType = 42;      // Number
let booleanType = true;   // Boolean
let undefinedType;        // Undefined
let nullType = null;      // Null
let arrayType = [1, 2, 3];// Array
let objectType = {};      // Object

4. String A sequence of characters enclosed in single or double quotes.

let greeting = "Hello, World!";
let name = 'Alice';

5. Number A numeric data type that includes integers and floating-point numbers.

let integer = 42;
let floatingPoint = 3.14;

6. Boolean A logical data type that can have only two values: true or false.

let isRaining = true;
let isSunny = false;

7. Undefined A variable that has been declared but not assigned a value.

let undefinedVariable;
console.log(undefinedVariable); // Output: undefined

8. Null A special value that represents "nothing" or "no value".

let emptyValue = null;

9. Array An ordered list of values enclosed in square brackets.

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

10. Object A collection of key-value pairs enclosed in curly braces.

let person = {
  name: "John",
  age: 30,
  isStudent: false
};

11. Function A reusable block of code that performs a specific task.

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!

12. Operator Symbols that perform operations on variables and values.

let sum = 5 + 3;  // Addition operator
let product = 4 * 2;  // Multiplication operator

13. Conditional statement Code structures that execute different actions based on specified conditions.

let age = 18;
if (age >= 18) {
  console.log("You can vote!");
} else {
  console.log("You're too young to vote.");
}

14. Loop A control structure that repeats a block of code multiple times.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

15. Console.log() A method used to output messages to the console for debugging.

console.log("This is a debug message");

16. Alert() A method that displays a dialog box with a message and an OK button.

alert("Hello, World!");

17. Prompt() A method that displays a dialog box asking the user to input some text.

let name = prompt("What's your name?");
console.log("Hello, " + name);

18. Comment Text in the code that is ignored by the JavaScript engine, used for explanations.

// This is a single-line comment

/*
This is a
multi-line comment
*/

19. Semicolon A character used to separate JavaScript statements.

let x = 5; let y = 10; let z = x + y;

20. Camel case A naming convention where the first word is lowercase and subsequent words start with uppercase.

let firstName = "John";
let lastName = "Doe";

21. Concatenation The process of combining two or more strings.

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // "John Doe"

22. Template literal A way to create strings that allows embedded expressions and multi-line strings.

let name = "Alice";
let greeting = `Hello, ${name}!
Welcome to JavaScript.`;

23. Comparison operator Operators used to compare two values or expressions.

let x = 5;
let y = 10;
console.log(x < y);  // true
console.log(x === 5); // true

24. Logical operator Operators used to combine or manipulate boolean values.

let isAdult = true;
let hasLicense = false;
console.log(isAdult && hasLicense); // false (AND)
console.log(isAdult || hasLicense); // true (OR)

25. Assignment operator Operators used to assign values to variables.

let x = 5;  // Simple assignment
x += 3;     // Add and assign (x is now 8)
x *= 2;     // Multiply and assign (x is now 16)

26. If statement A conditional statement that executes a block of code if a specified condition is true.

let age = 18;
if (age >= 18) {
  console.log("You're an adult");
}

27. Else statement Used with an if statement to execute a block of code when the if condition is false.

let age = 16;
if (age >= 18) {
  console.log("You're an adult");
} else {
  console.log("You're a minor");
}

28. Else if statement Used to specify a new condition if the first condition is false.

let score = 75;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}

29. Switch statement A control flow statement that executes different code blocks based on different cases.

let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Start of the week");
    break;
  case "Friday":
    console.log("End of the work week");
    break;
  default:
    console.log("Midweek");
}

30. For loop A loop that repeats a block of code a specified number of times.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

31. While loop A loop that executes a block of code as long as a specified condition is true.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

32. Do...while loop A loop that executes a block of code once before checking the condition, then repeats as long as the condition is true.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

33. Break statement Used to exit a loop prematurely.

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}

34. Continue statement Skips the rest of the current iteration and continues with the next one.

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}

35. Array method Built-in functions that can be used on arrays.

let fruits = ["apple", "banana", "orange"];
fruits.push("grape");  // Adds an element to the end
fruits.pop();  // Removes the last element
fruits.forEach(fruit => console.log(fruit));  // Iterates over elements

36. String method Built-in functions that can be used on strings.

let str = "Hello, World!";
console.log(str.toLowerCase());  // "hello, world!"
console.log(str.split(", "));  // ["Hello", "World!"]
console.log(str.length);  // 13

37. Math object An object that provides mathematical operations and constants.

console.log(Math.PI);  // 3.141592653589793
console.log(Math.round(4.7));  // 5
console.log(Math.random());  // Random number between 0 and 1

38. Date object An object that represents a single moment in time.

let now = new Date();
console.log(now.getFullYear());  // Current year
console.log(now.getMonth());  // Current month (0-11)

39. Return statement Used to specify the value that a function should return.

function add(a, b) {
  return a + b;
}
console.log(add(5, 3));  // 8

40. Parameter A variable in a function definition that represents an input value.

function greet(name) {  // 'name' is a parameter
  console.log("Hello, " + name);
}

41. Argument The actual value passed to a function when it is called.

function greet(name) {
  console.log("Hello, " + name);
}
greet("Alice");  // "Alice" is an argument

42. Scope The context in which variables are declared and can be accessed.

43. Global scope Variables declared outside any function or block, accessible from anywhere in the code.

let globalVar = "I'm global";
function testScope() {
  console.log(globalVar);  // Accessible
}

44. Local scope Variables declared inside a function, only accessible within that function.

function testScope() {
  let localVar = "I'm local";
  console.log(localVar);  // Accessible
}
// console.log(localVar);  // This would cause an error

45. Block scope Variables declared inside a block (like in an if statement or loop), only accessible within that block.

if (true) {
  let blockVar = "I'm in a block";
  console.log(blockVar);  // Accessible
}
// console.log(blockVar);  // This would cause an error

46. Hoisting JavaScript's behavior of moving declarations to the top of their scope.

console.log(x);  // undefined (not an error)
var x = 5;

// The above is interpreted as:
// var x;
// console.log(x);
// x = 5;

47. Callback function A function passed as an argument to another function, to be executed later.

function doSomething(callback) {
  console.log("Doing something");
  callback();
}
doSomething(() => console.log("Callback executed"));

48. Anonymous function A function without a name, often used as an argument to other functions.

let greet = function(name) {
  console.log("Hello, " + name);
};
greet("Alice");

49. Arrow function A concise way to write function expressions.

let add = (a, b) => a + b;
console.log(add(5, 3));  // 8

50. Ternary operator A shorthand way of writing an if-else statement in one line.

let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status);  // "Adult"

51. Truthy and falsy values Values that are considered true or false when evaluated in a boolean context.

// Falsy values: false, 0, "", null, undefined, NaN
// All other values are truthy
if ("hello") console.log("This will run");
if (0) console.log("This won't run");

52. Type coercion Automatic conversion of values from one data type to another.

console.log("5" + 3);  // "53" (string)
console.log("5" - 3);  // 2 (number)

53. Strict equality Compares values without type coercion.

console.log(5 === "5");  // false
console.log(5 === 5);    // true

54. Loose equality Compares values with type coercion.

console.log(5 == "5");  // true
console.log(5 == 5);    // true

55. DOM (Document Object Model) A programming interface for HTML and XML documents.

// Accessing and modifying DOM elements
document.body.style.backgroundColor = "lightblue";

56. Event listener A function that waits for a specific event to occur.

document.getElementById("myButton").addEventListener("click", function() {
  console.log("Button clicked!");
});

57. Event handler A function that runs when an event occurs.

function handleClick() {
  console.log("Button clicked!");
}
document.getElementById("myButton").onclick = handleClick;

58. querySelector() Selects the first element that matches a CSS selector.

let element = document.querySelector(".myClass");

59. getElementById() Selects an element by its ID.

let element = document.getElementById("myId");

60. createElement() Creates a new HTML element.

let newDiv = document.createElement("div");

61. appendChild() Adds a node to the end of the list of children of a specified parent node.

let newP = document.createElement("p");
document.body.appendChild(newP);

62. JSON (JavaScript Object Notation) A lightweight data interchange format.

let obj = {name: "John", age: 30};
let json = JSON.stringify(obj);  // Convert to JSON string
let parsed = JSON.parse(json);   // Parse JSON string

63. AJAX (Asynchronous JavaScript and XML) A technique for creating fast and dynamic web pages.

// Using XMLHttpRequest (old way)
let xhr = new XMLHttpRequest();
xhr.open("GET", "<https://api.example.com/data>", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

64. Fetch API A modern interface for making HTTP requests.

fetch("<https://api.example.com/data>")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

65. Promise An object representing the eventual completion or failure of an asynchronous operation.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});
promise.then(result => console.log(result));

66. Async/Await A way to write asynchronous code that looks synchronous.

async function fetchData() {
  try {
    let response = await fetch("<https://api.example.com/data>");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

67. Try...catch statement Used to handle exceptions (errors) in code.

try {
  // Code that might throw an error
  throw new Error("Oops!");
} catch (error) {
  console.error(error.message);
}

68. Throw statement Used to create custom errors.

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

69. Error object Represents an error when runtime error occurs.

try {
  throw new Error("Custom error message");
} catch (error) {
  console.log(error.name);    // "Error"
  console.log(error.message); // "Custom error message"
}

70. Destructuring assignment A way to unpack values from arrays or properties from objects into distinct variables.

let [a, b] = [1, 2];  // Array destructuring
let {x, y} = {x: 3, y: 4};  // Object destructuring

71. Spread operator Allows an iterable to be expanded in places where zero or more arguments or elements are expected.

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]

72. Rest parameter Allows a function to accept an indefinite number of arguments as an array.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4));  // 10

73. Default parameter Allows parameters to have predetermined values if no value or undefined is passed.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet();  // "Hello, Guest!"
greet("Alice");  // "Hello, Alice!"

74. Template tag function A function that can be used to modify the output of a template literal.

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    `${acc}${str}<span class="highlight">${values[i] || ''}</span>`, '');
}
let name = "Alice";
console.log(highlight`Hello, ${name}!`);
// "Hello, <span class="highlight">Alice</span>!"

75. Map object A collection of key-value pairs where both the keys and values can be of any type.

let map = new Map();
map.set("name", "John");
map.set(1, "number one");
console.log(map.get("name"));  // "John"

76. Set object A collection of unique values of any type.

let set = new Set([1, 2, 3, 3, 4]);
console.log(set.size);  // 4
set.add(5);
console.log(set.has(3));  // true

77. Symbol A unique and immutable primitive data type.

let sym1 = Symbol("description");
let sym2 = Symbol("description");
console.log(sym1 === sym2);  // false

78. Iterator An object that defines a next() method to access the next item in a collection.

let arr = [1, 2, 3];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next().value);  // 1

79. Generator function A function that can be paused and resumed, yielding multiple values.

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}
let gen = numberGenerator();
console.log(gen.next().value);  // 1

80. Module A way to organize and encapsulate code.

// math.js
export function add(a, b) {
  return a + b;
}

81. Import statement Used to import bindings from other modules.

import { add } from './math.js';
console.log(add(2, 3));  // 5

82. Export statement Used to export functions, objects, or primitive values from a module.

export const PI = 3.14159;
export function circumference(r) {
  return 2 * PI * r;
}

83. Closure A function that has access to variables in its outer (enclosing) lexical scope.

function outer() {
  let x = 10;
  return function inner() {
    console.log(x);
  };
}
let closureFn = outer();
closureFn();  // 10

84. Higher-order function A function that takes one or more functions as arguments or returns a function.

function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}
let double = multiplyBy(2);
console.log(double(5));  // 10

85. Pure function A function that always returns the same output for the same input and has no side effects.

function add(a, b) {
  return a + b;
}

86. Recursion A technique where a function calls itself to solve a problem.

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5));  // 120

87. Memoization An optimization technique that stores the results of expensive function calls.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) {
      return cache[key];
    }
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

88. Prototype The mechanism by which JavaScript objects inherit features from one another.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};
let person = new Person("Alice");
person.greet();  // "Hello, I'm Alice"

89. Inheritance A way to create a class as a child of another class.

class Animal {
  constructor(name) {
    this.name = name;
  }
}
class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

90. Class A template for creating objects, providing initial values and implementations.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
}

91. Constructor A special method for creating and initializing objects created within a class.

class Person {
  constructor(name) {
    this.name = name;
  }
}
let person = new Person("Alice");

92. Method A function that is a property of an object or class.

let person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};
person.greet();  // "Hello, I'm Alice"

93. Static method A method that belongs to the class itself rather than to instances of the class.

class MathOperations {
  static square(x) {
    return x * x;
  }
}
console.log(MathOperations.square(5));  // 25

94. Getter A method that gets the value of a specific property.

class Circle {
  constructor(radius) {
    this._radius = radius;
  }
  get diameter() {
    return this._radius * 2;
  }
}
let circle = new Circle(5);
console.log(circle.diameter);  // 10

95. Setter A method that sets the value of a specific property.

class Circle {
  constructor(radius) {
    this._radius = radius;
  }
  set radius(value) {
    if (value > 0) {
      this._radius = value;
    }
  }
}
let circle = new Circle(5);
circle.radius = 10;

96. This keyword A keyword that refers to the object it belongs to.

let person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};
person.greet();  // "Hello, I'm Alice"

97. Bind(), call(), and apply() methods Methods used to set the this value for a function.

function greet(greeting) {
  console.log(`${greeting}, I'm ${this.name}`);
}
let person = { name: "Alice" };
greet.call(person, "Hi");  // "Hi, I'm Alice"
greet.apply(person, ["Hello"]);  // "Hello, I'm Alice"
let boundGreet = greet.bind(person);
boundGreet("Hey");  // "Hey, I'm Alice"

98. Regular expression A pattern used to match character combinations in strings.

let pattern = /\\d+/;
console.log(pattern.test("123"));  // true
console.log("abc123def".match(pattern));  // ["123"]

99. Proxy object An object that wraps another object and intercepts operations.

let target = { x: 10, y: 20 };
let handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : 37;
  }
};
let proxy = new Proxy(target, handler);
console.log(proxy.x);  // 10
console.log(proxy.z);  // 37

100. Reflect API Provides methods for interceptable JavaScript operations.

let obj = { x: 1, y: 2 };
console.log(Reflect.has(obj, 'x'));  // true
Reflect.set(obj, 'z', 3);
console.log(obj.z);  // 3

Conclusion