Javascript Flashcards
DOM
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.
Variables
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)
Conditionals
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
Loops
Functions. How to create? How to call?
set of instructions
//declaration:
function name(parameters) {
//body
}
//calling the function: name(arguments)
Steps involved with variable creation
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.
what is a variable declaration? what does it do?
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”
what is variable assignment?
assigning a value to a declared space of memory.
types of data
numbers, strings, etc
What is a String
stores text; always surrounded by double quotes(“), single quotes(‘), or ticks(`)
may need to use an escape character depending on order…. using \
What are some data types within that are Numbers? How can you manipulate them?
int - whole numbers
float - decimal points
note: can be signed (positive or negative)
manipulation: + - * / % (modulus - the remainder)
what can modulus be used for to figure out?
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
what happens to user interactions involving javascript when the page is refreshed?
everything resets.
difference between = == === != !==
= 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
how do you add Leon’s smurf to an element, waiting for a click to happen?
document.querySelector(“#elementID”).addEventListener(‘click’, myFunction)
function myFunction() {
//do what you want with the click here
}
change an element’s(id=”dog”) text content to “chihuahua”
document.querySelector(“#dog”).innerText = “chihuahua”
what are constants? what are best practices for naming them?
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 = /* */
argument vs parameter
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””.
how do you set a default parameter for a function?
function myFunction(message = "default message"){
}
or (message = anotherFunction()) - which will store the value that function returns by default
function naming best practices
since function are actions, they usually start with a verb… like
getUserName
createYoMama
function functionality best practices
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
Rewrite the function using ‘?’ or ‘||’
function checkAge(age) {
if (age > 18) {
return true;
} else {
return confirm('Did parents allow you?');
}
}
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
function declaration syntax
fucntion myFunction() {
//do stuff
}
can be called earlier than it’s defined. this is because javascript starts off by scanning for global functions.
function expression syntax
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.
in javascript, functions are ____
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
arrow function syntax
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;
};
when do arrow functions need an explicit “return”?
when they are multiline.
let doMath = (a,b) => {
let c = a/b;
return c*9;
};
console.log(doMath(1,3));
literal vs structural array declaration
literal - let myArray = []
stuctural - Array myArray = new Array (need to double check syntax)
array methods: how would you sort nums = [12, 5, 10] from lowest to highest
nums.sort((a,b)=>
arrow functions can be used for…
implicant returns
array method: how would you filter only evens from an array
array.filter(item=>item%2==0)
declare an object literally.. a stopwatch and give it 4 properties and 2 methods
let stopwatch = {}
stopwatch. brand = “Nike”
stopwatch. size = “medium”
stopwatch. color = “gold”
stopwatch. shiny = “super shiney”
stopwatch. getBrand = ()=>console.log(stopwatch.brand)
stopwatch. changeColor(
every single thing in javascript is …
an object
object constructor vs object literal syntax
let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntaxwhat do you call a variable attached to an object? what do you call a function attached to an object?
variable attached to object = property function attached to object = method
array.map method
nums = [2,5,7,2]
nums.map(n=>n*n)
array.reduce method
puts results in new array. let sum = nums.reduce ( (acc, c) => acc + c, 0 )
acc = accumulator; c = current value; 0 is where accumulator starts
What is object oriented programming?
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.
reverseThisString = “backwards”
reverseThisString.split(‘’).reverse().join(‘’)
how to reduce a string?
split, reverse, join
let str = "this is a sentence"
console.log(str.split('').reverse().join(''))
What are the 4 pillars of object oriented programming?
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
Factory Function vs Constructor Function
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)
array methods and what they do (map, filter, slice, splice)
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.
how does javascript work?
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.
what is the main environment javascript runs in? and what does it allow it to do?
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)
how did people used to handle async code in javascript (before promises)?
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()
promise
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.
async/await
abstracts away promises
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?
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
