large-coding Flashcards

1
Q

*How do you declare an object

A

(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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

*How do you declare an array

A
(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’]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

*IMplement the revealing module pattern

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How do you implement inheritance

A
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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

*How many types are there in javascript and what are they

A

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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

*Quickly convert a variable to a number

A

you could use unary plus
console.log(+”10”)

console.log(Number(“10”)) is also correct

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

*loop through the properties of an object

A
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)
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

*quickly convert a value to boolean

A

console.log(!!variable)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

*use a property accessor with bracket notation to assign something to an object property

A
const fun = {
      thing: {
        yes: true,
        no: false
      }["no"]
    }
console.log(fun.thing)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

*What does && and || do? And which is executed first?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

*HOw would you access the first element of an array?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

*How do you create an instance of an object?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

*Build an old-school for loop and explain it

A

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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

*https://leetcode.com/problems/contains-duplicate/

A

a

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

*https://leetcode.com/problems/valid-anagram/

A

a

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

*https://leetcode.com/problems/fizz-buzz/

A

a

17
Q

*https://leetcode.com/problems/remove-duplicates-from-sorted-array/

A

a

18
Q

*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

A

https: //www.youtube.com/watch?v=XF1_MlZ5l6M
https: //www.youtube.com/watch?v=SqQZ8SttQsI
https: //www.algoexpert.io/frontend/coding-questions/pig-emoji

19
Q

*make the infinite scrol

A

https://www.algoexpert.io/frontend/coding-questions/infinite-scroll

20
Q

*make the navbar

A

https://www.algoexpert.io/frontend/coding-questions/navbar

21
Q

***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”

A

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('')   }
22
Q

*****walk through my hugo code

A

a

23
Q

*create a fancy search from several api’s

A

see my vim where

24
Q

***make a todo list

A

either this (see my vim)

or this (see that course I just paid for)

25
Q

***make html form and do validation on it

A

find it

26
Q

**watch all that crud one to see if its worth

A

8