6 Must know modern JavaScript concepts

Sharmila S
May 7 · 4 min read

Looking to get started with a javascript framework? Learn these important javascript concepts which makes our life easier.

1. Arrow function

You can create a function in Javascript in a traditional way using the function keyword. But using this function structure, you can write the code faster and make it look fancier!

  • Creating a function using function keyword:
function hello () {
console.log('hello world');
}
  • Using the arrow function:
const hello = () => {
console.log('hello world');
};

For functions with only one statement, you can directly specify the statement without curly braces.

const hello = () => console.log('hello world');

And for return statements, you can directly return values without return keyword.

const hello = () => {
return "Hello World";
}
// same as
const hello = () => "Hello World";

2. Call Back function

When a function is invoked, it can pass back a function called ‘callback function’ as an argument.

To understand this better, let’s create a callback function hellothat takes in a name (string) as a parameter and returns a callback with a message (string).

const hello = (name, cb) => {
const greetings = "Hello, " + name + "!";
cb(greetings);
}

hello -> function name
name -> parameter accepted by the function
cb -> calls back a function by sending greetings as parameter

  • Let’s call our function and use the callback
hello("Sharmi", (greet) => {
alert(greet);
});

"Sharmi" is the value passed to the function

(greet) => { alert(greet); } — function that receives call-back data and handles it.

3. Javascript object

Javascript object contains properties and their values.

const student = {
name : "Harry",
year : 5,
house : "Griffindor",
}
// Values are accessed by using its property with dot operator
console.log(student.name); // logs "Harry"

Properties can have a function as their value.

const hello = {
fname : "Hermoine",
lname : "Granger",
fullName : function () {
return this.fname + " " + this.lname;
}
};
console.log(hello.fullName()); // logs "Hermoine Granger"

Properties can have an object as their value

const nestedObject = {
name : {
type: String,
maxLength: 10
},
regno : {
type: Number
}
};

We learnt that we can return values directly for the arrow function if the function only contains a return statement. E.g.

// returns "hello"
const one_line_func = () => "hello";

Since function declaration also starts with {} , make sure you wrap the object with parenthesis when you are returning an object directly in this way.

const funcToReturnObject = () => {
return {
name : "Draco",
house : "Slytherin"
};
};
// since object startes with {} and function definition also starts // with {} so enclose with ()const one_line_funcToReturnObject = () => ({
name : "Draco",
house : "Slytherin"
});

4. Array and Object Destructuring

Destructuring an array or an object to variables. i.e. assigning values of an array or an object to variable names.

Destructuring an array

The values are assigned in the order of elements in the array.

const arr = ["Hello", "World"];//Destructure 
[ hello, world ] = arr;
console.log(hello); // logs "Hello"
console.log(world); // logs "World"
[ world, hello ] = arr;
console.log(hello); // logs "World"
console.log(world); // logs "Hello"

You can choose to store the rest of the elements in a separate array.

const newarr = [0, 1, 1, 2, 3, 5];[first, second, ...others] = newarr;console.log(first); // logs 0
console.log(others); // logs [1, 2, 3, 5]

Destructuring an object

You can only specify the properties for which you want the values. Enclose the property names within curly braces (order doesn’t matter).

const person = {
name : "Luna",
age : 16,
house: "Ravenclaw"
};
{ name, age } = person;console.log(name); // logs "Luna"
console.log(age); // logs 16

5. import and export

It is always a good practice to have similar functions in a separate file.

You can separate functions as modules to for later use. Then, you can import them into another file.

To export functions from a file, use module.exports

const hello = () => {
console.log("hello world");
}
module.exports = hello;

Then, require the file as a package to use the exported functions.

const hello = require("hello");
hello();

If you wish to export multiple functions, send them as an object.

  • hello.js
const hello = () => {
alert("Hello!");
};
const helloName = (name) => {
alert("Hello!, " + name );
};
module.exports = {
hello: hello,
helloName: helloName,
};
  • Import in another .js file.
const hello = require("hello.js"); hello.hello();
hello.helloName("Ron");
  • Import only necessary functions using object destructuring.
const { helloName } = require("hello.js");helloName("Ron");

6. async and await

When making a request to the server through API, the request can take some time to be processed and during the waiting time javascript executes the next statement after the function call.

But sometimes, the statement that follows might depend on the data that is returned by the function call. So you might not get the desired result.

To avoid that, we can use async/await to tell the javascript to wait until the request is processed.

Use await keyword before the function call

const data = await aFunctionCall();
console.log(data);

Next, enclose the statements within an async function.

const func = async () => {
const data = await aFunctionCall();
console.log(data);
}

Hope you found the article useful! Happy learning!!

featurepreneur

Features for everyone!