What is JavaScript?
JavaScript is a lightweight, integrated, and object-oriented programming language especially suited to building dynamic web pages or web applications. The best part of JavaScript is that it is used to build both front-end and back-end web applications.
The Ternary Operator
In JavaScript, ternary operator is used in place of if/else statement. Syntax: condition ? trueExpression : falseExpression Example: Input: let result = (10 > 0) ? true : false; Output: true
- The true value lies between “?” & “:” and is executed if the condition returns true. Similarly, the false value lies after “:” and is executed if the condition returns false.
Spread Operator
It is denoted by three dots “...” followed by an expression or an iterable. It can be used to concatenate arrays, create shallow copies of arrays, convert strings into arrays of characters, merge or clone objects, and dynamically pass values into functions or constructors, among other use cases.
Syntax and Usage Spread Operator:
Concatenating Arrays:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; // Concatenate arrays using spread operator const concatenatedArr = [...arr1, ...arr2]; console.log(concatenatedArr); // Output: [1, 2, 3, 4, 5, 6]Spreading Strings
const str = "Hello"; // Spread characters of a string into an array const charArray=[...str];console.log(charArray);// Output: ['H', 'e', 'l', 'l', 'o']Merging and Cloning Objects
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; // Merge objects using spread operator const mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj); // Output: { a: 1, b: 3, c: 4 } // Clone an object using spread operator const clonedObj = { ...obj1 }; console.log(clonedObj); //Output:{ a: 1, b: 2 }Understanding Spread Operator and Shallow Copying
const originalArray [[1, 2, 3, 4], 12]; const copiedArray =[...originalArray]; copiedArray[0].push(99); console.log(originalArray); // Output: [[1, 2, 3, 4, 99], 12] console.log(copiedArray); // Output: [[1, 2, 3, 4, 99], 12] In this code, originalArray is an array with four elements. Using the spread operator, we create a new array copiedArray and spread the elements of originalArray into it. Then, we modify the first element of copiedArray by adding 99 with the push method. When you output the copiedArray, the output will show that 99 has been added to the first element’s array, but there is an issue with shallow coping which the spread operator does. The change in copiedArray affects the originalArray.Arrow Function
Arrow function {()=>} is concise way of writing JavaScript functions in shorter way. Arrow functions are anonymous functions i.e. functions without a name but they are often assigned to any variable.
Syntax:- let func = (arg1, arg2, ..., argN) => expression;
func that accepts arguments arg1..argN, then evaluates the expression on the right side with their use and returns its result.Example:- let sum = (a, b) => a + b; /* above arrow function is a shorter form of: let sum = function(a, b) { return a + b; }; alert( sum(1, 2) ); //output: 3 */
As you can see, (a, b) => a + b means a function that accepts two arguments named a and b. Upon the execution, it evaluates the expression a + b and returns the result.
Promises
Just like in real life, when you keep your promise then in result you feel satisfied. On the contrary, when you don’t fulfill your promise, you or even the people around you feel dissatisfied. In a similar vein, when you make a promise in JavaScript, two things happen: resolved or rejected. Moreover, there are 3 states in promise: pending, resolved and rejected.
Fetch API
The JavaScript fetch() method is used to fetch resources from a server. It returns a Promise that resolves to the Response object representing the response to the request. The fetch method can also make HTTP requests- GET request (to get data) and POST request (to post data). Fetch also integrates advanced HTTP concepts such as CORS and other extensions to HTTP.
// API for get requests let fetchRes = fetch( "https://jsonplaceholder.typicode.com/todos/1"); // FetchRes is the promise to resolve it by using .then() method fetchRes .then(res => res.json()).then(d => { console.log(d) })
The Fetch API is a modern interface used in JavaScript that allows you to make network requests to load resources from a server. It is a powerful and flexible feature that returns a promise, making it easier to perform asynchronous operations, such as retrieving data (GET request) or submitting data (POST request) to a server. This is crucial for developing web applications that interact with servers for data retrieval and submission without refreshing the web page, leading to a smoother user experience.
Conclusion:
By understanding and skillfully applying these features, developers can create dynamic, efficient, and responsive web applications. Imagine a real-world scenario where you're tasked with developing a user-friendly task management application. By employing ternary operators, you can elegantly handle user input validation. The spread operator allows you to seamlessly merge or clone task lists, enhancing the app's functionality. Arrow functions can be used to concisely implement callbacks for asynchronous operations, such as retrieving user data. Promises, in conjunction with the Fetch API, enable efficient handling of API requests to load and update tasks from a server without blocking the user interface. By integrating these concepts, you craft a seamless experience for users, showcasing the power and versatility of JavaScript in web development projects.