JavaScript is a lightweight object-oriented programming language that is used by several websites for scripting webpages. Once you learn Javascript, it helps you develop great front-end as well as back-end software using different Javascript-based frameworks like jQuery, Node.JS, etc.
You can build several things with JavaScript such as dynamic dropdown menus, client-side validations, display popup windows, etc. Although there are a lot of things you can build with JavaScript and many different ways to achieve what you want, today we will focus today on 5 things that I consider very useful in JavaScript.
1 – The Mutation Observer
The MutationObserver interface allows us to watch for changes being made to the DOM (Document Object Model) tree.
MutationObserver(callback) Constructor
Creates and returns a new MutationObserver which will invoke a specified callback function when DOM changes occur.
observe(target, options) Method
Configures the MutationObserver to begin receiving notifications through its callback function when DOM changes matching the given options occur. The target parameter is a DOM Node within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched. The options parameter is an object that describes which DOM mutations should be reported to mutation
Observer’s callback. There are quite a few options but just for the sake of this article, we will not go through them one by one.
Let’s look at a basic example of it:
.png "The Mutation Observer")
2 – The bind() Method
The bind() method returns a new function, when invoked, has its “this” set to a specific value. Let’s check an example and go through it.
.png "The bind() Method")
What is the content of the variable fullName? Without the bind(member) it would be “undefined undefined” because of the “this” of the person.fullName function refers to the Window and the Window does not have a firstName and lastName property.
But as we are calling the bind(member) function on the person.fullName function we are basically saying that the “this” of the fullName function is the object member that has to two properties: firstName and lastName and so the fullName variable will have the content “Jane Doe”.
3 – The Spread operator
There are 3 places where the spread operator can be used:
Function arguments;
Array literals;
Object literals.
An example of the usage of the spread operator is copying an array A into an array B index by index. It is a slow process that can be converted into a very easy and single-step operation with the use of the Spread operator.
numbersCopy constant will have all the values of the numbers constant.
4 – Object.freeze()
Object freeze() method helps in preventing existing properties from being changed. Let’s check an example:
.png "Object.freeze()")
Console.log of the person.name will never print “Jane Doe”. Either it throws an error or the value “John Doe”.
You may be wondering if const does not already prevent that, but in fact, it doesn’t. The const keyword ensures that the variable created is read-only, but It doesn’t mean that the actual value to which the const variable refers is immutable, so you can still change the value of its property.
5 – Three useful array methods: map(), filter(), reduce()The map(), filter(), and reduce() are array functions that transform an array according to the applied function and return the updated array in the case of map and filter and a single value in the case of the reduce. Instead of using loops, they provide a much simpler, shorter, and cleaner syntax.
Let’s check an example for each one, starting with map():
In this case, we are going through the array mapping each number one by one and multiplying its value by 2. The result is a new array with the values [2,4,6,8,10].
Now let’s check the filter() method:
In this example we are applying a function to only accept even numbers meaning that the content of evenNumbers is a new array with the values [2,4]. All elements that do not return true on the specified condition will not be present in the new array.
To finish let’s check an example on reduce() method:
It receives two parameters, a function and the initial value, in this case, 0.
The function that the reduce method receives can take up to 4 parameters but just to demonstrate we used only 2 which represent the only required values:
- acc: the accumulator which as the value resulting from the previous call;
- num: the value of the current element.
The reduce() method is an iterative method that executes the callback function over all elements in the array and accumulates them into a single value. The final value of the accumulator, which is the value returned from the callback function on the last iteration, becomes the return value of reduce(). In this case, it will return the value 15.
Conclusion
In conclusion, Javascript is a programming language that provides dynamism to web pages allowing us to create complex features. If you go to a website and you see an interactive map, a chart, or another more complex thing you can bet that JavaScript is involved.
With this article, we intended to show 5 things that are useful when you are dealing with Javascript, but there is also much more to be explored, after all, Javascript has a lot of libraries and plugins.
