DEV Community: buginit

Things you need to know about Tagged Template Literal in JavaScript

buginit — Sun, 24 Nov 2019 07:24:12 +0000

In simple words: JavaScript Tagged template literal is a function call that uses a template literal to get its arguments.
Here is a tagged function example:

greet`I'm ${name}. I'm ${age} years old.`;

Don't get yourself confused, In the above example, greet is a function that takes three arguments

The first parameter is an array containing all of the text from our template literal.
The 2nd to infinity parameters in our function are the variables to be inserted into our tag function. Here I'll show you the greet function from inside in detail.

// creating name and age variable 
var name = 'buginit';
var age = 1; 

// creating a greet function
function greet(strings, name, age) {
  var str0 = strings[0]; // "I'm"
  var str1 = strings[1]; // ". I'm"
  var str2 = strings[2]; // "years old."
  console.log(name) // buginit
  console.log(age) // 1
}

// calling greet function here and passing 
// name and age variable that we created above
greet`I'm ${name}. I'm ${age} years old.`;

Explanation: First we created two variables called name and age.

Then we defined the greet function,

And then called the greet function with those two variables and some strings around using Tagged Template Literals. So the greet function will receive all the strings as an array in the first argument and those variables in the rest of the arguments as shown in the above example please read comments inside example.

I hope you got the picture in your mind.

Wanna see more example and real-word examples check this out A Complete Guide: Tagged Template Literal In JavaScript

Originally published at buginit.com on October 9, 2019. For latest updates follow buginit

Here Is The Powerful Guide Of Spread Operator/Syntax In ES6

buginit — Thu, 14 Nov 2019 02:52:07 +0000

Spread Operator in ES6 or syntax ( according to MDN it is syntax) so let’s call it syntax. Well, they also call it three dot operator.

So how it looks like? Oh, it is simply three dots ...

When did it release? Of course in ES6.

What it actually does? The spread operator in ES6 turns iterable values into arguments. we will come back on definition later, for now

Let’s understand with an example.

Let say: you have two arrays called mid and all. And you have to insert mid in the middle of all. Quickly!!!

let mid = [3, 4];
let all = [1, 2, ...mid, 5, 6];

Expected Output: [1, 2, 3, 4, 5, 6]

Awesome!! That’s all, Yeah you got it!!

According to MDN, Here you got the long boring definition below:

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

So that’s all, do I know all about it? Naa! man, life isn’t that easy 🙁

What actually you can do with spread syntax? Let’s break it down with examples in short.

#1 Apply for new

When calling a constructor with new it’s not possible to directly use an array as arguments. But now you can use an array directly for example:-

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

To see all 6 types of example the complete guide of Spread Operator/Syntax In ES6

How To Debug JavaScript Like A Pro.

buginit — Fri, 08 Nov 2019 03:04:55 +0000

First of all, I want to tell you, yes there are good and bad ways to console.log in JavaScript that can make your life easier as a JavaScript developer. So let’s get started on how to debug javascript?

Let’s imagine we have 3 objects to log like below.

const foo = { name: 'tom',   age: 30, nervous: false };
const bar = { name: 'dick',  age: 40, nervous: false };
const baz = { name: 'harry', age: 50, nervous: true };

Bad Code 💩

console.log(foo);
console.log(bar);
console.log(baz);

In the above approach, the problem is we don’t have the variables name to see which one is which? You have to concatenate a string to see which is which.

Good Code ✅

But there is a trick called Computed Property Names/property shorthands

console.log({ foo, bar, baz });

It reduces the code but also shows exactly which variable defines the data.

one line of code.
one console log.
and all the specified information.

There is more in this tutorial here To see all examples with results click here

Follow for latest updates Facebook Twitter

22 Examples Of Arrow Function JavaScript: Part 1

buginit — Thu, 07 Nov 2019 00:47:08 +0000

An Arrow Function in JavaScript also called a “Fat arrow” function is a syntactically compact alternative to a regular function expression. It allows us to write shorter function syntax. Arrow functions are anonymous and change the way this binds in functions.

Arrow functions doesn’t support its own bindings to the this, arguments, super, or new.target keywords.

#1 Basic Example

var materials = [
  'JavaScript',
  'HTML',
  'CSS',
  'Buginit.com'
];
// before 
console.log(materials.map(function (material) { return material.length}));
// with arrow function
console.log(materials.map(material => material.length));
// expected output: Array [10, 4, 3, 11]

#2 Basic syntax

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

#2.1 Optional Parentheses

Parentheses are optional when there’s only one parameter present:

(singleParam) => { statements }
singleParam => { statements }

#2.2 Without Parameters

If you do not have any parameters then it should be written with a pair of parentheses like the example below:

() => { statements }

To see all 22 examples of Arrow Function Click here

Part 2

Do You Really Know JavaScript Includes Method?

buginit — Wed, 06 Nov 2019 02:10:58 +0000

JavaScript includes method is very handy when you need to search or find something in the array or string, yes it works on both. It returns the Boolean value true if the array contains the value and false if not, and the same applied to the strings.

#1 Array Example

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

#1.1 Find by Specific Index

In JavaScript include method, you can also find values from specific indexes, as second parameter it receives fromIndex for example:

var array1 = [1, 2, 3];

console.log(array1.includes(2, 1));
// expected output: true

var array1 = [1, 2, 3];

console.log(array1.includes(2, 2));
// expected output: false

In the above example, we are passing fromIndex in the second parameter to tell the include() method that if the value exists from that specific index.

To read Full 9 examples of JavaScript Includes Method click here

7 Examples Of JavaScript Dynamic Import ES10

buginit — Sun, 03 Nov 2019 11:08:47 +0000

In this article, we will talk about JavaScript Dynamic Import that introduced in ES10/2019, we will cover basics and different types of examples also we will take a look at static and Dynamic Import in JavaScript. And don’t worry I’m not going to give you a long lecture, we will cover this with small points and examples.

Let’s start, Basically dynamic import is a new function like import statement that introduced in ES10/2019 and it returns a promise. As we know let’s have a look at static import of JavaScript below:

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

Now, Let’s have a look at the basic JavaScript dynamic import statement.

#1 Simple Single Line Example

import("module/foo.js").then(foo => console.log(foo.default))

In the above example, we used the single-line statement of Arrow function for console.log to make it shorter. You can also use the normal function like the below example:-

import('module/foo.js').then(function(foo) {
  console.log(foo.default);
})

To Read full 7 Examples Of JavaScript Dynamic Import ES10 click here

JavaScript Destructuring ES6: The Complete Guide

buginit — Tue, 29 Oct 2019 11:04:56 +0000

In this article, we are gonna learn about javascript destructuring that is introduced in ES6. You can learn all the features of javascript destructuring step by step with approx 17 types of examples.

The JavaScript destructuring assignment syntax is expressive, compact and more readable that makes it possible to “destructured” (upwarp) values from arrays or properties from objects, into different variables.

JavaScript Destructuring Expression (demo)

[a, b] = [50, 100];

console.log(a);
// expected output: 50

console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

We can use JavaScript Destructuring in so many different ways.

TLDR;

#1 Array destructuring

Array destructuring is very much similar and straight forward, you can use an array literal on the left-hand-side of an assignment expression. Each variable name on the array literal maps to the corresponding item at the same index on the destructured array.

#1.1 Basic variable assignment.

let foo = ['one', 'two', 'three'];

let [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

To read the full guide of 17 examples click here