Ops! Sorry JavaScript problems related

Today I will talk about your problems. Ops! Sorry JavaScript problems. Every senior developer once a beginner-level developer. We always have a fear that works inside our minds. When we face an interview, we get scared. There are many reasons behind this. And the main question is, “What kind of questions can they ask us?”. Now, I will talk about some programming-related problems that are mainly important for an interview

1. Tricks:

In this section, I’ll show you some of the new ES6 tricks to make your coding life easier.

1-(I). Try-Catch:

Try-Catch is a method where you can code more accurate way without worrying bout bugs, this method has two sections, the first one is “try” this is the default one that contains all the executable code and the second one is “catch” and it is for capturing the error, if there is an error in the try section than code won’t execute after that line and immediately jump to the catch section than you’ll be informed about the error.

Get Shamim AL-Mamun’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

=====STRUCTURE=====

try {
// Your code goes here;
} 
catch (err) {
// errors will be capatured and handled here;
}

=====WITHOUT ERROR=====

try {

  alert('Start of try runs');  // (1) <--

  // ...no errors here

  alert('End of try runs');   // (2) <--

} catch (err) {

  alert('Catch is ignored, because there are no errors'); // (3)

}

=====WITH ERROR=====

try {

  alert('Start of try runs');  // (1) <--

  lalala; // error, variable is not defined!

  alert('End of try (never reached)');  // (2)

} catch (err) {

  alert(`Error has occurred!`); // (3) <--

}

1-(II). Template Literals:

Template literal is nothing but a way to create a string dynamically. It’s a replacement of the previous concat() method to create a dynamic string.

const url = `https://jsonplaceholder.typicode.com/users/${id}`

const name = `Your name is ${first} ${last}.`

function log(data, type= "Info"){
  console.log(`${type}: ${data}`);
}

1-(III). Multiline String:

The multiline string is a new way to create multiline string without storing them more than variables. It’s a replacement of the previous concat() method to create a dynamic string.

//////PREVIOUSE WAY//////
let string1 = ["one", "two", "three"];
let string2 = ["four", "five", "six"];
let newString = string1.concat(string2);

//////ES6 MODERN WAY/////////
let string = `one two three
foure five six`;

1-(IV). Destructing of Array and Object:

The destructing method is a new approach stated by ES6, by using the destructing method you can fetch a certain element from an array or object.

////ARRAY DESTRUCTING////
let array = [1, 2, 3]; 
let [a,b] = array; 
console.log(a,b);
// console will log a=1, b=2

////OBJECT DESTRUCTING////
let object = { elmnt1: 1, elmnt2: "A" };
let {a, b} = object;
console.log(id);
// console will log a=1, b=A

1-(V). Arrow Function:

Arrow function is a new comfortable approach to write function instead of the old boring system, it’s started from ES6, by using the arrow function mechanism you don’t have to write the word function before defining any function.

////OLD SYSTEM///
let x = function multiply(x, y) {
   return x * y;
}

////ARROW FUNCTION | NEW APPROACH///
let x = mutiply = (x, y) => x * y;

////OR///
let x = (x, y) => x * y;

1-(VI). Block Binding:

Block binding is a method that lets you assign value while initializing a variable, we can store or bind something in a named variable.

const name = "Mazhar";
let proffesion = "Web developer";
var projectDone = 10;

1-(VII). Brand New for Loop:

With ES6, new types of loops were introduced which are “for/of” and “for/in” This helps you to loop through iterable objects easier than ever. Now there is a significant difference between which one to use where. The “for/of” loop is for iterating the value of an iterable element (array, string) and the “for/in” loop is for iterating through the keys of an object.

/////EXAMPLE OF for/of //////
let fruits = ['Apple', 'Banana', 'Jackfruit'];
for ( let element of fruits ) {
    console.log(element);
}
/////console will log///
// Apple
// Banana
// Jackfruit

///// EXAMPLE OF for/in //////
let user = {
    name: 'Mazhar',
    department: 'web development',
    id: 333
}
for ( let key in user ) {    
    console.log(`${key} : ${user[key]}`);
}
/////console will log///
// name : Mazhar
// department : web development
// id: 333

1-(VIII). A Method Named typeof :

typeof is a method by which you can determine the origin of a variable, whether the variable is a number or string. The return types of typeof method is

Number
String
Boolean
Object
Null
Undefined
Symbol
BigInt
typeof(2);
//number
typeof("Hello");
//string
typeof(true);
//boolean
typeof(NaN);
//number
typeof(isNaN);
//function
typeof({});
//object

2. Truth:

Now it’s time to know some truth about JavaScript, here truth means the functionality or the way of work of JavaScript. So let’s get familiar with some truth.

2-(I). Event loop:

Event loop may be the most confusing concept in JavaScript, but here I’ll show you the same event as simple as possible.

So what is the event loop? okay, assume the event loop as a gatekeeper whose task is so simple that the gatekeeper just has to open a door from his right side every 1 minute and check whether the room-1 is empty or have something in it if the room is empty the gatekeeper just have to open another door from his left side and check whether the room-2 is empty or have something in it if the room has some boxes, the task is to throw one box at a time from room-2 to room-1. That’s it, that’s the event loop, the gatekeeper is the event loop, room-1 is the call stack and room-2 is the callback stack.

2-(II). JSX a smarter HTML:

HTML is a Hypertext Markup Language, the standard markup language for documents designed to displayed and viewed on the web in a web browser.

On the other hand, JSX (JavaScript + XML) is an extension of JavaScript that allows you to write HTML directly within JavaScript, which has a few benefits of making your code more readable and exercising the full power of JavaScript within HTML.

JSX is not intended to implemented by browsers, it also doesn’t signify a proposal to incorporate JSX into the ECMAScript spec. JSX’s main intention is to be used by transpilers or preprocessors to transform these tokens into standard ECMAScript.

JSX is in many ways similar to HTML, however, it does come with certain conspicuous differences. Since JSX is not a valid JS code, it needs to be compiled into JS with a tool like Babel or similar.

Hope you’ve learned something new or something known in a new way, wish you a happy BUG_FREE coding life.

Enjoy Coding…