Javascript Developer Important Things You have to know if you want to expert in javascript.

Javascript… Javascript was programming .. which programming people call it toy language, but it is no more. Now javascript has been updated. Now it is a power full than another language. Today I will introduce you to the Top 10 modern javascript feature.

table of content

  1. Const and let Keyword
  2. Array and Array Helper function
  3. Arrow Function
  4. Try Catch
  5. short-circuit
  6. Template String
  7. Rest And Spread Operator
  8. Conditional Ternary Operator
  9. Optional Chaining
  10. Destructuring

Let’s start

Read with Be patient

1. const and let keywords

Const and let is a variable type in Javascript. Const Means it is defined constantly, and you can’t redefine and reassign it like a Var keyword. But here are some differences with the Let keyword. Let keyword means you can reassign but can’t it redefine follow the bellow pic.

2. Array helper functions

An array is a data structure that contains a list of elements that store multiple values under a single variable.
To declare an array in JavaScript, use the ‘let’ keyword with square brackets and enclose all the elements within them. The syntax is as follows:

forEach

Array ForEach is a method that exists Array.prototype that was introduced in ECMAScript 5 (ES5) and is supported in all modern browsers.
Array ForEach is the entry-level loop tool that will iterate over your array and pass you each value (and its index). You could render the data to the DOM, for example. ForEach, unlike other array methods, does not return any value.
Think of Array ForEach as: “I want to access my array values one-by-one so that I can do something with them”.
for syntax, follow the below pic

map

The map function is similar to the foreach function. But here, some differences for each function you can use as a loop. But map functions is not a loop. It an array method. you can use it as an expression, but the result is the same with a for each loop

filter

filter method like as loop. It also likes map function but maps and for each return that you're specified. But filter function has to a condition. The array item will match then the filter, and the method returns all of these items.
follow the below image for example

3. Arrow functions

Arrows have been part of JavaScript from the very beginning. The first JavaScript tutorials advised wrapping inline scripts in HTML comments. This would prevent browsers that didn’t support JS from erroneously displaying your JS code as text. You would write something like this:
Arrow functions can also be inline. It really simplifies the code:
Arrow functions can also be more complex and have many lines of code:
follow the bellow image

H.Nazmul’s Blog Arrow function
H.Nazmul’s Blog Arrow function

4.Try Catch

The latest versions of JavaScript added exception handling capabilities. JavaScript implements the try-catch construct as well as the throw operator to handle exceptions. You can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript syntax errors.
The try statement is used to define a block of code to be tested for errors while it is being executed. In comparison, the catch statement is used to define a block of code to be executed if an error occurs in the try block.

The JavaScript statements try and catch come in pairs:

5. short-circuit

The shot circuit is an amazing and important thing in javascript. for example, suppose you have an object like myobjec{name:"nazmul Hassan"} But there is no age value. Then the short circuit will become your need. follow the bellow code example

6. Template strings

template string is another best feature of modern javascript. It also called template literal.Template Literals use enclosing back-ticks ( ` ) instead of single ( ) or double ( ) quotes.

BOOM. You can now write a template literal:

console.log(`Hello World`);
// "Hello World"

Alright, that was a crappy example. Let's add in a variable with ${}

var name = 'World';
console.log(`Hello ${name}`);// "Hello World"

A little better, but lets back up for a second:

What exactly is a “Template Literal”? Well, a template is a “preset format”, and a literal is a “value written exactly as it’s meant to be interpreted”. In JavaScript terms, a template literal is a way to concatenate strings while allowing embedded expressions and improving readability.

7. Rest and spread operators

what introduced the spread operator in ES6. It provides you with the ability to expand iterable objects into multiple elements. What does it really mean? Let’s check some examples.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Prints:

Leon Love Actually Lord of the Rings

const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Prints:

1 4 5 7

You might notice that both the array from the first example and the set from the second one has been expanded into their individual elements (strings and digits, respectively). How can this be of any use, you may ask.

The most common use is probably combining arrays. If you ever had to do this before the spread operator, you probably used the concat() method. What introduced the spread operator in ES6. It provides you with the ability to expand iterable objects into multiple elements. What does it really mean? Let’s check some examples.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Prints:

Leon Love Actually Lord of the Rings

const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Prints:

1 4 5 7

You might notice that both the array from the first example and the set from the second one has been expanded into their individual elements (strings and digits, respectively). How can this be of any use, you may ask.

The most common use is probably combining arrays. If you ever had to do this before the spread operator, you probably used the concat() method. The spread operator was introduced in ES6. It provides you with the ability to expand iterable objects into multiple elements. What does it really mean? Let’s check some examples.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Prints:

Leon Love Actually Lord of the Rings

const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Prints:

1 4 5 7

You might notice that both the array from the first example and the set from the second one has been expanded into their individual elements (strings and digits, respectively). How can this be of any use, you may ask.

The most common use is probably combining arrays. If you ever had to do this in the times before the spread operator, you probably used the concat() method.

8. Conditional ternary operator

During coding in any language, we use various ways to handle conditional situations. The common one is the use of if statement; instead of using the if statement, we can use the ternary operator in JavaScript. The ternary operator assigns a value to the variable based on a condition provided to it.

It is the only operator in JavaScript that takes three operands. The working of this operator is the same as the if-else conditional statement. We can say that it is the shortcut of the if-else.

This operator includes three operands: a condition followed by a question mark (?) sign, and two expressions separated by the colon (:). The first expression is executed when the condition is true, and the second expression is executed when the condition is false.

10. Destructuring

In the example above, all the magic happens at the following line:

const { title, rating, author: { name } } = article

Now it may seem a bit weird to have those brackets like that on the left side of the assignment, but that’s how we tell JavaScript that we are destructing an object.

Destructuring on objects lets you bind to different properties of an object at any depth. Let’s start with an even simpler example:

const me = {
name: "Juan"
}
const { name } = me

In the case above, we are declaring a variable called name which will be initialized from the property with the same name in the object me, so that when we evaluate the value of name we get Juan. Awesome! This same can be applied to any depth, to which heading back to our example:

const { title, rating, author: { name } } = article

For title and rating it’s exactly the same as we already explained, but in author, things are a bit different. When we get to a property that is either an object or an array, we can choose whether to create a variable author with a reference to the article.author object, or we can do a deep destructuring and get immediate access to the properties of the inner object.

Thank you for staying with me

I am a Full Stack web developer Ui designer. As a full stack webdeveloper I work with React js, Node.js , Django, pythone and many other tools and technolgy.