JavaScript is a powerful and flexible programming language for the web that is widely used to make websites interactive and dynamic. JavaScript can also able to change or update HTML and CSS dynamically. JavaScript can also run on servers using tools like Node.js, allowing developers to build entire applications with it. what-is-javascript What is JavaScript In this tutorial we will see some of the important concepts to start with JavaScript JavaScript Variables JavaScript variables are containers for storing data in memory, allowing you to reference and manipulate it. They can be declared using var, let, or const, each with different scoping and usage rules. let a = [ 1, 2, 3 ]; // Array const s = "Hello"; // String var n = 42; // Number console.log(a); console.log(s); console.log(n); Output [ 1, 2, 3 ] Hello 42 Data Types JavaScript includes primitive data types such as Number, String, Boolean, Null, Undefined, and Symbol. It also has non-primitive data types like Array, Object, and Function. Primitive types are passed by value, meaning changes to a copied value do not affect the original. Non-primitive types are passed by reference, meaning changes to the reference affect the original object. let n = 10; // number let s = "Hello GFG"; // string let b = true; // boolean let f = function() { console.log("Hello GFG"); } // function let arr = [ 1, 2, 3, 4, 5 ]; let obj = {name : "GFG"} console.log(typeof n); console.log(typeof s); console.log(typeof b); console.log(typeof f); console.log(typeof arr); // in javascript arrays are also objects console.log(typeof obj); Output number string boolean function object object Functions Functions in JavaScript are reusable blocks of code designed to perform a specific task. They help organize and simplify code by allowing you to call the same logic multiple times. function add(x, y) { return x + y; } console.log(add(5, 7)); Output 12 Control Statements Control structures in JavaScript handle decision-making with conditions and repeat tasks using loops. They help control the flow of your code based on logic. let n = 41; if (n > 40) { console.log("n is large"); } else { console.log("n is small"); } let a = [ 1, 2, 3 ]; for (let i = 0; i < a.length; i++) { console.log(a[i]); } Output n is large 1 2 3 Objects Objects in JavaScript are collections of key-value pairs used to store related data. They work by reference, meaning changes to the reference affect the original object. const obj = { name: "Manoj", age: 25 }; console.log(obj.name); Output Manoj Arrays Arrays in JavaScript are used to store multiple items in a single list. You can access each item using its position, called an index. Arrays in JavaScript can hold different types of data, such as numbers, strings, or even other arrays const a = [10, 20, 30]; a.push(40); console.log(a); Output [ 10, 20, 30, 40 ] Events Events in JavaScript are actions that happen in the browser, like a button click or a mouse move. You can use JavaScript to respond to these events and trigger specific actions.
Promises Promises are a way of handling asynchronous tasks in JavaScript. They are commonly used for tasks like data fetching and other operations that require waiting for a result, and they have three states: pending, fulfilled, and rejected. let promise = new Promise((resolve, reject) => { let s = "HELLO GFG"; if (s) { resolve(s); } else { reject("Some error Occured"); } } ) promise.then((data) => console.log(data)).catch((error) => console.log(error)); Output HELLO GFG Arrow Functions Arrow functions are a shorthand syntax for writing functions in JavaScript, using the => operator. They offer a more concise way to express functions, especially for single-expression functions. let add = (a, b) => { return a + b; } console.log(add(2, 3)); Output 5 DOM Manipulation DOM manipulation refers to the process of changing the structure, content, or style of HTML elements using JavaScript. It allows dynamic updates to a webpage without reloading the entire page. Classes in JavaScript A class is like a recipe for making objects. It tells you what ingredients (properties) and steps (actions) are needed to make something, and you can use the same recipe to make many objects that work the same way. class GFG { constructor(name) { this.name = name; } } const a = new GFG("GEEKS FOR GEEKS"); console.log(a.name); Output GEEKS FOR GEEKS Error Handling Error handling is the process of catching and managing errors in code to prevent crashes. It allows the program to continue running smoothly even when something goes wrong. try { let a = 10 / 0; if (a === Infinity) { throw new Error("Can not divide by zero"); } console.log(a) } catch (err) { console.log(err.message); } Output Can not divide by zero Dynamic Behavior of JavaScript In JavaScript, server-side behavior involves running code on the server (like with Node.js) to process requests and generate dynamic content. Client-side behavior happens in the browser, where JavaScript interacts with HTML and CSS to make the webpage interactive. JavaScript can handle both sides, sending and receiving data between the server and client for a seamless experience. Synchronus Behavior of JavaScript In JavaScript, synchronous behavior means tasks are executed line by line, blocking the program's flow until the task is completed. This means the code has to wait for one operation to finish before moving on to the next one. It’s used for operations that don't depend on asynchronous events, like simple calculations or data processing. // Function that simulates an asynchronous operation using setTimeout function delay() { console.log("Greeting will be displayed after 2 seconds..."); setTimeout(() => { console.log("Hello, after 2 seconds!"); }, 2000); } delay(); console.log("This is displayed immediately."); defer and async in JavaScript In JavaScript, defer and async are used to control the loading of external scripts. defer ensures the script is executed after the HTML is fully parsed, preserving the order of execution. async runs the script as soon as it's downloaded, without waiting for the HTML to finish parsing, which can disrupt the order.