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

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

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

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

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

3 . Comments

// single line commentvar 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

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

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

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

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

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

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

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;