Features of JavaScript – 8 Unique JavaScript Features That You Must Know

In this JavaScript tutorial, we will learn different JavaScript Features and how we inculcate it in writing HTML pages. It gives insight about how modern features of JavaScript are widely used.

We will discuss different unique features of JavaScript and various features of Modern JavaScript with examples.

Features of JavaScript

Core Features of JavaScript

Various features of JavaScript are as follows:

1. Client – Side Technology

JavaScript is a client-side technology. It is mainly used for giving client-side validation. It is an object-based scripting language.

2. Greater Control

It gives the user more control over the browser.

Example – You can change the background color of the page as well as text on the browser’s status bar.

Here, the back button is implemented with JavaScript. Click it and you will return to the page from which you have arrived.

3. Detecting the User’s Browser and OS.

The feature to detect the user’s browser and OS enables your script to perform platform–dependent operations.

4. Performing Simple Calculation on the Client side

Using a JavaScript calculator, we perform simple calculations on the client side.

5. Validating The User’s Input

In the JavaScript calculator, try to type some letters instead of numeric input, you will get an error: Invalid input character. Note that, JavaScript helps the browser perform output validation without wasting the user’s time by the web server access.

If the user makes a mistake in the input, the user will get an error message immediately. If the input information is validated only on the server, then the user would have to wait for the server’s response.

6. Handling Date and time

The JavaScript says, “Nice Morning, isn’t it? Or “Good Afternoon”, depending on the current time. It also tells you today’s date.

Nice Morning isn’t it? Today is Wednesday, 20 February 2019.

7. Generating HTML on the Fly

Every time you click on the button, the browser generates and displays a new HTML code. Thanks to JavaScript, this operation performs on the client- machine and therefore you don’t have to wait while the information backs and forth between your browser and the web server.

8. Semicolon Insertion

All statements in JavaScript must terminate with a semicolon. Most of the JavaScript control statements syntax is the same as control statements in C.

Modern JavaScript Features

Modern JavaScript Features

Modern JavaScript features are for better development and there was a time when JavaScript’s use was only for interaction on the website. New ECMA Script standards releases every year, bringing more and more useful and powerful features and JavaScript is not only used as Front End but also used as back end architecture, mobile, desktop, IOT apps etc.

The Modern JavaScript features are as follows:

1. Let / const

If we start to use ‘let’ and ‘const’, we won’t use the keyword ‘var’. ‘let’ was a replacement for ‘var’. Both ‘let’ and ‘const’ are block scoped, while ‘var’ is a function scoped. It means if we initialize a ‘var’ inside the for loop it will also be accessible outside of it.

Example:-

var animals = [ ‘chickens’, ‘duck’, ‘cow’ ];
For (var key in animals) {
Var animals = animals[key];
}
Consolel.log(animals);

As you can see, we have declared ‘animal’ variable inside the loop, but we still have access to it from outside. However, if we use ‘let’ instead, we will get a reference error that ‘animal’ is not defined.

Example:-

const animal = [ ‘chicken’, ‘duck’, ‘cow’];
For ( var key in animals) {
Let animal = animal[key];
}

Console. log (animal);

Here, we are not using “var”. In the loop, we might need to declare variables to store some data temporarily, which is only needed for that loop. Therefore, there is no need for these variables to be available outside in the outer scope. If you want to access the certain variable outside for loop, you can just declare the variable outside.

Example:-

const animal = [‘chicken’, ‘duck’, ‘cow’];
let animal
for (var key in animal) {
animal = animals[key];
}
Console.log(animal);

However, if you give a value to ‘const’ and try to modify it you will get an error.

Example:-

const animals = [‘chicken’, ‘duck’, ‘cow’];
Animals = {
Animal1 : ‘cow’
Animal2 : ‘chicken’
}

Console.log(animals); // syntax error: animal is read-only

It is important to remember that even if you assign an object to a ‘const’, you can still change their inner properties and values.

Example:-

const animals= [‘chicken’, ‘duck’, ‘cow’];
Animals[0]= ‘cat’;
Console.log(animals);

An interesting feature of ‘let’ is that each time it is declared, it creates a new fresh binding for the scope.

2. Template literal

We can use template literal to write much better and readable code. Here, we are doing String Interpolation. Instead of single or double quotes, we use backticks and inside them, we use dollar sign with bracket ${} to add a value from the variable to a string.

Example:-

let result = `${ variable} / ${variable}/ ${variable}`
let result = variable + ‘/’ + variable +’/’ + variable

Custom Interpolation gives flexible expression interpolation for arbitrary methods.

Example:-

get ‘http: //example.com/foo?bar=${ bar+baz} &quu*=${quu}

Raw String Access gives access to the raw template string content.

Example:-

function quux (strings, … values){
Strings[0] == “foo\n”
Strings[1] == “bar”
Strings[2] == “ foo\n”
}
Quux ‘foo\n ${ bar` string .raw `foo\n $ {42}bar` ==”foo\\n 42 bar”

3. Arrow functions

We use Arrow Functions all the time and we use a normal function declaration when we need it. The important things about the arrow functions are, with comparisons with normal functions it doesn’t have lexical scope. It means this will refer to different objects in arrow and normal functions.

Example:-

function Person (age){
this.age = age
function getAge () {
console.log(‘age’, this.age)
return this.age
}
Return {
getAge
}
}
Const Myke = newPerson(25);
Console.log(Myke.getAge());

In this case, we are trying to access ‘age’ on ‘this’ will result in an error, because ‘this’ doesn’t refer anymore to ‘Person’ object, but to getAge() function itself. Previously, we had to give ‘this’ to a variable like ‘var self = this’ and then utilize it in callbacks. However, if we use an arrow function, we will be able to access the ‘age’ properly.

Example:-

const getAge = ()=> {
Console.log (‘age’, this.age)
Return this.age
}

We know that we can just assign getAge as a property directly on the object and then we have access to ‘age’, but this is just for demonstration purposes.

Arrow function is for callbacks and functions like filter or map when accessing a property from an outer scope.

Besides ‘this’ keyword, ‘arguments’ are also not binded like that are in normal functions. If we utilize a normal function, we access arguments.

Example:-

function vegetables (name, color) {
Console.log (arguments);
};
Vegetables ( ‘carrot’, ‘orange’);

Another feature of arrow functions is an immediate return expression. We can omit the function brackets and immediately return a value.

Example:-

const sum = (x, y) => x+y;
Console.log( sum(4,5);

4. Default parameters

If we have to pass a parameter to the function and then do something based on it, we have to add checks if value exists.

Example:-

function doSomethingWithObjects(object){// nothing passed
If ( object &&typeof object ==’object’){
Console. log(object.property)
}
doSomethingWithObject()

function doSomethingWith Objects( object = { }) { };```

We can put more default values or assign a string, integer or number what we need.

Example:-

function doSomethingWithObject( Object = { property : ‘hello; }, text = ‘world’) {
Console.log(object.property) // hello
Console.log (text) // world
};
doSomethingWithObject();

5. Property shorthand

If you want to assign a variable to an object property that has the same name then we can write like this:

Example:-

let dinner = ‘soup’
mealPlan = {
dinner: dinner
}
You can make it short hand by writing ‘dinner’ only once.
mealPlan = {
dinner
}

Property shorthand is useful with Destructuring, which is a process of extracting properties of an array or object.

Example:-

axions.get(‘something’).then({data})=>{
Console.log(data);
}

If we have a big object with many different properties then we need to prepare for an API call, then we can pass an object to a function which will return the modified object.

Example:-

let hugeObject = {‘many properties here’}
Const prepareData = ({ prop1, prop2, prop3, prop4}) =>{
Prop1,
Prop2,
Prop3: prop3 ? 1:0,
Prop4;
})

You can also rename destructured properties.

Example:-

const prepareData = ({ prop1 : name, prop2 : surname}) => {};

Now, we come to the end of our JavaScript Features Tutorial.

Summary

JavaScript has become a lot of fun as well as a really exciting space to work in recent years. JavaScript has achieved a well-structured, maintainable code base to language that offers great productivity, readability and accessibility which is also pretty fun to work with. The above are some features and there are a ton more, both in the language and on the way. Furthermore, if you have any suggestions or queries, you can enter in the comment section below.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.