Javascript

Question 1

DOM

Answer 1

the browsers rendering of your HTML file (NOT the html file by itself)… we can manipulate it with javascript. when you refresh, all changes to DOM go away.

Question 2

Variables

Answer 2

what you use to store data in memory when programming

the entity used to tell our program to remember a value for later.
stored in memory.
made up of two parts: declaration and assignment. think of it like a bucket in memory that is filled with data (declaration = bucket ; assignment = value/data stored in bucket)

Question 3

Conditionals

Answer 3

used to make decisions using comparisons. value can be TRUE or FALSE.

if(age > 18){
//value is true so do this stuff
}
else{
//value is not true so do this stuff
}
Comparisons:
- equality -
9===9 is true
7===3 false
"Hello" ==== "Hello" true

Question 4

Loops

Question 5

Functions. How to create? How to call?

Answer 5

set of instructions

//declaration:
function name(parameters) {
//body
}

//calling the function:
name(arguments)

Question 6

Steps involved with variable creation

Answer 6

declaration: let age
assignment: age = 25

both at same time:
let age = 25

declaration is like creating a bucket for data
assignment is like putting something in the bucket.

Question 7

what is a variable declaration? what does it do?

Answer 7

it creates a space in memory
example: let age

let is what allows it to create a new space in memory. it triggers the PC to be like “SOMETHING IS TRYING TO MAKE A DATA BUCKET”

Question 8

what is variable assignment?

Answer 8

assigning a value to a declared space of memory.

Question 9

types of data

Answer 9

numbers, strings, etc

Question 10

What is a String

Answer 10

stores text; always surrounded by double quotes(“), single quotes(‘), or ticks(`)

may need to use an escape character depending on order…. using \

Question 11

What are some data types within that are Numbers? How can you manipulate them?

Answer 11

int - whole numbers
float - decimal points
note: can be signed (positive or negative)

manipulation: + - * / % (modulus - the remainder)

Question 12

what can modulus be used for to figure out?

Answer 12

figuring out if a number is even or odd (x%2==0 means even). figuring out if a number is divisible by another number.

fizzbuzz programming challenge:
if divisible by 3 print fizz, divisible by 5 print buzz, divisible by 3 and 5 print fizzbuzz

Question 13

what happens to user interactions involving javascript when the page is refreshed?

Answer 13

everything resets.

Question 14

difference between 
=
==
===
!=
!==

Answer 14

= is assignment
== is comparing if values are same
=== is comparing if values and data types are the same
!= checks if values are NOT the same
!== checks if values or data types are NOT the same

Question 15

how do you add Leon’s smurf to an element, waiting for a click to happen?

Answer 15

document.querySelector(“#elementID”).addEventListener(‘click’, myFunction)

function myFunction() {
//do what you want with the click here
}

Question 16

change an element’s(id=”dog”) text content to “chihuahua”

Answer 16

document.querySelector(“#dog”).innerText = “chihuahua”

Question 17

what are constants? what are best practices for naming them?

Answer 17

constants are variables that can only be assigned once.

if you know the value by run time, like 
const COLOR_ORANGE = "#FF7F00";

then its recommended to put name in all caps.

if they are assigned during run time, just do it normally. like
const pageLoadTime = /* */

Question 18

argument vs parameter

Answer 18

parameter = variable listed inside patentheses in function declaration (declaration time term)

atgument = value thats passed to function when it is called (call time term)

we declared functions listing their parameters, then call them passing arugments

example:
function showMessage(from, text) {
alert( from + ‘: ‘ + text );
}

showMessage(from, “Hello”);

In the example above, one might say: “the function showMessage is declared with two parameters, then called with two arguments: from and “Hello””.

Question 19

how do you set a default parameter for a function?

Answer 19

function myFunction(message = "default message"){
}

or (message = anotherFunction()) - which will store the value that function returns by default

Question 20

function naming best practices

Answer 20

since function are actions, they usually start with a verb… like
getUserName
createYoMama

Question 21

function functionality best practices

Answer 21

functions should be short and each do exactly one thing. if big, should probably be split in to smaller ones.

separate functions are easier to test and debug; its existsance is a great commment

Question 22

Rewrite the function using ‘?’ or ‘||’

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('Did parents allow you?');
  }
}

Answer 22

Using a question mark operator ‘?’:

function checkAge(age) {
  return (age > 18) ? true : confirm('Did parents allow you?');
}

Using OR || (the shortest variant):

function checkAge(age) {
  return (age > 18) || confirm('Did parents allow you?');
}

https://javascript.info/function-basics

Question 23

function declaration syntax

Answer 23

fucntion myFunction() {
//do stuff
}

can be called earlier than it’s defined. this is because javascript starts off by scanning for global functions.

Question 24

function expression syntax

Answer 24

let myFunction = function() {
//do stuff
};

(semi colon is recomended at end of a statement, which this is. not part of function declaration syntax though)

can only be called after it’s defined.

Question 25

in javascript, functions are ____

Answer 25

a value representing an “action”

if you say console.log(myFunction) it won’t run the function, it will print out the code (which is the value stored within the variable myFunction). console.log(myFunction()) would run the function code

Question 26

arrow function syntax

Answer 26

arrow functions are shorthand for function expressions:

let func = (arg1, arg2, ..., argN) => expression;
This creates a function func that accepts arguments arg1..argN, then evaluates the expression on the right side with their use and returns its result.

In other words, it’s the shorter version of:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Question 27

when do arrow functions need an explicit “return”?

Answer 27

when they are multiline.

let doMath = (a,b) => {
let c = a/b;
return c*9;
};

console.log(doMath(1,3));

Question 28

literal vs structural array declaration

Answer 28

literal - let myArray = []

stuctural - Array myArray = new Array (need to double check syntax)

Question 29

array methods: how would you sort nums = [12, 5, 10] from lowest to highest

Answer 29

nums.sort((a,b)=>

Question 30

arrow functions can be used for…

Answer 30

implicant returns

Question 31

array method: how would you filter only evens from an array

Answer 31

array.filter(item=>item%2==0)

Question 32

declare an object literally.. a stopwatch and give it 4 properties and 2 methods

Answer 32

let stopwatch = {}

stopwatch. brand = “Nike”
stopwatch. size = “medium”
stopwatch. color = “gold”
stopwatch. shiny = “super shiney”
stopwatch. getBrand = ()=>console.log(stopwatch.brand)
stopwatch. changeColor(

Question 33

every single thing in javascript is …

Answer 33

an object

Question 34

object constructor vs object literal syntax

Answer 34

let user = new Object(); // "object constructor" syntax
let user = {};  // "object literal" syntax

Question 35

what do you call a variable attached to an object? what do you call a function attached to an object?

Answer 35

variable attached to object = property
function attached to object = method

Question 36

array.map method

Answer 36

nums = [2,5,7,2]

nums.map(n=>n*n)

Question 37

array.reduce method

Answer 37

puts results in new array.
let sum = nums.reduce ( (acc, c) => acc + c, 0 )

acc = accumulator; c = current value; 0 is where accumulator starts

Question 38

What is object oriented programming?

Answer 38

A style of programming the focuses on objects rather than procedural programming (functions). Procedural programming can get very disorganized, so object oriented programming was created to help with that. OOP groups up related variables and functions in to an object. Variables, when belonging to an object, are called properties. Functions, when belonging to an object, are called methods.

Question 39

reverseThisString = “backwards”

Answer 39

reverseThisString.split(‘’).reverse().join(‘’)

Question 40

how to reduce a string?

Answer 40

split, reverse, join

let str = "this is a sentence"
console.log(str.split('').reverse().join(''))

Question 41

What are the 4 pillars of object oriented programming?

Answer 41

Encapsulation - reduce complexity + increase reusability ;
grouping related variables and functions in to objects.

Abstraction - reduce complexity + isolate impact of change;
hide some properties and methods to make a simpler interface; reduced impact of strange

Inheritanece - eliminate redundant code;
allows you to remove redundant code. anything that’s shared can be defined in to a general object.

Polymorphism - refactor ugly switch/case statements
“many forms”; this allows you to get rid of long

Question 42

Factory Function vs Constructor Function

Answer 42

These both do the same thing: creates an object. This is a matter of preference. Most people coming from OOP languages prefer the Constructor Function, but should be familiar with both.

//Factory Function
function createCircle(radius) {
    return {
        radius,
        draw: function() {
            console.log("draw")
        }
    }
}

const circle = createCircle(1)

//Consutroctor Function
function Circle(radius) {
    console.log('this',this)
    this.radius = radiusthis.draw = function() {
        console.log('draw')
    }
}

const another = new Circle(1)

Question 43

array methods and what they do (map, filter, slice, splice)

Answer 43

map -> alters each element in an array, and spits out a new array.
filter -> filters out an array based on the criteria, and returns a new array.
slice -> creates a shallow copy of the array based on (starting index (inclusive), final index (exclusive)).
splice -> adds or removes a number of elements in an array, and mutates the original array.

Question 44

how does javascript work?

Answer 44

it is syncronous and single-threaded.
(we have to wait for every single thing to happen. wait for request to finish before yo ucan scroll, etc. but thats not what we see… why?

the environment you run JS in - browser. since it runs in browser yo ucan do things js couldnt do on its own.

Question 45

what is the main environment javascript runs in? and what does it allow it to do?

Answer 45

the browser.

javascript is singlethreaded and syncronous, but when it runs in the browser it has access to web apis (like THE DOM). requests are often made out to these web apis and THOSE tasks are run asyncronously… happening while the rest of the JS script continues to move on (in its mind it finished that “tasK” by passing it off)

Question 46

how did people used to handle async code in javascript (before promises)?

Answer 46

callback hell; the pyramid of doom. nesting functions in functions:
function houseOne(){
  setTimeout( () => {
      console.log('Papger 1 delivered")
      setTimeout( () => {
          console.log('Paper 2 delivered')
}, 2000)
}, 3000) }

houseOne()

Question 47

promise

Answer 47

revolutionized way we handle responses from async. left behind callbacks and moved toward chaining promises. that was also hard to read so then came out with async / await which has syntax more fmailiar to javascript.

Question 48

async/await

Answer 48

abstracts away promises

Question 49

In terms of the browser: what is the event loop? What is the call stack? What is the task/job queue? How are they connected?

Answer 49

execute line of code: gets put on call stack / if we make use of asyncronous things like web apis the returned info gets put in the queue … once the call stack is empty on the next iteration of event loop it grabs the first item in the queue