JavaScript ECMAScript6 Flashcards
JavaScript ECMAScript6: Functions
Define Pure Function
Specific value-producing function with no side effect and doesn’t require effects from other codes.
Functions have primarily two purposes
1) Called for side effect
2) Called for return value
Recursive function
Function that calls on itself
Stack Space
When computer stacks runs out of space.
Call Stack
Place where computer stores context
Almost all JavaScript values have properties. What are the two exceptions?
Null and Undefined
Access properties in JS by __ and __
. and [ ]
ex: value.x or value[ ]
How is value.x and value[] evaluated differently?
When using a dot, the word after the dot is the literal name of the property. When using square brackets, the expression between the brackets is evaluated to get the property name. Whereas value.x fetches the property of value named “x”, value[x] tries to evaluate the expression x and uses the result, converted to a string, as the property name. The elements in an array are stored as the array’s properties, using numbers as property names. Because you can’t use the dot notation with numbers and usually want to use a binding that holds the index anyway, you have to use the bracket notation to get at them.
Two ways to call length in array of variable varx
varx.length and varx[“length”]
What does doh.toUpperCase() do?
writes it all in uppercase as in DOH.
What does DOh.toLowerCase() do?
writes it all in lowercase as in doh.
Properties that contain functions is called ______?
methods
sequence = [5, 23, 67, 2]
sequence.push(4) would do what?
add 4 to the end of an array.
sequence = [5, 23, 67, 2]
sequence.pop() would do what?
remove the last item in the array
let day1 = {
squirrel: false,
events: ["work", "touched tree", "pizza", "running"]
};
console.log(day1.squirrel);
console.log(day1.wolf);
What would the logs print out?
false
undefined
Braces have two meanings in javascript? What is it?
At the start of a statement, they start a block of statements.
In any other position, they describe an object.
Reading a property that doesn’t exist will give you the value __________.
undefined
assign a value to a property expression with the = operator. This will ______ the property’s value if it already existed or _______ a new property on the object if it didn’t.
replace
create
Inside braces { } how do you separate properties within?
separate by ,
let anObject = {left: 1, right: 2};
delete anObject.left;
console.log(anObject.left);
console. log(“left” in anObject);
console. log(“right” in anObject);
What does it print out?
undefined
false
true
what does the ‘in’ operator do?
The binary in operator, when applied to a string and an object, tells you whether that object has a property with that name.
the most important HTML tag is _______. This tag allows us to include a piece of JavaScript in a document.
What does document.documentElement do?
return the root element of the document
Data structure is a _________, when it has branching structure.
tree
Application nodes may have children, whereas identifiers and values are ______, or nodes without children.
leaves
What is XML
which is a generic data format with an HTML-like syntax.
Is there away to create node and add children/attribute?
No. Instead, you have to first create it and then add the children and attributes one by one, using side effects.
Parent Node
would be something like
The firstChild and lastChild properties point to the first and last child elements or have the value null for nodes without children.
Points to the first child;
points to the last child.
In JavaScript, a truthy value is a value that is considered true when evaluated in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for ___, __, ___, ___, ____, ____.
false, 0, “”, null, undefined, and NaN
What is OOP
Object-oriented programming
OOP helps us to achieve the following…
Abstraction:
Determining essential features
OOP helps us to achieve the following…
Encapsulation:
Containing and protecting methods and properties
OOP helps us to achieve the following…
Modularity:
Breaking down a program into smaller sub-programs
clientWidth and clientHeight
Give you the size of the space inside the element, ignoring border width.
offsetWidth and offsetHeight properties
The size and position of an element can be accessed from JavaScript. The properties give you the space the element takes up in pixels.
getBoundingClientRect method
It returns an object with top, bottom, left, and right properties, indicating the pixel positions of the sides of the element relative to the top left of the screen. If you want them relative to the whole document, you must add the current scroll position, which you can find in the pageXOffset and pageYOffset bindings.
A style attribute may contain one or more ___________, which are a property (such as color) followed by a colon and a value (such as green).
declarations
what does display:none; do?
no css will appear for that property.
JavaScript code can directly manipulate the style of an element through the______________. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to in order to change a particular aspect of the element’s style.
element’s style property.
When multiple rules define a value for the same property, the most recently read rule gets a higher precedence and wins. Styles in a style attribute applied directly to the node have the _____ precedence and always win.
highest
hierarchy goes to ID _ CLASS
>
specificity
A rule’s specificity is a measure of how precisely it describes matching elements, determined by the number and kind (tag, class, or ID) of element aspects it requires.
selector syntax—the notation used in style sheets to determine which elements a set of styles apply to—is that we can use this same mini-language as an effective way to find DOM elements.
Query Selectors
___________ method, which is defined both on the document object and on element nodes, takes a selector string and returns a NodeList containing all the elements that it matches.
querySelectorAll
is querySelectorAll live?
Unlike methods such as getElementsByTagName, the object returned by querySelectorAll is not live. It won’t change when you change the document. It is still not a real array, though, so you still need to call Array.from if you want to treat it like one.
querySelector method (without the All part) works in a similar way. This one is useful if you want a specific, single element. It will return _____________________________.
only the first matching element or null when no element matches.
Object.keys function.
EX:
console.log(Object.keys({x: 0, y: 0, z: 2}));
// → ["x", "y", "z"]You give it an object, and it returns an array of strings—the object’s property names.
Object.assign function
copies all properties from one object into another.
numbers, strings, and Booleans, are all ________________.
immutable—it is impossible to change values of those types.
JSX is a _____________ for JavaScript. It was written to be used with React.
syntax extension
If a JavaScript file contains JSX code, then that file will have to be _______. That means that before the file reaches a web browser, a JSX _______ will translate any JSX into regular JavaScript.
compiled, compiler
Here's an example of a \_\_\_\_\_\_\_ : const h1 = <h1>Hello world</h1>
JSX element:
