21 Must-Know Topics of JavaScript | Javascript for Beginners

In this article, I’m going to discuss some important topics of Javascript that a beginner Javascript Programmer should know of. This article is for you if you are at a beginner level of Javascript. Let’s begin —

1. Higher-Order Function

After seeing the title higher-order function, one question that may come to your mind is what the higher-order function is. The answer to that question is that a higher-order function is a function that —

• either accepts a function as an argument
• or returns a function as a result.

Let’s see an example of a function that accepts a function as an argument —

Higher-Order Function That Takes Function as an Argument

Here we can see that forEach is a higher-order function, part of core JavaScript language itself, because it accepts a function as an argument.

Let’s see an example of a function that returns a function as a result —

Higher-Order Function That Returns a Function as a Result

Here, the createMultiplier function is a higher-order function because it returns a function as a result.

2. includes()

In javascript, the includes() method is used to find whether one string may be found within another string or not. It returns a boolean value of true or false. The syntax is given below —

string.includes(searchString, position)

From the syntax of includes() method, you can see that it takes two parameters. The first parameter is searchString which represents the string which we will search in the string, to find out whether it exists in that particular string or not. The second parameter represents the position where the search will be processed. It is an optional parameter. If you don’t provide it, then the search will be taken place from the starting index. Let’s see the demo of how the includes() method works —

Demo of includes() method

As the second parameter isn’t given, the search will take place from the starting index. And here the search string is “gold” so it will search for gold. Since, it is present in the string, it will return true.

One thing you need to keep in mind, is that the includes() method is case sensitive. It doesn’t treat lowercase characters the same way as uppercase characters. Let’s see the example of what happens if you use “Gold” instead of “gold” as a search string.

Demo of includes() method

Here, “Gold” is used instead of “gold”, so it will return false.

3. parseInt()

parseInt() is used to accept the string and radix/base as parameters then converts it into an integer. The second parameter is optional and is used to specify which numerical system to be used as the first parameter. If the radix parameter isn’t given then the parseInt() function treats the given string parameter as a decimal value. parseInt() converts floating number string into decimal integer value. Let’s see an example —

Demo of parseInt() function

If the string doesn’t contain a number, it returns NaN as the string isn’t a number. The demo is shown in the following image below:

demo of parseInt() function

4. forEach()

forEach() is a method that executes a provided callback function once for each array element in an ascending order. There is no way to stop or break a forEach() loop other than by throwing an exception.

demo of forEach()

Since the number of elements in the array is 3, it invokes the callback function 3 times. The callback function isn’t called for index properties that have been deleted or are uninitialized.

demo of forEach()

The missing value between Banana and Orange didn’t invoke the callback function as there is no operation for uninitialized value in the forEach() method.

5. Object.freeze()

Object.freeze() method freezes an object and this frozen object can no longer be changed. It returns the same object as it was before the freeze. You can’t add or delete any property of a frozen object. Let’s see the demo to be more clear —

demo of Object.freeze() method

At first you can see that an object is declared with the properties name, person, age, and then the object is frozen by Object.freeze(). Once the object is frozen then you can’t change the value of the properties of that particular object. Since it is frozen, so it returns the same object.

6. Object.seal()

The Object.seal() method seals an object. It works quite the same like Object.freeze() . Like Object.freeze(), it also prevents adding and deleting properties. But one thing is different from Object.freeze() is that the values of present properties can still be changed as long as they are writable. Let’s see the demo —

demo of Object.seal() method

At first, you can see that an object is declared with the properties name, person, age and then it is sealed by the Object.seal() method. Since the object is sealed so the value of the object is changeable that you can see as expected output.

7. Array.concat()

The concat() method is used to merge two or more arrays. This method returns a new array. It has no impact on the existing array as it returns a new array. Let’s see the demo —

demo of array concatenation

If you want to concatenate more than two arrays, you can do so. Let me show you how you can do it.

demo of array concatenation

8. Usage of Unary (+) Operator

You can use this unary + operator to convert string values of numbers to numbers. String values of numbers will consist of integers, floats, octal, hexadecimal, and so on. If the given string values can’t be converted into a number then it will return NaN. One thing you have to remember is that when you want to convert octal value you have to add 0 at the beginning of that string e.g “010” and in case of hexadecimal number 0x. e.g- “0xA”.

Examples are given below —

demo of unary operator

9. let, const and var

let, const, and var those are used at the time of variable declaration. Now I’m going to show you the scope of each variable.

let allows us to declare block-level variables that means, if you declare variable using let then the variable can only be accessible from the block it is enclosed in.

Example —

Scope of let declared variable

const allows us to declare variables whose values are unchangeable. That means if you declare a variable with const then you can’t change the value of the variable if you do so then it will throw an error. Likewise let, this variable is available from the block it is declared in.

Example —

const declared variable demo

var is the keyword that doesn’t have restrictions like the other two keywords have. It is the most common declarative keyword. If you declare a variable with var then the variable is accessible from the function it is declared in.

Example —

demo of var declare variable

10. Hoisting

Hoisting is a system where variables and functions are moved to the top of their scope before the execution of code. One of the advantages of hoisting is that it allows us to use the functions before declaring it in code.

Example —

demo of hoisting

11. Storing simple data — web storage

Web storage data is contained within two object-like structures inside the browser which is session storage and local storage. Now I’m going to show you how you can add, retrieve, and remove data from the local storage of a browser. There are three methods by which we can do that.

• The method Storage.setItem() allows us to save data in storage. It takes two parameters. The first one is the name of the item you want to add and the second one is its value.
• The method Storage.getItem() allows us to retrieve data. It takes one parameter which is the name of a data item you want to retrieve. Then it returns the item’s value.
• The method Storage.removeitem() allows us to remove data. It takes one parameter which is the name of a data item you want to remove. Then it removes the item out of the web storage.

Example —

That’s how we can add, get, and remove data from the local storage of web browsers.

12. try…catch

It doesn’t matter how good we are at programming sometimes our scripts have errors. What actually happens when our scripts have errors? The answer to the question is the script dies and throws us errors. What if our codes do something more reasonable rather than dying even our script has error? That’s nice huh? We can do so with try..catch. This allows us to “catch” errors so the script can, instead of dying, do something more reasonable.
Let’s see the syntax —

try..catch syntax

13. How try…catch works

In this section you’ll know-how try..catch works. try..catch works like the followings -

• In the try..catch construct, the code in try { } get executed first.
• If there is no error in try {} then catch (err) part is ignored and the execution reaches the end of the try {} and goes on.
• If an error occurs, try execution is stopped, and catch (err) starts executing. The error will contain an error object with details about what happened.

So, we can see that the script isn’t dying even if our script has an error.

Let’s see an example of it —

try…catch demo

14. Things to remember while using try…catch

There is something you need to remember when you use try..catch in our codes.

First, try..catch only works for runtime errors. Now a question may arise to our mind is that what does that mean? Well, that means when you use try..catch , the code must be runnable. In other words, the code should be a valid Javascript. You will be clear when you see the following image.

try…catch demo

Second, try..catch works synchronously. That means if an execution happens in the “scheduled” code like setTimeout, try..catch construct won’t catch it. It happens because the function is executed later and the engine already left the construct.

try..catch demo

The code above throws a reference error as the text “lalala” is defined.

15. Document Object Model (DOM)

Every HTML tag is an object and nested tags are “children” of the enclosing one. The text inside the tag is an object as well. We can access all these objects using JavaScript and we can use them to modify the page.

For example, document.body is the object representing the <body> tag.

Let’s start with the following simple document and know how it looks like when DOM represents this file as a tree structure.

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

Tree structure of a tag:

DOM Tree Structure

16. Comparing Variables

There are two different ways of comparing the values of objects for equality in JavaScript. The first one is the Equality Operator, which consists of two equal signs: ==; and the second one is the Strict Equality Operator, which consists of three equal signs: ===.

In comparison between two variables, the equality operator only check the value of two variables, while the strict equality operator check both value and data type.
For instance —

Comparisons of Variables

The second one returns false because the data type of the two variables is not the same. Here, a is string whereas b is an integer.

17. Declaring Object with const

You can declare objects with const and it doesn’t prevent modification of those objects. But if you attempt to assign a value to that object then it throws an error. For instance —

Object Declared with const

It’s possible to change the property of the object without causing an error because this changes what the object contains. But if you attempt to assign a value to the object then it will throw an error because it attempts to change the binding.

Here one thing you should remember is that const prevents modification of the binding, not modification of the assigned value.

18. The Temporal Dead Zone

A variable that is declared either with let or const can’t be accessed before its declaration within its scope. It causes a reference error. This situation is called the temporal dead zone.

For instance —

Temporal Dead Zone

19. Object Destructuring

Object destructuring syntax uses an object literal on the left side of an assignment operation.

For instance —

Demo of Object Structuring

In this code, the value of person.name is stored in a variable called name and the value of person.age is stored in a variable called age. The identifiers name and age are both declarations of local variables and the properties to read the value from on the person object.

There is one thing that should be remembered if you use destructuring to declare variables, you must supply initializer otherwise it returns a syntax error.

For instance —

Demo of Object Destructuring

20. Array Destructuring

Like the object destructuring, you can also destructure an array. Let’s see how a syntax of an array looks like.

Demo of Array Destructuring

Here, array destructuring pulls out the values “red” and “green” from the colors array, and then it stores them in the firstColor and secondColor variables. The values are chosen according to the position in the array.

21. Immediately-Invoked Function Expressions

Immediately-invoked function expressions (IIFEs) is a function which allows us to define an anonymous function and call it immediately without saving a reference.

For example:

Demo of IIFEs

In this code, the IIFE is used to create an object with a getName() method and the method uses name argument as the return value, effectively making the name a private member of the returned object.

That’s all for today…