34:["$","title",null,{"children":"Mindshift: Part 3 | Chris Whealy | Observable"}] 3c:T49b,md`Well, that’s pretty straightforward. However, let’s look at what we are actually trying to achieve here. We want the function passed to filter to examine the isNaughty property of the current array element, and return a Boolean value based on whether that property contains a certain value. OK, that's simple enough. ## Getting Down to Bare Bones However, the syntax used to define the function passed to filter is quite noisy, and this can give the appearance (if you’re not careful) that something complicated is happening - when in fact, this is not the case. If you have read my earlier Mindshift blogs, you’ll remember that functional programming focusses on the ***what***, not the ***how***, of the task at hand; therefore if possible, it would be nice to use the simplest syntax possible. In other words, can we omit the function keyword in places where a function can be assumed? Here’s where the arrow operator comes in… If we look only at the anonymous function passed to the array filter, it is simply the following:`3d:T6ac,md`So in this simple case, the following syntax can be omitted: 1. The function keyword 1. The parentheses around the parameter k 1. The curly braces that would normally delimit the function’s code block 1. The return keyword 1. Since filter returns a new array, we can immediately find out how many kids have been good simply by getting the length of this new array What we’re left with is exactly ***what*** the function should do, without being distracted by all the syntactical noise and packaging. When reading an anonymous function declared by the arrow operator, you must be careful to remember that the name (or names) to the left of the arrow operator is (are) the name(s) of the *parameter(s)*, not the name of the function. In fact, in this minimal case, all the normal syntax to declare a function is unnecessary. Notice that in the case where the anonymous function contains only a single expression, the value of this expression becomes the return value of the function. Consequently, the return keyword is superfluous. ## Passing Zero or Multiple Parameters Let’s say however, that we want to use the arrow operator to create an anonymous function that requires zero parameters, or two or more parameters. This is done simply by using a pair of parentheses to delimit the zero or more parameters. If it makes you feel more comfortable, you can always use parentheses around the parameter list, but in the case of there being a single parameter, the parentheses are not required. So here’s an anonymous function that takes two parameters and increments an accumulator based on whether or not the child is nice.`3e:T7bf,md`Notice also that the return statement has popped up again. This is because in a function containing multiple expressions, it is not possible to assume that the last expression in the code block will be the function's return value (for instance, when a conditional such as switch or if is used). Therefore the return value must be explicitly identified using the return keyword. To be honest though, once you start putting multiple statements into an arrow function, the benefits of the previously compact syntax are somewhat overshadowed; however, there is still another benefit to using arrow functions – and this can clear up a lot confusion that has previously befuddled people starting out with JavaScript. ## Arrow Functions and the Self-Reference Object this When you declare a regular JavaScript function, at runtime, the self-reference variable this could be bound to a variety of different objects, depending on how that function has been called. this could be bound to: * A brand new object if the function is a constructor. I.E. the function has been invoked using the new keyword * undefined if called in strict mode * If called as an object method, then this is bound to the context of the calling function. * If the function has been called using apply(), bind() or call(), then this can refer to any object you like! Well that's certainly a recipe for confusion... Within an arrow function however, the value of this ***always*** refers to this of the function within which it has been declared. In other words, you have what is called a “lexical” this. The value of this is what you would expect it to be by looking at the lexical scope of the code at design time. Consider how the following block of code behaves:`3f:[] 38:{"id":"0909e22ebb97aba9","slug":"understanding-javascript-arrow-functions","title":"Mindshift: Part 3","thumbnail":"f2135bda0b47af773c798b660a20f1821df6b9f0e4c0930559bf919f8091ff12","access_level":"public","create_time":"$D2018-01-31T18:00:48.714Z","update_time":"$D2020-04-23T11:06:42.117Z","view_time":null,"first_public_time":"$D2018-02-01T11:38:46.574Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"224d52e60cffa1e1","login":"chriswhealy","name":"Chris Whealy","avatar_url":"https://avatars-next.observableusercontent.com/fe4f3dea84e903c1f07bbfa1cc8292304033a736d3ab9d0e5c009d1340bfefb8","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":180,"publish_version":180,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2414676c206a65f","login":"chriswhealy","name":"Chris Whealy","avatar_url":"https://avatars-next.observableusercontent.com/fe4f3dea84e903c1f07bbfa1cc8292304033a736d3ab9d0e5c009d1340bfefb8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c2414676c206a65f","login":"chriswhealy","name":"Chris Whealy","avatar_url":"https://avatars-next.observableusercontent.com/fe4f3dea84e903c1f07bbfa1cc8292304033a736d3ab9d0e5c009d1340bfefb8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mindshift: Part 3","cells":[{"id":0,"value":"md`# Mindshift: Part 3\nRepublished on Feb 1st, 2018\n\n# Understanding JavaScript Arrow Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`As of Chrome 45, you can now create anonymous functions in JavaScript using the arrow operator =>\n\nThe purpose of this operator is to simplify function definition syntax and sort out some annoying behaviour of JavaScript's self-reference object this.\n\nIn this post, we’ll just run through the use of the arrow function; then in the next post, we’ll look at some hardcore functional concepts that can be implemented using arrow functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Santa’s Little Helper (Function)\n\nSeeing as we've just had Christmas, let’s take for our example a function that Santa might use for deciding which kids have been naughty or nice. Here, Santa has a list of kid objects and he wants to filter out all the naughty ones. To define such a filter, you could use JavaScript's standard syntax as follows:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Here are the kids...\nkids = [{name:\"Abigail\", isNaughty:false},\n {name:\"Ben\", isNaughty:false},\n {name:\"Clara\", isNaughty:true},\n {name:\"David\", isNaughty:false},\n {name:\"Emily\", isNaughty:true},\n {name:\"Fred\", isNaughty:false},\n {name:\"Gloria\", isNaughty:false},\n {name:\"Harry\", isNaughty:false},\n {name:\"Ingrid\", isNaughty:true},\n {name:\"Jack\", isNaughty:false}]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Find the good ones...\nkids.filter(function(k) {\n return !k.isNaughty;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function(k) { \n return !k.isNaughty;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`Using the arrow operator, this syntax can be reduced simply to this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"k => !k.isNaughty","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`That’s it!\n\nSo we can replace the first call to kids.filter shown above with the following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// Count the good ones...\nkids.filter(k => !k.isNaughty).length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"(acc,k) => acc + !k.isNaughty","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`In this case, the anonymous function takes two parameters acc and k, where acc is an accumulator and k is the current kid.\n\nThis function can now be passed to an Array's reduce function in order to count the number of nice kids.\n\nHowever, if we have one function for counting the nice kids, and a second function to count the naughty kids, we would have to loop around the array twice in order to discover both totals (this of course assumes that some children do not yet have an isNaughty flag).\n\nSo let's create a function that instead of returning a single number, returns an object containing the required counters.\n\n## Arrow Functions Containing Multiple Statements\n\nUp till now, our arrow functions have contained just a single expression; however, if we want to create a function that contains multiple expressions, then we must revert to using curly braces to denote a code block.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"naughty_and_nice = kids.reduce((acc,k) => {\n acc.nice += !k.isNaughty;\n acc.naughty += k.isNaughty;\n return acc;\n }, {naughty:0, nice:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"function Kid1(pName) {\n this.name = pName || \"\";\n\n setInterval(function are_you_nice() {\n // Randomly choose whether the kid is naughty or nice\n this.isNaughty = !!(Math.trunc(Math.random()*10) % 2);\n }, 1000)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"new Kid1(\"Kim\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`Uh!? What's happened to the isNaughty property? It's disappeared...\n\nAs every JavaScript programmer has discovered to their cost, the above code does not work as expected because the setInterval function delays the invocation of the are_you_nice function for some period of time (1000 milliseconds in this case).\n\nWhen are_you_nice is finally executed, the self-reference variable this within it no longer resolves to the expected value seen at design time (I.E. the scope of the Kid1 constructor function).\n\nThis is one of those painful aspects of JavaScript development that programmers have learnt to accept. Generally speaking, people code around it by creating a temporary variable (usually called that) in the closure created by function Kid, then referring to it in the callback function are_you_nice.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"function Kid2(pName) {\n this.name = pName || \"\";\n var that = this;\n setInterval(function are_you_nice() {\n // Randomly choose whether the kid is naughty or nice\n that.isNaughty = !!(Math.trunc(Math.random()*10) % 2);\n }, 1000);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"new Kid2(\"leo\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`However, if we convert function are_you_nice to an arrow function, then all the this and that shenanigans disappear, because the this in an arrow function always refers to the this of the function within which it was declared – even if the invocation of the arrow function is delayed because it has been used in a callback.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"function Kid3(pName) {\n this.name = pName || \"\";\n // The function passed to setInterval is now an arrow function\n // Therefore, the 'this' inside the arrow function now refers to the same 'this' seen in the Kid3\n // constructor. In other words, we are now using a 'lexical' this\n setInterval(() => this.isNaughty = !!(Math.trunc(Math.random()*10) % 2), 1000)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"new Kid3(\"Mark\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`Ahhh, that makes life a lot simpler…\n\nWell, that’s a quick overview of JavaScript’s arrow function. If you want to read more about arrow functions, then please read the documentation on the Mozilla Developer Network.\n\nIn the next blog, we’ll take a look at using arrow functions in the most minimal way possible – that is, defining functions that take only one parameter and contain only one expression. Then from this minimal definition, we’ll see how we can build up some very powerful function expressions.\n\nChris W\n\nNext Blog\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null