coll. - The Modern JavaScript Collection
Here you can read online coll. - The Modern JavaScript Collection full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2018, publisher: Sitepoint, genre: Computer. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:
Romance novel
Science fiction
Adventure
Detective
Science
History
Home and family
Prose
Art
Politics
Computer
Non-fiction
Religion
Business
Children
Humor
Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.
The Modern JavaScript Collection: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "The Modern JavaScript Collection" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
coll.: author's other books
Who wrote The Modern JavaScript Collection? Find out the surname, the name of the author of the book and a list of all author's works by series.
![JD Isaacks [JD Isaacks] - Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond](/uploads/posts/book/121418/thumbs/jd-isaacks-jd-isaacks-get-programming-with.jpg)
The Modern JavaScript Collection — read online for free the complete book (whole text) full work
Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "The Modern JavaScript Collection" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.
Font size:
Interval:
Bookmark:
Arrow functions were introduced with ES6 as a new syntax for writing JavaScript functions. They save developers time and simplify function scope. The good news is that many major modern browsers support the use of arrow functions.
This chapter will cover the details of arrow functions how to use them, common syntaxes, common use cases, and gotchas/pitfalls.
Arrow functions also called fat arrow functions, from CoffeeScript (a transcompiled language) are a more concise syntax for writing function expressions. They utilize a new token, =>, that looks like a fat arrow. Arrow functions are anonymous and change the way this binds in functions.
Arrow functions make our code more concise, and simplify function scoping and the this keyword. They are one-line mini functions which work much like Lambdas in other languages like C# or Python. (See also lambdas in JavaScript). By using arrow functions, we avoid having to type the function keyword, return keyword (its implicit in arrow functions), and curly brackets.
There are a variety of syntaxes available in arrow functions, of which MDN has a thorough list. Well cover the common ones here to get you started. Lets compare how ES5 code with function expressions can now be written in ES6 using arrow functions.
// (param1, param2, paramN) => expression// ES5var multiplyES5 = function(x, y) { return x * y;};// ES6const multiplyES6 = (x, y) => { return x * y };Code Example at JSBin.
The arrow function example above allows a developer to accomplish the same result with fewer lines of code and approximately half the typing.
Curly brackets arent required if only one expression is present. The preceding example could also be written as:
const multiplyES6 = (x, y) => x * y;Parentheses are optional when only one parameter is present
//ES5var phraseSplitterEs5 = function phraseSplitter(phrase) { return phrase.split(' ');};//ES6const phraseSplitterEs6 = phrase => phrase.split(" ");console.log(phraseSplitterEs6("ES6 Awesomeness")); // ["ES6", "Awesomeness"]Code Example at JSBin.
Parentheses are required when no parameters are present.
//ES5var docLogEs5 = function docLog() { console.log(document);};//ES6var docLogEs6 = () => { console.log(document); };docLogEs6(); // #document....Code Example at JSBin.
Arrow functions, like function expressions, can be used to return an object literal expression. The only caveat is that the body needs to be wrapped in parentheses, in order to distinguish between a block and an object (both of which use curly brackets).
//ES5var setNameIdsEs5 = function setNameIds(id, name) { return { id: id, name: name };};// ES6var setNameIdsEs6 = (id, name) => ({ id: id, name: name });console.log(setNameIdsEs6 (4, "Kyle")); // Object {id: 4, name: "Kyle"}Code Example at JSBin.
Now that weve covered the basic syntaxes, lets get into how arrow functions are used.
One common use case for arrow functions is array manipulation and the like. Its common that youll need to map or reduce an array. Take this simple array of objects:
const smartPhones = [ { name:'iphone', price:649 }, { name:'Galaxy S6', price:576 }, { name:'Galaxy Note 5', price:489 }];We could create an array of objects with just the names or prices by doing this in ES5:
// ES5var prices = smartPhones.map(function(smartPhone) { return smartPhone.price;});console.log(prices); // [649, 576, 489]An arrow function is more concise and easier to read:
// ES6const prices = smartPhones.map(smartPhone => smartPhone.price);console.log(prices); // [649, 576, 489]Code Example at JSBin.
Heres another example using the array filter method:
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];// ES5var divisibleByThrreeES5 = array.filter(function (v){ return v % 3 === 0;});// ES6const divisibleByThrreeES6 = array.filter(v => v % 3 === 0);console.log(divisibleByThrreeES6); // [3, 6, 9, 12, 15]Code Example at JSBin.
Code that makes use of asynchronous callbacks or promises often contains a great deal of function and return keywords. When using promises, these function expressions will be used for chaining. Heres a simple example of chaining promises from the MSDN docs:
// ES5aAsync().then(function() { returnbAsync();}).then(function() { returncAsync();}).done(function() { finish();});This code is simplified, and arguably easier to read using arrow functions:
// ES6aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);Arrow functions should similarly simplify callback-laden NodeJS code.
Whats the meaning of this?!
The other benefit of using arrow functions with promises/callbacks is that it reduces the confusion surrounding the this keyword. In code with multiple nested functions, it can be difficult to keep track of and remember to bind the correct this context. In ES5, you can use workarounds like the .bind method (which is slow) or creating a closure using var self = this;.
Because arrow functions allow you to retain the scope of the caller inside the function, you dont need to create self = this closures or use bind.
Developer Jack Franklin provides an excellent practical example of using the arrow function lexical this to simplify a promise:
Without Arrow functions, the promise code needs to be written something like this:
// ES5API.prototype.get = function(resource) { var self = this; return new Promise(function(resolve, reject) { http.get(self.uri + resource, function(data) { resolve(data); }); });};Using an arrow function, the same result can be achieved more concisely and clearly:
// ES6API.prototype.get = function(resource) { return new Promise((resolve, reject) => { http.get(this.uri + resource, function(data) { resolve(data); }); });};You can use function expressions if you need a dynamic this and arrow functions for a lexical this.
The new arrow functions bring a helpful function syntax to ECMAScript, but as with any new feature, they come with their own pitfalls and gotchas.
Kyle Simpson, a JavaScript developer and writer, felt there were enough pitfalls with Arrow Functions to warrant this flow chart when deciding to use them. He argues there are too many confusing rules/syntaxes with arrow functions. Others have suggested that using arrow functions saves typing but ultimately makes code more difficult to read. All those function and return statements might make it easier to read multiple nested functions or just function expressions in general.
Developer opinions vary on just about everything, including arrow functions. For the sake of brevity, here are a couple things you need to watch out for when using arrow functions.
As was mentioned previously, the this keyword works differently in arrow functions. The methods call(), apply(), and bind() will not change the value of
Font size:
Interval:
Bookmark:
Similar books «The Modern JavaScript Collection»
Look at similar books to The Modern JavaScript Collection. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.
Discussion, reviews of the book The Modern JavaScript Collection and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.