Category: Function

Understand Hoisting in JavaScript

 Understand “Hoisting” in JavaScript is important and at the same time somewhat misleading. In this blog post, I will cover the Hoisting concept. This is a process that happens while the JavaScript engine interprets the written JavaScript code.Note – I am sharing all my JavaScript Developer Certification study notes here. Please provide your feedback if you see anything wrong or missing. Appreciate.In the blog post, I will be discussing -The way JavaScript code is interpretedWhat is Hoisting?ExamplesIf you prefer watching the video instead of blog post, then below is the youtube video from “Technical Potpourri”.The way JavaScript code is interpretedJavaScript...

Read More

Understand JavaScript Closure

 Closure is a very important concept that every JavaScript developer should understand. In the post, I will provide a quick introduction of closure and then, I will be focusing on examples so that it will be easier for you to understand this concept. I will be sharing the video as well at the end of this post.Note – I am sharing all my JavaScript Developer Certification study notes here. Please provide your feedback if you see anything wrong or missing. Appreciate.What is a Closure?As per MDN, “A closure is the combination of a function bundled together(enclosed) with references to its surrounding state. In other words, a closure gives you access to an outer function’s scope from an inner function”.With the above example, let’s go through some examples to understand closure in detailsExample 1function sayHello() { var message = “Hello World”; function sayItNow() { console.log(message); } return sayItNow;}var returnFunc = sayHello();returnFunc();Output:Hello WorldExplanation:In the above example, the outer function sayHello creates a variable message, which is then being used inside the inner function sayItNow. Within the inner function, there is no variable declared, but due to closure, it can access the variable declared within the outer function.Example 2function increment() { var number = 10; function printTheNumber() { console.log(number); } number++; return printTheNumber;}var returnFunc = increment();returnFunc();Output:11Explanation:In the above example, the outer function increment creates a variable number, which is then being used inside the inner function printTheNumber. Within the inner function, there is no variable declared, but due to...

Read More

Functions in JavaScript

 A JavaScript function is a block of organized, reusable code that is defined to perform a single, relation action. A function is executed when someone calls the function with the name.Note – I am sharing all my JavaScript Developer Certification study notes here. Please provide your feedback if you see anything wrong or missing. Appreciate your help.In JavaScript, functions are treated as first-class because they are treated as values. The example of treating function as values are – We can assign a function to a variableWe can store functions in an arrayA function can be passed to another function as an argumentA function can be assigned to a property of an object.You can find the video where I have explained everything here. I have also included the video at the end of this post.Defining a functionA function is defined with the keyword function followed by the name of the function and then the optional functional parameters. Defining a function will not do anything unless you invoke the function. Below code shows a basic example of defining a function and then invoking the same function.//Defining the functionfunction sayHello(name) { console.log(“Hello, ” + name + ” to the world of JavaScript”);}//invoking the functionsayHello(“Shane James”);Function returning valueBy default, all functions return value, but in the above example, the return value is undefined. We can define the return and then store the return value in some variable like...

Read More

Class-based vs Prototype-based Programming using JavaScript

Douglas Crockford described JavaScript as the world’s most misunderstood language. Like many developers, when I started learning JavaScript, to me also, this was not a “proper” language. But I quickly understood that JavaScript comes with a rich system of object-oriented programming.There are many concepts that makes JavaScript unique, but prototype model is definitely the most important one and it creates many confusions. So having a clear understanding of prototype model is very important. And in this post, I would like to explain the concept of prototype based programming in JavaScript.The prototype based programming is a very easy to understand concept, but the source of confusion is the syntax. When a new developer looks at the JavaScript code and sees new, class or constructor it makes them think that object instantiation works the same way as other languages. But in reality, they are nothing more than syntactic sugar in JavaScript. Behind the scenes, things are working in different way. So it is very important to have a clear understanding how things works which will help you to predict their behavior.Class Based LanguageA class based language (Java, C++, C# etc.) has two important concepts:class – the interface which defines the properties and methods.entities – instantiations of the class (objects) An instance is exact same copy of the class, you cannot dynamically add/remove properties/methods from the instance as declared in the class.  You...

Read More
Loading