Things you should know to be a JavaScript Developer

1. Checking a Type

If we want to check a value’s type, you will need to use typeof operator. It will say the types such as “number”, “string”, or “object”.

console.log(typeof(5)); 
Output: "number"
console.log(typeof("JavaScript")); 
Output: "string"
console.log(typeof(undefined));
Output: "undefined"

2. Making Comment:

We all know that in programming commenting is very important. Beacuse it makes codes readable more clear. Tere are two types of comments. One is Single line comment and another is Multi-line comment.

This is a single line comment example: It start with //

const x = 10;      // Declare x, give it the value of 10
const y = x * 5;  // Declare y, give it the value of x * 5

This is Multi-line comment example: It start with /* and end with */

/*
The code below will change
the heading with id = "header"
and the paragraph with id = "paragraph"
*/
document.getElementById("header").innerHTML = "This is header";
document.getElementById("paragraph").innerHTML = "This is paragraph.";

3. Error Handling:

Most popular method of error handling is try catch method. The try…catch construct has two main blocks. One is try and another is catch.

try {    
// code 
} 
catch (err) {    
// error handling  
}

let’s talk about a real life use case of try…catch. JavaScript provides the method JSON.parse(str) to read JSON-encoded values. It’s usually used to decode data received over the network, from a server, or from another source. We receive it and call JSON.parse like this:

// data from the server
let json = '{"name":"Samsung", "price": 3000}';  
// convert the text representation to JS object
let mobile = JSON.parse(json);  // now mobile is an object with properties from the string
 alert( user.name ); // John alert( user.age );  // 30

The script “dies” when the json is malformed, and JSON.parse generates an error. So, in this case we need to use try…catch to handle the error. The code will look like this then.

let json = "{ bad json }";  
try { let user = JSON.parse(json);
    // <-- when an error occurs...   
    alert( user.name ); 
    // doesn't work  
} 
catch (err) {   
    // ...the execution jumps here   
    alert( "The data has errors." );   
    alert( err.name );   
    alert( err.message ); 
}

4. Variable declare:

The ES5 syntax uses the var keyword to declare variables before they are used.

//Declaring using var keyword 
var  name = 'javascript';
console.log('The value in the variable is : ',name);
Output:
The value in the variable is javascript

ES6 introduces the following syntax for declaring variables :

• Using the let.
• Using the const

5. Variable Scope:

This is the region of your program in which a variable is defined. JavaScript has traditionally defined two scopes for variables, global and local.

• Global Scope − Variables with global scope can be accessed from any part of the JavaScript code.
• Local Scope − Accessible variables that have local scopes can be found within functions where they are declared.

var num = 90
function digit() { 
   var num = 50
   console.log("value of num inside function is "+num) 
} 
console.log("value of num outside of function is "+num) 
digit();
Output:
// This is output of global loop
"value of num outside of function is 90" 
//This is output of local loop 
"value of num inside function is 50"

6. Block Binding in Loops:

One of the places where developers want block level scoping of variables is within for loops, where the throwaway counter variable is meant to be used only within the for loop. For instance, this is a common JavaScript example:

for (var i=0; i < 20; i++) {
    process(items[i]);
}

// i is still accessible here
console.log(i);  //20

In other languages, block level scoping would take care of this issue, and only the for loop should have access to the i variable. In JavaScript, however, the variable i still exists after the loop is completed since the var declaration gets hoisted. The following code shows the intended behavior by using let instead:

for (let i=0; i < 20; i++) {
    process(items[i]);
}

// i is not accessible here - throws an error
console.log(i);

7. Default parameter:

The default function parameter allows named parameters to be initialized with default values if no value or undefined are passed.

function sum(a, b = 1) {
  return a + b;
}
console.log(sum(4, 3));
Output: 7
console.log(sum(4));
Output: 5

8. Rest parameters:

By using the rest parameter syntax, a function can accept an indefinite number of arguments as an array, thus providing a way to represent variadic functions in JavaScript.

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
console.log(sum(5, 6, 7));
Output: 18
console.log(sum(5, 6, 7, 8));
Output: 26

9. Spread syntax:

Spread syntax enables a single iterable like a string or an array expression to contain zero or more arguments (for function calls) or elements (for array literals) and a single object expression to contain zero or more key-value pairs (for object literals).

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [5, 6, 7];
console.log(sum(...numbers));
Output: 18
console.log(sum.apply(null, numbers));
Output: 18

10. Arrow function:

Arrow function is a updated version of normal function. Let’s decompose a “traditional function” down to the simplest “arrow function” step-by-step:

// Traditional Function
function (a){
  return a + 50;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 50;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 50;

// 3. Remove the argument parentheses
a => a + 50;