6일차 공부내용

1. Function

1.1 anonymous functions

JavaScript also supports anonymous functions, which don’t necessarily have an identifier.

We know that an expression is something that evaluates to a value, and we also know that functions are values like any other in JavaScript. A function expression is simply a way to declare a (possibly unnamed) function. A function expression can be assigned to something (thereby giving it an identifier), or called immediately.

Function expressions are syntactically identical to function declarations except that you can omit the function name.

const f = function() {
// ...
};

We can call the function with f().

When you’re defining a named function that you intend to call later, you’ll probably use a function declaration without thinking about it, and if you need to create a function to assign to something or pass into another function, you’ll use a function expression.

1.2 Arrow Notation

ES6 introduces a new and welcome syntax called arrow notation (also called “fat arrow” notation because the arrow uses an equals sign instead of a dash). 

• You can omit the word function.
• If the function takes a single argument, you can omit the parentheses.
• If the function body is a single expression, you can omit curly braces and the return statement.

Arrow functions are always anonymous.

const f1 = function() { return "hello!"; }
// OR
const f1 = () => "hello!";
const f2 = function(name) { return `Hello, ${name}!`; }
// OR
const f2 = name => `Hello, ${name}!`;
const f3 = function(a, b) { return a + b; }
// OR
const f3 = (a,b) => a + b;

1.3 call, apply, and bind

JavaScript allows you to specify what this is bound to no matter how or where the function in question is called. 

. call

call, which is a method available on all functions that allows you to call the function with a specific value of this.

const bruce = { name: "Bruce" };
const madeline = { name: "Madeline" };

// this function isn't associated with any object, yet
// it's using 'this'!
function greet() {
    return `Hello, I'm ${this.name}!`;
}

greet(); // "Hello, I'm !" - 'this' not bound
greet.call(bruce); // "Hello, I'm Bruce!" - 'this' bound to 'bruce'
greet.call(madeline); // "Hello, I'm Madeline!" - 'this' bound to 'madeline'

The first argument to call is the value you want this bound to, and any remaining arguments become arguments to the function you’re calling:

function update(birthYear, occupation) {
    this.birthYear = birthYear;
    this.occupation = occupation;
}

update.call(bruce, 1949, 'singer');
// bruce is now { name: "Bruce", birthYear: 1949, occupation: "singer" }
update.call(madeline, 1942, 'actress');
// madeline is now { name: "Madeline", birthYear: 1942, occupation: "actress" }

. apply

apply is identical to call except the way it handles function arguments.

call takes arguments directly, just like a normal function. apply takes its arguments as an array: 

update.apply(bruce, [1955, "actor"]);
// bruce is now { name: "Bruce", birthYear: 1955, occupation: "actor" }
update.apply(madeline, [1918, "writer"]);
// madeline is now { name: "Madeline", birthYear: 1918, occupation: "writer" }

With the ES6 spread operator (...), we can accomplish the same result as apply.

const newBruce = [1940, "martial artist"];
update.call(bruce, ...newBruce); // equivalent to apply(bruce, newBruce)
Math.min(...arr); // -5
Math.max(...arr); // 15

.bind

bind allows you to permanently associate a value for this with a function.

const updateBruce = update.bind(bruce);
updateBruce(1904, "actor");
// bruce is now { name: "Bruce", birthYear: 1904, occupation: "actor" }
updateBruce.call(madeline, 1274, "king");
// bruce is now { name: "Bruce", birthYear: 1274, occupation: "king" };
// madeline is unchanged

You can also provide parameters to bind, which has the effect of creating a new function that’s always invoked with specific parameters. 

const updateBruce1949 = update.bind(bruce, 1949);
updateBruce1949("singer, songwriter");
// bruce is now { name: "Bruce", birthYear: 1949,
// occupation: "singer, songwriter" }