Introduction to JavaScript - CSU677 - Shoolini U

Introduction to JavaScript

2024, September 6

What is JavaScript

JavaScript is a versatile programming language that allows developers to create dynamic, interactive, and engaging web experiences. It is a cornerstone of modern web development, enabling everything from simple animations to complex web applications.

Characteristics of JavaScript

1. Basics of JavaScript

The foundation of JavaScript programming consists of core concepts that are essential for building functional scripts.

1.1 Variables and Data Types

Variables are like containers that store data for use later in a script. The type of data stored in these containers can vary:

1.1.1 Primitive Data Types

Primitive data types are the simplest kinds of data in JavaScript. They include:

  • String: Represents text. For example, "Hello, World!".
  • Number: Represents numerical values. For example, 42.
  • Boolean: Represents a true or false value. For example, true or false.
  • Null: Represents the intentional absence of any object value. For example, null.
  • Undefined: Represents a variable that has been declared but not yet assigned a value. For example, let x; where x is undefined.
  • Symbol: Represents a unique identifier, often used in advanced programming scenarios.
1.1.2 Objects

Objects are collections of key-value pairs, where each key (or property) has a corresponding value. Objects can store multiple pieces of data under one entity:

  • Properties: Variables attached to an object. For example, in the object {name: "Alice", age: 30}, name and age are properties.
  • Methods: Functions attached to an object. For example, if an object person has a method greet, you can call person.greet() to perform a specific action.
  • Nested Objects: Objects within other objects. For example, {address: {city: "New York", zip: "10001"}}.
1.1.3 Arrays

Arrays are special objects used to store lists of values, which are ordered and indexed:

  • Elements: Individual items in an array. For example, in the array [1, 2, 3], 1, 2, and 3 are elements.
  • Indexing: The position of elements in an array, starting from 0. For example, arr[0] returns the first element.
  • Length: The number of elements in an array, accessible with arr.length.
  • Common Methods: Actions that can be performed on arrays, like push() (adding an element), pop() (removing the last element), and map() (applying a function to each element).

1.2 Operators

Operators are symbols that tell the computer to perform specific operations on variables or values:

1.2.1 Arithmetic Operators

Arithmetic operators perform basic mathematical operations:

  • Addition (+): Adds two numbers. For example, 5 + 3 equals 8.
  • Subtraction (-): Subtracts one number from another. For example, 5 - 3 equals 2.
  • Multiplication (*): Multiplies two numbers. For example, 5 * 3 equals 15.
  • Division (/): Divides one number by another. For example, 15 / 3 equals 5.
  • Modulus (%): Finds the remainder of division. For example, 5 % 2 equals 1.
1.2.2 Assignment Operators

Assignment operators assign values to variables:

  • Equal (=): Assigns the right-hand value to the left-hand variable. For example, let x = 10;.
  • Plus Equal (+=): Adds the right-hand value to the left-hand variable and assigns the result to the variable. For example, x += 5 is the same as x = x + 5.
  • Minus Equal (-=): Subtracts the right-hand value from the left-hand variable and assigns the result to the variable. For example, x -= 3 is the same as x = x - 3.
1.2.3 Comparison Operators

Comparison operators compare two values and return a Boolean (true or false) result:

  • Equal to (==): Checks if two values are equal. For example, 5 == '5' is true (loose comparison).
  • Strictly Equal to (===): Checks if two values are equal and of the same type. For example, 5 === 5 is true, but 5 === '5' is false (strict comparison).
  • Not Equal to (!=): Checks if two values are not equal. For example, 5 != 3 is true.
  • Greater than (>): Checks if the left-hand value is greater than the right-hand value. For example, 5 > 3 is true.
  • Less than (<)< /strong>: Checks if the left-hand value is less than the right-hand value. For example, 5 < 3 is false.
1.2.4 Logical Operators

Logical operators combine multiple conditions or invert a condition:

  • AND (&&): Returns true if both conditions are true. For example, true && false is false.
  • OR (||): Returns true if at least one condition is true. For example, true || false is true.
  • NOT (!): Inverts the condition. For example, !true is false.

1.3 Control Structures

Control structures allow us to control the flow of the program, deciding which code should be executed under certain conditions:

1.3.1 Conditional Statements

These statements execute different blocks of code based on whether a condition is true or false:

  • If Statement: Runs a block of code if a condition is true. For example, if (x > 10) { console.log('x is greater than 10'); }.
  • Else Statement: Runs a block of code if the preceding if statement's condition is false. For example, if (x > 10) { console.log('x is greater than 10'); } else { console.log('x is 10 or less'); }.
  • Else If Statement: Tests additional conditions if the previous if or else if conditions are false. For example, if (x > 10) { console.log('x is greater than 10'); } else if (x === 10) { console.log('x is exactly 10'); }.
  • Switch Statement: Evaluates an expression against multiple possible cases and executes the matching case's block. For example, switch (day) { case 1: console.log('Monday'); break; case 2: console.log('Tuesday'); break; }.
1.3.2 Loops

Loops allow us to repeat a block of code multiple times:

  • For Loop: Repeats a block of code a specific number of times. For example, for (let i = 0; i < 5; i++) { console.log(i); } will log numbers 0 through 4.
  • While Loop: Repeats a block of code as long as a condition is true. For example, while (x < 10) { x++; } will increment x until it reaches 10.
  • Do While Loop: Similar to the while loop, but it executes the block of code at least once, even if the condition is false. For example, do { x++; } while (x < 10);.
  • Break Statement: Exits the loop early if a certain condition is met. For example, for (let i = 0; i < 10; i++) { if (i === 5) break; } stops the loop when i equals 5.
  • Continue Statement: Skips the current iteration of the loop and proceeds to the next one. For example, for (let i = 0; i < 10; i++) { if (i === 5) continue; } skips logging the number 5.

1.4 Functions

Functions are reusable blocks of code that perform specific tasks. Once defined, they can be called multiple times with different inputs:

1.4.1 Function Declaration

A function declaration defines a function with a specific name and can be called later in the code:

  • Syntax: The basic syntax is function name(parameters) { // code to be executed }.
  • Calling Functions: You call a function by using its name followed by parentheses, passing arguments if necessary. For example, greet('Alice'); if greet is a function.
  • Return Statement: The return statement specifies the value that a function should output when it is called. For example, function add(a, b) { return a + b; }.
1.4.2 Function Expression

In a function expression, the function is assigned to a variable. This allows for anonymous functions:

  • Anonymous Functions: Functions without a name, often used in callbacks. For example, let greet = function() { console.log('Hello!'); };.
  • Immediate Invocation: An Immediately Invoked Function Expression (IIFE) runs as soon as it is defined. For example, (function() { console.log('Hello World!'); })();.
  • Hoisting Behavior: Unlike function declarations, function expressions are not hoisted, meaning they cannot be called before they are defined.
1.4.3 Arrow Functions

Arrow functions provide a shorter syntax for writing functions and have different behavior with this:

  • Simplified Syntax: Arrow functions use => to define the function. For example, const greet = () => { console.log('Hello!'); };.
  • Implicit Return: If the function body is a single expression, the return keyword can be omitted. For example, const add = (a, b) => a + b;.
  • No this Binding: Arrow functions do not have their own this, they inherit it from the surrounding context. This makes them particularly useful in callbacks.
1.4.4 Parameters and Arguments

Functions can accept inputs called parameters, and the actual values passed to them are called arguments:

  • Default Parameters: You can assign default values to parameters in case no argument is provided. For example, function greet(name = 'Guest') { console.log('Hello, ' + name); }.
  • Rest Parameters: Use ... to gather all remaining arguments into an array. For example, function sum(...numbers) { return numbers.reduce((a, b) => a + b); }.
  • Argument Length: arguments.length gives the number of arguments passed to the function.

2. JavaScript Features and Concepts

Beyond the basics, JavaScript offers advanced features and concepts that provide powerful tools for developers.

2.1 Objects and Object-Oriented Programming (OOP)

Objects in JavaScript are collections of properties and methods, allowing you to model more complex data structures and behaviors:

2.1.1 Object Literals

Object literals are a simple and direct way to create objects using curly braces:

  • Defining an Object: Objects are created using curly braces {}. For example, const person = {name: "Alice", age: 25};.
  • Accessing Properties: You can access object properties using dot notation person.name or bracket notation person['name'].
  • Adding/Updating Properties: You can add or update properties dynamically. For example, person.city = 'New York';.
  • Deleting Properties: You can remove properties using the delete keyword. For example, delete person.age;.
2.1.2 Constructor Functions

Constructor functions are templates for creating multiple similar objects:

  • Defining a Constructor: A constructor function uses the function keyword and capitalizes the first letter. For example, function Person(name, age) { this.name = name; this.age = age; }.
  • Creating Instances: You create new objects by calling the constructor with the new keyword. For example, const alice = new Person('Alice', 25);.
  • Adding Methods: Methods can be added inside the constructor or to the prototype. For example, Person.prototype.greet = function() { console.log('Hello, ' + this.name); };.
2.1.3 Prototypes

Prototypes allow objects to inherit properties and methods from other objects:

  • Prototype Chain: Every object in JavaScript has a prototype, which is another object it inherits properties from. This forms a chain up to Object.prototype.
  • Prototype Inheritance: Objects can share common properties or methods without duplication. For example, Person.prototype.greet = function() { console.log('Hello, ' + this.name); } allows all instances of Person to use greet.
  • Creating New Prototypes: You can create a new object with a specific prototype using Object.create(prototype).
2.1.4 Classes

ES6 introduced classes as a more intuitive way to work with objects and inheritance:

  • Class Syntax: Classes are defined using the class keyword. For example, class Person { constructor(name, age) { this.name = name; this.age = age; } }.
  • Methods in Classes: Methods are added directly within the class. For example, greet() { console.log('Hello, ' + this.name); }.
  • Inheritance with Classes: Classes can extend other classes, inheriting their properties and methods. For example, class Employee extends Person { constructor(name, age, jobTitle) { super(name, age); this.jobTitle = jobTitle; } }.
  • Static Methods: Static methods are called on the class itself, not on instances. For example, static create(name, age) { return new Person(name, age); }.

2.2 Asynchronous JavaScript

Asynchronous programming allows JavaScript to perform tasks like fetching data without blocking the main thread:

2.2.1 Callbacks

Callbacks are functions passed as arguments to other functions, executed after an operation completes:

  • Callback Function: A function passed as an argument to another function. For example, setTimeout(function() { console.log('Hello!'); }, 1000); where the first argument is the callback.
  • Nesting Callbacks: Callbacks can be nested, leading to "callback hell." For example, getUserData(function(data) { processData(data, function(result) { displayResult(result); }); });.
  • Error Handling in Callbacks: Errors in callbacks are usually handled by passing an error object as the first argument. For example, callback(err, data);.
2.2.2 Promises

Promises provide a cleaner way to handle asynchronous operations, avoiding callback hell:

  • Creating a Promise: A promise is created using the new Promise constructor. For example, const promise = new Promise((resolve, reject) => { // asynchronous code });.
  • Chaining Promises: Promises can be chained using .then() for successive operations. For example, promise.then(result => nextStep(result)).then(finalResult => console.log(finalResult));.
  • Error Handling with Promises: Errors are caught using .catch(). For example, promise.then(result => nextStep(result)).catch(error => console.error(error));.
  • Promise States: A promise can be in one of three states: pending, fulfilled, or rejected.
2.2.3 Async/Await

Async/Await provides a more readable and synchronous-looking way to handle promises:

  • Async Functions: A function declared with async returns a promise and can use await. For example, async function fetchData() { let data = await fetch(url); }.
  • Await Keyword: Pauses the execution of the async function until the promise resolves. For example, let result = await someAsyncFunction();.
  • Try/Catch with Async/Await: Errors in async functions are handled using try and catch. For example, try { let data = await fetchData(); } catch (error) { console.error(error); }.

2.3 DOM Manipulation

The DOM (Document Object Model) represents the structure of a web page. JavaScript can be used to manipulate the DOM, allowing for dynamic changes to the content and structure of a page:

2.3.1 Selecting Elements

To manipulate the DOM, you first need to select the elements you want to change:

  • getElementById: Selects an element by its ID. For example, document.getElementById('header');.
  • querySelector: Selects the first element that matches a CSS selector. For example, document.querySelector('.menu');.
  • querySelectorAll: Selects all elements that match a CSS selector and returns a NodeList. For example, document.querySelectorAll('.list-item');.
  • getElementsByClassName: Selects elements by their class name. For example, document.getElementsByClassName('item');.
2.3.2 Modifying Elements

Once selected, you can modify elements in various ways:

  • Changing Content: Use textContent or innerHTML to change the text or HTML inside an element. For example, element.textContent = 'Hello World';.
  • Changing Attributes: Use setAttribute to change an element's attributes. For example, element.setAttribute('src', 'image.jpg');.
  • Changing Styles: Modify an element's style using the style property. For example, element.style.color = 'red';.
  • Adding/Removing Classes: Use classList.add or classList.remove to add or remove CSS classes. For example, element.classList.add('active');.
2.3.3 Event Handling

Events are actions that occur in the browser, like clicks or key presses. JavaScript can handle these events:

  • Add Event Listener: Attach an event handler to an element using addEventListener. For example, button.addEventListener('click', () => { console.log('Button clicked!'); });.
  • Event Object: The event object contains information about the event, accessible in event handlers. For example, event.target refers to the element that triggered the event.
  • Prevent Default Behavior: Use event.preventDefault() to stop the default action, like submitting a form. For example, link.addEventListener('click', event => { event.preventDefault(); });.
  • Delegating Events: Event delegation allows handling events at a higher level, useful for elements created dynamically. For example, adding a click event listener to a parent element that checks the clicked child element.
2.3.4 Creating and Removing Elements

JavaScript can dynamically add or remove elements from the DOM:

  • Creating Elements: Use document.createElement to create a new element. For example, const newDiv = document.createElement('div');.
  • Appending Elements: Add the created element to the DOM using appendChild. For example, parentElement.appendChild(newDiv);.
  • Removing Elements: Remove an element from the DOM using removeChild or element.remove(). For example, parentElement.removeChild(childElement);.
  • Replacing Elements: Replace an existing element with a new one using replaceChild. For example, parentElement.replaceChild(newElement, oldElement);.

3. JavaScript in the Browser

JavaScript's integration with web browsers enables developers to create interactive and engaging web pages.

3.1 Browser APIs

Web browsers provide a variety of APIs (Application Programming Interfaces) that extend the functionality of JavaScript:

3.1.1 DOM API

The DOM API allows interaction with the structure of a web page:

  • DOM Traversal: Methods for navigating through the DOM, like parentNode, childNodes, firstChild, and lastChild.
  • DOM Manipulation: Methods for adding, removing, or altering elements in the DOM.
  • DOM Events: Handling user interactions like clicks, typing, and scrolling.
  • Querying the DOM: Searching the DOM using methods like getElementById, querySelector, and getElementsByClassName.
3.1.2 Fetch API

The Fetch API allows for making network requests to retrieve resources from the server:

  • Fetching Data: Using fetch(url) to send a request and receive a response.
  • Parsing JSON: Converting the response data into a usable format, typically JSON. For example, response.json().
  • Handling Errors: Checking the response status and handling errors. For example, using .catch() for failed requests.
  • Asynchronous Requests: Making requests without blocking the main thread, allowing the rest of the code to execute.
3.1.3 Canvas API

The Canvas API allows for drawing graphics on a web page:

  • Creating a Canvas: Use the <canvas> element to define a drawing area.
  • Drawing Shapes: Methods for drawing basic shapes like fillRect, strokeRect, clearRect, and beginPath.
  • Working with Colors: Setting fill and stroke colors using fillStyle and strokeStyle.
  • Drawing Text: Methods for drawing text on the canvas using fillText and strokeText.
  • Animating Graphics: Creating animations by repeatedly drawing and clearing shapes in a loop, often using requestAnimationFrame.
3.1.4 Geolocation API

The Geolocation API provides the geographic location of the user's device:

  • Getting Current Position: Use navigator.geolocation.getCurrentPosition to obtain the user's latitude and longitude.
  • Handling Position Data: Process the latitude and longitude to display location-based information or services.
  • Handling Errors: Catch errors like permission denied or location unavailable using error callbacks.
  • Tracking Position: Use watchPosition to monitor the user's position as it changes over time.

3.2 Event Loop

The event loop is a crucial part of JavaScript's runtime environment, allowing for asynchronous operations to be handled effectively:

3.2.1 Call Stack

The call stack keeps track of function calls in a LIFO (Last In, First Out) order:

  • Function Execution: When a function is called, it's added to the stack. Once it completes, it's removed from the stack.
  • Stack Overflow: If the stack gets too large (e.g., due to too many recursive calls), it can cause a stack overflow, crashing the program.
3.2.2 Web APIs

Web APIs are browser-provided functionalities that run in the background:

  • setTimeout and setInterval: Schedule code to run after a delay or at regular intervals.
  • DOM Events: Handle user interactions like clicks and keypresses asynchronously.
  • XHR and Fetch: Perform network requests to fetch resources or send data asynchronously.
3.2.3 Task Queue

The task queue holds tasks that are ready to run once the call stack is clear:

  • Event Callbacks: User interactions or API calls are placed in the queue to be processed when the stack is empty.
  • Promise Microtasks: Microtasks like Promise.then() are prioritized in the task queue and run before regular tasks.
3.2.4 Handling Events

JavaScript manages events asynchronously, ensuring smooth user interactions:

  • Event Delegation: Attaching a single event listener to a parent element to manage all child elements, reducing the number of event listeners.
  • Event Bubbling and Capturing: Events flow through the DOM in phases, first capturing (from the root to the target) and then bubbling (from the target back up). Use stopPropagation() to prevent bubbling.
  • Event Loop and UI Updates: UI updates are managed efficiently by the event loop, ensuring the interface remains responsive while processing background tasks.

3.3 Error Handling

Effective error handling ensures that JavaScript code can gracefully handle unexpected issues:

3.3.1 Try/Catch Statements

Try/Catch blocks are used to handle exceptions (errors) in JavaScript:

  • Try Block: Contains code that may throw an error. For example, try { let x = y; } will throw an error if y is undefined.
  • Catch Block: Executes if an error is thrown in the try block. For example, catch(error) { console.log(error.message); }.
  • Finally Block: An optional block that runs after the try and catch blocks, regardless of the outcome. Useful for cleanup code.
3.3.2 Throwing Errors

You can manually trigger (throw) errors using the throw statement:

  • Custom Error Messages: Use throw to create custom error messages. For example, throw new Error('Something went wrong!');.
  • Validating Input: Throw errors when input validation fails. For example, if (!username) { throw new Error('Username is required'); }.
  • Types of Errors: JavaScript has built-in error types like TypeError, ReferenceError, and SyntaxError.
3.3.3 Debugging Tools

Debugging tools help identify and fix errors in JavaScript code:

  • Browser Developer Tools: Most browsers have built-in developer tools for inspecting code, setting breakpoints, and viewing errors.
  • Breakpoints: Pauses code execution at a specific line, allowing you to inspect the state of the application.
  • Console: Use console.log() to output values and console.error() to highlight errors.
  • Source Maps: Maps the minified code to the original source code, making debugging easier in production environments.

4. Modern JavaScript Practices

With the evolution of JavaScript, modern practices and tools have emerged that enhance development efficiency and code quality.

4.1 ES6+ Features

ECMAScript 6 (ES6) and later versions introduced new syntax and features that simplify and improve JavaScript code:

4.1.1 Let and Const

let and const are block-scoped variables introduced in ES6:

  • Let: A variable that can be reassigned but is limited to the block in which it is declared. For example, let count = 1;.
  • Const: A variable that cannot be reassigned once initialized. For example, const pi = 3.14;.
  • Block Scope: Variables declared with let or const are not accessible outside the block in which they are defined.
  • Temporal Dead Zone: A behavior where variables declared with let or const cannot be accessed before their declaration in the code.
4.1.2 Template Literals

Template literals provide a more flexible way to work with strings:

  • String Interpolation: Embedding expressions within strings using ${expression}. For example, let message = `Hello, ${name}`;.
  • Multi-line Strings: Creating multi-line strings easily by simply adding new lines in the template literal. For example, let text = `Line 1\nLine 2`;.
  • Tagged Templates: A function that processes a template literal, allowing you to customize the output. For example, function tag(strings, ...values) {}.
4.1.3 Destructuring Assignment

Destructuring allows you to extract values from arrays or properties from objects into distinct variables:

  • Array Destructuring: Assigning array elements to variables. For example, const [a, b] = [1, 2]; assigns a to 1 and b to 2.
  • Object Destructuring: Extracting object properties into variables. For example, const {name, age} = person; assigns name and age from the person object.
  • Default Values: Providing default values during destructuring. For example, const {name = 'Guest'} = person;.
  • Nested Destructuring: Destructuring nested objects or arrays. For example, const {address: {city}} = person;.
4.1.4 Modules

Modules allow you to organize and share code across different files, making it easier to manage and maintain:

  • Exporting Modules: Export variables, functions, or classes from a module. For example, export const pi = 3.14;.
  • Importing Modules: Import exported entities into another module. For example, import { pi } from './math.js';.
  • Default Export: A single export that can be imported without curly braces. For example, export default function() {}.
  • Named Export: Multiple exports from a module that must be imported with the same name. For example, export { functionA, functionB };.
  • Dynamic Imports: Importing modules dynamically, often used for lazy loading. For example, import('./module.js').then(module => { /* use module */ });.

4.2 Testing and Debugging

Testing ensures that code works as expected, while debugging helps identify and resolve issues:

4.2.1 Unit Testing

Unit testing involves testing individual functions or components in isolation:

  • Test Cases: Writing test cases for each function to verify its behavior. For example, using a testing framework like Jest to write tests.
  • Mocking: Simulating external dependencies or functions to isolate the unit being tested. For example, mocking API calls.
  • Assertions: Verifying that the output of a function matches the expected result. For example, expect(sum(2, 3)).toBe(5);.
  • Test-Driven Development (TDD): Writing tests before writing the code, ensuring that code is written to pass the tests.
4.2.2 Integration Testing

Integration testing checks how different parts of the application work together:

  • Testing Interfaces: Verifying that different modules or components interact correctly. For example, testing the interaction between the front-end and back-end.
  • API Testing: Ensuring that the API returns the correct data and handles requests as expected. For example, using tools like Postman or testing frameworks.
  • End-to-End Testing: Simulating a complete user interaction from start to finish to ensure the entire system works as intended.
  • Continuous Integration (CI): Automating the testing process as part of the development workflow, ensuring that tests are run on every commit or build.
4.2.3 Debugging Tools

Debugging tools are essential for finding and fixing issues in your code:

  • Browser Developer Tools: Using the console, inspecting elements, setting breakpoints, and debugging scripts in real-time.
  • Breakpoints: Pausing code execution at specific lines to inspect variables and the call stack.
  • Watch Expressions: Monitoring specific variables or expressions to see how their values change over time.
  • Source Maps: Mapping minified or transpiled code back to the original source code to make debugging easier.
  • Debugging in IDEs: Integrated Development Environments (IDEs) like VSCode offer powerful debugging features directly in the editor.

4.3 Build Tools and Transpilers

Build tools and transpilers automate repetitive tasks and ensure code compatibility across different environments:

4.3.1 Webpack

Webpack is a module bundler that compiles JavaScript files and assets for deployment:

  • Entry Point: The main file or module from which Webpack starts building the dependency graph. For example, entry: './src/index.js'.
  • Loaders: Transformations applied to files before bundling. For example, using babel-loader to transpile ES6 code to ES5.
  • Plugins: Additional features that enhance Webpack's functionality. For example, the HtmlWebpackPlugin generates an HTML file that includes all bundles.
  • Output Configuration: Specifies where the compiled files should be saved. For example, output: { filename: 'bundle.js', path: __dirname + '/dist' }.
4.3.2 Babel

Babel is a transpiler that converts ES6+ code into a version compatible with older browsers:

  • Presets: Collections of plugins that enable Babel to transform specific types of syntax. For example, the @babel/preset-env preset converts modern JavaScript into a version that works in older environments.
  • Plugins: Extend Babel's capabilities to support additional features or syntax. For example, the @babel/plugin-transform-arrow-functions plugin converts arrow functions into regular functions.
  • Polyfills: Adds support for new JavaScript features in environments that do not support them natively. For example, babel-polyfill provides support for promises in older browsers.
  • Babel Configuration: Configuring Babel using a .babelrc file or within Webpack. For example, specifying presets and plugins for Babel to use.
4.3.3 NPM/Yarn

Package managers that help manage dependencies and scripts in JavaScript projects:

  • Installing Packages: Using npm install or yarn add to add dependencies to a project.
  • Package.json: A file that contains metadata about the project and its dependencies. For example, defining scripts, versioning, and dependencies.
  • Scripts: Automating tasks by defining scripts in package.json. For example, "scripts": { "start": "webpack-dev-server" }.
  • Versioning: Managing dependency versions to ensure compatibility. For example, using semver (semantic versioning) to specify version ranges.
  • Lock Files: Files like package-lock.json or yarn.lock that ensure consistent dependencies across different environments.