old cards Flashcards

Question

explain any "backpacking" going on here (what's in the backpack, which function does it belong to) : ``` function outer ( ) { let myNewCounter = 14; let counter = 0; function incrementCounter () { counter ++; } return incrementCounter; } ``` const myNewFunction = outer( ); myNewFunction(); myNewFunction();

Answer 1

the backpack contains counter but not myNewCounter, because myNewCounter is not referenced in incrementCounter. Once incrementCounter's func def is returned out, JS sees that counter is referenced but not myNewCounter, so it only links counter to incrementCounter's func def. the constant myNewFunction is assigned the return value of function outer, which is the function definition of incrementCounter PLUS the attached persistent lexically-scoped reference data (data in the surrounding the variable environment) -- counter variable. since counter won't be found in the local context of myNewFunction, the next place JS will look is the backpack. myNewFunction has two memories --- the temporary local memory that's renewed/empty every time you invoke the function. But then, it has a second memory that persists... myNewFunction holds a grudge and that bit of persistent memory sticks around and remains attached to the function definition where you can store stuff in it & grab stuff from it from inside the running of the new function [[scope]] is the hidden property that links the surrounding local memory to incrementCounter -- when incrementCounter's definition gets returned and stored in myNewFunction, incrementCounter brings the hidden property with it & therefore drags out the local memory with it

Answer 2

parent nestedEl { property: value; } (could also be .parent, #parent) styles all of the nested elements within a particular parent element or class; parent remains unchanged REVIEW ME! ....there are also adjacent selectors el1 + el2 { } select only the el2 that are right after el1 (immediately preceded by) & direct-descendant / direct-child selectors el1 > el2 { } any el2 that's directly descended from el1 & attribute selectors - allows you to style elements with a particular attribute input[type="password"] { }

Answer 3

keyword added to a selector that specifies the state of the selected/styled elements :hover :checked :nth-of-type() :active :first :not() ex: .post button:hover { } when you hover over a button inside an element in the post class

Answer 4

Variable scope is the location where a variable is defined and the context where other pieces of your code can access and manipulate it function - the variable is visible only within a function, and it cannot be accessed outside the curly brackets of the function block - the area within if, switch conditions and for, while loops; those variables exist only within the corresponding block lexical - the childrens' scope has access to the variables declared in the parent scope Hoisting - refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Answer 5

(1) selector { property : value; —> this is a declaration } (2) content

Answer 6

multi-line —> for the body of the component, wrap in curly braces. for the return statement, you need a set of parens & within it, nest a div or fragment, and within the div/frag nest your returned JSX single-line —> can be the same as multiline, or just a set of parens instead of curly braces, and the single line of code with no div/frag

Answer 7

1. generate random number (Math.random( )) 2. Think about the max and min in the range — if the min is zero, add one to the max 3. The random number generated is between 0.0 and 0.99, so multiply it by your max number (Math.random( ) * max) 4. floor the random number (Math.floor(Math.random( ) * max) 5. Add on the min at the end if it’s greater than zero (Math.floor(Math.random( ) * max) + min

Answer 8

properties are keys in an object whose values hold data / information methods are properties / keys with a function definition (value)

Answer 9

its the function that is used to create a particular object, and constructors are named using pascal notation (as opposed to camelcase for traditional & factory functions) It creates a "blueprint" for creating many objects of the same type by being able to call the constructor using the new keyword the "this" keyword is used (almost as a substitute for the new object that'll be created) --- really, "this" points to the new object https://www.w3schools.com/js/js_this.asp

Answer 10

the new operator : 1. creates an empty object 2. sets the "this" keyword used to create key value pairs in the constructor function to point to that empty object 3. it returns the object

Answer 11

in an object literal method, "this" points to the object its being used within — console.log(person.fullName());

Answer 12

'this' references the object that is executing the current function. when used in a method (function definition of a property within an object), 'this' references the object the method is in. when a new object ('instance’) is created using the constructor function - the 'new' keyword creates an empty object, makes the 'this' keyword within the constructor point to the new object, and it returns it. so 'this' refers to the new object that has been created by the new operator https://codewithmosh.com/courses/324741/lectures/5142768

Answer 13

a factory function creates and returns an object literal function createCircle(radius) { return { radius, draw ( ) { console.log('draw : circle with radius of ' + radius); } } } const circle = createCircle(1); circle.draw(); a constructor function creates and returns an object using the new operator and this keyword (essentially, altogether it creates and then points to an object) function Circle(radius) { this.radius = radius; this.draw = function () { return 'draw'; } } const another = new Circle(1);

Answer 14

Abstraction = "hide the (implementation) details, expose only the essentials (public interface)" you don't want everything in your object to be public and accessible from the outside (if every method you create inside an object is traditionally declared, anyone at any time can call the method and change the value/function associated with it) implement using private properties and methods : instead of setting properties/methods, define them as local variables to be used within the object. you can create a method that utilizes the local variables within its function (the variables become PLSRD), taking advantage of closure -- the method value can be the child function, the constructor func is the parent https://codewithmosh.com/courses/310571/lectures/4881074

Answer 15

just a regular-shmegular parent -- prototype is a property with an object value (children inherit all of the methods / props defined in its prototype)

Answer 16

// class keyword, class name, curly braces to set up the body of the class // class keywords ARE constructor functions class Circle { // constructor method used to initalize objects constructor (radius) { // PROPERTIES are defined within the constructor method this.radius = radius; } // METHODS are defined within the body of the class & is added to the prototype of the object (can be defined within the constructor to have it on the object instance) // no function keyword used, just method name, parens & braces draw () { return 'draw'; } } const c = new Circle(1);

Answer 17

class Circle extends Shape { draw () { return 'draw'; } } const c = new Circle(); console.log(c.move()); // 'move' https://codewithmosh.com/courses/310571/lectures/4881373

Answer 18

https://codewithmosh.com/courses/310571/lectures/4880998

Answer 19

https://www.youtube.com/watch?v=qkAb-4ZR5Yw&t=67s

Answer 20

https://www.youtube.com/watch?v=khuDeNwXkfI http://csbin.io/oop

Answer 21

https://codewithmosh.com/courses/310571/lectures/4881279 http://csbin.io/oop

Answer 22

Answer 23

if wrapped inside a constructor function or class, it references a particular instance of the constructor / class. if wrapped inside an object, it refers to that object. EX : function Circle(radius) { this.radius = radius; } Circle.prototype.toString = function () { return 'Circle with radius' + this.radius; // this points to toString, which is on the prototype object of Circle - so this still points to whatever radius is passed into Circle for a particular instance } const c1 = new Circle (4); const c2 = new Circle (2);

Answer 24

class UserCreator { constructor (name, score) { this.name = name; this.score = score; } increment() { this.score++; } login() { console.log("login"); } } const user1 = new UserCreator("Eva", 9); user1.increment();

Answer 25

'this' references the object that is executing the current function. when used in a method (function definition of a property), 'this' references the object the method is in. https://codewithmosh.com/courses/324741/lectures/5142768 "this" points to the object that was created by the "new" keyword, stored in the constant labeled another console.log(another.draw());

Answer 26

1. creates an empty object 2. points the keyword "this" to the current object being created (on L hand side of ' = new') 3. links the new object’s private prototype property (___proto___) to the value of the constructor function’s prototype object, which contains methods 4. returns the object

Answer 27

all capital letters for each word in the function name

Answer 28

class FunctionName { constructor (param1, param2) { this.prop = val1; this.prop = val2; } method1 ( ) { this.functionality1; } method2 ( ) { this.functionality2; } } a constructor function that populates the key-value pairs (data / information), beneath that are methods that are added to prototype property/object on FunctionName (the class has a prototype property where we store method 1 & 2 for access as needed) see the 1 hour & 3 minutes mark of this video : https://www.youtube.com/watch?v=aAAS9cEuFYI

Answer 29

"prototype" is a property on the Array with an object literal value. the object holds the methods (map, forEach, find, includes, push, pop etc) __proto__ is a private property name used to reference to the Array.prototype object on individual instances of different arrays you create

Answer 30

IPEA inheritance : eliminates redundant code by allowing instances of a "parent" object to inherit methods from the parent without having to redefine methods and properties repeatedly polymorphism : "many forms", or representing an object in different forms —- ex : you can extend a parent class and take advantage of method overriding, while still having access to all parent properties and methods (https://www.youtube.com/watch?v=XxMUJ9-Pb2E) encapsulation : group related variables and functions that operate on them (rather than decoupling them) —- reduces complexity & increases reusability abstraction ("microwave") : hiding the implementation details & showing only the essential data to users by creating local variables that create values that public implementation can be built on, but is not accessible to the public — this creates a simpler interface (reduces complexity) & reduces the impact of change (https://www.youtube.com/watch?v=jM0WcyQWMSM) (https://codewithmosh.com/courses/310571/lectures/4881074) we use OOP because functional / procedural programming (where we have data stored in variables and a bunch of functions that operate on that data) — as straightforward as it is, the functions end up being less DRY and more interdependent —- changing code in one function may cause others to break which is problematic. grouping related variables and functions into a unit (object) https://codewithmosh.com/courses/310571/lectures/4880998

Answer 31

Object.create (null) —- creates an empty object regardless of what’s passed in, the argument determines what the __proto__ value is (the value is an object with methods to available to be accessed by the empty object) Object.assign ( ) Object.entries ( ) Object.keys ( ) Object.values ( )

Answer 32

a factory function creates an object and returns it all on it’s own. constructor functions don’t return the object they create, so you have to use the new keyword to instantiate a new instance object //This functions makes and returns an object every time it is called. // The resulting objects all follow the same "recipe" function makeColor(r, g, b) { const color = {}; color.r = r; color.g = g; color.b = b; color.rgb = function() { const { r, g, b } = this; return `rgb(${r}, ${g}, ${b})`; }; return color; } const firstColor = makeColor(35, 255, 150); firstColor.rgb(); //"rgb(35, 255, 150)" const black = makeColor(0, 0, 0); black.rgb(); //"rgb(0, 0, 0)" _____________________________________________________________________________________________________ // This is a Constructor Function... function Color(r, g, b) { this.r = r; this.g = g; this.b = b; } //If you call it on its own like a regular function... Color(35, 60, 190); //undefined //It returns undefined. Seems useless! // ***************** // THE NEW OPERATOR! // ***************** // below are separate methods (rgb, hex, rgba) that are being added to Color’s prototype object (this protyotype object is the value assigned the the instance-of-Color’s ___proto__ private property. Color.prototype.rgb = function() { const { r, g, b } = this; return `rgb(${r}, ${g}, ${b})`; }; Color.prototype.hex = function() { const { r, g, b } = this; return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }; Color.prototype.rgba = function(a = 1.0) { const { r, g, b } = this; return `rgba(${r}, ${g}, ${b}, ${a})`; }; const color1 = new Color(40, 255, 60); color1.hex(); const color2 = new Color(0, 0, 0); color2.hex();

Answer 33

"this" is an implicit parameter assigned by JS at runtime any time you execute a method, this evaluates to whatever object the method is attached to (whatever’s to the left of the dot)

Answer 34

// Pet is the base / super class // Dog and Cat are other classes with common functionality that extend from Pet // In the class Cat, it has its own unique information (livesLeft param) that it adds to an object instance, but it also can call super, which will reference the constructor of it’s super class (Pet) class Pet { constructor(name, age) { console.log('IN PET CONSTRUCTOR!'); this.name = name; this.age = age; } eat() { return `${this.name} is eating!`; } } class Cat extends Pet { constructor(name, age, livesLeft = 9) { console.log('IN CAT CONSTRUCTOR!'); super(name, age); this.livesLeft = livesLeft; } meow() { return 'MEOWWWW!!'; } } class Dog extends Pet { bark() { return 'WOOOF!!'; } eat() { return `${this.name} scarfs his food!`; } } extends — you can extend Dog to have access to the constructor and methods in the Pet class (as opposed to repeating the same constructor in Cat & Dog + the same method, eat) — if they’re common constructors/methods for multiple classes, you can extend rather than repeat super — references the super class (the class you’re extending from)

Answer 35

both of these create the appearance of a property on an instance with the functionality of a method (outside of the class, it’s accessed w/o parens — a computed property) get : getters allows you to access data on the object, perform some logic on it, and display it to the user without giving access to user to change the method itself. set : by placing 'set' in front of a function, users can update a value that’s given/displayed clientside without having access to the logic that changes the value itself const person = { name: "Dom", job: "Web Developer", interests: ["Tennis", "Gardening"], get headline() { return `${this.name} is a ${this.job} and is mainly interested in ${this.interests[0]}.` }, set primaryInterest(val) { this.interests.unshift(val); } }; console.log(person.headline); // 'Dom is a Web Developer and is mainly interested in Tennis.' person.primaryInterest = "Home Automation"; console.log(person.headline); // 'Dom is a Web Developer and is mainly interested in Home Automation.' best video —- https://www.youtube.com/watch?v=QhFo_L_81Tc backup — https://www.youtube.com/watch?v=qkAb-4ZR5Yw

Answer 36

value types --- primitives (number, string, boolean, undefined, null, symbol) values pass around copies of values, and are independent of one another let x = 10; let y = x; x = 5; console.log(`x is : ${x}, and y is : ${y}`); // x is 5, and y is 10 reference types --- composite (objects, functions, arrays) const obj = { one : 1, two : 2, three : 3 }; const objCopy = obj; obj.four = 4; // obj and objCopy both point to the same object in memory (diff names for the same address) -- logging both separately should show identical objects console.log(obj); console.log(objCopy); // { one: 1, two: 2, three: 3, four: 4 } // { one: 1, two: 2, three: 3, four: 4 }

Answer 37

primitives are copied by their value let x = 10; let y = x; x = 20; // y is 10, x is 20 — they are independent of one another let x = {num : 10}; let y = x; x.num = 20; // both x & y point to an address where {num : 10} is located in memory

Answer 38

Default parameters let you initialize a named parameter with default values if no value is being passed into the function function say(message='Hi') { console.log(message); } say(); // 'Hi' say('Hello') // 'Hello' The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. It collects all arguments (all arguments passed in) from a function call and PUTS THEM IN AN ARRAY -- when creating the function, put '...' before the parameter name and whatever the person who's calling the function passes in as an argument will be used good reference video STARTING AT 3:06 : https://www.udemy.com/course/the-web-developer-bootcamp/learn/lecture/22003670#overview also : https://codewithmosh.com/courses/324741/lectures/5142775

Answer 39

the OR operator looks for truthiness in the first statement (an undefined value is falsy & an actual bit of data like a num, string, whatever is truthy) --- if that first value is empty, and the second value is truthy, the truth value will get returned let someInput = "" const name = someInput || 'Max' console.log(name) const votes = ['y', 'y', 'n', 'e', 'y', 'n', 'n', 'n', 'y']; const tally = votes.reduce((tally, vote) => { tally[vote] = 1 + (tally[vote] || 0); return tally; }, {}); console.log(tally)

Answer 40

function fixTitle (str) { return str.split(" ").map(n => { return n[0].toUpperCase() + n.slice(1).toLowerCase()}).join(" ") } console.log(fixTitle(example["sentence"]));

Answer 41

for props — strings must be wrapped with double quotes numbers/objects**/arrays/booleans/variables should be wrapped with curly braces regular functions should also be wrapped in curly braces with parens & no arguments since any calculations should be done before the return data using props event handlers should be wrapped in curly braces with no parens, we’re passing in a REFERENCE to the function as a value of the event attrinute EXAMPLE : const App = ( ) => { return ( ); } | | | | **objects can be provided as a prop, but you cannot display an object by putting an object alone between two JSX tags EXAMPLE : const App = ( ) => { const config = {color : 'red'} return ( <>

{config}

—— NOPE! —— OK! < /> ); } ___________________________________________________________________________ use the parent component to generate some data that you’ll want to display or use in the child, or just add html attributes that you’d want to use` (formatted for react) — add them to a JSX element (either an html element or a child instance of a component) react collects those attributes and puts them in an object props object shows up as the first argument to the child component function utilize the values in the props object however you wish

Answer 42

1. all prop names follow camel case 2. the class attribute is written as 'className' 3. in-line styles are provided as objects within props — grouped together separated by commas, structure is propName : 'value' EXAMPLE : const App = ( ) => { return ( ); }

Answer 43

function expression, with props passed in as needed code (JS) to compute values we want to show / use in our JSX — can include functions a return statement with an outer element (div or fragment) wrapping the content we want this component to show

Answer 44

In React, JSX expressions must have only one parent element. This syntax is so because JSX is transpiled to JavaScript before execution and only one element—the parent element—can be returned from an expression.

Answer 45

destructuring allows us to extract and gather the values of an object’s properties into separate variables. rather than passing the entire props object, you can assign the values of the properties directly to variables by destructuring the props object that is passed to the component function as a parameter

Answer 46

// import the useState function from the react library import { useState } from 'react' const App = () => { // define a piece of state and initialize with the value zero // the useState function returns an array that has 2 items, a counter variable initialized to zero in this case + a variable setCounter which will be used to modify state const [ counter, setCounter ] = useState(0) // call the setTimeout function passing in a function to increment counter & a timeout value // The function passed as the first parameter to the setTimeout function is invoked five seconds after calling the setTimeout function // when the state-modifying function setCounter is called, React re-renders the component which means that the function body of the component function gets re-executed setTimeout( () => setCounter(counter + 1), 5000 ) return (

{counter}

) } export default App in other words : state is imported > app component is created, within the function definition… > a piece of state is defined, where our counter is initialized to zero > setTimeout is called but not executed until the allotted time > JS asychronously moves on and returns the div, which is displayed until the rendered value is updated by setCounter > the new value of counter gets rendered —- the last two steps keep repeating

Answer 47

the event system detects when the user does something in the app (click, drag, type) —- the state system is used to update content on the screen as the user interacts with the app (state is the one and only way we can change what content React shows) _____________________________________________________________________________________________________ convention —- use 'onSomething' names for props which represent events and 'handleSomething' for the function definitions which handle those events. the steps involved in setting up an event handler : - decide what kind of event you want to watch for* - create a function in the App component that determines what happens when the event occurs (this is your event handler, named 'handle + EventName') - pass the event handler as a prop to a JSX element (either a plain element or a child component) using a valid event name (onClick, onMouseOver, etc) - pass a reference to the function (wrapped in curly braces) *https://legacy.reactjs.org/docs/events.html _____________________________________________________________________________________________________ how to define a piece of state : - define a piece of state with the useState function - pass in a value to the useState function, this is the default/starting value for our piece of state - update state using setter function in the component when the user does something. this causes react to rerender component

Answer 48

use the spread operator to spread an existing array or object into a new one, then update the specific key-value pair as desired concat values to an existing array — this creates a shallow copy of an array with an added value (as opposed to using the push method, which mutates the array its called on directly) using join to get an string of objects from an array

Answer 49

State updates using this.setState or useState do not immediately mutate the state but create a pending state transition. Accessing state immediately after calling the updater method can potentially return the old value. look at this code snippet from an App component : const [left, setLeft] = useState(0) const [right, setRight] = useState(0) const [total, setTotal] = useState(0) const handleLeftClick = () => { const updatedLeft = left + 1 setLeft(updatedLeft) setTotal(updatedLeft + right) } // const handleLeftClick = () => { // setAll(allClicks.concat('L')) // setLeft(left + 1) // setTotal(left + right) // } in the event handler for left click events, we created a new constant and stored the current value of left plus one in it, and THEN updated left using setter function to avoid issues with async updates

Answer 50

(1) the input should have a value attribute assigned a piece of state to keep track of what is entered into the input & onChange attribute assigned the value of an event handler with the event object as parameter that sets the piece of state to whatever the user enters into the input (2) the form should be wired to an event handler that handles a form event. should have an event parameter and the 'event.preventDefault( )' method to prevent form auto-submit / page reload + whatever you want to do with the piece of state / value that has been entered, like add to the beginning or end of a larger array using spread w/o mutating original + a final update to piece of state that clears out input by setting to an empty string or whatever is appropriate adding elements to different parts of an array in react: https://state-updates.vercel.app/

Answer 51

you have to import the component in your current component and export the component in its own file

Answer 52

a special type of string that allows you to evaluate data inside of a string by wrapping that data in ${ } and include backticks around string const firstName = 'David'; const lastName = 'Bowie'; console.log(`My favorite artist is ${firstName} ${lastName}`) // => "My favorite artist is David Bowie" console.log(`10 + 25 = ${10 + 25}`) // => "10 + 25 = 35" ________________________________________________________ conditionalExp ? expIfTrue : expIfFalse; ________________________________________________________ && —- returns the first falsey value or the last truthy value || —- returns the first truthy value https://www.udemy.com/course/react-redux/learn/lecture/34695202#overview ! — gives the opposite of whatever it’s applied to

Answer 53

uno ——> .toUpperCase( ); and .toLowerCase( ); ___________________________________________________________ dos ——> .toString( ) and typeof(value) ___________________________________________________________ tres ——> with decimals : Number(strNum) or parseFloat(strNum) + w/o decimals : parseInt(strNum) working with numeric keys in objects that you need to pass into functions as a numeric data type ___________________________________________________________ quatro ——> .includes (substring); OR .indexOf (substring); ___________________________________________________________ cinco ——> .startsWith (substring); or .endsWith (substring); ___________________________________________________________ seis ——> .slice (index at which to start extracting, optional index at which to stop extracting NOT including the character at this index) ___________________________________________________________ siete ——> .slice(index at which to start extracting) ___________________________________________________________ ocho ——> .replace(stringYouWantToReplace, replacementString); ___________________________________________________________ nueve ——> .replaceAll( stringYouWantToReplace, replacementString) ___________________________________________________________ diez ——> indexOf(string)

Answer 54

false 0 ""(empty string with no spaces) null undefined NaN ... everything else is truthy! falsiness can be useful to determine if something is defined or if it exists / has content EXAMPLE : let loggedInUser = ''; if(loggedInUser) console.log('LOGGED IN'); else console.log('PLEASE LOG IN'); __________________________________________________________ null is the intentional absence of any value that you’ve assigned to some variable. undefined refers to variables that do not have an assigned value; usually an indicator that JS gives you (not intentional)

Answer 55

value % 2 = 0 for even, 1 for odd __________________________________________________________________________ syntax : x ** y (2 ** 3 is the same as 2^3) __________________________________________________________________________ Math.floor (num) Math.ceil (num) Math.round (num) Math.max( ), Math.min( ) —-> arguments can be a list of numbers, or an array spread into a list of numbers Math.floor(Math.random( ) * 10) + 1 —> Math.random( ) returns a random decimal between 0 and 0.999999 (reference video : https://www.udemy.com/course/javascript-beginners-complete-tutorial/learn/lecture/17032308#overview) __________________________________________________________________________ postfix increment operator — i++ the current value of the variable is used in the expression or statement first, and then the variable is incremented let num = 5; let result = num++; console.log(num); // Output: 6 (num was incremented to 6) console.log(result); // Output: 5 (result holds the initial value of num before the increment) VERSUS prefix increment operator —- ++i the value of the variable is incremented first, and then the updated value is used in the expression or statement let num = 5; let result = ++num; console.log(num); // Output: 6 (num was incremented to 6) console.log(result); // Output: 6 (result holds the value of the updated num)

Answer 56

USE CASE : you have one value and you’re checking it against multiple different conditions to determine output based on that changing value argument for switch : the variable you’re comparing against case : each case is a different potential value stored in variable break : need a break statement after each case’s logic, otherwise all values following will be returned/logged default : your "else" / catch-all overlapping cases : combine logic by stacking cases and applying a break ________________________________ let emoji = "heart"; // Switch with overlapping cases... in this case, with no code to run after 'heart' AND no break statement, it combines the next case with the current switch (emoji) { case "sad face": case "happy face": console.log("yellow"); break; case "eggplant": console.log("purple"); break; case "heart": case "lips": console.log("red"); break; default: console.log("no emoji entered"); } // red ________________________________ reference video : https://www.udemy.com/course/javascript-beginners-complete-tutorial/learn/lecture/16777632#overview mdn : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Answer 57

https://www.youtube.com/watch?v=sXQxhojSdZM https://www.youtube.com/watch?v=9RksQ5YT7FM https://www.youtube.com/watch?v=EiRGUNrz9MY https://www.youtube.com/shorts/D8HFzAaD44M

Answer 58

the OR operator looks for truthiness in the first statement (an undefined value is falsy & an actual bit of data like a num, string, whatever is truthy) --- if that first value is empty, and the second value is truthy, the truth value will get returned let someInput = "" const name = someInput || 'Max' console.log(name) const votes = ['y', 'y', 'n', 'e', 'y', 'n', 'n', 'n', 'y']; const tally = votes.reduce((tally, vote) => { tally[vote] = 1 + (tally[vote] || 0); return tally; }, {}); console.log(tally)

Answer 59

Map objects are similar to object literals, but the key types can be any value and they're actual iterables where you can determine the size of the map. Sets are a collection of unique values // Create a Set const letters = new Set(["a","b","c"]); //Convert to an array Array.from or spread operator const letters = ["a","b","c"]; const number = [1, 2, 3, 4]; const combo1 = [...new Set([...letters, ...number])]; console.log(combo1); // ['a', 'b', 'c', 1, 2, 3, 4] const combo2 = Array.from(new Set([...letters, ...number])); console.log(combo2); // ['a', 'b', 'c', 1, 2, 3, 4] helpful articles : https://www.w3schools.com/js/js_object_sets.asp https://www.javascripttutorial.net/es6/javascript-set/

Answer 60

assign — entries — keys —- returns the keys in an object in an array as string elements values — returns the values in an object in an array hasOwnProperty —- a method that checks for the presence of a key (passed in as an argument) & returns a boolean

Answer 61

destructuring objects —

Answer 62

a class is blueprint for defining an object. class Name { constructor ( ) { // holds properties this.propOne = "value"; this.propTwo = "valuetwo"; } funcOne ( ) { console.log(`first property is ${this.propOne}`) } } const newObj = new Name ( );

Answer 63

part 1: length property --- arrayName.length *shorter-named method removes push method to add to end -- arrayName.push(element to be added) pop method to remove from end -- arrayName.pop ( ) *shorter-named method removes unshift method to add to beginning -- arrayName.unshift(element to be added) shift method to remove from end -- arrayName.shift ( ) part 2: Array.isArray (valueYouWantToCheck) firstArray.concat (secondArrayThatWillFollowTheFirst), spread operator arrayName.indexOf (elementYoureSearchingFor) -- returns index the element is at if its present, returns -1 otherwise (you can use this and as long as the returned value ISNT -1, you can assume the element is truly present in array) slice -- returns a COPIED portion of an iterable syntax : slice (inclusiveStart, exclusiveEnd) slice (inclusiveStart) — goes to the end of iterable slice( ) —- makes a copy of the entire thing splice -- mutates original array, returns an array containing modified contents (1) splice (1, 2, 3) 1 --- REQ'D inclusive index at which you want to start mutating array (if you add something, it will show up AT this index; if you delete something the element existing AT this index will be deleted) 2 --- OPTIONAL how many things to delete 3 --- items you'd like to insert (as many as you want separated by a comma) good link to discuss slice vs splice --- https://www.freecodecamp.org/news/lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae/

Answer 64

The spread operator expands or "spreads" an iterable (arrays, strings, objects) into separate arguments. this ==> console.log (...'hello') means this ==> 'h', 'e', 'l', 'l', 'o' //by using spread you have a list of separate arguments good reference article : https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab You can : - COPY AN ARRAY OR OBJECT const fruits = ['🍏','🍊','🍌','🍉','🍍'] const moreFruits = [...fruits]; => could also be const moreFruits = {...fruits} if fruits were an OBJECT with properties console.log(moreFruits) // Array(5) [ "🍏", "🍊", "🍌", "🍉", "🍍" ] ^ ^ ^ ^ ^ REMEMBER : changes to the original array/object will NOT affect the copied array/object, which is what would happen if the array/object had been linked to the original with the assignment operator, = const array = ['😉','😊','😇'] const copyWithEquals = array // Changes to array will change copyWithEquals const copyWithSpread = [...array] // Changes to array will not change copyWithSpread array[0] = '😡' // Whoops, a bug console.log(...array) // 😡 😊 😇 console.log(...copyWithEquals) // 😡 😊 😇 console.log(...copyWithSpread) // 😉 😊 😇 ^ ^ ^ ^ ^ - COMBINE AN ARRAY OR OBJECT const hello = {hello: "😋😛😜🤪😝"} const world = {world: "🙂🙃😉😊😇🥰😍🤩!"} const helloWorld = {...hello,...world} console.log(helloWorld) // Object { hello: "😋😛😜🤪😝", world: "🙂🙃😉😊😇🥰😍🤩!" } const objectOne = {hello: "🤪"} const objectTwo = {world: "🐻"} const objectThree = {...objectOne, ...objectTwo, laugh: "😂"} // can ADD or replace existing key value pairs in the new object as well console.log(objectThree) // { hello: "🤪", world: "🐻", laugh: "😂" } const myArray = [`🤪`,`🐻`,`🎌`] const yourArray = [`🙂`,`🤗`,`🤩`] const ourArray = [...myArray,...yourArray] console.log(...ourArray) // 🤪 🐻 🎌 🙂 🤗 🤩 const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("😂".repeat(5))}} objectFour.laugh() // 😂😂😂😂😂 ^ ^ ^ ^ ^ - WITH THE MATH FUNCTION, TO CONVERT THE ARGUMENTS INTO LIST VALUES const numbers = [37, -17, 7, 0] console.log(Math.min(numbers)) // NaN console.log(Math.min(...numbers)) // -17 console.log(Math.max(...numbers)) // 37

Answer 65

1. for...in loop for (let nameRepresentingEachKey of objectName) { body }; 2. for...of loop with Object methods for (let [key, value] of Object.entries(objName)) *** for (let value of Object.values(objName)) *** for (let key of Object.keys(objName)) 3. array method with Object methods Object.keys(obj).forEach(key => { functionality }); *** remember that keys are automatically stored as strings when pulled from an object literal... if you need to act on or pass the numeric version of a key (if keys are numbers in the object), you have to convert the number (or variable holding the number) to a string value using parseInt function

Answer 66

- params : arrName.filter ((element, index, array) => { }); - functionality / return : create a copy of a given array, filtered down with only the elements that return true when passed to the callbackFn test - great when : you have a conditional that you want to use to test multiple elements AND want an array returned

Answer 67

- params : arrName.forEach ((element, index, array) => { functionality WITH A RETURN OR PUSH STATEMENT }); - functionality / return : executes provided function once for each element - great for when : you don't need an array of values &/or your output is an object (you can build it & add values to it from an array) or a single primitive value that you can return out const nums = [9,8,7,6,5,4,3,2,1]; nums.forEach(function (n) { return n * n;} ) ; // prints: 81, 64, 49, 36, 25, 16, 4, 1 nums.forEach(function (el) { if (el % 2 === 0) {console.log(el)} }); // prints: 8, 6, 4, 2

Answer 68

- params : arrName.map ((element, index, array) => { functionality WITH A RETURN STATEMENT }); - functionality / return : create a copy of a given array with the results of invoking the callback on each element once AND return the array - great when : you want an array of evaluated results for your output

Answer 69

const titles = movies.map (movie => movie.title);

Answer 70

const newObj = {newKey : 1, ...testObj}; delete newObj.add; console.log(newObj);

Answer 71

1. (Array.from( ) method) Array.from( iterable or array-like object); ------- Takes any iterable (a Set, for example) or array-like object with a length property & indexed elements (a string) -- and creates an array from it Array.from('foo'); // [ "f", "o", "o" ] const set = new Set(['foo', 'bar', 'baz', 'foo']); Array.from(set); // [ "foo", "bar", "baz" ] 2. (Array.isArray( ) method) Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false 3. (join ( ) method) arrayName.join (separator) -- creates and returns a string by concatenating all of the elements in the array & separating them by a commas w/ no spaces (default) or a specified separator const a = ['Wind', 'Water', 'Fire']; a.join(); // 'Wind,Water,Fire' a.join(', '); // 'Wind, Water, Fire' a.join(' + '); // 'Wind + Water + Fire' a.join(''); // 'WindWaterFire' 4. (lastIndexOf method) const numbers = [2, 5, 9, 2]; numbers.lastIndexOf(2); // 3 numbers.lastIndexOf(7); // -1 numbers.lastIndexOf(2, 3); // 3 numbers.lastIndexOf(2, 2); // 0 numbers.lastIndexOf(2, -2); // 0 numbers.lastIndexOf(2, -1); // 3 5. (reverse ( ) method) const items = [1, 2, 3]; console.log(items); // [1, 2, 3] items.reverse(); console.log(items); // [3, 2, 1]

Answer 72

split method let word = "THE HiSTory of mathematiCS"; word.split ( ); ======> empty parentheses gets one solid string, no matter how many words are in the string // ['THE HiSTory of mathematiCS'] word.split (" "); ======> quotations WITH A SPACE breaks up words into separate elements //['THE', 'HiSTory', 'of', 'mathematiCS'] word.split (""); ======> quotations WITHOUT SPACE breaks up words into separate letters // ['T', 'H', 'E', ' ', 'H', 'i', 'S', 'T', 'o', 'r', 'y', ' ', 'o', 'f', ' ', 'm', 'a', 't', 'h', 'e', 'm', 'a', 't', 'i', 'C', 'S']

Answer 73

for...in loop _____________________ Object.keys(objName) Object.values(objName) _____________________ object.assign OR spread operator const another = Object.assign({ color: yellow }, circle); const another = {…circle}; the assign method copies all of the key-value pairs in one or more source objects (circle), and pastes them into the target object ({ }) _____________________ in operator example : after creating/constructing some object, obj if ('keyName' in obj) console.log('keyName is in obj'); (https://codewithmosh.com/courses/310571/lectures/4881082)

Answer 74

if the callback returns a neg value, it sorts a before b; if it returns a positive value, it sorts b before a !! sort updates / mutates the original array by sorting values in place (alphabetical, highest num to lowest, or lowest num to highest) --- numeric sort is done using a compare callback function passed into the sort method const ascending = arrName.sort( (a,b) => a - b); (min to max number) const descending = arrName.sort( (a,b) => b - a); (max to min number) sort reference video : https://www.udemy.com/course/javascript-beginners-complete-tutorial/learn/lecture/17010248#overview function leastToGreatest(arr) { return arr.sort((a,b) => a - b); } // console.log(leastToGreatest([1, 3, 5, 2, 90, 20])); // [1, 2, 3, 5, 20, 90] function greatestToLeast(arr) { return arr.sort((a,b) => b - a); } // console.log(greatestToLeast([1, 3, 5, 2, 90, 20])); // [90, 20, 5, 3, 2, 1] function lengthSort(arr) { return arr.sort((a, b) => a.length - b.length); } // console.log(lengthSort(["dog", "wolf", "by", "family", "eaten"])); // ["by", "dog", "wolf", "eaten", "family"] function alphabetical(arr) { return arr.sort(); } // console.log(alphabetical(["dog", "wolf", "by", "family", "eaten"])); // ["by", "dog", "eaten", "family", "wolf"] function byAge(arr){ return arr.sort((a,b) => a.age - b.age); } console.log(byAge([ { name: "Quiet Samurai", age: 22 }, { name: "Arrogant Ambassador", age: 100 }, { name: "Misunderstood Observer", age: 2 }, { name: "Unlucky Swami", age: 77 } ])); // => [ { name: 'Misunderstood Observer', age: 2 }, // { name: 'Quiet Samurai', age: 22 }, // { name: 'Unlucky Swami', age: 77 }, // { name: 'Arrogant Ambassador', age: 100 } ]

Answer 75

find ( ) ---- iterate through an array until you find an item that satisfies the callback & return THAT ITEM. you can also pass in a function for more complicated searches SYNTAX : arrayName.find (callbackFn); example w/o a function : let cities = ["Ankara", "Istanbul", "Antalya", "Bursa", "Trabzon"]; let city = "Bursa"; let chars = 7; let match1 = cities.find(item => city === item ? true : null); console.log(`item from cities that matched was : ${match1}`); // should return 'item from cities that matched was : Bursa' let match2 = cities.find(item => chars === item.length); console.log('item with matching length at position', match2); // let match2 = cities.find(item => chars === item.length); _______________________________________________________________ findIndex ( ) ---- iterate through an array, look for a matching item & return the POSITION SYNTAX : arrayName.find (callbackFn); let cities = ["A'Tnkara", "Istanbul", "Antalya", "Bursa", "Trabzon"]; let index = cities.findIndex(item => item.toLowerCase().indexOf("t") > -1); console.log(`Letter 't' found in item at index ${index}`); // 'Letter 't' found in item at index 0' let word = cities.find(item => item.toLowerCase().indexOf("t") > -1); console.log(`word found : ${word}`); //'Letter 'T' found in item at index AnkaTra' /* */* */* */* */* */* */* */* */* */* */* */* */* */* */* */ filter is helpful for testing multiple values & returning an array, versus a single value reference video : https://www.youtube.com/watch?v=9b6gxQZHvis

Answer 76

- arrName.flat ( depth(optional) ) --- functionality / return : creates a new array with the sub-array elements concatenated into it up to the specified depth - arrName.every ( conditionalCallbackFn ) --- functionality : test if every element in the array pass the callback test; return : boolean value - arrName.some ( conditionalCallbackFn ) --- functionality : test if at least one element in the array passes the test; return : boolean value console.log(cities.flat(3).some(el => el.length === 9));

Answer 77

PUSH - adds element(s) to end + returns the new length of array UNSHIFT - add element(s) to beginning + returns new length of array SHIFT - remove element beginning + returns removed element POP - remove element from end + returns the removed value https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Answer 78

CONCAT - merge multiple (as many as you want) arrays (arr1.concat(arr2)) + returns a new array with the elements in first array followed by elements in the second array INCLUDES - look for a value + return true (if arg is present in array) or false (if not present) syntax : includes(searchElement, optionalStartingIndexToSearchFrom) + INDEXOF (indexOf) - look for value + return index where val is located or -1 if the val isn’t present syntax : indexOf(searchElement, optionalStartingIndexToSearchFrom) ——> includes to check if something is present but don’t need to know where, indexOf if you n eed the location JOIN - concats elements in array into one string, separated by commas (default if no arg is passed in) or specified separator syntax : let letters = [ 'T', 'C', 'E', 'P', 'S', 'E', 'R' ]; let song = letters.reverse().join('.'); //"R.E.S.P.E.C.T" REVERSE - mutates array by reversing the array in place https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

old cards Flashcards

(108 cards)

{config}