JavaScript Flashcards

Question

generator | JS

Answer 1

a process that can be paused and resumed and can yield multiple values. A generator in JavaScript consists of a generator function, which returns an iterable Generator object. // Generator function declaration function* generatorFunction() {} ## Footnote https://www.digitalocean.com/community/tutorials/understanding-generators-in-javascript

Answer 2

There are two iteration protocols: 1. iterator protocol 2. iterable protocol

Answer 3

allows JS objects to define or customize their iteration behavior, such as what values are looped over in a for...of construct. Some built-in types are built-in iterables with a default iteration behavior, such as Array or Map, while other types (such as Object) are not. In order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key which is available via constant Symbol.iterator:

Answer 4

* Any object that implements the "Iterator Protocol", * aka --> it has a next() method that returns an object with two properties: 1. done: (Bool) 2. value: the current element.

Answer 5

JavaScript provides three mechanisms for storing data on the client − cookies, session storage, and local storage. Each one has advantages and disadvantages. 1. Local storage is the most recent mechanism. It allows for larger amounts of data to be stored, but the data is not deleted when the browser is closed. Local storage is useful for storing data that the user will need to access later, such as offline data. 2. Session storage is similar to cookies, but the data is only stored for the current session. This means that the data will be deleted when the user closes the browser. Session storage is useful for storing data that is sensitive, such as login credentials. 3. Cookies are the oldest and most well-known mechanism. They are simple to use and well supported by browsers. However, they are limited to 4KB of data and are often used to store data that is not sensitive, such as user preferences.

Answer 6

Same inputs always return same outputs No side-effects

Answer 7

null - when var is intentinionally set to have no value undefined - when var has not been assigned any value undeclared - when var has not been declared (const, let, var)

Answer 8

Double Equals (==) checks for value equality only. It does type coercion. This means that before checking the values, it converts the types of the variables to match each other.

Answer 9

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. Will Sentance - Closure is the "backpack" that the function carries on its back that has additional details (variables from the outer function at the time of function creation) Its stored as a hidden property on the function - you can see closure in Chrome Dev tools debugger as well as console.dir(myFunc)

Answer 10

native javascript objects: standard javascript objects which are provided by javascript itself. Host javascript objects: environment-specific javascript objects, and may vary as per the environment of the machine in which the javascript is being used. Objects provided by one environment, may or may not be present in another environment. For example, most browsers provide window objects or navigator objects, but these objects are not present in the server running node.js. However, some objects like consoles are provided by both, the browsers and the node.js servers. Therefore, we can say that the host objects are host specific and may differ from one host (environment) to other.

Answer 11

var-declared variables are hoisted, meaning you can refer to the variable anywhere in its scope, even if its declaration isn't reached yet. ``` console.log(x === undefined); // true var x = 3; (function () { console.log(x); // undefined var x = "local value"; })(); ``` Whether let and const are hoisted is a matter of definition debate. Referencing the variable in the block before the variable declaration always results in a ReferenceError, because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

Answer 12

A let or const variable is said to be in a "temporal dead zone" (TDZ) from the start of the block until code execution reaches the line where the variable is declared and initialized. While inside the TDZ, the variable has not been initialized with a value, and any attempt to access it will result in a ReferenceError. The variable is initialized with a value when execution reaches the line of code where it was declared. If no initial value was specified with the variable declaration, it will be initialized with a value of undefined. This differs from var variables, which will return a value of undefined if they are accessed before they are declared. The code below demonstrates the different result when let and var are accessed in code before the line in which they are declared: ``` { // TDZ starts at beginning of scope console.log(bar); // undefined console.log(foo); // ReferenceError var bar = 1; let foo = 2; // End of TDZ (for foo) } ```

Answer 13

Consider the example below: ``` console.log(square(5)); // 25 function square(n) { return n * n; } ``` This code runs without any error, despite the square() function being called before it's declared. This is because the JavaScript interpreter hoists the entire function declaration to the top of the current scope, so the code above is equivalent to: ``` // All function declarations are effectively at the top of the scope function square(n) { return n * n; } console.log(square(5)); // 25 ``` Function hoisting only works with function declarations — not with function expressions. The code below will not work. ``` console.log(square); // ReferenceError: Cannot access 'square' before initialization const square = function (n) { return n * n; }; ```

Answer 14

Unlike function declarations, class declarations are *not* hoisted (or, in some interpretations, hoisted but with the temporal dead zone restriction), which means you cannot use a class before it is declared. ``` new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization class MyClass {} ``` This behavior is similar to variables declared with let and const.

Answer 15

Extending a built-in/native JavaScript object means adding properties/functions to its prototype. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the Array.prototype by adding the same contains method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same. The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.

Answer 16

The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.

Answer 17

'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript. Advantages: * Makes it impossible to accidentally create global variables. * Makes assignments which would otherwise silently fail to throw an exception. * Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect). * Requires that function parameter names be unique. * this is undefined in the global context. * It catches some common coding bloopers, throwing exceptions. * It disables features that are confusing or poorly thought out. Disadvantages: * Many missing features that some developers might be used to. * No more access to function.caller and function.arguments. * Concatenation of scripts written in different strict modes might cause issues. Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.

Answer 18

Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript. Advantages: * Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns. * Static types are very useful (in the case of TypeScript) for large projects that need to be maintained over time Disadvantages: * Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers. * Debugging can be a pain if your source maps do not map nicely to your pre-compiled source. * Some developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects.

Answer 19

mutable object - state can be modified after it is created. immutable object - state cannot be modified after it is created. In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable.

Answer 20

Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time. Asynchronous functions usually accept a callback as a parameter and execution continues on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).

Answer 21

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory. The heap is a different space for storing data where JavaScript stores objects and functions. Unlike the stack, the engine doesn't allocate a fixed amount of memory for these objects. Instead, more space will be allocated as needed.

Answer 22

JS is a single threaded language Python is multithreaded but typically used as a single threaded language

Answer 23

var and let create variables that can be reassigned another value. const creates "constant" variables that cannot be reassigned another value. developers shouldn't use var anymore. They should use let or const instead. if you're not going to change the value of a variable, it is good practice to use const.

Answer 24

One obvious benefit of arrow functions is to simplify the syntax needed to create functions, without a need for the function keyword. *this* within arrow functions is also bound to the enclosing scope which is different compared to regular functions where *this* is determined by the object calling it. Lexically-scoped this is useful when invoking callbacks especially in React components.

Answer 25

The main advantage of using an arrow function as a method inside a constructor is that the value of this gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, this will always refer to that object. For example, let's say we have a Person constructor that takes a first name as an argument has two methods to console.log that name, one as a regular function and one as an arrow function he main takeaway here is that this can be changed for a normal function, but the context always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the context changing. This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind this in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)

Answer 26

any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is map, which takes an array and a function as arguments. map then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are forEach, filter, and reduce. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. Function.prototype.bind is one such example in JavaScript.

Answer 27

The constructor method is a special method of a class for creating and initializing an object instance of that class. ``` class Car { constructor(brand) { this.brand = brand } } let car1 = new Car("bmw") car1.brand // bmw ```

Answer 28

Array destructuring ``` // Variable assignment. const foo = ['one', 'two', 'three']; const [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" ``` Object destructuring ``` // Variable assignment. const o = {p: 42, q: true}; const {p, q} = o; console.log(p); // 42 console.log(q); // true ```

Answer 29

ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to Object.create, slice, or a library function. This language feature is used often in Redux and RxJS projects. ``` function putDookieInAnyArray(arr) { return [...arr, 'dookie']; } const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"] ``` ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments. ``` function addFiveToABunchOfNumbers(...numbers) { return numbers.map((x) => x + 5); } const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15] const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4] ```

Answer 30

‘export’ and ‘import’ keywords

Answer 31

"", 0, -0, null, Nan, false, undefined

Answer 32

``` async function fetchMoviesJSON() { const response = await fetch('/movies'); const movies = await response.json(); return movies; } ``` fetchMoviesJSON() is an asynchronous function since it's marked with the async keyword. await fetch('/movies') starts an HTTP request to '/movies' URL. Because the await keyword is present, the asynchronous function is paused until the request completes.

Answer 33

Stack * Primitive values and references * Size is known at compile time * Allocates a fixed amount of memory Heap * Objects and functions * Size is known at run time * No limit per object

Answer 34

a function passed into another function as an argument

Answer 35

--> user.name this is just how to use obj destructuring and save the value to a new variable name (callSign)

Answer 36

--> 'Masters' This is the syntax for obj destructuring for nested objects

Answer 37

* Imparative - Follow my commands exactly, do this, then that * Declarative - Here's what I want, do it how you'd like

Answer 38

Pure functions

Answer 39

for same input x, output should always be the same y

Answer 40

* More predictable, safer * easier to test/debug

Answer 41

``` function greet(greeting, name) { return `${greeting}, ${name}!`; } function curryGreet(greeting) { return function (name) { return `${greeting}, ${name}!`; } }; const greetItal = curryGreet("Ciao"); greetItal("Alonzo"); // "Ciao, Alonzo!" const greetTex = curryGreet("Howdy"); greetTex("Alonzo"); // "Howdy, Alonzo!" greetTex("Alan"); // "Howdy, Alan!" ```

Answer 42

shows all the properties of a specified JavaScript object, including hidden properties like: * [[Prototype]] * [[Scopes]] (where you can see closure)

Answer 43

[[Prototype]] is a hidden private property that all objects have in Javascript, it holds a reference to the object’s prototype.

Answer 44

b/c *where* a funtion was defined determines what data it has available when it is called at a later time e.g. inner functions w/closure

Answer 45

It is very easy to make an iterator also iterable: just implement an [@@iterator]() method that returns this. ``` // Satisfies both the Iterator Protocol and Iterable const myIterator = { next() { // ... }, [Symbol.iterator]() { return this; }, }; ```

Answer 46

* aka dunder proto * deprecated, should not use * exposes the hidden [[Prototype]] property of an objects and allows you to access or modify it * modern way of accessing an objets prototype is by using `Object.getPrototypeOf(obj)`

Answer 47

JS engine will try to find the variable’s value in: 1. the current scope. 2. If it could not find the variable, it will look into the outer scope 3. and will continue to do so until it finds the variable or reaches global scope.

Answer 48

``` function* makeRangeIterator(start = 0, end = Infinity, step = 1) { let iterationCount = 0; for (let i = start; i < end; i += step) { iterationCount++; yield i; } return iterationCount; } const it = makeRangeIterator() it.next() // {value: 0, done: false} it.next() // {value: 1, done: false} ```

Answer 49

Just means "to use" the API (make requests)

Answer 50

A strongly typed programming language that builds on top of JavaScript First, you write the TypeScript code. Then, you compile the TypeScript code into plain JavaScript code using a TypeScript compiler. Once you have the plain JavaScript code, you can deploy it to any environments that JavaScript runs.

Answer 51

In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that. Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code. JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

JavaScript Flashcards

(76 cards)