JavaScript 10 Important Things

I hope you are a web developer. Maybe you are even self-employed or working as a freelancer Maybe you are just starting out as a web developer. However comfortable you are with JavaScript, it is always good to get a refresher on some topics to read up about or get them on the radar in the first place. Here are 10 things you definitely have to learn before you can call yourself a master in JavaScript.

1 . Error handling

Error handling is important for all languages. Error handling is just as important in JavaScript. If you do not handle the error, the app may crash. There are several ways to handle errors in JavaScript, some of which are discussed below.

try , throw and catch

This is the simplest, but often times forgotten way to handle errors — it does get used a lot more nowadays again, thanks to async / await, see below. This can be used to catch any kind of synchronous error. Example:

function lastElement(array) {
    if (array.length > 0)
        return array[array.length - 1];
    else
        throw "Can not take the last element of an empty array.";
}

function lastElementPlusTen(array) {
    return lastElement(array) + 10;
}

try {
    alert(lastElementPlusTen([]));
}
catch (error) {
    alert("Something went wrong: ", error);
}

then , catch

An error occurs in the app when we do not receive a response from a promise. Then I can get an error by catching it, the app will not be cached

doSomething()
.then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

if , else

Conditional statements are used to perform different actions based on different conditions.

if (condition) {
 // block of code to be executed if the condition is true
 } else { 
 // block of code to be executed if the condition is false
 }

2 . Statement

A computer program is a list of instructions to be executed by a computer.In a programming language, these programming instructions are called statements. A JavaScript program is a list of programming statements. The statements are executed, one by one, in the same order as they are written. Semicolons separate JavaScript statements.

const x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

3 . Comments

Whatever we do, we always want to make it beautiful and tidy so that others can easily understand it. Similarly, when writing code, we need to make sure that someone else understands the code easily and modifies it if necessary.And that’s why comments are so important. However, there are two types of comments in JavaScript, single line comments, multi line comments. Single line comments are written with a double forward slash (//). And you have to write multi line comment with / * * /.

// single line comment
var x = 5;    // Declare x, give it the value of 5
var y = x + 2;  // Declare y, give it the value of x + 2
// multi line comment
/*
Here first declare x, give it the value of 5 then
declare y, give it the value of x + 2
*/
var x = 5;    
var y = x + 2;

4. Data Types

JavaScript variables can hold many data types: numbers, strings, objects, and more. JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned values of all types.

let example = 42;    // example is now a number
example = 'example'; // example is now a string
example = true;  // example is now a boolean
example = {'example':'example'};  // example is now a object
example = ['example','example'];  // example is now a array

5. JavaScript Syntax

JavaScript syntax is the set of rules, how JavaScript programs are constructed. The JavaScript syntax defines two types of values. Fixed values, variable values. Fixed values are called literals. Variable values are called variables.

// literal 
console.log("This is literal string")
console.log(123456) // literal number
// variables
const string = "This is variables string";
const number= 123456; // variables number
console.log(string)
console.log(number)

6. Functions

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). A function is a block of code with a particular task or many statements. Function work many steps like declear , invoke . When function declear it’s not working. The code inside the function will execute when invokes (calls) the function.

For example, the following code defines a simple function named sum, and it’s return a value when invoke this function:

// declare function
function sum(number1 , number2) {
  return number1 +number1;
}
// invoke function
const result = sum(5, 7);
console.log(result) // output 12

7. Execution context

Javascript education context mean how JavaScript code gets executed. When a JavaScript engine executes a script, it creates execution contexts. Each execution context has two phases: the creation phase, and the execution phase. When a script executes for the first time, the JavaScript engine creates a Global Execution Context. After the creation phase, the global execution context moves to the execution phase. During the execution phase, the JavaScript engine executes the code line by line. In this phase, it assigns values to variables and executes the function calls. For every function call, the JavaScript engine creates a new Function Execution Context. The Function Execution Context is similar to the Global Execution Context, but instead of creating the global object, it creates the arguments object that contains a reference to all the parameters passed into the function.

let x = 10;

function dubble(a){
    return a * 2;
}

let y = dubble(x);

console.log(y); // output 20

In this code:

• First, the creation phase, the JavaScript engine stores the variables x and y and the function declaration dubble() in the Global Execution Context. Besides, it initializes the variables x and y to undefined.
• Second, the function execution context creates the arguments object that references all parameters passed into the function, sets this value to the global object, and initializes the a parameter to undefine.
• Third, assign 10 to the x variable, then the function execution phase of the function execution context, it assigns 10 to the parameter a and returns the result (100) to the global execution context and result 100 is assign y variable.
• Finally, output the variable to the Console.

8. Condition

When you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript, we have the following conditional statements. If a specified condition is true use if condition. If the same condition is false use the else statement. Use switch to specify many alternative blocks of code to be executed.

//if condition
if (condition) {
   //  block of code to be executed if the condition is true
}
// esle if first condition is false
if (condition) {
  // block to be excute if condition true
}else {
// block to be excute if condition false
}
//switch 
switch(expression) {
   case a:
      // code block
         break;
   case b:
      // code block
      break;
   default:
       // code block
  }

9. Loop

Sometimes you want a code that will run repeatedly based on certain conditions. The solution is the JavaScript loop. There are several types of loops in JavaScript. Below are some examples of loops

while loop — the while loop loops through a block of code as long as a specified condition is true.

let i = 0;
while (i < 10) {
  text += "The number is " + i;
  i++;
}

for loop— loops through a block of code a number of times

let i;
for (i = 0; i < 10; i++) {
  text += "The number is " + i;
}

10. ES-6

Simply put, ES6 refers to version 6 of the ECMA script programming language. ECMAScript was created to standardize JavaScript and is the 6th edition of ES6 ECMAScript, released in 2015 and also known as ECMAScript 2015. This is a major extension of the JavaScript language, and has added many more features aimed at making software development easier. Here are some of the most important features of ES6.

let — let keyword allows you to declare a variable with block scope

let x = 10;
// Here x is 10
{ 
   let x = 2;
   // Here x is 2
}
// Here x is 10

const — const keyword allows you to declare a constant

const x = 10;
// Here x is 10
{ 
   const x = 2;
   // Here x is 2
}
// Here x is 10

arrow functions — arrow functions allows a short syntax for writing function expressions

// ES5
 var sum = function(x, y) {
          return x + y;
 }

 // ES6
 const sum= (x, y) => { return x +y };
/* if single statement you don't need return keyword and curly bracket */
const sum = (x, y) => x + y;