Javascript

EcmaScript is the standardized scripting language that JavaScript and some other languages, like ActionScript implement. JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997. ECMAScript 2015 is version 6 of the ECMA Script programming language therefore known as ES6. There are many new features in ES6 which are listed below. Block Scoping The lack of block scoping created confusion in ES5. A new keyword let works similarly to var but the variable it declares is block-scoped and exists within the current block only. ...

The way in which logical structure of a document is accessed and manipulated in HTML is known as Document Object Model or DOM. It is a programming interface for HTML. Whenever a document loads in the browser, a tree-like (or forest) structure is created. Methods provided by the DOM can be used to access and manipulate this tree programmatically. Why use DOM? The DOM is used to access and manipulate elements in an HTML document. But why do we need to use the DOM for this? Let’s understand this by use of an example. Let’s suppose we have an input field and a button next to it. When the button is clicked, whatever typed in the input field should appear below the input field. How can we do this with plain HTML? We need to dynamically access the value of the input field on the button click and then display the value below in a paragraph. We will implement this example, but first, we should discuss DOM methods that will be needed for accessing and manipulating elements. ...

If you’ve been doing any development in Angular, the chances are you have been using Visual Studio Code (VS Code) for your editor. If you haven’t been using Visual Studio Code, I highly recommend checking it out. There are a number of extensions that I have come to rely on that greatly simplify my development workflow listed below. I’ve included my favorite top ten with their descriptions and links below. To install them, simply start VS Code and open the command palette (Ctrl-Shift-P) Windows / Linux or (Cmd-Shift-P) Mac, and select Install Extension. Choose the extension name from the list and once installed reload/restart Visual Studio Code. Hopefully you will find these extensions as useful I do. ...

The last couple of lessons focused on arrays, and hopefully by now you will have come to see the value of using them in your code. Objects expand on the concept of arrays, except for a few differences, which provide greater control of the data stored. It is said, in Javascript, “Almost everything is objects”. Dates are always objects, Arrays are always objects, functions are always objects, and regular expressions are always objects. Primitive data types such as Numbers, Boolean and Strings are also objects when defined with the new keyword. ...

ES6 introduced a number of exciting features to the JavaScript standard classes, string templates, array and object de-structuring, block-scope variable declarations with “let” and “const”, and perhaps the most visible new feature, arrow functions. Arrow functions have quickly become the standard way of writing functions among professional JavaScript developers. Because they are so widespread, it’s essential for every JavaScript programmer to understand arrow functions - what they are, how to write them, and how they are different from ordinary functions. ...

Anyone who has worked in JavaScript for any amount of time will likely come across concepts that require a deeper level of study in order to fully understand. Closures is certainly one of those areas that has caused me to review and experiment with several times. The purpose of this article is to provide a succinct overview of closures and offer several snippets of code to play around with in order to better understand this often tricky to grasp concept. Consciously or Unconsciously, most developers use closures while programming in JavaScript. Most of the time, everything works fine, but it is always better to understand how they work as they provide better control over your code. Moreover, at some point you might be asked to explain what closures are and hopefully by the end of this you will be in a much better position to do that. So let’s start with what a closure is. A simplified explanation would be that a closure is an inner function that has access to the variables of the outer function. This is called the scope chain. See my earlier article on JavaScript Scope if you need a refresher. ...

We are going to cover some of the most commonly used properties and methods in JavaScript, for working with arrays. There are a lot of other methods which are not covered here, including newer ES6 methods. The goal here is to get you started working with arrays and gaining an understanding of the fundamental ways we can access and manipulate data. The table below summarizes the various methods we will cover in this lesson: ...

Earlier we looked at datatypes and variables. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you group data, but they offer a range of tools or methods to update and manipulate their contents. They are used commonly across different programming languages and have become a routine way of passing around data within applications. ...

Scope determines what variables or bindings are available to JavaScript within its current context. For example, if a variable is defined outside of any functions within your code (often referred to as the main call stack), these variables are available to all other code embedded within other blocks and functions. Variables defined in main are often referred to as ‘Global Variables’ because they are globally available throughout your application. But what about those variables that are defined within functions? ...

In earlier lessons, we wrote code without using any functions. Now that you have been introduced to the various ways we can organize our code within function declarations and expressions, it is helpful to step back for a moment to understand the flow of execution within our code. JavaScript uses a call stack to in order to manage this flow, which is essentially a data structure (or to-do list) that keeps track of function calls using a Last In First Out (LIFO) ordering system. Let’s take a look at an example to help explain this concept. ...