Basic_Javascript Flashcards
1
Q
What are four FAQs about JavaScript?
A
2
Q
What is Javascript?
A
One of the most popular and widely used programming language in the world right now.
It’s growing faster than any other programming languages.
3
Q
What large companies are building full applications around JavaScript right now?
A
Nextflix, Walmart and Paypal
Entire applications around Javascript
4
Q
What is an average salary for a JavaScript developer?
A
You can work as:
Front End (React, Angular)
Backend (Node.js)
Full Stack (MEAN)
5
Q
What can you do with Javascript?
A
We can build many things now.
mobile/web apps
networking apps / chats / video streaming / games
6
Q
What was JavaScript originally designed for doing?
A
For a long time, Javascript was used only for building front end interactive web browsers.
But those days are long gone!
Thanks to huge community support and investment and support by Google, Facebook Javascript has changed.
7
Q
Where was JavaScript originally designed to run?
A
Javascript was originally designed to run only in browsers.
Every browser has a JavaScript engine:
FireFox: SpiderMonkey
Chrome: v8
8
Q
Where does Javascript code run?
A
Browser:
JavaScript Engine
Node:
C++ w/ JavaScript Engine
Both:
Javascript can be run in the browser using the built-in Javascript engine or in Node!
9
Q
What happened in 2009?
A
Ryan Daal
Took the open-source Javascript engine in chrome and embedded it into a C++ program.
Called it Node.js
10
Q
What is node?
A
Node is a C++ program that includes Google’s V8 Javascript engine.
Now we can run Javascript outside of a browser.
We can pass our code to Node for execution.
11
Q
What is ECMA script?
A
ECMA script is just a specification
ECMA is responsible for defining standards
annual release of a specification
ES2015/ES6 defined many new features
12
Q
What is the difference between ECMAScript and JavaScript?
A
JavaScript is a programming language that adheres to the standards provided in ECMAScript.
13
Q
What can we do in Chrome Developer Tools?
A
Run JavaScript.
Every browser has a JavaScript engine
14
Q
What is a good IDE for JavaScript?
A
Visual Studio code - lightweight IDE
15
Q
What else should we install?
A
Node - technically don’t need node to run JavaScript but we use node for installing third-party libraries.
It’s good to have node on your machine!
16
Q
What does ! Tab generate in Visual Studio Code?
A
Boiler plate HTML
17
Q
What is the Live Server extension?
A
A lightweight local server we can use to run JavaScript
18
Q
What does run with Live Server do?
A
It opens our browser and allows us to run our applications!
19
Q
What is best practice for where to put the script section in our HTML page?
A
The best practice is to put the script at the end of the body section after all existing elements.
20
Q
What do we want to explain with our comments?
A
Why’s
How’s
21
Q
What is a statement?
A
A piece of code that expresses an action to be carried out
22
Q
Why is it best practice to put the script after all the elements in the body section?
A
- The browser parses HTML file top to bottom - if script is in the head, Browser might get busy executing Javascript code and not be able to render elements on-page.
- JavaScript often acts on the elements - If the script is at the end we can be confident all elements have been rendered by the browser. Sometimes third party code requires being placed in the head (this is exception).
23
Q
What’s a shortcut to bring the browser developer tools?
A
Option + Command + i
24
Q
What is separation of concerns?
A
Separate HTML (content) from Javascript (behavior)
You don’t want to write it in line with HTML.
25
**What** is the **difference** between **HTML** and **JavaScript**?
**HTML** is all about **content**
**JavaScript** is all about **behavior**
* **How** should your **webpage behave**?
* **What** should **happen when we hover** over an element? **Something pops up**, **something hidden**?
26
How do we execute JavaScript code in node?
Open the terminal
call node filename.js
27
What is the **Integrated Terminal** in **Visual Studio**?
Can run **JavaScript** using node **without explicitly opening** our **terminal.**
28
What do we **use variables** for doing?
Storing **data temporarily** in a **computer's memory**
**Name of variable -** label on data
29
**How** do we **declare a variable**?
Use the "**let**" **keyword**
30
**What** are **variables** by **default** in **Javascript**?
**undefined**
31
**How** can we **declare** a string in **Javascript**?
use **single quotes**
32
What are the **rules** for **naming variables**?
Use camelCase
**Rules**:
Cannot be keywords
Use meaningful names
Cannot start with a number
Cannot contain a space or hyphen
variables are case sensitive
declare each variable on a new line
33
**How** do we **declare** a **constant** in **JavaScript**?
use the "**const**" **keyword**
**use it as default choice**
34
What are the **two types** in **JavaScript**?
**Primitive (Value) Types**
**Reference Types**
35
**What** are the **primitive (value) types** in **JavaScript**?
String
Number
Boolean
undefined
null
36
**What** separates **Javascript** from **other languages**?
It's a **dynamic language**
37
**What** is the **difference** between a **static and dynamic** **language**?
**Static:**
Declare a variable, the type is **set**, **cannot be changed**
**Dynamic:**
Type **can change** in runtime
38
What is a **dynamic language**?
**Type** of **variable** can **change at runtime**!
39
How do we **clear the console** in our **browser**?
**Control + L**
40
What are all **numbers** in **Javascript**?
**Type number**
integer, floating-point, etc. are all type number
41
What type is **null**?
Type **object**
42
**What** are the **reference types** in **JavaScript**?
**Objects**
**Arrays**
**Functions**
43
What is an **object**?
Related **variables** **grouped together**
**Keys =** Properties
44
What is the **object literal syntax**?
**Curly braces**
45
How can we **access** an **object property**?
**Dot notation** (one way)
default choice
46
What is **bracket notation**?
In **Javascript**, an object is a **key-value pair**
to access the value can use **bracket notation**
**object [target property]** -\> value at target displayed
47
What is the **second way** to access an **object's members**?
**Bracket Notation**
Pass a string that determines the **name of the property**
Use this for unknown selection
48
What are **arrays in JavaScript**?
A **data structure** used to **represent** a **list of items**
**Dynamic**
**Objects** and **sizes** are dynamic
Can store different types in arrays
Can **add/remove** items
**Arrays** in **JavaScript** are **Objects**
49
**What** are one of the **fundamental building blocks** in **JavaScript**?
**Functions!**
50
What **kind of operators** do we have in **JavaScript**?
51
**What** is an **expression**?
**Operations + variables + constants** are **used** to **create expressions**
**expressions** are **used to create algorithms**
**Something** that **produces a value**
52
What type of **arithmetic operators** do we have in **JavaScript**?
53
How does the **increment operator work**?
54
How does the **decrement operator** work?
**--x** (decrement first, then assign)
**x--** (assign, then decrement)
55
**How** can we use the **assignment operator** to **increment the value** by **more than one**?
56
What are **comparison operators**?
returns a **boolean**
## Footnote
**===**
**(three equal signs)**
**equality**
57
What is the **strict equality** operator?
Ensures **both operands** are of the **same type** and **value**
If the two operands are not of equal type
returns false
**More precise and accurate**
58
What are **lose** **equality operators**?
**Converts** both **operands** to the **same type**
Checks the **value only**
59
**What** is the **ternary operator** (conditional operator)?
**Start** with the **condition**
if evaluate **true**, use **first value**
if **false**, use the **second value**
60
**What** are **logical operators**?
**Operators** used to **make decisions** based on **multiple conditions**
**&& - return**s true if **BOTH operands are true**
**|| -** returns **TRUE** if **ONE** of the **operands** is **true**
**!** - **reverses** the **boolean**
61
**What** can we use **logical operators** to do in **JavaScript**?
Can use **logical operators** with **non-boolean** values!
Extremely powerful
62
**How** does **JavaScript engine** interpret **non-boolean values** in **logical operations**?
**falsy or truthy**
63
What **values** are **falsy**?
undefined
null
0
false (boolean)
' ' (empty string)
NaN
64
How does **JavaScript engine** evaluate **non-boolean** logical **operands**?
If the value is falsy, **treats it as a false**
if the value is !falsy, **treats it as true**
**runs normal** && ! or || **operations**
65
What **values are truthy**?
**not falsy** (below)
undefined
null
0
false (boolean)
' ' (empty string)
NaN
66
What is **short-circuiting**?
JavaScript will **stop evaluation**
once a **truthy value** is found
**Ex.**
false || 1 || 2
returns 1 (truthy)
doesn't evaluate 2
67
What is the **result** of this **expression**?
**OR operator** returns true because '1' is truthy
**ternary operator** executes first statement "**hello**"
68
What does using the **logical OR operator** between **non-booleans** allow us to do?
Provide **default values**
If user selects color, **use it**
otherwise, provide **default color**
**value is returned**
69
What type of **conditional statements** do we have in **JavaScript**?
70
What is the **syntax** for **if-else** statements in **JavaScript**?
71
How can we **simplify** our **if-else statement**?
Remove **curly braces** if **single statement**
72
What are **switch statements**?
73
**What** does **mosh** say about **switch statements**?
Outdated, look a **bit ugly**
Comes down to **personal preference**
he uses **if-else** statements
**less noise** in the code
74
What do **loops** allow us to do?
**repeat** an action **a number of times**
75
What **kind of loops** do we have in **JavaScript**?
**Subtle difference**s in how they **start/end**
basically do the **same thing**
76
What is the **syntax** for a **for loop**?
77
What is a **difference** between a **while loop and** a **for loop**?
**loop variable** is declared **externally**
**For loop**, the " i " is part of the **syntax**
**while loop**, declare " i " outside the **loop**
78
What is the **syntax** for a **while loop**?
**first,** the **condition is evaluated**
**if true**, statements are executed
**if false**, loop is terminated
79
What is a **do-while loop**?
Realistically, **not used often**
**first,** evaluates the expression
**then,** checks the condition
80
What do **we use** the **for-in** and **for-of loops**?
**Iterate** over the **properties** in an **object or array**
81
How **do we iterate** the **individual properties** in an **object**?
**for**...**in loop**
Use **bracket notation** to access **object properties**
**bracket notation** if the **value is calculated** at **run time**
82
What is the **syntax** to **display properties** in an object using a **for-in** loop?
Must **access properties** with **bracket notation**
**pass key as the name of the target property**
83
**What** do **we use** a **for-in loop** to do?
**iterate** over the **properties of an object**
84
**What** is the **for-of loop**?
**ECMASCRIPT 6** released
**ideal** for **iterating** **over elements in arrays**!
85
What are **break and continue** keywords?
**keywords** that **change** how **loop behaves**
**1. break** - causes **javascript engine** to **jump out** of a loop (terminate)
**2. continue -** causes **javascript engine** to **jump to the beginning** of the loop (restarts the **loop)**
86
**Write a function that takes two numbers and returns the max of the two**
**(Hint**: If else)
87
**How** can we make this **code cleaner?**
(**Hint**: **ternary operator** aka **conditional operator**)
88
**What** is **very amateurish** and **ugly** about **this code**?
**no need** to **explicitly return true / false** with **ternary operator**
89
**Write code** to solve the **FizzBuzz algorithm?**
**(Hint**: **popular interview question**)
90
**Write a function** that checks the **speed of a driver**
**Hint:**
speedLimit = 70
every 5 km over speedLimit earns user 1 point
if user gets 12 points, license suspended
test **a function** with **different values**
91
**How** can **we make** this **code cleaner**?
**Use** the **return keyword**
## Footnote
**remove the else block**
92
**Write** a **function** that **takes a number** and **counts down** displaying **the number and whether** it is **"even"** or **"odd"**.
93
**How** do we **clean up** this **code?**
(**Hint:** conditional operator **(ternary operator)**)
94
**Write** code to **count** the **number of truthy values** in **an array**
(**Hint:** for..of loop)
95
**Write code** to **show the properties** of **an object if property is a string**
(**Hint**: for in loop, typeof)
96
**Write** a **function** that **adds the multiples of 3 and 5** together **between any number**
**(Hint:** for loop)
97
**What** are **objects in javaScript?**
Collections of **key, value** pairs
**highly related** variables **grouped together**
**variables**
**nested objects**
**functions (that act on variables)**
98
**What** is **OOP?**
A **style of programming**
A **collection of objects** that **talk to eachother** to **perform some functionality**
99
**What's** the **problem** with **object literal syntax**?
As **our applications get large**, not **best approach**
to create **a second object**, have to **repeat code**
**Soln?**
**factory functions** / **constructor function**
100
In **modern javascript,** how **can we make** this **code cleaner?**
1. **Variables and arguments** - if **key and value** are the same (argument and obj. variable)
can **omit the value**
Ex. **radius: radius** vs. **radius**
2. **method syntax** - instead of defining as a key value pair, can define like a function without function keyword
Ex. **draw: function () {}** vs. **draw() { }**
101
**Why** are **factory functions** a **good way** to **create objects?**
**Allow us** to **reduce code duplication**
if **there is a bug**, **can fix** in **one place**
102
**What** is the **naming convention** for **constructor functions?**
**NOT camelCase (oneTwoThreeFour)**
**PascalNotation (OneTwoThreeFour)**
103
**What** are **our objects** in **javascript?**
**Dynamic**
**Can** always **add additional properties** and **methods!**
**can always remove properties and methods**
104
**What** **three things** **happen** when we use **the 'new' operator?**
**First,** creates an empty object
**Then**, sets 'this' to point to object
**Finally,** returns object
105
**What** is the **key difference** between **factory functions** and **constructor functions?**
**Factory functions** - call a function that **returns a new object**, **camelNotation**
**Constructor functions** - uses **new operator,** uses 'this' operation, **PascalNotation**
developers familiar with C or Java prefer constructor functions
**Why?**
Looks similar to syntax
106
**What** are **functions** in **JavaScript?**
**Objects**!
**Confusing**
107
What **two types** of **variables** do we **have in JavaScript?**
**primitives** and **objects**
108
**What** must **we know** about **primitives vs. objects** in **regards to copying?**
**primatives** are **copied by value** (independent of one another)
**objects** are **copied** by **their reference (objects, functions, arrays)**
value **inside a function** is **independent** of **another primative** outside of scope
Ex. local parameter inside a function will point to object
109
**How** can we **iterate an object to get all the methods or variables?**
(**Hint:** Objects are **not iterable** by **nature)**
Use **Object.keys** - returns an **keys as a string array**
can **iterate array**, using **for of loop**
**Use Object.entries ( ) - returns entries as a string array**
110
**How** can we **enumerate an object** and **copy all properties** into **a new object?**
**(Hint:** Object.assign())
Modern JavaScript has Object.assign() method
111
**What** is a **third way** to **clone an object** in **JavaScript**
**(Hint:** Spread Operator)
112
**How** is **garbage collection** handled in **JavaScript?**
**memory** is **automatically allocated** to object
when **done using**, don't have to **re-allocate**
**JavaScript engine** has a **garbage collection**
that will **automatically look for variables** that are **no longer used**
we have **no control over this**
based on a complex algorithm
**runs in the background**
113
**What** is the **Math object?**
**Built** in object in **JavaScript**
if you need to use **mathemtical calculations** in **your applications**, refer back to **this object**
114
How many kinds of strings do we have in JavaScript?
**Two Kinds**:
1. **String Primitive** - JavaScript will wrap string into a string object if using dot operator
2. **String Object** - uses constructor function and the 'new' keyword
115
**What** are **some** of the **String methods?**
| (**Hint**: look at **String** documentation)
**.length()** - gives length of string
## Footnote
**.includes()**
**.startsWith()**
**.indexOf()**
**.replace()**
**.toUpperCase()**
**.trim()**
116
**What** is **escape notation?**
**(Hint:** Strings)
117
What are **template literals**?
| (**Hint:** ` ` )
Help us **write cleaner code**
**How?**
Using a **different character** to define string (back tick character)
applications?
Sending emails in applications
**Why?**
Can format exactly as we want
118
**What** are the **benefits** of **template literals?**
(**Hint:** back ticks vs. quotes for strings?)
1. **Write cleaner code** - don't need escape characters for quotes or formatting, can write strings exactly as you want them displayed without extra noise
2. **Add dynamic fields** - use **${ field }** as a placeholder to insert a field dynamically!
119
**What** are **Date ( )** objects in **JavaScript**?
120
**What** are some **Date ( )** object **methods**?
**.setFullYear ( )** - sets a year
.**toDateString()** - returns a date string
**.toTimeString()** - returns time component of date object
**.toISOString( )** - standard ISO format, used in web/mobile apps, to transfer dates
121
**How** do we **create an object** that **has street, city, zipcode fields** and **a function that displays** the **contents of the object?**
(**Hint:** factory function, constructor function, for in loop)
122
**How** can we create an **address object?**
**(Hint: factory method**, **constructor method**, **literal method**)
123
**How** do **we check** if **two** **objects are equal?**
**Hint:** **areEqual( ),** **areSame ( )**
**Cannot** use **'==='**
**why?**
Objects are **reference type**
JavaScript will check **if these two objects** have same **reference**
124
**How** can we **create** a **blog object?**
| (**Hint:** object **literal syntax**)
**comments field** - is an **array of objects**
125
**How** do **we create** a **blog object?**
| (**Hint:** constructor **function method**)
126
**Use objects** to **create the price filter** in yelp.
**(Hint:** **array of price objects)**
When **looking at a concept:**
**Imagine, what properties** **would you put inside an object**?
**The more you practice this**, **easier it becomes**
127
**What** are we **going to learn** in the **Arrays section?**
These **concepts are extremely important**
## Footnote
**esp. when starting out!**
**Make sure to finish the excercises in this section!**
128
**How** do we **add elements** to **the beginning**, end or **index in an array?**
(**Hint:** push, unshift, splice)
129
**How** do we **find primitives in an array?**
| (**Hint**: indexOf, includes, lastIndexOf)
130
**How** to we **locate a reference type** in **an array?**
(**Hint**: find method)
**Why?**
**includes method** checks **references for equality** not objects
**How?**
Pass a predicate to .find (function that takes one argument)
specify a criteria for search in function
131
**What** are **arrow functions?**
**Cleaner ways** of **passing a callback argument**
**pass a callback argument** without **annonymous classes**
**How?**
use =\>
( ) if no paraments
single line, remove curly braces
put on same line
132
**How** do we **empty** the **contents** in **an array**?
(**Hint:** reassign, set .length to zero, splice, pop)
133
**How** do **we combine** or **slice arrays?**
| (**Hint:** concat, slice)
134
**How** can **we** use a **forreach loop** in **JavaScript?**
(**Hint**: .forEach)
135
**How** can we **split and join** **arrays?**
| (**Hint:**.split, .join)
136
**How** do we **sort an array** of **reference type** **objects**?
**(Hint**: **.sort(function)**)
137
**How** can **we sort number array's** in **JavaScript**?
(**Hint:** primitive arrays, .sort(), .reverse())
**Works on primitives** - numbers, strings, etc.
**DOES NOT** work on **reference types** (Objects, Functions)
138
**How** can **we test** **every element** in **an array**?
.**every**( Predicate ) checks if every element matches a certain criteria
Ex. allPositive?
139
How can we test for **at least one element** that matches our criteria in an array?
.some(predicate)
These are **new methods in JavaScript** (.every ( ) .some ( ) ) - **older browser's don't support** these yet!
140
**How** can **we filter** an array of **primitive values?**
(hint: .filter(function))
141
**How** could we **create a yelp filter** for **restaurants that are currently open?**
(**Hint:** filter array of objects by **criteria**)
**array of restaurants**, filter **based on open hours**
142
**How** do we **map an each number value in an array to an a cooresponding array of objects****?**
(**Hint**: .map(function))
Very **useful** when **building real world applications!**
## Footnote
**Both .filter( ) and .map( ) return a new array!**
**Don't modify original array!**
**These methods are chainable (can call after another in chain)**
143
How can we **use chaining** for **filtering and mapping arrays?**
(**Hint**: chaining)
the **power of chaining** these methods!
144
**How** can we **reduce an array?**
(**Hint**: .reduce((reductionResultVariable,
**reduce method** (arrays) -
can **reduce all elements** into a **single value** (**number, string, object, anything**)
145
**How** can we **create a function** that **converts a number range** into an **array of numbers** based on **that range**?
(**Hint:** for loop)
146
**How** can we write the .**includes ( )** function that **tests each element** in **an array** for **matching a value?**
(**Hint:**.some (lambda function))
147
**How** can we **write a function** that **returns an array** without a **specific set** of **values present** in an **input array**?
(**Hint:** for of loop, .**includes( )** )
**returns** a **new array** that **excludes a value** from **input array**
148
**How** can **we write** an **algorithm that moves items** in **an array**?
**(Hint:**.**splice(**start, delete, value**))**
.**splice(**start, delete, add**)**
**cut** the element out of **the index**
**paste** the element into the **offset index**
**return output**
149
**How** do **we write code** to **countOccurences of a number** in **an array**?
(**Hint**: for of loop, .reduce ( ) )
150
**How** can **we get** the **max occuring** value in **an array?**
(**Hint:** **reduce array** to a **single value**)
**.reduce ( )**
By default, **accumulator** will be set to **first value in array** (if **don't pass init value**)
Why?
Want to **find largest value**, reducing **array into a single value**
151
**How** can we **write code** to **display the name property** only of **movies that are in 2018** with a rating **higher than 4?**
(**Hint**: array of objects, .filter, .map)
get **all moves in 2018**, **rating \> 4**, sort in **desc order** (high rating first)
pick **only title property**, display **on console**
152
**What** is the **key difference** between **function declarations** and **function expressions**?
we can call **function declaration** before **it's defined!**
**we cannot** call **a function expression** before **it's defined!**
**Why?**
**Hosting** - moving function declarations automatically to top of file by JavaScript
153
**Why** can we call a **function declaration** before **it's declaration**?
Popular **JavaScript interview** question!!
**Hosting**
**JavaScript** engine **automatically moves function declarations** to **top of file**
154
**What should** we **remember** **about hoisting**?
(**Hint**: scope, declarations, assignments)
155
**What is unique** about a **function's arguments** in **JavaScript**?
(**Hint**: dynamic)
**Can** pass **more arguments** or **less arguments**
156
**How** can we **write code** to allow **varying numbers of arguments** in our **JavaScript functions**?
(**Hint**: arguments object)
**iterate** the **arguments object**
**What** is the **arguments object?**
**used** to work with **a function** that **has a varying number** of **arguments passed**
**BUT!**
**ES6 offers rest operator!**
157
**What** is the **rest operator**?
| (hint: **(...args)** )
**ES6** for **varying number** of **args**
**puts** the **args in an array**
**elegant and professional**
**less code (no looping)**
158
**What** can we **not have** after **the rest parameter**?
**Another parameter**!
can have **zero or more parameters** before rest!
**Rest parameter** has to **be the last parameter!**
159
**How** do we **give a function** **default values**?
(**Hint:** **OR** operator vs. **ES6**)
**parameter** with **default value** must be last
**Cannot** have a **parameter** without a **default value** following
160
**How** can we **write code** for **getters and setters** in **JavaScript?**
only **read only**!
161
**How** can we use **defensive programming** in **JavaScript?**
(**Hint**: throw an **Error ( )** and **catch it**)
162
**What** is the scope of **'const' variables** in JavaScript?
**Scope** of constant is **limited to the code block it is defined**
**cannot access** const **outside function**, for loop, if loop it is defined
163
**What** is the **var keyword**?
| (**Hint:** how does it differ from let?)
**scope** of **var** is **not limited** to the **block defined**
**var =\> function scope variable**
**it's limited** to the **function it's defined**!
**ES6 (ES2015)** introduced - **let** and **const**
**let, const =\> block scope variables**
164
**What** is **the problem** with **declaring variables** using the **"var" keyword** in **JavaScript?**
(Hint: window object)
It **attaches** the **variable to the window object** (browser object)
if using a **3rd party library** with **same variable name**, can **override your variable**
165
**What** does the **.this** keyword **refer to** in **JavaScript**?
(Hint: **part of obj** or **not**?)
166
How can we write code to flatten an array passed in the spread operator?
(Hint: varying args -\> spread operator -\> puts all into an array)
If passing an array to the spread operator,
will encapsulate into an array
creating a nested array
must flatten, to sum
167
**How** do we **write code** to **calculate the area** of a **circle?**
(**Hint:** getter function)
168
**How** can **we write code** to **validate** an **input and throw** an error?
(**Hint**: throw an error, try/catch block)
169
**What** are the **next steps**?
(Hint: **JavaScript Object Oriented Programming**)
Why?
A lot of developers write JavaScript applications without properly understanding the inner workings of JavaScript.
They keep "trying" things until it works out.
**Don't be one of these!**
Get a solid foundation of the inner workings of JavaScript
It's an immense help to your career
