Introduction to JavaScript Programming

• JavaScript is a high-level, interpreted programming language primarily used to enable interactive features on websites.
• It is an essential technology of the World Wide Web, alongside HTML and CSS.
• JavaScript allows developers to create dynamic and interactive web content like animations, form validations, and asynchronous data fetching.

Core Concepts

• Variables: Used to store data values, and declared using var, let, or const.
  • var has function or global scope.
  • let has block scope.
  • const is used for constants and also has block scope.
• Data Types: Several built-in data types are available.
  • Primitive data types:
    • String: Represents textual data.
    • Number: Represents numeric values.
    • Boolean: Represents true or false values.
    • Null: Represents the intentional absence of a value.
    • Undefined: Represents a variable that has been declared but not assigned a value.
    • Symbol: Represents a unique identifier (ES6).
    • BigInt: Represents integers of arbitrary length (ES11).
  • Complex data types:
    • Object: A collection of key-value pairs.
    • Array: An ordered list of values.
    • Function: A reusable block of code.
• Operators: Symbols that perform operations on values.
  • Arithmetic operators: +, -, *, /, %, **.
  • Assignment operators: =, +=, -=, *=, /=, %=.
  • Comparison operators: ==, ===, !=, !==, >, =, {}
    • == checks for equality of value (with type coercion).
    • === checks for equality of value and type (without type coercion).
  • Logical operators: && (AND), || (OR), ! (NOT).
  • Bitwise operators: Perform operations on the binary representation of values.
• Control Flow: Structures that control the order in which code is executed.
  • Conditional statements:
    • if, else if, else: Execute different blocks of code based on conditions.
    • switch: A multi-way branch statement.
  • Loops:
    • for: Executes a block of code a specified number of times.
    • while: Executes a block of code as long as a condition is true.
    • do...while: Executes a block of code once, and then repeats as long as a condition is true.
    • for...in: Iterates over the properties of an object.
    • for...of: Iterates over the values of an iterable object (arrays, strings, etc.).
• Functions: Reusable blocks of code that perform a specific task.
  • Function declaration: function myFunction(parameters) { /* code */ }
  • Function expression: const myFunction = function(parameters) { /* code */ }
  • Arrow functions: A more concise syntax for writing functions (ES6). const myFunction = (parameters) => { /* code */ }
  • Parameters: Input values passed to a function.
  • Arguments: The actual values passed to a function when it is called.
  • Return values: The value that a function returns after it has finished executing.
• Objects: Collections of key-value pairs, where keys are strings (or Symbols) and values can be any data type.
  • Object literal: const myObject = { key1: value1, key2: value2 }
  • Dot notation: Accessing object properties using myObject.key1.
  • Bracket notation: Accessing object properties using myObject['key1'].
  • Methods: Functions that are properties of an object.
• Arrays: Ordered lists of values.
  • Array literal: const myArray = [value1, value2, value3]
  • Accessing elements: Using index numbers, starting from 0. myArray
  • Array methods: Functions that perform operations on arrays, such as push, pop, shift, unshift, slice, splice, concat, join, indexOf, forEach, map, filter, reduce.
• DOM (Document Object Model): A programming interface for HTML and XML documents.
  • Allows JavaScript to access and manipulate the content, structure, and style of a webpage.
  • document object: Represents the entire HTML document.
  • Selecting elements: document.getElementById, document.getElementsByClassName, document.getElementsByTagName, document.querySelector, document.querySelectorAll.
  • Modifying elements: Changing content, attributes, and styles of HTML elements.
  • Events: Actions or occurrences that happen in the browser, such as clicks, mouseovers, and form submissions.
  • Event listeners: Functions that are executed when a specific event occurs. addEventListener
• Events: Actions or occurrences that happen in the browser.
  • Common events: click, mouseover, mouseout, keydown, keyup, submit, load.
  • Event listeners: Functions that are executed when a specific event occurs.
  • Event handlers: Functions assigned to specific events, often defined directly in HTML or through JavaScript.
  • Event Propagation: The order in which events are received when one element is nested inside another element.
    • Bubbling: The event is first captured and handled by the innermost element and then propagated to outer elements.
    • Capturing: The event is first captured by the outermost element and propagated to the inner elements.
  • preventDefault(): Prevents the default behavior of an event.
  • stopPropagation(): Stops the event from propagating up or down the DOM tree.
• Asynchronous JavaScript: Allows JavaScript to perform tasks without blocking the main thread.
  • Callbacks: Functions that are executed after an asynchronous operation has completed.
  • Promises: Objects that represent the eventual completion (or failure) of an asynchronous operation.
    • States: Pending, fulfilled, rejected.
    • then(): Method to handle the fulfilled state.
    • catch(): Method to handle the rejected state.
    • finally(): Method that is always executed, regardless of the promise's state.
  • Async/Await: Syntactic sugar for working with promises (ES8).
    • async: Keyword used to define an asynchronous function.
    • await: Keyword used to pause the execution of an asynchronous function until a promise is resolved.
• Closures: A function that has access to the variables in its outer (enclosing) scope, even after the outer function has returned.
  • Allow you to create private variables and maintain state.
• Scope: Determines the accessibility of variables.
  • Global scope: Variables declared outside of any function.
  • Function scope: Variables declared inside a function (using var).
  • Block scope: Variables declared inside a block (using let or const).
• Hoisting: A JavaScript mechanism where variable and function declarations are moved to the top of their scope before code execution.
  • Variables declared with var are hoisted and initialized with undefined.
  • Variables declared with let and const are hoisted but not initialized, resulting in a "temporal dead zone" until the variable is declared.
  • Function declarations are hoisted completely, allowing you to call them before they are defined in the code.
• Modules: A way to organize code into reusable units.
  • ES Modules: The standard module system for JavaScript (ES6).
    • import: Used to import modules or specific exports from modules.
    • export: Used to export functions, objects, or primitive values from a module.
  • CommonJS: An older module system used primarily in Node.js.
    • require(): Used to import modules.
    • module.exports: Used to export modules.
• Error Handling: Techniques for handling errors in JavaScript code.
  • try...catch: A statement that allows you to handle exceptions.
  • throw: A statement that allows you to throw custom exceptions.
  • finally: A block of code that is always executed after the try and catch blocks, regardless of whether an exception was thrown.
• Regular Expressions: Patterns used to match character combinations in strings.
  • Creating regular expressions: Using the /pattern/ literal or the RegExp constructor.
  • Methods: test(), exec(), match(), replace(), search(), split().
• JSON (JavaScript Object Notation): A lightweight data-interchange format.
  • Used to transmit data between a server and a web application.
  • JSON.stringify(): Converts a JavaScript object to a JSON string.
  • JSON.parse(): Converts a JSON string to a JavaScript object.
• Storage: Mechanisms to persist data in the browser.
  • Local Storage: Stores data with no expiration date.
    • localStorage.setItem(key, value): Stores a key-value pair.
    • localStorage.getItem(key): Retrieves a value by key.
    • localStorage.removeItem(key): Removes a key-value pair.
    • localStorage.clear(): Clears all stored data.
  • Session Storage: Stores data for one session (data is lost when the browser tab is closed).
    • sessionStorage.setItem(key, value)
    • sessionStorage.getItem(key)
    • sessionStorage.removeItem(key)
    • sessionStorage.clear()
  • Cookies: Small text files stored on the user's computer.
    • Used to remember information about the user.
    • Can be accessed by the server and the client.
    • Have expiration dates.
• Prototypal Inheritance: A mechanism in JavaScript where objects inherit properties and methods from other objects.
  • Every object has a prototype object.
  • When trying to access a property on an object, JavaScript first looks for the property on the object itself.
  • If the property is not found, JavaScript looks for the property on the object's prototype.
  • This process continues up the prototype chain until the property is found or the end of the chain is reached.
• ECMAScript (ES): The standardization of JavaScript.
  • New versions of ECMAScript are released regularly, introducing new features and improvements to the language.
  • ES5, ES6 (ES2015), ES7 (ES2016), ES8 (ES2017), ES9 (ES2018), ES10 (ES2019), ES11 (ES2020), ES12 (ES2021), ES13 (ES2022), ES14 (ES2023) are some of the versions of ECMAScript.