Javascript / JQuery / OOP / JSON (junior) Flashcards
What is a variable?
Where data can be stored!
Why are variables useful?
variable can be used to store and recall information through-out a program.
What two special characters can a variable begin with?
$ _
How do you declare a variable?
using a variable identifier
How do you assign a value to a variable?
= next to variable name
Are variables case sensitive?
yes
Which words cannot be used as variable names?
keywords (var, function, if) numbers..
What is a string?
Sub-series of characters that comes inside two ‘ or “
What is the string concatenation operator?
+
What is the difference when it comes to using single quotes or double quotes ( ‘ ‘ or “ “ )?
no difference in functionality
How do you escape quotation characters?
\ before the quote.
What is a number in JavaScript?
an integer
What is an arithmetic operator?
Mathematical function that takes two operands and performs a calculation on them.
Name four of the arithmetic operators?
add subtract
What is the order of execution?
PEMDAS
What is a boolean?
true / false
What is a comparison operator?
< = >
What is a comparison operator?
< = > == ===
What is a function?
Series of statements that are grouped together because they perform a specific task.
Why are functions useful?
you can reuse the function (rather than repeating the same set of statements).
How do you call a function?
function name followed by () with any argument inside.
What are the parts of a function definition?
function keyword, function name and code bloke inside curly braces.
What is the difference between a parameter and an argument?
methods are same as functions, except they’re created inside (and are part of) an object.
What is the difference between a parameter and an argument?
parameters are placeholders for values in function and arguments are the values when calling the function.
Why is it important to understand truthy and falsy values?
They allow decision making
Why is the typeof an object null?
it’s a bug!
What is the difference between null and undefined?
an undefined variable has no value, null has no specific value assigned to it but has a placeholder and act as an object ready to be assigned with a value.
What is the proper syntax for using the or operator?
|| double pipe
Why do you want to avoid using == for comparison?
== doesn’t check on type similarity!
Do all if statements require an else statement?
no
What is the primary use case for switches?
comparing any individual value against a range of other individual values.
Does the default case have to be at the bottom of the switch statement?
to get executed after checking for all possible cases
Does the default case have to be at the bottom of the switch statement?
no!
What is an object in JavaScript?
A set of variables and functions grouped together.
How do you create an object literal?
declaring a variable with a name for object, equal sign, curly braces and key/value for each property or method in between separated by comma
What is a property in relation to JavaScript objects?
A set of key and value.
When should you use bracket notation over dot notation with objects?
any time there’s illegal property name dot notation needs to be used to access the value
How do you remove a property from an object?
delete operator.
What is an array in JavaScript?
list of data
How do you create an array literal?
assigning data in brackets
What are the keys for the values inside an array?
index numbers.
Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?
objects
What are some good use cases for using objects inside arrays?
online shopping card with list of items and their properties (price, ..)
What is the primary advantage to storing your selected elements in a variable?
so they can be reused every time without a need to target them again
Why might you need JavaScript to modify the DOM after the page loads?
adjustments and updates based on user behavior
How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?
setting better structure and placement for items that are going to be manipulated
What are the differences between innertext and textContent?
textContent gets the content of all elements, including and <style> elements. In contrast, innerText only shows “human-readable” elements.</style>
What datatype are the values you remove from a text input?
strings
Why is it so important to be able to dynamically update text?
to be able to updated the text content based on user interaction
What are some of the drawbacks of HTML Event Handler Attributes?
readibility, seperating html and JS codes
Why is the Window.event property to be avoided in new code?
window object gets rewrite/change with every change
What is the difference between the getElementById() method and the querySelector() method?
getElementById() is only for ids, querySelector() can be used to target any element
Who passes in the event object into the handleClick callback function?
JS
Does a callback function require a name?
no, but would be better to set name to describe the function and reusability
What is the purpose of a loop?
to rerun a code block while their condition is true
Why might there be different kinds of loops?
depending on the condition required to run a code block
What is the purpose of a conditional expression as it relates to loops?
to update the condition set every time loop runs the code block
Could a loop potentially go on forever?
yes!
Could a loop never start?
yes!
How do you target the value of a property in an object.
using bracket
When should you use a for in loop?
looping over an object
What is the difference between the parentNode and parentElement properties?
parentElement is the actual element, parentNode could be any item.
Why is it important to be able to traverse the DOM?
to access element based on where they’re located.
What kind of information is useful to store in custom attributes?
to add information about the element and can be targeted and modified based on that information
What are two ways to target elements on the DOM?
querySelector, getElementById
What is another way to add a text node to an element other than using textContent.
innerText
How do you create a HTML element using vanilla Javascript?
createElement
Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?
less code, prevent repeating the same code
Why are arrays preferred over objects for the functionality referenced in question 1?
arrays are indexed and easier to go through
Why is it important to be able to retrieve and use data from inputs?
.
Why is it dangerous to assume you have the correct data when creating elements?
.
What is jQuery?
a library/ JS file that can be added to web page to allow changing using css selectors easier
What is the jQuery selector function?
$()
a function that allows selecting one or more element in the page
What does the jQuery selector function return?
element
Why would someone use jQuery over vanilla Javascript?
for selecting and modifying element easier
What are some downsides from using jQuery over vanilla Javascript?
getting stuck using jquery and not being familliar enough with vanilla JS
jquery is on the way go out
it has a longer load time
How do you get the text out of an HTML element?
.text()
How do you get the value out of an HTML input field?
.val()
What’s the difference between .text() and .html()?
.text() gets only text content and .html() get full element
What does .on() do?
same as eventlistener
What does .on() do?
set event listener, same as eventlistener
What is event bubbling?
moving up containing element.
What is the difference between event.target and event.currentTarget.
currentTarget is the where event was placed on and target is the immediate element
What is the first argument the function setTimeout takes?
call back function
If the second argument is not passed into the setTimeout function, what is the default value?
0
What are some scenarios where setTimeout can be useful?
modal like newsletter
What does the setInterval function return?
It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().
What argument does the clearInterval function take?
intervalID
What are some scenarios where setInterval can be useful?
stopwatch, slideshow carousel
What is the event loop?
moving events from queue to stack
What does the term blocking mean?
on long action that blocks all other actions to run while fully executed
What is the call stack?
set of actions running in order of “lifo” “last in last out”
Which elements in a website are useful to create dynamically?
search results
Why should you not create all elements dynamically?
not necessary, would be easier to have placeholder “container” and buttons pre-made and ready to target.
Why do we need a single source of truth?
so we can easily access and modify the data. to make sure the data set is always updated and dom is updating based on the data model.
Why would I create a function to generate my DOM Element instead of just writing my code in the global scope?
.
What is a method?
functions inside objects
What does a method do?
runs a function based of instruction inside the object
What is this?
refers to the state that the code is being excuted in
What does bind do?
the method that binds a specific value to “this” (where the codes get executed.
What is the difference between a function and an object literal?
functions are callable objects, they have (apply, bind, call)
What is Prototypal Inheritance?
adding features (properties) from one object to another
What is the Prototypal Chain?
going up the latter of properties inherited from other objects
In the custom objects we created, I noticed that our prototype object has another __proto__ property, where did that come from?
window (global) object
Why does JavaScript have Prototypal Inheritance?
to enable easier object creation, mainly to save memory
What does the new keyword do?
it creates an instance of an object
I could’ve added a method to the constructor function by assigning a method to a property on the this object. Why do we have to add it to the prototype property?
memory efficiency. the properties get inherited and doesn’t need to be on the instance object itself!
Since classes are technically functions as well. Can you name a difference between classes and functions?
function declarations and class declarations is that function declarations are hoisted and class declarations are not.
What is the first thing that happens in a class when it is instantiated with the new keyword?
it calls the constructor function of the object
What is the benefit of instantiating Classes within other classes?
child objects can inherit the data and code features of their parent class, so you can reuse functionality common to all the object types rather than having to duplicate it.
Why are parent - child relationships important in OOP?
using the data and features of parent class/object
What is the basic idea of OOP?
pairing data with functionality
Why did you have to bind this for the feedChild method in the Parent class?
wouldn’t be able to get the data from other object
Why is it important to assign callback methods to properties in the constructor?
so they dont get destroyed and be able to use them once passed the constructor
Why did the Maker class require all of the Parent class info?
to have the values to pass to.
Why did you have to bind this for the replenishFood method.
so it can be called from another object
What decides the order in which JS files must be loaded?
whichever tools that needs to be called has to be placed and defined first
What is JSON?
a text-based data format following the JS object syntax
What are serialization and deserialization and why are they useful?
The process of turning an object in memory into a string so it can be modified or sent over the network or from a string to an object so it can be used
How do you deserialize a JSON string using JavaScript?
JSON.parse()
What is a client?
what send a request to receive response
What is a server?
what would run a service to serve web page, files ect ..
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What are the formats of HTTP Requests and Responses?
Start Line, Headers, Body
How does ajax work?
by sending XHR underneath
Why did we need the jQuery CDN?
so the library code can be used
How do you specify the request method (GET, POST, etc.) when calling ajax?
by using method property
Why might you need to build elements dynamically with data from an AJAX request?
so it can be created based on the amount (length) of the data getting back
Should you use named functions or anonymous functions for success and error handlers?
named functions help with readability and better organization (clean code)
Variables defined with the var keyword are function scoped. const and let are _____ scoped.
block-scoped
Name some characteristics of a variable declared using const
immutable, must always initialize immediately
Name some characteristics of a variable declared using let
they are mutable
What does block scope mean?
the code block between curly braces
In the file we can push a new value to an array defined using the const variable. How does that work?
the reference value (property) of the const variable can be updated
Name some things that var can do that const and let can’t.
var can be hoisted on load
If var can be used virtually anywhere, why would we switch?
using let and const helps to create variables for specific blocks and prevent c
What is the syntax in writing a template literal?
${}
What is string interpolation?
it converts a dynamically computed value into a string and inserted to the string returned by the literal.
When was destructuring introduced?
ES6 2015
Why could the running commas technique of destructuring an array be a bad idea?
keeping the count of the indexes
How can you easily tell the difference between destructuring and creating array/object literals.
destructuring takes place on left side
How does an ES6 arrow function differ from an ES5 function?
no function keyword, less verbose and dont require binding, no personal block scope
When an arrow function’s code block is left without curly braces, what (if anything) changes in its functionality?
return the result of expression without return keyword
In what situations would you possibly use an arrow function?
.
In what situations would you not want to use an arrow function?
for methods
What is Array.prototype.filter useful for?
filtering out items based on the argument passed into it
What is Array.prototype.map useful for?
to return the result of a function on each input value
What is Array.prototype.reduce useful for?
to get the result of ta function based on input value
What are the three states a Promise can be in?
pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
using .then() passing the value received
How do you handle the rejection of a Promise?
by using .catch() passing error received as argument
What does fetch() return?
a promise containing a response object
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
pass method as second argument of fetch
When does React call a component’s componentDidMount method?
immediately after a component is mounted (inserted into the tree)
Name three React.Component lifecycle methods.
constructor()
render()
componentDidMount()
How do you pass data to a child component?
.
