Sign in

10 Core Concepts You should learn about JavaScript

Coding Style

First of all, one must not follow these rules, but following these styles are the best. It makes our codes more interactive, clean and easy to understand.

  1. Curly braces : It helps to indicate the block of any code part. It’s ok not putting them for single line code, but for multiple line it’s a must need to put them. Otherwise it may throw an error.

Code example,

if (condition) {

// code;

// code;

}

2. Line Length:

Instead of writing a long line you can split them into multiple lines.

Example,

const mainString = “Lorem Ipsum is simply dummy text of the

printing and typesetting industry. Lorem Ipsum has been the

industry’s standard dummy text ever since the 1500s..”

3. Semicolons:

Semicolon(;) is a good practice to make your code cleaner. In some languages it has no need. If you press enter code automatically reads the end of your line. But it makes code more readable.

4. Nested Loops:

You shouldn’t make more nesting levels in your code. To avoid this you may use continue operation to you code.

Example,

for(let i=0;i<10:i++) {

if(condition)

//code;

continue

}

5. Between the parameters there should be one space

6. Should be one space after for /while/ if statements & loops.

7. Should be space around any nested calling.

8. Space should be around operators.

9. After ending curly brace else condition starts without any line break but with a space.

Comments:

Comments are very much important for a good development skill. Because, by reading these comments one can understand another one’s code. Also people do comments while any code is not working because to solve them later. Also while using function on code, comments are a must need to understand the working procedure of it.

Single-line comment can be done using: //…………comment……….

Multiple-line comment can be done using: /*………..comment………..*/

Error handling “try..catch” :

If I explain simply, In our code errors can occur at any time . It may also be the fault of our coding. For making the code perfect we can use the error handler “try..catch”. The try block reads the whole code and if there is no error to handle then it ignores the catch block. But if there are errors then the try throws an error to the catch block without breaking the code, also stops the execution of try and catch starts its work. It gives a chance to make it in the proper way.

Syntex:

try {

//…………codes…………..

}

catch {

//……..error handling…….

}

Cross Browser Testing:

The term cross browser means a smart number of browsers. In case of developing a site, one developer must need to take care of their users accessibility ,I mean one should make sure that his/her users are capable of viewing and using the website. Yes, developers can not give 100% guarantee that every browser will support the website. But must have to ensure that most browsers can support this. And it is applicable for devices like tablets, androids, tv etc. Some newest javascript , css style features don’t work with the old bowsers. It is also a very important topic to take care of.

Reasons for occurring cross browser issues:

There may have different reasons for cross browser issues. Some reasons are explained below:

  • The most common reason is bugs in code. Before hosting, one should test html debugger, css debugger log, troubleshooting in javaScript to fix the bug. Its most important to do any clean code.
  • In case of using old browsers in old devices some advanced codes may be crushed. To avoid this and to use your code you should have change codes to an old-fashioned one.
  • Sometimes the device performance may be low. For this, the code will take more time to run and also some updated animations or code may not support them. Also the site can be crushed or look small or shrink.

The Workflow for cross browser testing:

There are four steps for the workflow of cross browser testing:

Planning — Development — Testing — Fixing

  • Planning: Before working on a client’s site, one should know specifically about the whole content, working process, accessibility of users, cross browser support issues of the site. Without initial planning of the project time, payment etc. work cannot be done at a swing.
  • Development: After planning, the next step is development of the site. Means coding part. And codes need to be Clear and readable. Site will not work in some old browsers. But focusing the modern browsers codes need to be done. Maintaining the proper way of coding and also doing comments when needed is the best practice.
  • Testing: You need to test your code that is it working the common browsers like Firefox, Chrome, Safari, Internet explorer etc. Also need to test codes how it performs on different devices.
  • Fixing: If you get any bug you have to fix this before hosting / publishing your site so that users can use this smoothly.

Function with default parameter values:

Function with default value parameter allows a function to work using the default value while no argument is passed while calling this.

Code Example,

function add(x, y=1) {

return x + y;

}

add(2)

Here, while calling this add function value of y is not given. But it will take default parameter value 1 and will provide output 3.

Spread Operator JavaScript:

Spread (…) operator helps to copy all values from any expression. Basically it works on arrays. It works using iteration. You can simply add the copied element with this operator.

Code Example,

let extraArray = [‘Two’,’Three’];

let mainArray = [‘One’, …extraArray,‘Four’, ‘Five’];

//output: [‘One’, ‘Two’,’Three’,‘Four’, ‘Five’];

Arrow Function:

Arrow function is also one kind function. Name is not necessary for this function.

Syntex,

Parameter => return values.

Means on the left side of the arrow sign of this function the parameter belongs and the right side indicates the output/return values. It may also parameterless.

Code Example,

const fruits=[

‘Apple’,

‘Banana’,

‘Water Melon’

];

console.log(fruits.map(fruit=> fruit.length)); //output: 3

Block Level Declaration:

Block level means the block or accessibility of a variable. It can be created into a function and a scope. And has no accessibility from outside of this function and code.

Code Example:

Function sum() {

let a=10;

let b=20;

//code

}

// a and b are not accessible from here