large-coding Flashcards
*How do you declare an object
(literal) const blah = {}, (constructor) new Object(), Object.create()
—————————————————————
Actually there’s 6 ways:
Object Literal Object Constructor Constructor Function Object.create() Method Object.assign() Method ES6 Classes
https://attacomsian.com/blog/javascript-create-object
*How do you declare an array
(literal) const blah = [], (constructor) new Array(), Array.from()
—————————————————————
// using the new keywrod
const array1 = new Array("1", "2")
console.log(array1)
// array literal const array2 = [true, false] console.log(array2)
// using the from method, createds a shallow copy array // doesn't work in IE const array3 = Array.from(array2) console.log(array3)
// you can spread one array into another one const sup = ['1', '2'] const sup2 = [...sup] console.log(sup2)
—————————————————————
Not sure if this counts as declaring an array but … you can create an array from objects like this
// You can create an array from an objects values using Object.values
const obj1 = {
name: "brad",
age: "12",
}
console.log(Object.values(obj1))
>> [ 'brad', '12' ]
// Or you could do it from an object’s keys using Object.keys
console.log(Object.keys(obj1))
» [‘name’, ‘age’]
*IMplement the revealing module pattern
There’s also something called the ‘revealing module pattern’ where you return stuff out of your IIFE for use elsewhere. For example in the code below I return an object for use:
const myName = (function() {
function logFn(){
console.log("hello");
}
return {logStuff: logFn}
})()
Now I can use stuff like myName.name in other places
How do you implement inheritance
ES6 way with classes:
class Player {
constructor(name, type) {
console.log(this, "From player")
//console.log(name, `This is the name inside the Player class`)
this.name = name;
this.type = type;
}
introduce() {
console.log(`Hi my name is ${this.name}, I'm a ${this.type}`)
}
}
class Wizard extends Player {
constructor (name, type) {
//console.log(name, `This is the name inside of the wizard class`)
let othertype = "billy";
let othername = "mark"
super(othername, othertype)
console.log(this, "From Wizard")
}
play() {
console.log(`Weeee I'm a ${this.name}, of type ${this.type}`)
}
}
const wizard1 = new Wizard('Shelly', 'Healer')
const wizard2 = new Wizard('Shawn', 'tank')
wizard2. introduce()
wizard2. play()
wizard1. introduce()
wizard1. play()
Pre-es6 way with prototypes:
var Player = function(name, type) {
this.name = name;
this.type = type;
}
Player.prototype.introduce = function() {
console.log(`Hi I'm ${this.name} of type ${this.type}`)
}
var wizard1 = new Player("Shelly", "healer");
var wizard2 = new Player("Billy", "tank");
wizard1.play = function() {
console.log(`Weeee, I'm a ${this.type}`)
}
wizard2.play = function() {
console.log(`Woop, I'm also a ${this.type}`)
}
wizard1. introduce()
wizard1. play()
Learn classes and extends from 20:53 https://www.udemy.com/course/advanced-javascript-concepts/learn/lecture/13511600#search
Can relearn classes and prototypes with this udemy section: https://www.udemy.com/course/javascript-beginners-complete-tutorial/learn/lecture/17190250#search
^that’s a setup, with a missing constructor in the child objects, that you would use if you don’t need to add any particular opening variables to the child and just want to use the parents constructor
Video tutorial on this one: https://www.udemy.com/course/javascript-beginners-complete-tutorial/learn/lecture/17190274#announcements
Also figured out how to do it like this:
>>const Player = function(name, age) {
this.name = name;
this.age = age;
}
//Player.prototype = new Player("billy", 12)
Player.prototype.sayname = function() {
console.log(`My name is ${this.name} and I am ${this.age} old`)
}
>>const Athlete = function(sport, name, age) {
Player.call(name, age)
this.sport = sport;
}
Athlete.prototype.saysport = function() {
console.log(I play ${this.sport})
}
const bobby = new Athlete(“soccer”, “billy”, 12)
bobby.saysport()
bobby.__proto__ = new Player(“billy”, 12)
//console.log(bobby.__proto__)
bobby.sayname()
*How many types are there in javascript and what are they
There are 7:
booleans
strings
numbers
symbol
undefined
null
object - this is a non primitive type as it doesn't have the value directly like the others. arrays, and function are objects too
*Quickly convert a variable to a number
you could use unary plus
console.log(+”10”)
console.log(Number(“10”)) is also correct
*loop through the properties of an object
const obj = {
name: "billy",
age: 12,
value: false,
}
const obj2 = {
color: "blue"
}
obj2.\_\_proto\_\_ = obj
console.log(obj2.color)
for (const prop in obj2) {
if (obj2.hasOwnProperty(prop)){
// use hasOwnProperty so you don't get the prototypes properties as
console.log(prop, obj[prop])
}
}
for (const [key, value] of Object.entries(obj2)){
console.log(key, value)
}
for (const key of Object.keys(obj2)){
console.log(key)
}
for (const value of Object.values(obj2)){
console.log(value)
}
*quickly convert a value to boolean
console.log(!!variable)
*use a property accessor with bracket notation to assign something to an object property
const fun = {
thing: {
yes: true,
no: false
}["no"]
}
console.log(fun.thing)
*What does && and || do? And which is executed first?
returns the value of the first falsy, so i presume || returns the value of the first truthy?
console.log(“abc” && 10 && NaN && “lol”)
Logical and (&&) is executed first:
console. log(“true” && false && true || console.log(“sup”)) // sup \n undefine
https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND
*HOw would you access the first element of an array?
Index 0, bracket notation, Array.at()
—————————————————————
const coolarray = [‘1’, ‘2’, ‘3’]
// bracket notation console.log(coolarray[0])
// using the at method // according to MDN this is experimental and may change in the future // doesn't work in IE console.log(coolarray.at(1))
// using the shift method // this mutates the array console.log(coolarray.shift())
// destructuring const anotherarray = ['1','2','3'] const [billy] = anotherarray console.log(billy)
const sample = [[‘1’, ‘2,’, ‘3’], [‘4’, ‘5,’, ‘6’]]
let [[a], [b]] = sample;
console.log(a, b); // “1” “4”
—————————————————————
This covers destructuring array
https://www.youtube.com/watch?v=giNjEgYTd9E
*How do you create an instance of an object?
new keyword using class constructor, Object.create()
—————————————————————
You can use the new keyword to initialize an instance of Object:
const fruits = new Object();
You can use the class keyword to define a new class in JavaScript instead of a function constructor, and then use the new keyword to create an instance of it.
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
return `Hi ${this.name} 👋`;
} }
const user = new User(‘Atta’, 30);
console. log(user.sayHi()); // Hi Atta 👋
console. log(user.age); // 30
–
The Object.create() method allows us to create a new object, using an existing object as the prototype of the newly created object. This method is especially useful when you want to create a new object from an already existing object.
const Vehicle = {
maker: 'BMW',
color: 'Black'
};
const vehicle = Object.create(Vehicle);
console. log(vehicle.maker); // Tesla
console. log(vehicle.color); // Red
*Build an old-school for loop and explain it
The for loop has the following syntax:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block. Statement 3 is executed (every time) after the code block has been executed.
*https://leetcode.com/problems/contains-duplicate/
a
*https://leetcode.com/problems/valid-anagram/
a
*https://leetcode.com/problems/fizz-buzz/
a
*https://leetcode.com/problems/remove-duplicates-from-sorted-array/
a
*make 3 boxes, one inside the other inside the other, center them on the page all of them centered within one another
when you click on one, only that ones event listener runs a console.log showing that ones name. do not trigger the event listener for child that’s in a parent unless you explicitely click on child
https: //www.youtube.com/watch?v=XF1_MlZ5l6M
https: //www.youtube.com/watch?v=SqQZ8SttQsI
https: //www.algoexpert.io/frontend/coding-questions/pig-emoji
*make the infinite scrol
https://www.algoexpert.io/frontend/coding-questions/infinite-scroll
*make the navbar
https://www.algoexpert.io/frontend/coding-questions/navbar
***unscramble the string by removing every third letter without creating a new array:
“Thaisb ics athee tsorngt tnhast oneovear fenadsp, pyeis pito g oeis tone a nd oin amy fari │
enodsi S omae ape opaler s taart edu s inggi ngo itt, nioth kano wi ngo wrhait sith wrash A nda tohe y awipllo cron │ ngOnInit() {
tipnuie tsi ng in g sith fror evtert juustt abelca usle”
xport class ArrayChallengeComponent {
inputStr: string = “Thaisb ics athee tsorngt tnhast oneovear fenadsp, pyeis pito g oeis tone a nd oin amy fari enodsi S omae ape opaler s taart edu s inggi ngo itt, nioth kano wi ngo wrhait sith wrash A nda tohe y awipllo cron tipnuie tsi ng in g sith fror evtert juustt abelca usle”;
inputArr: string[];
isBtnDisabled: boolean = false;
constructor(
private router: Router
) {
this.inputArr = this.inputStr.split('');
}
doReveal() {
let i = this.inputArr.length;
while (i--) {
(i + 1) % 3 === 0 && this.inputArr.splice(i, 1);
}
this.inputStr = this.inputArr.join("");
this.isBtnDisabled = true; }
goNext(): void {
this.router.navigateByUrl(‘where’);
}
—————————————————————
fixIt() {
let input = [ 'T','h','a','i','s','b',' ','i','c','s',' ','a','t','h','e','e',' ','t','s','o','r','n','g','t',' ','t','n','h','a','s','t',' ','o','n','e','o','v','e','a','r',' ','f','e','n','a','d','s','p',',',' ','p','y','e','i','s',' ', 'p','i','t','o',' ','g',' ','o','e','i','s',' ','t','o','n','e',' ','a',' ','n','d',' ',' ','o','i','n',' ','a','m','y',' ',' ','f','a','r','i',' ','e','n','o','d','s','i',' ','S',' ','o','m','a','e',' ','a','p','e',' ','o','p','a','l', 'e','r',' ','s',' ','t','a','a','r','t',' ','e','d','u',' ','s',' ','i','n','g','g','i',' ','n','g','o',' ','i','t','t',',',' ',' ','n','i','o','t','h',' ','k','a','n','o',' ','w','i',' ','n','g','o',' ','w','r','h','a','i','t',' ','s', 'i','t','h',' ','w','r','a','s','h',' ','A',' ','n','d','a',' ','t','o','h','e',' ','y',' ','a','w','i','p','l','l','o',' ','c','r','o','n',' ','t','i','p','n','u','i','e',' ','t','s','i',' ','n','g',' ','i','n',' ','g',' ','s','i','t', 'h',' ','f','r','o','r',' ','e','v','t','e','r','t',' ','j','u','u','s','t','t',' ','a','b','e','l','c','a',' ','u','s','l','e']; let number = 2;
input.forEach((letter, index) => {
if (index === number) {
input.splice(number, 1)
number += 2;
}
})
return input.join('') }
*****walk through my hugo code
a
*create a fancy search from several api’s
see my vim where
***make a todo list
either this (see my vim)
or this (see that course I just paid for)
