Adv Conc- Closures, private, IIFE, Shorthand Flashcards
Is this a partial function?
function makeLogger(identifier) {
return function(msg) {
console.log(identifier + ‘ ‘ + msg);
};
}
Here, console.log takes exactly one argument and the function returned by makeLogger also takes exactly one argument. Since there is no difference in the number of arguments, we don’t have partial function application.
Is this a partial function?
function makeLogger(identifier) {
return function(msg) {
console.log(identifier, msg);
};
}
What is a partial function
A function such as makeAdder is said to use partial function application. It applies some a function’s arguments (the add function’s first argument here) when called, and applies the remaining arguments when you call the returned function. Partial function application refers to the creation of a function that can call a second function with fewer arguments than the second function expects. The created function applies the remaining arguments.
function add(first, second) {
return first + second;
}
function makeAdder(firstNumber) {
return function(secondNumber) {
return add(firstNumber, secondNumber);
};
}
let addFive = makeAdder(5);
let addTen = makeAdder(10);
console.log(addFive(3)); // 8
console.log(addFive(55)); // 60
console.log(addTen(3)); // 13
console.log(addTen(55)); // 65
What’s a closure?
You can think of closure as a function combined with any variables from its lexical scope that the function needs.
Closures are created when you define a function or method. The closure essentially closes over its environment – what’s in lexical scope. In effect, the function definition and all the identifiers in its lexical scope become a single entity called a closure.
When the function is invoked, it can access any variables it needs from that environment. That is, the function can use variables from the lexical scope where the function was defined. Even if those variables aren’t in the lexical scope where you invoke the function, it can still access them.
What is in a closure?
The closure essentially closes over its environment – what’s in lexical scope. In effect, the FUNCTION DEFINITION and all the IDENTIFIERS in its lexical scope become a single entity called a closure.
When is a closure created?
Closures are created when you define a function or method.
What is the relationship between closures and scope?
the FUNCTION DEFINITION and all the IDENTIFIERS in its lexical scope become a single entity called a closure.
What do we mean when we say that closures are defined lexically?
A closure includes the variables it needs from the scope where you defined the function. Those variables may not be in scope when you invoke the function, but they’re still available to the function.
let apple = function() {
let orange = 1;
return function() {
return orange;
}
}
let purple = apple();
console.log(purple()); // 1
console.log(orange); //error
When do closures use the lexical scope for a function to determine what variables that function can access.
at that function’s definition point
Explain why private data is desirable. (3 things)
excellent way to force other developers to use the intended interface. By keeping the collections private, we enforce access via the provided methods.
Maybe the code forces you to use add to add an item to the list, which ensures that we can log every addition.
prevent the user of an object from becoming dependent on the implementation. Other developers shouldn’t care that a todo-list object stores todos in an array, and your code shouldn’t encourage them to depend on it. Instead, your object should supply an API that lets other developers manipulate the todo-list regardless of its implementation. If you later change the implementation, your API should remain the same.
Make private data
function makeCounter() {
var count = 0; // declare a new variable
return function() {
count += 1; // references count from the outer scope
console.log(count);
};
}
What do parenthesis do?
tell JavaScript that we first want to evaluate that first as an expression
What happens with this?
let x = function() {return 2}()
console.log(x);
2
(function() {
console.log(‘hello’);
}());
hello
the parenthesis basically make it an expression.
((first, second) => first * second)(5, 6);
// => 30
Rewrite this to use IIFE to hide the private data:
function makeUniqueIdGenerator() {
let count = 0;
return function() {
count += 1;
return count;
}
};
let makeUniqueId = makeUniqueIdGenerator();
makeUniqueId(); // => 1
makeUniqueId(); // => 2
makeUniqueId(); // => 3
const makeUniqueId = (function() {
let count = 0;
return function() {
++count;
return count;
};
})();
makeUniqueId(); // => 1
makeUniqueId(); // => 2
makeUniqueId(); // => 3
help prevent not knowing what variables are already in use for large files by not declaring a function. (2ways)
IIEF
blocks
{
}
Do concise syntax for Property Initializers for an object
function xyzzy(foo, bar, qux) {
return {
foo,
bar,
qux,
};
}
Do concise syntax for setting methods
let obj = {
foo() {
// do something
},
bar(arg1, arg2) {
// do something else with arg1 and arg2
},
}
destructure an object’s properties into individual variables
Try omitting some names
let obj = {
foo: “foo”,
bar: “bar”,
qux: 42,
};
let { foo, bar, qux } = obj;
OR
let { foo } = obj;
let { bar, qux } = obj;
destructure an object’s properties into individual variables and use different names
let { qux: newQux} = obj;
destructure an object’s properties into individual function arguments
let obj = {
foo: 1,
bar: 2,
qux: 3,
};
function xyzzy({ foo: newFoo, bar, qux }) {
console.log(qux); // 3
console.log(bar); // 2
console.log(newFoo); // 1
}
xyzzy(obj);
Destructure an object to reassign variables (as opposed to initialize them)
This does not work:
{ foo, bar, qux } = obj;
Nor does this
({ foo, bar, qux }) = obj;
So do this:
({ foo, bar, qux } = obj);
destructure an array’s properties into individual variables
let foo = [1, 2, 3];
let [ first, second, third ] = foo;
destructure an array’s properties into individual variables but skip some elements
let bar = [1, 2, 3, 4, 5, 6, 7];
let [ first, , , fourth, fifth, , seventh ] = bar;
What’s good form for destructuring arrays?
The spaces inside the brackets aren’t required. However, it’s easier to read and more clearly distinguishes between destructuring and array literals.
let foo = [1, 2, 3];
let [ first, second, third ] = foo;
Swap the values of variables using array destructuring
let one = 1;
let two = 2;
[ one, two ] = [two, one];
console.log(one); // 2
console.log(two); // 1
What will this do?
let foo = [1, 2, 3, 4];
let [ bar, …qux ] = foo;
console.log(bar);
console.log(qux);
// 1
// [2, 3, 4]
What does this do?
add3(…foo);
“spread” the elements of an array or object into separate items.
let foo = [1, 2, 3];
let bar = […foo];
console.log(bar);
console.log(foo === bar);
// [1, 2, 3]
// false – bar is a new array
let foo = [1, 2, 3];
let bar = [4, 5, 6];
let qux = […foo, …bar];
qux;
// => [1, 2, 3, 4, 5, 6]
let foo = [1, 2, 3]
let bar = […foo, 4, 5, 6, …foo];
bar;
// => [1, 2, 3, 4, 5, 6, 1, 2, 3]
let foo = { qux: 1, baz: 2 };
let bar = { …foo };
console.log(bar);
console.log(foo === bar);
// { qux: 1, baz: 2 }
// false – bar is a new object
Spread syntax returns only enumeralbe properties of an object
t or f
True
Spread syntax with objects only returns the properties that Object.keys would return. That is, it only returns enumerable “own” properties. That means, in part, that it’s not the right choice when you need to duplicate objects that inherit from some other object. It also means that you lose the object prototype.
For now, all you need to know about enumerable properties is that the object prototype is not enumerable. Also, the length property of an array is not enumerable.
What does this do?
let foo = [1, 2, 3, 4];
let [ bar, …otherStuff ] = foo;
console.log(bar);
console.log(otherStuff);
// 1
// [2, 3, 4]
let foo = {bar: 1, qux: 2, baz: 3, xyz: 4};
let { bar, baz, …otherStuff } = foo;
console.log(bar);
console.log(baz);
console.log(otherStuff);
// 1
// 3
// {qux: 2, xyz: 4}
let array1 = [1, 2, 3, 4]
let [one, …two, three] = array1;
console.log(two);
Syntax error
function maxItem() {
let maximum = arguments[0];
[].forEach.call(arguments, value => {
if (value > maximum) {
maximum = value;
}
});
return maximum;
}
console.log(maxItem(2, 6, 10, 4, -3));
10
rewrite
function maxItem() {
let maximum = arguments[0];
[].forEach.call(arguments, value => {
if (value > maximum) {
maximum = value;
}
});
return maximum;
}
console.log(maxItem(2, 6, 10, 4, -3));
using the rest syntax
function maxItem(first, …moreArgs) {
let maximum = first;
moreArgs.forEach(value => {
if (value > maximum) {
maximum = value;
}
});
return maximum;
}
console.log(maxItem(2, 6, 10, 4, -3));
