Raw JavaScript – SitePointhttps://www.sitepoint.com
Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and MoreThu, 24 May 2018 17:36:09 +0000en-UShourly1https://wordpress.org/?v=4.8.1ES6 Generators and Iterators: a Developer’s Guidehttps://www.sitepoint.com/ecmascript-2015-generators-and-iterators/
https://www.sitepoint.com/ecmascript-2015-generators-and-iterators/#respondFri, 13 Apr 2018 16:00:22 +0000http://www.sitepoint.com/?p=108886ES6 brought a number of new features to the JavaScript language. Two of these features, generators and iterators, have substantially changed how we write specific functions in more complex front-end code.

While they do play nicely with each other, what they actually do can be a little confusing, so let’s check them out.

Iterators

Iteration is a common practice in programming and is usually used to loop over a set of values, either transforming each value, or using or saving it in some way for later.

In JavaScript, we’ve always had for loops that look like this:

for (var i = 0; i < foo.length; i++){
// do something with i
}

But ES6 gives us an alternative:

for (const i of foo) {
// do something with i
}

This is arguably way cleaner and easier to work with, and reminds me of languages like Python and Ruby. But there’s something else that’s pretty important to note about this new kind of iteration: it allows you to interact with elements of a data set directly.

Imagine that we want to find out if each number in an array is prime or not. We could do this by coming up with a function that does exactly that. It might look like this:

Again, it works, but it’s clunky and that clunkiness is largely down to the way JavaScript handles for loops. With ES6, though, we’re given an almost Pythonic option in the new iterator. So the previous for loop could be written like this:

This is far cleaner, but the most striking bit of this is the for loop. The variable i now represents the actual item in the array called possiblePrimes. So, we don’t have to call it by index anymore. This means that instead of calling possiblePrimes[i] in the loop, we can just call i.

Behind the scenes, this kind of iteration is making use of ES6’s bright and shiny Symbol.iterator() method. This bad boy is in charge of describing the iteration and, when called, returns a JavaScript object containing the next value in the loop and a done key that is either true or false depending on whether or not the loop is finished.

In case you’re interested in this sort of detail, you can read more about it on this fantastic blog post titled Iterators gonna iterate by Jake Archibald. It’ll also give you a good idea of what’s going on under the hood when we dive into the other side of this article: generators.

]]>https://www.sitepoint.com/ecmascript-2015-generators-and-iterators/feed/0Frameworkless JavaScripthttps://www.sitepoint.com/frameworkless-javascript/
https://www.sitepoint.com/frameworkless-javascript/#commentsWed, 25 Nov 2015 21:00:42 +0000http://www.sitepoint.com/?p=119819JavaScript frameworks offer many functionality and it’s not surprising at all that they’re getting more and more popular. They’re powerful and not so hard to master. Generally, we use them for large and complex applications, but in some cases also for smaller ones. After having learned how to use a framework, you’re tempted to use it for every app you want to develop, but you forget that sometimes using just old good JavaScript might be sufficient.

In this article I’ll discuss about the pros and cons of using a framework and what you should consider before starting your project.

Frameworks Are Powerful

Frameworks have their advantages. First of all, you don’t have to bother about namespaces, cross-browser compatibility, writing several utilities functions, and so on. You work on well organized code, made by some of the best developers in the industry. If you know the framework well, your development speed can be incredibly fast. Moreover, if you have problems with any of the features, it’s easy to find the documentation of the framework, tons of free tutorials, and big community happy to help. What if you need more manpower? There’s no hassle with hiring. If you know how a given framework works, no matter what the project is about, you’ll feel like at home. And the code of the framework itself evolves every day, to be even better, stronger, and more secure. So, you can just focus on what matters: your work.

]]>https://www.sitepoint.com/finding-an-ancestor-node/feed/2Building a Low Memory Web Applicationhttps://www.sitepoint.com/building-a-low-memory-web-application/
https://www.sitepoint.com/building-a-low-memory-web-application/#commentsWed, 20 Feb 2013 09:00:01 +0000http://www.sitepoint.com/?p=2123With the rise in mobile devices and tablets, web applications are frequently being loaded in slow and low memory environments. When building a web application, one may consider making design choices which reduce the amount of memory consumed by your application, so that the user experience remains fast and responsive. The general idea of reducing […]

]]>https://www.sitepoint.com/building-a-low-memory-web-application/feed/6Back to Basics: Array Extrashttps://www.sitepoint.com/back-to-basics-array-extras/
https://www.sitepoint.com/back-to-basics-array-extras/#commentsSat, 16 Feb 2013 11:00:45 +0000http://www.sitepoint.com/?p=2086Arrays are a fundamental data structure in many programming languages, and JavaScript is no exception. To abstract away many of the details of working with arrays, JavaScript provides a collection of functions known as array extras. This article describes the various array extras and their uses. Background Nearly all array operations are performed by looping […]

]]>https://www.sitepoint.com/back-to-basics-array-extras/feed/3Fun with JavaScript Numbershttps://www.sitepoint.com/fun-with-javascript-numbers/
https://www.sitepoint.com/fun-with-javascript-numbers/#commentsSat, 09 Feb 2013 15:19:35 +0000http://www.sitepoint.com/?p=2042Data types are an essential component of every programming language, and numbers are perhaps the most important of all data types. After all, computers are really just expensive calculators. Like any worthwhile programming language, JavaScript supports numerical data. However, like many other aspects of JavaScript, numbers have several intricacies which can bite you if you’re […]