6 Must know modern JavaScript concepts

Published in

featurepreneur

5 min readMay 7, 2021

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    : "Hermione",
    lname    : "Granger",
    fullName : function () {
                   return this.fname + " " + this.lname;
               }
};console.log(hello.fullName()); // logs "Hermione 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 the object to be returned starts with a '{}', it has to be 
// enclosed with a '()' to return it directly.
// Otherwise, the object will be interpreted as the function 
// definition (which has set of statements wrapped in a '{}'). const one_line_funcToReturnObject = () => ({
    name  : "Draco",
    house : "Slytherin"
});

4. Array and Object De-Structuring

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

De-Structuring 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]

De Structuring 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 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, use require() to import the file as a package to use the exported functions from it.

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

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

hello.js

const hello = () => {
    alert("Hello!");
};const helloName = (name) => {
    alert("Hello!, " + name );
};module.exports = {
  hello: hello,
  helloName: helloName,
};

Import it to use in another .js file.

const hello = require("hello.js"); hello.hello();
hello.helloName("Ron");

Import only necessary functions using object de-structuring.

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!!

If you like this article and would like to support me, feel free to buy me a Coffee. I’d appreciate the little support!