description: Review
Review-Of-Previous-Concepts
Review of Concepts
Running JS Locally Concepts
Match the commands
ls
,cd
,pwd
to their descriptionsls
lists contents of current directorycd
changes current directorycd ..
takes you up one levelcd
alone takes you back home
pwd
returns current directory
- Given a folder structure diagram, a list of 'cd (path)' commands and target files, match the paths to the target files.
- Use VSCode to create a folder. Within the folder create a .js file containing
console.log('hello new world');
and save it. - Use node to execute a JavaScript file in the terminal
Plain Old JS Object Lesson Concepts
Label variables as either Primitive vs. Reference
primitives: strings, booleans, numbers, null and undefined
- primitives are immutable
refereces: objects (including arrays)
- references are mutable
Identify when to use
.
vs[]
when accessing values of an objectdot syntax
object.key
- easier to read
- easier to write
- cannot use variables as keys
- keys cannot begin with a number
bracket notation
object["key]
- allows variables as keys
- strings that start with numbers can be use as keys
Write an object literal with a variable key using interpolation
put it in brackets to access the value of the variable, rather than just make the value that string
Use the
obj[key] !== undefined
pattern to check if a given variable that contains a key exists in an object- can also use
(key in object)
syntax interchangeably (returns a boolean)
- can also use
Utilize Object.keys and Object.values in a function
Object.keys(obj)
returns an array of all the keys inobj
Object.values(obj)
returns an array of the values inobj
Iterate through an object using a
for in
loopDefine a function that utilizes
...rest
syntax to accept an arbitrary number of arguments...rest
syntax will store all additional arguments in an arrayarray will be empty if there are no additional arguments
Use
...spread
syntax for Object literals and Array literalsDestructure an array to reference specific elements
```javascript
let array = [35,9];
let [firstEl, secondEl] = array;
console.log(firstEl); // => 35
console.log(secondEl); // => 9
// can also destructure using ... syntax let array = [35,9,14]; let [head, ...tail] = array; console.log(head); // => 35 console.log(tail); // => [9, 14]
Write a function that accepts a array as an argument and returns an object representing the count of each character in the array
Callbacks Lesson Concepts
Given multiple plausible reasons, identify why functions are called "First Class Objects" in JavaScript.
- they can be stored in variables, passed as arguments to other functions, and serve as return value for a function
- supports same basic operations as other types (strings, bools, numbers)
- higher-order functions take functions as arguments or return functions as values
Given a code snippet containing an anonymous callback, a named callback, and multiple
console.log
s, predict what will be printed- what is this referring to?
- Write a function that takes in a value and two callbacks. The function should return the result of the callback that is greater.
// shorter version let greaterCB = function(val, callback1, callback2) { return Math.max(callback1(val), callback2(val)); } // even shorter, cause why not let greaterCB = (val, cb1, cb2) => Math.max(cb1(val), cb2(val));
Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of
Array#filter
.Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of
Array#every
.
Scope Lesson Concepts
Identify the difference between
const
,let
, andvar
declarationsconst
- cannot reassign variable, scoped to blocklet
- can reassign variable, scoped to blockvar
- outdated, may or may not be reassigned, scoped to function. can be not just reassigned, but also redeclared!- a variable will always evaluate to the value it contains regardless of how it was declared
Explain the difference between
const
,let
, andvar
declarationsvar
is function scoped—so if you declare it anywhere in a function, the declaration (but not assignment) is "hoisted"- so it will exist in memory as "undefined" which is bad and unpredictable
var
will also allow you to redeclare a variable, whilelet
orconst
will raise a syntax error. you shouldn't be able to do that!const
won't let you reassign a variable, but if it points to a mutable object, you will still be able to change the value by mutating the object- block-scoped variables allow new variables with the same name in new scopes
- block-scoped still performs hoisting of all variables within the block, but it doesn't initialize to the value of
undefined
likevar
does, so it throws a specific reference error if you try to access the value before it has been declared if you do not use
var
orlet
orconst
when initializing, it will be declared as global—THIS IS BAD- if you assign a value without a declaration, it exists in the global scope (so then it would be accessible by all outer scopes, so bad). however, there's no hoisting, so it doesn't exist in the scope until after the line is run
Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining
- scope of a program means the set of variables that are available for use within the program
global scope is represented by the
window
object in the browser and theglobal
object in Node.js- global variables are available everywhere, and so increase the risk of name collisions
local scope is the set of variables available for use within the function
- when we enter a function, we enter a new scope
- includes functions arguments, local variables declared inside function, and any variables that were already declared when the function is defined (hmm about that last one)
- for blocks (denoted by curly braces
{}
, as in conditionals orfor
loops), variables can be block scoped inner scope does not have access to variables in the outer scope
- scope chaining—if a given variable is not found in immediate scope, javascript will search all accessible outer scopes until variable is found
- so an inner scope can access outer scope variables
- but an outer scope can never access inner scope variables
Define an arrow function
```javascript
let arrowFunction = (param1, param2) => {
let sum = param1 + param2;
return sum;
}
// with 1 param you can remove parens around parameters let arrowFunction = param => { param += 1; return param; }
// if your return statement is one line, you can use implied return let arrowFunction = param => param + 1;
// you don't have to assign to variable, can be anonymous // if you never need to use it again param => param + 1;
```
Given an arrow function, deduce the value of
this
without executing the code- arrow functions are automatically bound to the context they were declared in
- unlike regular function which use the context they are invoked in (unless they have been bound using
Function#bind
) - if you implement an arrow function as a method in an object the context it will be bound to is NOT the object itself, but the global context
so you can't use an arrow function to define a method directly
```javascript
let obj = {
name: "my object",
unboundFunc: function () {
return this.name;
// this function will be able to be called on different objects
},
boundToGlobal: () => { return this.name; // this function, no matter how you call it, will be called // on the global object, and it cannot be rebound // this is because it was defined using arrow syntax },
}
Define a method that references
this
on an object literalwhen we use
this
in a method it refers to the object that the method is invoked on- it will let you access other pieces of information from within that object, or even other methods
- method style invocation -
object.method(args)
(e.g. built in examples likeArray#push
, orString#toUpperCase
)
- context is set every time we invoke a function
- function style invocation sets the context to the global object no matter what
- being inside an object does not make the context that object! you still have to use method-style invocation
Utilize the built in
Function#bind
on a callback to maintain the context of this- when we call bind on a function, we get an exotic function back—so the context will always be the same for that new function
``
CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!
- could throw an error if it expects this to have some other method or whatever that doesn't exist
- you could also overwrite values or assign values to exist in a space where they should not exist
if you call a function as a callback, it will set
this
to be the outer function itself, even if the function you were calling is a method that was called on a particular object
we can use strict mode with "use strict";
this will prevent you from accessing the global object with this
in functions, so if you try to call this
in the global context and change a value, you will get a type error, and the things you try to access will be undefined
let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function
// we can use the built in Function.bind to ensure our context, our this
, // is the cat object let boundCat = sayMeow.bind(cat);
boundCat(); // prints "meow"
CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!
- could throw an error if it expects this to have some other method or whatever that doesn't exist
- you could also overwrite values or assign values to exist in a space where they should not exist
if you call a function as a callback, it will set
this
to be the outer function itself, even if the function you were calling is a method that was called on a particular object```javascript
let cat = {
purr: function () {
console.log("meow");
},
purrMore: function () {
this.purr();
},
};
global.setTimeout(cat.purrMore, 5000); // 5 seconds later: TypeError: this.purr is not a function
```
- we can use strict mode with
"use strict";
this will prevent you from accessing the global object withthis
in functions, so if you try to callthis
in the global context and change a value, you will get a type error, and the things you try to access will be undefined
POJOs
1. Label variables as either Primitive vs. Reference
Javascript considers most data types to be 'primitive', these data types are immutable, and are passed by value. The more complex data types: Array and Object are mutable, are considered 'reference' data types, and are passed by reference.
- Boolean - Primitive
- Null - Primitive
- Undefined - Primitive
- Number - Primitive
- String - Primitive
- Array - Reference
- Object - Reference
- Function - Reference
2. Identify when to use . vs [] when accessing values of an object
3. Write an object literal with a variable key using interpolation
4. Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object
5. Utilize Object.keys and Object.values in a function
6. Iterate through an object using a for in loop
7. Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments
8. Use ...spread syntax for Object literals and Array literals
9. Destructure an array to reference specific elements
10. Destructure an object to reference specific values
11. Write a function that accepts a string as an argument and returns an object representing the count of each character in the array
Review of Concepts
1. Identify the difference between const, let, and var declarations
2. Explain the difference between const, let, and var declarations
var
is the historical keyword used for variable declaration.var
declares variables in function scope, or global scope if not inside a function.- We consider
var
to be deprecated and it is never used in this course.
let
is the keyword we use most often for variable declaration.let
declares variables in block scope.- variables declared with
let
are re-assignable.
const
is a specialized form oflet
that can only be used to initialize a variable.- Except when it is declared, you cannot assign to a
const
variable. const
scopes variables the same way thatlet
does.
3. Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining
Consider this run
function, inside which foo
and bar
have function scope
. i
and baz
are scoped to the block expression.
Notice that referencing baz
from outside it's block results in JavaScript throwing a ReferenceError.
Consider this run
function, inside of which foo
has function scope
.
Consider this func1
function and it's nested scopes.
6. Implement a closure and explain how the closure effects scope
4. Define an arrow function
This simple construct will create a function that accepts val
as a parameter, and returns val
immediately. We do not need to type return val
, because this is a single-line function.
Identically, we could write
5. Given an arrow function, deduce the value of this
without executing the code
If we use a function declaration style function, the this
variable is set to the global
object (i.e. Object [global]
in Node.JS and Window
in your browser).
In this example, we use a fat arrow style function. Note that when we declare a funciton like this this
becomes