Week 5 Flashcards

Question

What is a Self-Invoking Function (IIFE Function)?

Answer 1

A self-invoking function is an anonymous function that is invoked immediately after its definition. It is also known as the IIFE (Immediately Invoked Function Expression) function. It holds an anonymous function inside a set of parentheses (), which does the execution. Ex. ``` (function(){ // do this right now console.log("Look at me, I'm running"); })(); ```

Answer 2

A callback function is a function that gets executed after another function completes the execution. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors. JavaScript usually runs the code in sequential order (from top to bottom). If there is a case that code runs after some other execution, which is not happening in a sequence, this is called asynchronous programming. All functions in JavaScript are objects and a JavaScript function can be passed another function as an argument. ``` Ex. function funcOne(x) { alert("x = " + x); } ``` ``` function funcTwo(y, callback) { callback(y); } ``` funcTwo(2, funcOne);

Answer 3

A closure is a function that remembers and accesses the variables and arguments of its outer function even after the function return. The closure able to access the variables defined between its curly brackets, the outer function’s variables and the global variables. ``` Ex. function greeting() { var message = 'Hi'; ``` ``` function sayHi() { console.log(message); } ``` ``` return sayHi; } let hi = greeting(); hi(); // prints "hi" in the console. ```

Answer 4

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. In JavaScript, variable declarations made with var and function declarations made with the function keyword are hoisted - or moved - to the top of the scope in which they are declared when the JavaScript interpreter parses the code. This means that variables and functions can be used before they are even declared. Ex - Hoisting of Variables ``` //line 1 x = 1; document.getElementById("p1").innerHTML = x ; var x; ``` Ex - Hoisting of Functions alert(Sum(5, 5)); // output: 10 ``` function Sum(val1, val2) { return val1 + val2; } ``` Ex - Hoisting Functions Before Variables alert(UseMe); // displays the UseMe Function definition var UseMe = "UseMe Variable"; ``` function UseMe() { alert("UseMe function called"); } ```

Answer 5

== is used for comparison between two variables irrespective of the data type of variable. === is used for comparison between two variables but this will check strict type, which means it will check datatype and compare two values.

Answer 6

Type coercion is the process of converting a value from one data type to another data type. Explicit type coercion - We can explicitly convert the datatype of the variable. For example: Number('3'), String (123), Boolean(2) Implicit type coercion - JavaScript is a loosely-typed language, values can also be converted between different types automatically. It usually happens when you apply operators to values of different types. For example: '3' * '2', 2/’5', 123 + ''

Answer 7

In JavaScript, any expressions or value that results in boolean false value, are considered as Falsy. The falsy values/expressions in javascript are: Boolean false is false. Any empty string will be evaluated to false. Any undefined variable will be equal to false. Any null variable will be equal to false. Any numerical expression with result in NaN (not a number) will be equal to false. Any numerical expression with result in zero will be equal to false.

Answer 8

In JavaScript, any expression or value that results in boolean true value, are considered as Truthy. Any expression or value that is not falsy is considered truthy.

Answer 9

The Variable scope defines the lifetime and visibility of a variable. Each variable is associated with a scope. The variable can be accessed only within its scope.

Answer 10

Variables defined outside any function, block, or module have global scope. The global scope variables are accessed everywhere in the application. The global variable's lifetime is throughout the application. We can declare the global variables in a browser using the global window object.

Answer 11

The variable declared in a function is only visible inside that function. var is the keyword to define variable for a function-scope accessibility. These variables cannot be accessed or modified.

Answer 12

Block scope is the scope of the variables declared inside the {} (curly brackets). In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block. ``` Ex. function func(){ if(true){ var fruit1 = 'apple'; //exist in function scope const fruit2 = 'banana'; //exist in block scope let fruit3 = 'strawberry'; //exist in block scope ``` } console.log(fruit1); console.log(fruit2); // results error - due to it exist in block scope console.log(fruit3); // results error - due to it exist in block scope } foo(); Result apple error: fruit2 is not defined error: fruit3 is not defined

Answer 13

Lexical scope means that a variable defined outside a function can access the inside of another function defined after the variable declaration. The inner functions are lexically bound to the execution context of their outer functions. ``` Ex function func1(){ var animal1 = "Lion"; //exist in Lexical scope ``` function func2(){ //Inner Function var animal2 = "Tiger"; //exist in function scope console. log(animal1); console. log(animal2); } func2(); console.log(animal2); // results error - due to it exist in function scope } foo1(); Result Lion Tiger error: animal2 is not defined

Answer 14

JavaScript is a loosely typed scripting language. JavaScript allows strictness of code by using "use strict"; statement at the top of JavaScript code or in a function. The strict mode in JavaScript does not allow us to use undefined variables, reserved keywords as variable or function name, duplicate properties of an object, duplicate parameters of the function, assign values to read-only properties, Modifying arguments object, and Deleting an undeletable property. Strict mode can be applied to function level in order to implement strictness only in that particular function.

Answer 15

The this keyword is a reference variable that refers to the current object. - this alone: refers to a global Object. - this in a function: refers to the Global object [object Window]. - this in Event Handlers: refers to the HTML element that received the event - this in Object Method Binding: refers to the object.

Answer 16

Encapsulation means hiding information or data. The simplest way to create encapsulation in JavaScript is using closures. A closure can be created as a function with private state. When creating many closures sharing the same private state, we create an object. EX. ``` const Book = function(t, a) { let title = t; let author = a; ``` ``` return { summary : function() { console.log(`${title} written by ${author}.`); } } } const book1 = new Book('Hippie', 'Paulo Coelho'); book1.summary(); // Returns Hippie written by Paulo Coelho. ```

Answer 17

All JavaScript objects inherit properties and methods from a prototype. All JavaScript objects have a prototype. Browsers implement prototypes through the __proto__ property. In JavaScript, all functions are also objects, which means that they can have properties. Any time you create a function, it will automatically have a property called prototype. Thus, Functions also have a prototype property. When we call a function with new, it sets the returned object’s __proto__ property equal to the function’s prototype property. This is the key to inheritance. Inheritance in JavaScript is implemented through the prototype chain. Every normally created object, array, and function has a prototype chain of __proto__ properties ending with Object.prototype at the top. Ex. ``` let animal = { eats: true walk() { alert("Animal walk"); } }; let rabbit = { jumps: true __proto__: animal // sets animal to be a prototype of rabbit. }; ``` ``` // we can find both properties in rabbit now: alert( rabbit.eats ); // true alert( rabbit.jumps ); // true // walk is taken from the prototype rabbit.walk(); // Animal walk ``` In the above example, when alert tries to read property rabbit.eats, it’s not in rabbit but JavaScript follows the prototype reference and finds it in animal.Also the walk() method is automatically taken from the prototype.

Answer 18

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

Answer 19

JSON Object is a set of key/value pairs enclosed within curly braces. A key is a string enclosed in quotation marks. A value can be a string, number, boolean expression, array, or object. A key value pair follows a specific syntax, with the key followed by a colon followed by the value. Key/value pairs are separated by comma. ("name" : "Andy"). We can store multiple JSON Objects in arrays. ``` EX - Single JSON object var Book = { "id": 110, ‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬ "language": "Python", "author": ["John", "Ben"] }; ``` EX - JSON objects in array var student =[ ``` { "id":"01", "name": "Tom", "lastname": "Price" }, ``` ``` { "id":"02", "name": "Nick", "lastname": "Thameson" } ] ; ```

Answer 20

- Used to transmit data between the server and web application - JSON format helps transmit and serialize all types of structured data. - Allows us to perform asynchronous data calls without the need to do a page refresh. - Web services and Restful APIs use the JSON format to get public data.

Answer 21

An array is a variable that allows the programmer to store more than one value. Arrays in JavaScript are objects and thus consist of key/value pairs and inherit from the Array prototype. Like objects, array values can consist of JavaScript primitives, or other JavaScript objects, including arrays and functions. Arrays in JavaScript are dynamic meaning they can be resized as needed.

Answer 22

Allows us to remove a number of elements at a specific index. It can also allow us to replace those elements with something else. splice() returns an array containing all the values removed from the array.

Answer 23

The pop() method removes and returns the last element in an array

Answer 24

shift() method removes and returns the first element in an array.

Answer 25

The sort() method will sort an array "in-place". This means that the array will be modified and the original array will be sorted. The sort() method can take in a function that will compare objects and sort them to your preference. If no callback function is provided, each element is converted to a string and sorted in ascending order.

Answer 26

The indexOf() method returns the first index at which an element is present. lastIndexOf() returns the last index at which an element is present. If the element can't be found in the list, both will return the value -1.

Answer 27

The find() method returns the first element in an array for which the callback function returns a truthy value. The findIndex() method does the same but returns that element's index.

Answer 28

The filter() function takes a callback function and creates a new array that is the made up of elements for which the callback function returns a truthy value. This can be useful in situations where you wish to perform an operation on only a subset of elements in an array. The original array is not modified.

Answer 29

The map() function takes a callback function and creates a new array that is the result of calling the function on each element of the array. The original array is not modified.

Answer 30

The reduce() function takes a callback function and returns a single value that is the result of calling the function for each value in the array.

Answer 31

In JavaScript we make use of timing events when we are looking to automate tasks or run tasks after waiting a specific length. There are two key timing event methods in JavaScript and both are functions of the window object. These methods are setTimeout() and setInterval().

Answer 32

The setTimeout() function has the following signature: window.setTimeout(callbackFunction, milliseconds) This function executes the given callback function after waiting a specified number of milliseconds. If you are waiting on a setTimeout() to execute and then change your mind, you can do so with the clearTimeout() function. This function has the following signature: window.clearTimeout(timeoutVariable) If the callback function has not been executed when clearTimeout is called, the execution will be cancelled. For this to work, however, we need the timeoutVariable, which is the return value of the setTimeout() function.

Answer 33

setInterval() executes a function every on predefined intervals window.setInterval(callbackFunction, milliseconds) setInterval() will execute it's callback repeatedly with an interval or pause in milliseconds between executions. Like setTimeout(), if we wish to cancel the execution, we can use the function clearInterval(). window.clearInterval(intervalVariable)

Answer 34

When things go wrong in JavaScript, the result usually involves the creation of an error object. There are two ways an error object can be created: 1) Runtime error: An error that is created as a result of something wrong with the code, such as a SyntaxError or ReferenceError. 2) User-defined error: An error built as part of your code to represent a problem that can occur. Errors can have many fields depending on the implementation, however the standard defines an error as having a name and message field.

Answer 35

1) Try..Catch Block A try block allows you to execute code. If that code would cause an error to occur, code execution would switch to an attached catch block so that you can handle the error. 2) Throw If you define your own error, you'll have to throw the error so that it can be handled. A throw statement causes the thrown object to be sent to an attached catch block. If there is no catch block, this will cause your code to cease execution entirely. 3)Custom Errors If you're going to be throwing your own errors, it would be best to make your own error object, so that it has a descriptive name. ``` EX - Prototype function MyError(message) { this.name = 'MyError'; this.message = message; } MyError.prototype = new Error; try { throw new MyError('My message'); } catch(error) { console.log(error.name); console.log(error.message); } ``` ``` EX - Class class MyError extends Error { constructor(message) { super(message); this.name = 'MyError'; } } try { throw new MyError('My message'); } catch(error) { console.log(error.name); console.log(error.message); } ```

Answer 36

The Document Object Model (DOM) is a programming API for HTML and XML documents. It enables Javascript to access and manipulate the elements and styles of a website. The browser creates a tree-like hierarchical representation of the HTML document, that tree-like structure is known as DOM Structure or a DOM tree. Each HTML element in the DOM tree is an object. The positions of the elements in the DOM tree are nodes.The tags are element nodes. Attributes in the elements are attribute nodes. The text inside elements is a text node. It may not have children and is always a leaf of the tree. The root of the DOM tree is a element, which is known as a document object.

Answer 37

getElementById() - used to select an element based on its unique ID getElementsByClassName() - used to select all the elements having specific class names. This method returns an array-like object of all child elements which have all of the given class names. getElementsByTagName() - used to select HTML elements by tag name. This method also returns an array-like object of all child elements with the given tag name.\ querySelector() - finds the first element that matches a CSS selector querySelectorAll() - finds all elements that match a CSS selector.

Answer 38

The document object is the root of every node in the DOM. The topmost tree nodes are associated with document properties: document. documentElement property - refers the DOM node of the tag. document. head property - refers the DOM node of the tag. document. body property - refers the DOM node of the tag. The parent of any node is the node that is one level above in the DOM tree. There are two properties to get the parent — parentNode and parentElement. parentElement property returns the “element” parent parentNode returns “any node” parent. With the one exception of document.documentElement The children of a node are the nodes that are one level below it. childNodes property - returns a list of child nodes, including text nodes. firstChild property - give access to the first child node. lastChild property - give access to the last child node. Siblings are nodes that are children of the same parent. The siblings of a node are any node on the same tree level in the DOM. previousElementSibling property - give access to the previous sibling Node, i.e. the node that immediately precedes the specified node. nextElementSibling property - give access to the next sibling vode, i.e. the node that immediately precedes or follows the specified node.

Answer 39

We can add, remove, replace, and copy any element into a DOM tree. The createElement() method is used to create a new element and attach it to the DOM tree. The replaceChild() method is used to remove an element from the DOM tree and insert a new one in its place. The removeChild() method is used to remove an element from the DOM tree. The appendChild() method is used to add a node to the end of the list of child nodes of a specified parent node. The insertBefore() method is used to insert a node before another node as a child node of a parent node. The textContent property is used to get and set a text content inside a particular node. The innerHTML property to get the text and inner HTML elements inside a the particular element and the setting will replace the existing text and inner tags inside an element with the new content. The cloneNode() method is used to clone an element. The cloneNode() method accepts an optional parameter. If the parameter value is true, then the original node and all of its descendants are cloned. If the parameter value is false, only the original node will be cloned. getAttribute(attribute_name) method - Used to get the value of an attribute on a specified element setAttribute(attribute_name, attribute_value) method - Used to set a value of an attribute on a specified element removeAttribute(attribute_name) method - Used to remove an attribute with a specified name from an element hasAttribute(attribute_name) method - Used to check an element has a specified attribute or not.

Answer 40

The innerHTML property returns the text and inner HTML elements. The textContent property returns only the text Content.

Answer 41

Events occur when user interaction takes place on a web page, such as when the end-user clicked a link or button, pressed a key on the keyboard, moved the mouse pointer, submits a form, etc. The browser also triggers events, such as the page load and unload events. When an event occurs, we use a JavaScript event handler (or an event listener) to detect them and perform a specific task.

Answer 42

onclick - This is a click event occurs when a user clicks the element on a web page. ondblclick - This is a click event occurs when a user double clicks the element on a web page. onload - This is a load event occurs when the browser has finished loading the page. onunload - This is a load event occurs when a user closes the document. onresize - This is a load event occurs when the browser window is minimized or maximized. onmouseover - This is a mouse event occurs when the user moves the mouse over an HTML element. onmouseout - This is a mouse event occurs when the user moves the mouse away from an HTML element. onkeydown - This is a keyboard event occurs when the user presses down a key on the keyboard. onkeyup - This is a keyboard event occurs when the user releases a key on the keyboard. onfocus - This is a form-input event occurs when the user gives focus to an element on a web page. onblur - This is a form-input event occurs when the user takes the focus away from a form element or a window. onchange - This is a form-input event that occurs when a user changes the value of a form element. onsubmit - This is a form-input event that occurs when the user submits a form on a web page.

Answer 43

An event listener is a function in JavaScript that waits for an event to occur. The addEventListener() function is an inbuilt function in JavaScript used to handle the event. The Syntax of addEventListener() function: element.addEventListener(event, function, useCapture) Where, ``` event - Specifies the name of the event. function - Specifies the function to run when the event occurs useCapture - It is an optional parameter takes a boolean value. If the parameter value is true then the event handler is executed in the capturing phase. If the parameter value is false then the event handler is executed in the bubbling phase. ``` The removeEventListener() method is used to remove an event handler that has been attached with the addEventListener() method.

Answer 44

In Event Bubbling, the event propagates from the target element to its parents, then all its ancestors that are on the way to top. Bubbling follows the Bottom to Top approach. Child -> Parent -> Grandparent

Answer 45

In Event Capturing, the event propagates from the top element to the target element. Capturing follows the Top to Bottom approach. Grandparent -> Parent -> Child

Answer 46

Event Target is the target element that has generated the event in the DOM. The event.target is used to access the target element.

Answer 47

event.stopPropagation() method It used to stop the event to travel to the bottom to top i.e. Event Bubbling. If you want to stop the event flow from event target to top element in DOM, we use event.stopPropagation() method. event.stopImmediatePropagation() method If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute. The event.stopPropagation() stops event bubbling but all other handlers will run. To stop the bubbling and prevent handlers on the current element from running, we use event.stopImmediatePropagation() method.

Answer 48

In JavaScript, events are represented by an Event Object. These objects all derive from the Event prototype, meaning that all events in JavaScript share certain properties.

Answer 49

bubbles: a boolean value. A true value indicates that the event is bubbling, false indicates that it is capturing. currentTarget: a reference to the DOM element whose event listener triggered this specific event. This is different from the event that initially triggered the event, as a single event can trigger multiple event listeners through propagation. preventDefault(): Cancels the event, preventing the default action that would normally occur. stopPropagation(): Prevents the event from propagating further. target: a reference to the DOM element which triggered the event. timeStamp: the time of the event in milliseconds type: the type of the triggered event.

Answer 50

One of the first events most people encounter is the click event. That event along with several others, creates a MouseEvent. The MouseEvent has many properties that have to do with the state of the machine when the MouseEvent occured, such as the coordinates of the mouse relative to the window (clientX and clientY), the coordinates of the mouse relative to the last event (movementX and movementY), the coordinates of the mouse relative to the target element (offsetX and offsetY), the coordinates of the mouse relative to the screen (screenX and screenY), whether the alt, ctrl, or shift keys were depressed when the event was triggered (altKey, ctrlKey and shiftKey), and which mouse button was pressed (button, buttons, and which)

Answer 51

The KeyboardEvent is often encountered when trying to add additional functionality to a webform. For example, you may wish to submit a form when the return key is pressed. For this, you have to have a KeyboardEvent that checks the key, keyCode, or which properties to determine whether or not the return key was the key that was pressed. Like the MouseEvent, we also have the altKey, ctrlKey, and shiftKey fields to determine if those buttons were pressed at the time of the event. Finally, we have a repeat property that determines if a key is being held down.

Answer 52

AJAX stands for Asynchronous JavaScript And XML. Ajax describes the process of exchanging data from a web server asynchronously with the help of XML, HTML, CSS, and JavaScript. It just loads the data from the server and selectively updates some webpage parts without refreshing the page. Ajax uses the browser's built-in XMLHttpRequest (XHR) object to send and receive data to and from a web server asynchronously, in the background, without blocking the page or interfering with the user's experience.

Answer 53

Ajax workflow starts from the client-side, on the browser. The steps involved in Ajax communication are as follows: 1 - A client event occurs on a webpage. (for example, the user clicks a button) 2 - JavaScript creates an XMLHttpRequest object. 3 - The XMLHttpRequest object makes an asynchronous request to the server. 4 - The server process the received HttpRequest. 5 - The server creates a response and sends data back to the browser. 6 - Browser process the returned data using JavaScript. 7 - The page content updated by JavaScript.

Answer 54

An XMLHttpRequest (XHR) object used to make HTTP requests to the server and receive data in response.

Answer 55

To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object. open(method, URL, async) method — Specifies the HTTP request method to use, such as "GET", "POST", etc., URL - Specifies the location of the server async - Specifies whether the request should be handled asynchronously or not. If "true" then the script processing carries without waiting for a response. If "false" then the script waits for a response. send() - Sends the request to the server. It accepts an optional parameter that allows us to specify the request's body (used for POST). In the GET method, the data is sent as URL parameters. In the POST method, the data is sent to the server as a part of the HTTP request body, which is not visible in the URL.

Answer 56

The Server Response returned in the form of responseText, responseXML, status, or statusText. responseText - Returns the response as a string. responseXML - Returns the response as XML. status - Returns the status as a number (For example, 200: "OK", 403: "Forbidden",404: "Page not found") statusText -Returns the status as a string (e.g., "Not Found" or "OK").

Answer 57

The readyState property defines the status of the XMLHttpRequest: ``` readyState = 0 : Not intialized readyState = 1 : Connection established readyState = 2 : request received readyState = 3 : processing request readyState = 4 : request finished and response is ready ```

Answer 58

In JavaScript, to send a request using JSON data, we need to serialize our JSON object into a string. The JSON.stringify() method is used to convert an object to a string. Then, the server receives the string and processes the request. ``` EX var data = {"name" : "Matt"}; var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "/demo", true); ``` ``` //Use stringify() method to get string xmlhttp.send( JSON.stringify( data ) ); ```

Answer 59

If the response from the server is string/text, we need to parse them into a JSON object. The JSON.parse() method converts a JSON string representation to a JSON object. ``` EX var xmlhttp = new XMLHttpRequest(); ``` ``` xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { //Use parse() method to convert JSON string to JSON object var responseJsonObj = JSON.parse(this.responseText); ``` console.log( responseJsonObj.name ); console.log( responseJsonObj.age ); } }; xmlhttp. open("GET", "/demo", true); xmlhttp. send();

Answer 60

We normally wish to parse our response from JSON. Sometimes we might be dealing with an older server and we need to parse XML data. The responseXML field contains the data as a read-only Document Object Model. ``` EX var xmlhttp = new XMLHttpRequest(); ``` ``` xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var responseXml = this.responseXML; ``` console.log( responseXml.getElementsByTagName('myTag') ) } }; xmlhttp. open("GET", "/demo", true); xmlhttp. send();

Answer 61

The Fetch API provides a fetch() method defined on the window object. This method is used to send requests and returns a Promise that is retrieved from the response. The syntax for the fetch() method: let promise = fetch(URL, [options])

Answer 62

A Promise object represents a value that may not be available now but, will be resolved in the future. It allows us to write asynchronous code. The browser requests the server and returns a promise as a response. When the request is unable to make the HTTP-request due to network problems or the response has failure (HTTP-status code is 404 or 500), then the Fetch API rejects the Promise object. When we get a response successfully from the server, the promise object is returned in the Response Body.

Answer 63

response. text() – read the response and return as text. response. json() – parse the response as JSON. response. formData() – return the response as FormData object. response. blob() – return the response as Blob (binary data with type). response. arrayBuffer() – return the response as ArrayBuffer(low-level representation of binary data).

Answer 64

We also use the async and await keyword with the fetch() method. The async keyword is added to functions to tell them to return a promise rather than directly returning the value. The await keyword only works inside async functions, used to pause the code on that line until promise gets complete. async -An async function is a function that operates asynchronously via the event loop, returns a Promise object implicitly. async ensures that the function returns a promise. await - The await keyword is only valid inside async functions. await makes JavaScript wait until that promise settles and returns its result.

Answer 65

The response headers are available in a Map-like headers object in response.headers. They are used to get individual headers by name or to iterate over them.

Answer 66

To set a request header inside the fetch method, we can use the headers attribute. ``` EX let response = fetch(protectedUrl, { headers: { Authentication: 'secret' } }); ```

Answer 67

To make a POST request, we need to mention the HTTP method (method)and request the body (body) inside the fetch method. The request body can be string, FormData object, or blob. If the request body is a string, then Content-Type header is set to text/plain; charset=UTF-8. If the request body is a JSON, then Content-Type header is set to application/json; charset=UTF-8. We don't set Content-Type manually for blob object. ``` EX async function asyncFunc() { let user = { name: 'John', surname: 'Smith' }; // url is a server location let response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); ``` ``` let result = await response.json(); alert(result.message); } ``` asyncFunc();

Answer 68

The Fetch API generates a promise, meaning that if the request fails, it will cause the promise to enter the reject state. To handle this, we need to either surround our await instruction with a try...catch block or to append a catch() callback to our promise. ``` EX - try...catch block async function asyncFunc() { let user = { name: 'John', surname: 'Smith' }; // url is a server location let response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); try { let result = await response.json(); alert(result.message); } catch (error) { console.error(error); } } ``` asyncFunc(); ``` EX - appending catch let user = { name: 'John', surname: 'Smith' }; // url is a server location let response = fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }).then((response)=>{ let result = response.json(); alert(result.message); }).catch((error)=>{ console.error(error); }); ```

Answer 69

The function passed to new Promise is called the executor. When a promise object is created, the executor runs automatically. It contains the code which produces the result. The arguments resolve and reject are callbacks.

Answer 70

resolve(value) — if the job finished successfully, with the result value. reject(error) — if an error occurred, the error is the error object.

Answer 71

The Promise.status property, gives information about the state of the Promise object. The promise object can have three states: pending, fulfilled, and rejected.

Answer 72

A Promise object connects the executor and the consuming functions which will receive the result or error. Consuming functions can be registered using methods .then, .catch and .finally. ``` EX var promise = new Promise(function(resolve, reject) { const x = 5; const y = 3; if(x >= y) { resolve(); } else { reject(); } }); ``` ``` promise. then(function () { console.log('Sucess! x have grater value'); }). catch(function () { console.log('Error'); }); ```

Answer 73

Just look at the notes. https://github.com/220613-Reston-Java-Angular-AWS/Curriculum-Notes/blob/newMain/Week-5/Rest-with-JSON.md

Answer 74

In JavaScript, default function parameters allow us to initialize named parameters with default values if no values or undefined values are passed to the function. Syntax: function fn(param1=defaultValue1,param2=defaultValue2,..) { } If there is no value for the default parameter in a function call, then the function takes the default value. If we pass an undefined value for the default parameter in a function call, then the function takes the default value. We can use other parameters as default values in the function. ``` EX function add(x = 1, y = x, z = x + y) { return x + y + z; } //Here x=1, y=1, z=2 console.log(add()); //returns '4' ``` ``` //Here x=2, y=3, z=5 console.log(add(2,3)); //returns '10' ``` ``` //Here x=3, y=3, z=5 console.log(add(3,undefined,5)); //returns '11' ```

Answer 75

The spread operator "..." provides the ability to expand iterable objects into multiple elements. ``` The spread operator expands the contents of the array into individual elements. EX // spread operator for copying let arr = ['a','b','c']; let arr2 = [...arr]; console.log(arr); // [ 'a', 'b', 'c' ] ``` ``` const arr =[1,2,3,4,5,6]; console.log(...arr); //output: 1 2 3 4 5 6 ``` ``` const days = ["mon", "tue", "wed", "thurs", "fri", "sat", "sun"]; const.log(...days); //output: mon tue wed thurs fri sat sun ``` The spread operator can used for combining arrays EX const arr1 = [2, 4, 6, 8, 10]; const arr2 = [3, 6, 9, 12, 15]; ``` //combining arr1 and arr2 using spread operator const arr = [...arr1, ...arr2]; console.log(arr); // output: [2, 4, 6, 8, 10, 3, 6, 9, 12, 15] ``` ``` //without spread operator const array = [arr1, arr2]; console.log(array); //output: [Array(5), Array(5)] ``` let merged = [0, ...arr1, 0, ...arr2]; console.log(merged); //output: [0, 2, 4, 6, 8, 10, 0, 3, 6, 9, 12, 15]

Answer 76

The rest parameter "..." is used to represent an indefinite number of arguments as an array. Syntax: The rest parameter (...) should be at the end of the function parameter. If the rest parameter(...) is at the beginning or in the middle of the function parameter list, it will result in an error. ``` function functionname[...parameters] //... is the rest parameter { statement; } ``` E