JavaScript Flashcards
What is JavaScript?
A scripting language for creating dynamic web page content.
ecmascript
A standard on how a language should work (ex. javascript) and what features it should have.
Destructuring
a faster way to access data from arrays, objects, and maps by setting each value as new variables.
map (array method)
map creates a new array by calling a function on every array element. It does not change the original array.
spread operator (ES6) (…)
allows you to quickly copy all or part of an existing array or object into another array or object using “…”
rest operator (…)
allows a function to take an indefinite amount of arguments and bundle them in an array. The rest parameter must be placed at the end of the arguments to gather all remaining arguments.
preventDefault (method)
method that tells the form we’ll handle what happens when a form is submitted. By default, when a form is submitted, the information is sent through a URL.
named export vs default export
named export must use the same name. For default, you can come up with any name. You can only have one default export per file. example for named export: “export const books …”. example for default export: “export default books”.
named import vs default import
named import must be the same name. for default export, we can come up with whatever we want. example- for named import: “import {books} from “./books.js””. example for default import “import banana from “./books.js””.
synchronous
Tasks are completed one after another. JavaScript is synchronous and single-threaded.
asynchronous
Tasks are completed parallel to one another. This is a lot better performance-wise than synchronous. In JS, async is provided by Events. Async patterns include - callbacks, promises, and async/await.
Blocking
Blocks the execution. This is synchronous.
Non-blocking
Does not block the execution of further-operations. This is mainly asynchronous. Non-blocking is more performant than blocking code.
event
An event is JS interaction with HTML elements. Such as when the page loads, or when a button is clicked.
event loop
A constantly running process that coordinates the tasks between the call stack and callback queue to achieve concurrency.
callback queue
A queue that keeps all callback functions ready for execution and executes after the call stack is empty. This operates on the FIFO principle. The callback functions are pushed to the call stack to execute when the event loop finds an empty call stack.
callback
a function passed as an argument to another function.
promise
an object that represents the eventual success or failure of an asynchronous task and its resulting value.
.then() promise method
When the promise is resolved/fulfilled, you can access the data and display the data within this method. It immediately returns an equivalent Promise object, allowing you to chain calls to other promise methods- creating a promise chain.
.catch() promise method
When a promise is rejected/fails, you can access the error information and display the error information in this method. It immediately returns an equivalent Promise object, allowing you to chain calls to other promise methods- creating a promise chain.
.finally() promise method
The last stage of the promise is where the promise has “settled”. This is useful when you want to do something when the promise has settled.
.all() promise method
This takes multiple promises as input and returns a single Promise. The returned promise is fulfilled if all promises are able to be resolved. It rejects when any of the input’s promises rejects, returning the first reject. This runs the inputs in parallel so it is performant.
fetch() method
Used to request data from a server. The request can be any type of API that returns the data in JSON or XML. It requires one parameter, the URL to request, and returns a promise.
fetch(URL) // api for the get request
.then(response => response.json())
.then(data => console.log(data));
async/await
async/await allows you to write asynchronous code using the async and await keywords. The async keyword is used to declare a function as asynchronous, while the await keyword is used to pause the execution of a function until a promise is resolved. Async returns a promise.
When setting up async functions, it is good practice to setup try…catch within the function to catch any errors.
for (VARIABLE of ITERABLE) {}
a statement that loops through the values of an iterable object such as arrays, strings, maps, nodelists, etc.
for (KEY in OBJECT) {}
a statement that loops through the properties of an object.
fetch API
Starts the process of fetching a resource from a server. It returns a Promise that resolves to a Response object. This is a modern promise-based replacement for XMLHttpRequest.
short-circuit evaluation
For Logical Operators (&&, ||). In JavaScript, an expression is evaluated from left to right until there is a confirmed result. If the condition is met before everything is evaluated, the expression will short-circuit and return the result.
Example for &&: “false && true” will return false and the true is never evaluated.
Example for ||: “true || false” will return true and false is never evaluated.
closure
an inner function always has access to the variables and parameters of the outer function, even after the outer function has returned.
When using methods to manipulate data.
When using string, array, object, document, etc. methods, you are using methods available on the String, Array, Object, or Document object. When you create a string for example, that string is automatically created as an instance of String (object), allowing you to use the common methods and properties available on it.
class
a template for creating multiple objects with the same list of properties but different data values saved in it. A class on its own doesn’t do anything, so every instance of the class that is created is performed by the constructor. We pass values to the constructor for any internal state we want to initialize in the new instance. There are no classes in JavaScript, there is only Object. To be more precise, JavaScript is a prototype-based Object Oriented Language, which means it doesn’t have classes, rather it defines behaviors using a constructor function and then reuses it using the prototype.
constructor
A special function that creates and initializes an object instance of a class. The purpose of a constructor is to create a new object and set values for any existing object properties. To call a constructor, you use the “new” keyword.
prototype
a mechanism in which javascript objects inherit features from one another. Every object in JS has the built-in hidden property called “prototype”. Prototype is an object itself and will have it’s own prototype, making a “prototype chain”.
OOP
A design to model a system as a collection of objects, where each object represents some particular aspect of the system. The four principles of OOP are Abstraction, Encapsulation, Inheritance, and Polymorphism.
Abstraction (OOP)
show only the essential information and hide the implementation details. You cannot create an instance of an Abstract Class.
Encapsulation (OOP)
Grouping data and functions into one component and limiting access and functionality to the component to keep it secure.
Inheritance (OOP)
A class or object inherits the attributes and methods of another class or object.
Polymorphism (OOP)
The ability for a variable, function, or object to take on multiple forms.
super (keyword)
is used to call the constructor of its parent class to access the parent’s properties and methods.
extends (keyword)
Used to create a child class of another class (parent).
function declaration vs function expression
Function declarations are functions with a name. This will add the function to the global scope; so you can call it throughout your code. A function expression is a function without a name, making it an “anonymous function”. This is useful for limiting where the function is available keeping your global scope light. https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/
filter() method
Creates a new array filled with elements that pass a test provided by a function.
switch statement
This is used to select one of many code blocks to be executed.
Format:
switch(EXPRESSION) {
case xxxxx:
// code block
break;
case yyyyy:
// code block
break;
default:
// code block. The default keyword specifies code to run if there is no case match.
}
“return” statement in a function
This means “the function is done running, here is the result you can show to the parent context. No need to read further.”
truthy vs falsy values
Falsy - false, 0 (zero), “” (empty string), null, undefined, NaN.
Truthy - All other values, including objects and arrays.
! (operator)
The ! operator is a logical operator that negates a boolean value. It is equivalent to the not operator in other programming languages.
Example:
if(!false) {
console.log(true);
}
Set (object)
A collection of unique values.
Example:
new Set([“a”, “a”, “b”, “c”])
//output: Set(3){‘a’, ‘b’, ‘c’}
FormData API
provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch() or XMLHttpRequest.send() method.
