Javascript Flashcards
1
Q
What is a console?
A
The console is a panel that displays important messages, like errors, for developers. If we want to see things appear on our screen, we can print, or log, to our console directly.
2
Q
console.log()
A
When we write console.log() what we put inside the parentheses will get printed, or logged, to the console. This is important so we can see the work that we’re doing.
3
Q
What are the two types of code comments in Javascript?
A
A single line comment and a multi-line comment
4
Q
How do you write a single line comment?
A
// + comment
Note: You can also write a single line comment after a line of code.
5
Q
How do you write a multi-line comment?
A
/* to begin the comment, and / to end the comment.
Note: you can also use this syntax to comment something out in the middle of a line of code.
Ex: console.log(/IGNORED!*/ 5); // Still just prints 5
6
Q
When is it a good time to use multi-line comments?
A
When preventing a block of code from running.
7
Q
What are data types? How many fundamental data types are there?
A
Data types are the classifications we give to the different kinds of data that we use in programming. There are 7 fundamental data types.
8
Q
What are the seven different fundamental data types?
A
Number, string, boolean, null, undefined, symbol, and object.
9
Q
What is a string data type?
A
Any grouping of characters on your keyboard (letters, numbers, spaces, symbols, etc.) surrounded by single quotes: ‘ … ‘ or double quotes “ … “
10
Q
What is a boolean data type?
A
A data type that only has two possible values- true or false. You can think of it as answers to a “yes” or “no” question.
11
Q
What is a null data type?
A
This data type represents the intentional absence of a value, and is represented by the keyword null
12
Q
What is an undefined data type?
A
Uses the keyword undefined (without quotes) and means that a given value does not exist. It represents the absence of a value like null but is used differently.
13
Q
What is an object data type?
A
Collections of related data.
14
Q
What is an operator?
A
An operator is a character that performs a task in our code.
Examples:
Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
15
Q
What is the keyboard symbol for the multiply operator?
A
- Ex: 7 * 3 = 21
16
Q
What is the keyboard symbol for the division operator?
A
/
Ex: 9/3 = 3
17
Q
What is the keyboard symbol for the remainder operator?
A
%
console.log(11 % 3); // Prints 2
18
Q
What is the remainder operator sometimes called?
A
modulo
19
Q
What is string concatenation?
A
Combining one string to another string use the + operator.
Ex: console.log(‘hi’ + ‘ya’); // Prints ‘hiya’
20
Q
How would we include space in between two strings when we are using string concatenation?
A
We have to include empty parenthesis in between them or space at the end or beginning of a string.
Ex:
console.log(‘front ‘ + ‘space’);
// Prints ‘front space’
console.log(‘back’ + ‘ space’);
// Prints ‘back space’
console.log(‘no’ + ‘space’);
// Prints ‘nospace’
console.log(‘middle’ + ‘ ‘ + ‘space’);
// Prints ‘middle space’
21
Q
What are properties?
A
Properties are the values associated with a JavaScript object.
22
Q
What is the symbol used for the dot operator?
A
.
Ex: console.log(‘Hello’.length); // Prints 5
23
Q
What are methods?
A
A method is a function that belongs to some object or a set of some instructions that performs a certain task.
24
Q
How do we use or “call” methods?
A
We call, or use, methods by attaching an instance with:
a period (the dot operator)
the name of the method
opening and closing parentheses
Ex:’example string’.methodName().
Ex: console.log(‘hello’.toUpperCase()); // Prints ‘HELLO’
25
.random()
This method returns a random number between 0 (inclusive) and 1 (exclusive). Math.random() always returns a number lower than 1.To generate a random number between 0 and 50, we could multiply this result by 51, like so:
Math.random() * 51;
26
Math.floor()
This method takes a decimal number, and rounds down to the nearest whole number.
Ex:
Math.floor(Math.random() * 50);
27
Math.ceil()
The Math.ceil() function always rounds up to the nearest integer.
Ex:
console.log(Math.ceil(.95));
// expected output: 1
Ex:
console.log(Math.ceil(4));
// expected output: 4
console.log(Math.ceil(7.004));
// expected output: 8
28
Number.isInteger()
method determines whether the passed value is an integer.
Ex:
console.log(Number.isInteger(2017))
//Prints true
29
How can we access properties and methods?
We can access properties and methods by using the ., dot operator.
30
What is a variable?
A variable is a container for a value. They are like little containers for information that live in a computer’s memory. You can have container, label it, and put "stuff" in it.
31
What three things can we do with variables?
1. Create a variable with a descriptive name.
2. Store or update information stored in a variable.
3. Reference or “get” information stored in a variable.
32
var
var, short for variable, is a JavaScript keyword that creates, or declares, a new variable.
Ex:
var myName = 'Arya';
console.log(myName);
// Output: Arya
33
What is myName when creating a variable?
This would be the variable name (labeling the container). It is standard convention to use camel casing.
Ex:
var myName = 'Arya';
console.log(myName);
// Output: Arya
34
What is camel casing?
In camel casing you group words into one, the first word is lowercase, then every word that follows will have its first letter uppercased.
Ex:
camelCaseEverything
35
What is the = sign when creating a variable?
= is the assignment operator. It assigns the value ('Arya') to the variable (myName).
Ex:
var myName = 'Arya';
console.log(myName);
// Output: Arya
36
What are some important rules when naming variables?
1. Variable names cannot start with numbers.
2. Variable names are case sensitive, so myName and myname would be different variables. It is bad practice to create two variables that have the same name using different cases.
3. Variable names cannot be the same as keywords.
37
let
The let keyword signals that the variable can be reassigned a different value.
Ex:
let meal = 'Enchiladas';
console.log(meal); // Output: Enchiladas
meal = 'Burrito';
console.log(meal); // Output: Burrito
38
What happens when we don't assign a value to variable (var or let)?
If we don’t assign a value to a variable declared using the let keyword, it automatically has a value of undefined.
We can reassign the value of the variable.
Ex:
let price;
console.log(price); // Output: undefined
price = 350;
console.log(price); // Output: 350
39
const
The const keyword is short for the word constant. Just like with var and let you can store any value in a const variable.
Ex:
const myName = 'Gilberto';
console.log(myName); // Output: Gilberto
40
How are const different from let and var?
a const variable cannot be reassigned because it is constant. If you try to reassign a const variable, you’ll get a TypeError. Constants must also be assigned a value when declared. If you try to declare a const variable without a value, you’ll get a SyntaxError.
41
How can we use variables and math operators to calculate new values and assign them to a variable?
1. We can create a variable and assign a number value to it (let w = 4) and then we can reassign it a new value by using the math operators to perform a calculation (w = w + 1).
2. We can also use the built-in mathematical assignment operators.
Ex:
let w = 4;
w += 1;
console.log(w); // Output: 5
42
Explain the following line of code:
let w = 4
w +=1;
console.log(w); //Output: 5
1. We create a variable and assign the value 4.
2. We perform the mathematical operation of the first operator + using the number to the right (w + 1)
3. Then we reassign w to the computed value.
43
++
The increment operator will increase the value of the variable by 1.
Ex:
let a = 10;
a++;
console.log(a); // Output: 11
44
--
The decrement operator will decrease the value of the variable by 1.
45
How can we combine two string values even if those values are being stored in variables?
By using the + operator
Ex:
let myPet = 'armadillo';
console.log('I own a pet ' + myPet + '.');
// Output: 'I own a pet armadillo.'
46
What is string interpolation?
String interpolation is when we insert, or interpolate, variables into strings using template literals.
Ex:
const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);
// Output: I own a pet armadillo.
47
What is a temperate literal wrapped in?
Backticks ` (this key is usually located on the top of your keyboard, left of the 1 key).
Ex:
const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);
// Output: I own a pet armadillo.
48
${...}
template literal syntax that allows you to interpolate variables and expressions into strings.
Ex:
const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);
// Output: I own a pet armadillo.
49
How can we check the data type of a variable’s value?
We can check the data type of a variable’s value by using the typeof operator.
Ex:
const unknown1 = 'foo';
console.log(typeof unknown1); // Output: string
const unknown2 = 10;
console.log(typeof unknown2); // Output: number
50
W/hat are conditional statements?
A conditional statement checks a specific condition(s) and performs a task based on the condition(s).
51
if() {}
Syntax for if statement
The if keyword followed by a set of parentheses () which is followed by a code block, or block statement, indicated by a set of curly braces {}.
Inside the parentheses (), a condition is provided that evaluates to true or false.
If the condition evaluates to true, the code inside the curly braces {} runs, or executes.
if (true) {
console.log('This message will print!');
}
// Prints: This message will print!
52
What are else statements?
Else statements run a block of code when the if statement evaluates to false.
An else statement must be paired with an if statement, and together they are referred to as an if...else statement.
53
What are comparison operators?
Comparison operators compare the value on the left with the value on the right.
Ex:
10 < 12 // Evaluates to true
54
What are some handy comparison operators?
Less than: <
Greater than: >
Less than or equal to: <=
Greater than or equal to: >=
Is equal to: ===
Is not equal to: !==
55
What is the syntax for the identity operator?
===
Ex:
'apples' === 'oranges' // false
56
What are logical operators?
Operators that work with boolean values.There are three logical operators:
the and operator (&&)
the or operator (||)
the not operator, otherwise known as the bang operator (!)
57
&&
When we use the and (&&) operator, we are checking that two things are true. Both conditions must evaluate to true for the entire condition to evaluate to true and execute. Otherwise, if either condition is false, the && condition will evaluate to false and the else block will execute.
Ex:
if (stopLight === 'green' && pedestrians === 0) {
console.log('Go!');
} else {
console.log('Stop');
}
58
||
We use the or operator (II) when we only care about either condition being true. If the first condition in an || statement evaluates to true, the second condition won’t even be checked.
Ex:
if (day === 'Saturday' || day === 'Sunday') {
console.log('Enjoy the weekend!');
} else {
console.log('Do some work.');
}
59
!
The not operator or bang operator (!) Reverses, or negates, the value of a boolean. The ! operator will either take a true value and pass back false, or it will take a false value and pass back true.
60
Why do we use logical operators?
We use logical operators to add another layer of logic to our code.
61
What are truthy values?
A truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy.
All values are truthy unless they are defined as falsy. That is, all values are truthy except false, 0, -0, 0n, "", null, undefined, and NaN.
62
What are falsy values?
Falsy value are values that are considered false when encountered in a Boolean context. The following are considered falsy values:
0
Empty strings like "" or ''
null which represent when there is no value at all
undefined which represent when a declared variable lacks a value
NaN, or Not a Number
63
What is short-circuit evaluation?
Short-circuit evaluation is when each operand is converted to a boolean, gets evaluated from left to right, and if the operand is true (or false with and && operator) JavaScript with short-circuit and not even look at the second operand.
Ex:
let username = " '';
let defaultName = username || 'Stranger';
console.log(defaultName); // Prints: Stranger
64
What are ternary operators?
Ternary operators are short- hand syntax for if-else statements. We use a ? followed by :
Ex:
let isNightTime = true;
if (isNightTime) {
console.log('Turn on the lights!');
} else {
console.log('Turn off the lights!');
}
Using ternary operator:
isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');
65
What are else if statements?
Else if statements are added to if else statements and allow you to add more than two possible outcomes for a conditional statement.The else if statement always comes after the if statement and before the else statement.
Ex:
let stopLight = 'yellow';
if (stopLight === 'red') {
console.log('Stop!');
} else if (stopLight === 'yellow') {
console.log('Slow down.');
} else if (stopLight === 'green') {
console.log('Go!');
} else {
console.log('Caution, unknown!');
}
66
What are switch statements?
Switch statements execute a block of code if the value entered into the switch keyword matches the case it's being compared to. Switch statements can replace multiple else if statements. depending on different cases.
67
What is a case clause?
A case clause used to match against an expression. If the value and the expression match, then the block of code will be executed.
68
What does the break keyword do?
The break keyword tells the computer to exit the block and not execute any more code.
69
What is the difference between type conversion and type coercion?
Type conversion is when we manually convert from one type to another. Type coercion is when JavaScript automatically converts types behind the scenes for us.
Example: Converting a string to a number
const inputYear = '1991';
console.log(Number(InputYear));
console.log(Number(inputYear) + 18);
70
What are functions?
A function is a reusable block of code that groups together a sequence of statements to perform a specific task.
71
What is strict mode and the syntax to use it?
Strict mode is a special mode that we can activate in JavaScript, which makes it easier for us to write a secure JavaScript code. By secure we mean strict mode makes it easier for us to avoid accidental errors. It also stops us from using potential future keywords.
Syntax:
'use strict';
Must be first line of code (Comments before are ok).
72
What are the rules for type coercion?
1. When we add a number and a string the number automatically is converted to a string.
2. When we subtract a number and a string the string is converted to a number.
3. When we multiply/divide strings are automatically converted to numbers.
4.
73
What is NaN
NaN stands for not a number. However, its data type is number. NaN is for an invalid number.
74
What are function declarations?
a function declaration binds a function to a name, or an identifier. Important: A function declaration does not ask the code inside the function body to run, it just declares the existence of the function. The code inside a function body runs, or executes, only when the function is called.
Ex:
function greetWorld() {
console.log('Hello, World!');
}
75
What makes up a function?
1. The function keyword.
2. The name of the function, or its identifier, followed by parentheses.
3. A function body, or the block of statements required to perform a specific task, enclosed in the function’s curly brackets, { }.
Ex:
function greetWorld() {
console.log('Hello, World!');
}
76
How do you call a function?
To call a function in your code, you type the function name followed by parentheses.
We can call the same function as many times as needed.
77
What are arguments (functions)?
Arguments are the values that are passed to a function when it is called. Arguments can be passed to the function as values or variables.
Ex:
calculateArea(10, 6);
78
What are default parameters?
Default parameters allow parameters to have a predetermined value in case there is no argument passed into the function or if the argument is undefined when called.
79
What are return statements?
The return statement ends function execution and specifies a value to be returned to the function caller. When we do not use the return keyword when calling a function we receive an undefined valued will be returned.
80
What are helper functions?
Helper functions are functions that are called within other functions.
Ex:
function multiplyByNineFifths(number) {
return number * (9/5);
};
function getFahrenheit(celsius) {
return multiplyByNineFifths(celsius) + 32;
};
getFahrenheit(15); // Returns 59
81
What are function expressions?
A function expression is very similar to and has almost the same syntax as a function declaration. The main difference is that with function expressions the function name can be taken out to create an anonymous function (function without a name).A function expression is often stored in a variable in order to refer to it.
Ex:
cons calculateArea = function(width, height) {
const area = width * height
}
82
How do you declare a function expression?
1. Declare a variable to make the variable’s name be the name, or identifier, of your function. (Using const is common practice)
2. Assign as that variable’s value an anonymous function created by using the function keyword followed by a set of parentheses with possible parameters. Then a set of curly braces that contain the function body.
Ex:
cons calculateArea = function(width, height) {
const area = width * height
}
83
How do you invoke a function expression?
Use the variable name in which the function is found and parenthesis that have the arguments to be passed in the function.
Ex:
variableName(argument1, argument2)
84
What are arrow functions?
Arrow functions are a shorter way to write functions by using special "fat arrow" syntax () =>
Ex:
const rectangleArea = (width, height) => {
let area = width * height;
return area;
};
85
What is one key difference between function declarations and function expressions?
One main practical difference is that we can actually call function declarations before they are defined in the code. This property is called hoisting.
Example:
greet();
function greet() {
console.log("Hello world");
}
86
What is meant by the term concise body?
We call the most condensed form of the function a concise body.
87
What is the first technique for refactoring a function?
If a function has a single parameter, we do not need to put this parameter in parenthesis. However, we do need to use parenthesis for functions that have zero or multiple parameters.
Ex:
zero parameter:
const functionName = () => {};
one parameter:
const functionName = paramOne => {};
multiple parameters:
const functionName = (paramOne, paramTwo) => {};
88
What is the second technique for refactoring a function?
A function body made of a single-line block does not need curly braces. Without the curly braces, whatever that line evaluates will be automatically returned.
Ex:
const squareNum = (num) => {
return num * num;
};
We can refractor to:
const squareNum = num => num * num;
89
What is scope?
Scope is the context in which our variables are declared. We think about scope in relation to blocks because variables can exist either outside of or within these blocks.
90
What are blocks?
A block is the code found inside a set of curly braces {}.
91
Why are blocks important?
Blocks help us group one or more statements together and serve as an important structural marker for our code.
92
What is global scope?
variables that are declared outside of blocks.
93
What are global variables?
Global variables are variables that are declared outside of blocks. Because global variables are not bound inside a block, they can be accessed by any code in the program, including code in blocks.
94
What is block scope?
Block scope is when a variable is defined inside a block, it is only accessible to the code within the curly braces {}. We say that variable has block scope because it is only accessible to the lines of code within that block.
95
What are local variables?
Local variables are variables that are only available to the code that is part of the same block.
96
What is global namespace?
When you declare global variables, they go to the global namespace. The global namespace allows the variables to be accessible from anywhere in the program.
97
What is scope pollution and why is it bad?
Scope pollution is when we have too many global variables that exist in the global namespace or variable names are reused. Scope pollution makes it difficult to keep track of our different variables.
98
Why should we scope our variables as tightly as possible using block code?
1. It makes our code easier to read because they are in blocks or discrete sections.
2. It clarifies which variables are associated with different parts of the program rather than having to keep track of them line after line!
3. It is easier to maintain the code since it is broken up into smaller parts.
4. It saves memory in our code because it no longer exist after the block finishes running.
99
What is global namespace?
Global namespace is the space in our code that contains globally scoped information.
100
What are arrays?
Arrays are JavaScript’s way of making lists. Arrays can store any data types (including strings, numbers, and booleans). Arrays are also ordered (each item has a numbered position)
101
What are array literals?
Array literals create an array by wrapping items in square brackets [].
102
What are the ways to create an array.
1. Using array literals
2. Using a function
Ex: const years = new Array(1991, 1992, 1993, 1994);
Note: must use the keyword "new"
103
What is the content inside of an array called?
An element
104
What is an index?
An index is a numbered position for an element. Each element in an array will have a numbered position.
105
Arrays are zero-indexed. What does this mean?
Zero-indexed means that the positions start counting from 0 rather than 1. Therefore, the first item in an array will be at position 0.
106
How can we update an element in an array?
We can update an element in an array by using the following syntax:
variableName[3] = 'new value';
107
What is the difference between using let and const when working with arrays?
When we use the let variable when working with arrays we can reassign a new array and update an element in the array. With const variables we can update an element in an array but we can not reassign a new array.
108
.length
The .length property is one of an array's built in properties. It returns the number of items in the array.
Ex:
const newYearsResolutions = ['Keep a journal', 'Take a falconry class'];
console.log(newYearsResolutions.length);
// Output: 2
109
How can we get the last item in an array?
Using the length property minus one.
Example:
console.log(friends[friends.length -1]);
110
How can we see if an array contains a specific element?
We can use the includes method.
Example:
console.log(friends.includes("Bob"))
Note: returns a boolean value.
111
What is .push() and what does it do? What is it also referred to as?
The .push() method allows you to add items to the end of an array. The .push() changes, or mutates, the array. This method is also called a destructive array method since it changes the initial array. When we add this method to an array we can call the array like we would a function.
Ex:
const itemTracker = ['item 0', 'item 1', 'item 2'];
itemTracker.push('item 3', 'item 4');
console.log(itemTracker);
// Output: ['item 0', 'item 1', 'item 2', 'item 3', 'item 4'];
112
What's a common way of using the includes method?
A common way of using the includes method is in if statements.
Ex:
if (friends.includes("Peter") {
console.log("You have a friend named Peter");
}
113
What is the .pop() method? What are some different ways we can use this method? Does it mutate the array?
The .pop method removes the last item in an array. It does not take any arguments. This method also mutates the array. The .pop() method also returns the value of the last element. We can store this in a variable to use later in the code.
Ex:
const newItemTracker = ['item 0', 'item 1', 'item 2'];
const removed = newItemTracker.pop();
console.log(newItemTracker);
// Output: [ 'item 0', 'item 1' ]
console.log(removed);
// Output: item 2
114
.shift()
The .shift method removes and returns the first element of the array. All of the elements after it will shift down one place.
115
.unshift()
Adds one or more elements to beginning of array and returns new length.
116
.slice()
The .splice() method modifies an array by inserting, removing, and/or replacing array elements then returning an array of removed elements. The splice array is a shallow copy of the original array.
117
.indexOf()
The .indexOf() method returns the first index at which an element can be found. Returns -1 if the element is not found.
118
What happens if we try to change an array inside a function?
When you pass an array into a function, if the array is mutated inside the function, that change will be maintained outside the function as well. pass-by-reference)
119
What are nested arrays?
Nested arrays are when an array contains another array.
Ex:
const nestedArr = [[1], [2, 3]];
120
How do we access nested arrays?
To access the nested arrays we use bracket notation with the index value.
Ex:
const nestedArr = [[1], [2, 3]];
console.log(nestedArr[1]); // Output: [2, 3]
121
How can access the elements within a nested array?
To access the elements within a nested array we can chain, or add on, more bracket notation with index values.
Ex:
const nestedArr = [[1], [2, 3]];
console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2
122
Array.isArray()
Array.isArray() checks if the passed value is an Array.
Ex:
const starbucksMenu = ['Cafe Latte', 'Strawberry Acai', 'Pink Drink', 'Caramel Machiato', 'Pumpkin Creme Cold Brew', 'Dragon Drink', 'Pumpkin Spic Latte'];
console.log(Array.isArray(starbucksMenu));
//prints true
123
.join()
The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.
124
What is a iterator variable?
125
What are loops?
Loops allow us to tell computers to repeat a given block of code on its own so we do not have to write out the same code over and over.
126
What are the three expressions in a for loop?
1. initialization (initializer) - Where do you want your loop to start? Can also be used to declare the iterator variable.
2.a stopping condition- Where do you want your loop to start? This is the condition that the iterator variable is evaluated against— if the condition evaluates to true the code block will run, and if it evaluates to false the code will stop.
3. an iteration statement is used to update the iterator variable on each loop. Do we want our loop to keep going up our down? (increment or decrement)
Ex:
for (let counter = 0; counter < 4; counter++) {
console.log(counter);
}
// The following is printed:
0
1
2
3
127
How do we run a backward for loop?
1. Set the iterator variable to the highest desired value in the initialization expression.
2. Set the stopping condition for when the iterator variable is less than the desired amount.
3. The iterator should decrease in intervals after each iteration.
128
What are nested loops?
When we have a loop running inside another loop, we call that a nested loop.
129
What is one way we can use a nested for loop?
To compare the elements in two arrays.
Ex:
const myArray = [6, 19, 20];
const yourArray = [19, 81, 2];
for (let i = 0; i < myArray.length; i++) {
for (let j = 0; j < yourArray.length; j++) {
if (myArray[i] === yourArray[j]) {
console.log('Both arrays have the number: ' + yourArray[j]);
}
}
}
130
What are infinite loops?
a loop that executes a statement or a block of statements repeatedly, without a guarding condition to determine its end
131
When should you use a while loop?
Its best to use the while loop when we don’t know in advance how many times the loop should run.
Think of it like eating. When you are eating you don't know how many bites you are going to need to become full. You continue to eat while you are hungry.
132
What is a do while statement?
A do...while statement says to do a task once and then keep doing it until a specified condition is no longer met.
Ex:
let countString = '';
let i = 0;
do {
countString = countString + i;
i++;
} while (i < 5);
console.log(countString);
133
What is one of the primary uses of a for...of loop?
One of the primary uses of the for...of loop is iterating through the items of an array.
134
What is the syntax for a for...of loop?
for (variable of iterable) {
statement
}
const hobbies = ['singing', 'eating', 'quidditch', 'writing'];
for (const hobby of hobbies) {
console.log(`I enjoy ${hobby}.`);
}
135
What is the for...of loop?
The for...of loop is a shorter and more precise for loop.
136
What is the break keyword?
The break keyword allows programs to “break” out of the loop from within the loop’s block.
Ex:
for (let i = 0; i < 99; i++) {
if (i > 2 ) {
break;
}
console.log('Banana.');
}
console.log('Orange you glad I broke out the loop!');
//Print
Banana.
Banana.
Banana.
Orange you glad I broke out the loop!
137
What are Javascript objects?
JavaScript objects are containers that store related data and functionality.
138
What are object literals?
Object literals are a way for us to create objects in javascript. Data within an object literal is organized into key: value pairs called properties.
139
What is the syntax for an object literal?
1. create a variable.
2. Assign curly braces to the variable.
3. Fill the object with key value pairs (properties).
Example:
let spaceship = {
'Fuel Type' : 'diesel',
color: 'silver'
};
140
How do we make a key value pair?
1. Writing the key's name (identifier) followed by a colon and then the value.
2. Each property is separated by a comma.
141
When can we omit quotation marks when using keys?
When we have a key that does not have any special characters in it.
142
What are the two ways we can access an object's properties?
1. Using dot notation.
2. Using bracket notation.
143
What is the syntax for dot notation?
1. Write the object's name.
2. Followed by the dot operator.
3. then the property name (key)
Ex:
let spaceship = {
homePlanet: 'Earth',
color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth',
spaceship.color; // Returns 'silver',
144
What happens when we try to access a property that does not exist on that object?
undefined will be returned.
145
How do we use bracket notation to access
To use bracket notation to access an object’s property, we pass in the property name (key) as a string.
Ex: spaceship['Fuel Type'];
146
When must we use bracket notation for accessing an object's property?
We must use bracket notation when accessing keys that have numbers, spaces, or special characters in them.
147
In what situations should we use the dot notation or bracket notation?
When we need to first compute the property name.
Example:
const nameKey = "name";
console.log(adrien["first" + nameKey])
148
How can we update an object after we create them?
By using dot notation or bracket notation and the assignment operator.
149
Is undefined a truthy or falsey value?
falsey
Therefore, we can use it in conditional statements.
Example:
if (adrien[interestedIn]) {
console.log(adrien[interestedIn]);
} else {
console.log('Wrong request!)
}
Note: This is for an object. If truthy if statement is ran.
150
What is the syntax for updating an object using dot notation?
spaceship.color = 'gold';
151
What is the syntax for updating an object using bracket notation?
spaceship['fuel type'] = 'vegetable oil';
152
We can't reassign an object declared with a const variable but what can we do?
We can still mutate the object (add new properties and change the ones there).
153
How can we insert objects within an array?
By using the following syntax:
let arrayWithObjects = [
{ username: "andy",
password: "secret"
},
{ username: "jess",
password: "123"
}
154
What is a null object?
An object that is completely empty.
155
What is an expression?
An expression is a line of code that produces a value.
Example:
1 +3;
let a = 2;
return true;
156
What are methods?
A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object (inside the object), while a function is not.
157
What is the syntax for invoking a method?
1. Type the object name
2. Followed by the dot operator.
3. Then the name of the function
4. followed by parenthesis.
Example:
goat.makeSound();
//Prints baa
158
Why do we get an error message when try to use an object's property within a method of the that same object?
Ex: Using dietType within diet() in goat object
goat.diet() gives an error message.
Inside the scope of the method (.diet()), we don’t automatically have access to other properties of the object (goat).
159
What does the this keyword do?
The this keyword points to the object calling the method (goat is the calling object in the example) which provides access to the calling object’s properties.
160
What is a calling object for a method?
The calling object is the object the method belongs to
161
What should we avoid when using the keyword this in a method?
Arrow functions
162
Why should we avoid arrow functions when using the keyword this in a method?
Using this in an arrow function will give us an undefined when calling the method. This happens because arrow functions inherently bind an already defined THIS value to the function itself that is NOT the calling object.
163
What do we use when we don't want other code accessing and updating an object’s properties?
We use a naming convention (an underscore _ before the name of a property) that signals to other developers that a property should not be altered.
const bankAccount = {
_amount: 1000
}
164
What are getters?
Getters are methods that get and return the internal properties of an object.
165
What is the syntax for a getter?
Use the get keyword followed by a function
get fullName() {
if (this._firstName && this._lastName){
return `${this._firstName} ${this._lastName}`;
} else {
return 'Missing a first name or a last name.';
166
What are some advantages of using getters?
1. Getters can perform an action on the data when getting a property.
2. Getters can return different values using conditionals.
3. In a getter, we can access the properties of the calling object using this.
4. The functionality of our code is easier for other developers to understand.
167
What does a setter method do?
Setter methods reassign values of existing properties within an object.
168
What do setters and getters not need when being called?
Parenthesis
169
What can we still do when using a setter method?
We can still directly reassign properties.
Example:
person._age = 'forty-five'
console.log(person._age); // Prints forty-five
170
What is a key difference between .querySelector() and .getElements ByTagName()?
The key difference is that .getElementsByTagName() will fetch all of the elements that have a specific tag name (and return as an array). Therefore, we have to pick out the specific index within the array for altering it's property.
171
How would we find out how many elements there are that have a specific tag name?
By using the .length property
Example:
document.getElementsByTageName('li').length
172
How will .getElementsByClassName return elements when being called?
It will return elements as an array
Important: Even if there is only one element with that specific class name. Therefore, we have to use bracket notation when manipulating.
173
What can we input within the .querySelector() method?
We can input elements, classes, and ids.
174
What is the syntax for selecting an id in .querySelector()? What about for selecting a class?
.querySelector("#idname")
.querySelector(".classname")
175
How can we combine our selectors and query for an element within another element?
By including a space in between hierarchical selectors within the parenthesis.
Example:
query.Selector("li a")
176
How can we combine our selectors and query for an element that also has a specific class?
By combining the selectors with no spaces.
Example:
query.Selector("li.item")
177
What do we use if we want to select all of the objects that match a specific selector?
We use a method called query.SelectorAll
178
How can we change the CSS style dynamically using Javascript?
By using the .style property
Example:
document.querySelector("h1").style.color = "red" ;
179
How are property names in javascript different than what we might see in CSS?
Javascript naming conventions are camel casing for properties and methods.
Example:
font-size --> fontSize
document.querySelector("h1").style.fontSize = "10rem";
180
How do the values have to be represented when making changes to elements in the DOM?
As strings
Example:
document.querySelector("h1").style.fontSize = "10rem";
181
How can we hide an element in the DOM by using javascript?
We can set the visibility property to hidden.
Example:
document.querySelector("h1").style.visibility = "hidden";
182
What is the Separation of Concerns?
Separation of Concerns is when your HTML is for content only, your CSS is only for styling your website, and your Javascript is there for behavior.
183
How can we get a list of the classes attached to a specific element in a query?
By using the .classList property
Example:
document.querySelector("button").classList;
184
How can we add classes to a specific element (add classes to a class list)?
By using the .add() method.
Example:
document.querySelector("button").classList.add("invisible");
185
How can we remove classes to a specific element(remove classes from a class list)?
By using the .remove() method.
Example:
document.querySelector("button").classList.remove("invisible");
186
What does the toggle method do?
The .toggle method will remove a class that is already applied or apply a class if it is not applied.
Example:
document.querySelector("button").classList.toggle("invisible");
187
What is the difference between .textContent and .innerHTML?
.textContent only gives you the text with the HTML tags. .innerHTML gives you both the text within the tags and the HTML.
Example:
document.querySelector("h1").innerHTML;
Output: "Hello"
document.querySelector("h1").textContent;
Output: "Hello"
188
How can we get a list of all of the attributes attached to a specific element?
By using the .attributes property.
document.querySelector("a").attributes
189
How can we retrieve the current value for an element's attribute.
By using the .getAttribute property
document.querySelector("a").getAttribute("href");
Note: We have to specify the name of the attribute that we want (href).
190
How can we change the current value of an element's attribute?
By using the setAttribute property
document.querySelector("a").setAttribute("href", "https://www.bing.com");
Takes two inputs:
1. What attribute we want to change
2. What we want to change our attribute to
191
How do you add an external JS file to your html page?
192
What are event listeners?
An event lister listens for certain events (for example clicks) and sets up a function that will be called whenever that specific event happens.
193
What is the syntax for adding a listener?
document.querySelector("h1").addEventListener(type, listener)
Type = a string that represents the event to listen to (ex: click)
Listener = usually a function that gets called when the event gets detected.
194
Why don't we use parenthesis when we use a function as an input in our event listener?
When we use parenthesis this will cause our function to immediately be called (as a method being added to the event listener) instead of when the event occurs.
195
What is a common way for functions are passed into .addEventListener()?
A common way is by using an anonymous function (a function that has no name)
Ex:
document.querySelector("button").addEventListener("click", function() { alert("Hello")} )
196
What are higher order functions?
Higher order functions are functions that can take other functions as inputs.
197
How can we get the identity of an element that triggers an event?
By using the THIS keyword.
this.style.color = "white";
198
How can we add event listeners to many elements with fewer lines of code.
By using a for or while loop, .querySelectorAll(), and looping through all of the elements with a specific class name. Within our block of code we add an event listener to each element and a function to be carried out.
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
for(let i = 0; i
199
What is a constructor function?
A constructor function is like a factory that makes objects.
200
What is one important syntax feature in constructor functions?
You must capitalize the first letter in the function name.
Example:
function BellBoy(name, age, hasWorkPermit, languages) {
this.name = name;
this.age = age;
this.hasWorkPermit = hasWorkPermit;
this.languages = languages;
}
201
What is initializing an object?
Creating a new object from the constructor function (object factory).
Example:
let bellboy1 = new BellBoy("Timmy", 19, true, ["French", "English"]);
202
How can we add a function to a constructor function?
We use the this keyword, followed by dot notation, name of our function and assign it to an anonymous function.
Example:
function BellBoy(name, age, hasWorkPermit, languages) {
this.name = name;
this.age = age;
this.hasWorkPermit = hasWorkPermit;
this.languages = languages;
this.moveSuitCase = function() {
alert("May I take your suitcase");
pickUpSuitcase();
move();
}
}
203
What are callback functions?
A callback function is the function that gets passed into another function as the input. It allows us to wait for something to happen (ex: click) and then the call back function gets "called back" and executed.
204
How can we get the event that triggered a higher order function passed back through the call back function?
By passing in the event as an argument in the call back function.
Example:
document.addEventListener("click", function(event) {
console.log(event) }
);
205
What "calls" back the call back function when an event has been triggered?
The call back function is called by the object that has experienced the event.
206
How can we call a function after a certain amount of time (seconds)?
We can use the setTimeout method.
Note: time is in milliseconds.
Syntax:
setTimeout(function, milliseconds, param1, param2, ...)
207
Arrays are also...
methods
208
When we get a value from an interface (like an input field) what is the usual data type we will be receiving?
We are usually getting back a string data type.
