JavaScript is a dynamic programming language that's used for web development, in web applications, for game development, and lots more. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS.
Below are some of the Critical Topics in Javascript:
1. Error Handling
JavaScript is a loosely-typed language. It does not give compile-time errors. So some times you will get a runtime error for accessing an undefined variable or calling undefined function etc.
JavaScript provides error-handling mechanism to catch runtime errors using try-catch-finally block, similar to other languages like Java or C#.
1. try: wrap suspicious code that may throw an error in try block.
2. catch: write code to do something in catch block when an error occurs. The catch block
can have parameters that will give you error information. Generally catch block is used to
log an error or display specific messages to the user.
3. finally: code in the finally block will always be executed regardless of the occurrence of an
error. The finally block can be used to complete the remaining task or reset variables that
might have changed before error occurred in try block.
"Try....Catch" Syntax
try{
// code...
}
catch(err){
// error handling
}
Step 1: Firstly, Try{..} is executed
Step 2: If there were no errors, then catch (err) is ignored: the execution reaches the end of
try and goes on, skipping catch.
Step 3:If an error occurs, then the try execution is stopped, and control flows to the
beginning of catch (err). The err variable (we can use any name for it) will contain an
error object with details about what happened.
Try - Catch and Finally Syntax:
try {
Statements
}
catch(exception identifier){
Statements
}
finally {
Statements
}
JavaScript finally statement is optional If you specifies finally block, that will execute always.
finally statement use when you need to execute some code after the try block.
2. Hoisting in Javascript
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.
It allows us to call functions before even writing them in our code. JavaScript allocates memory for all variables and functions defined in the program before execution.
Variable Hoisting
Variable hoisting means the JavaScript engine moves the variable declarations to the top of the script. The following example declares the counter variable and sets its value to 1:
console.log(counter); // undefined
var counter = 1;However, the first line of code doesn’t cause an error because the JavaScript engine moves the variable declaration to the top of the script. Technically, the code looks like the following in the execution phase:
var counter;
console.log(counter); // undefined
counter = 1;Technically speaking, during the creation phase of the global execution context, the JavaScript engine places the variable counter in the memory and initializes its value to undefined.
Function Hoisting
Like variables, the JavaScript engine also hoists the function declarations. It moves the function declarations to the top of the script. For example:
let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
function add(a, b){
return a + b;
}In this example, we called the add() function before defining it. The above code is equivalent to the following:
function add(a, b){
return a + b;
}
let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
During the creation phase of the execution context, the JavaScript engine places the add() function declaration in the heap memory. To be precise, the JavaScript engine creates an object of the Function type and a function reference called add that refers to the function object.
3. Comments
The JavaScript comments are meaningful way to deliver message. It is used to add information about the code, warnings or suggestions so that end user can easily interpret the code.
The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser. There are mainly two advantages of JavaScript comments.
To make code easy to understand It can be used to elaborate the code so that end user can easily understand the code.
To avoid the unnecessary code It can also be used to avoid the code being executed. Sometimes, we add the code to perform some action. But after sometime, there may be need to disable the code. In such case, it is better to use comments.
There are Two Types of Comments
Single Line Comments
Multi-Line Comments
1. Single Line Comment: It is represented by double forward slashes (//). It can be used before and after the statement. Let’s see the example of single-line comment i.e. added before the statement.
<script>
// It is single line comment
....
</script> 2. Multi-Line Comment: It can be used to add single as well as multi line comments. So, it is more convenient. It is represented by forward slash with asterisk then asterisk with forward slash. For example:
/* your code here */ Or it can be used before, after and middle of the statement
<script>
/* It is multi line comment.
It will not be displayed */
....
</script> 4. Coding Style
Coding Style in Javascript help us to make the code easier and also ensure that any developer who looks at the code will know what should he expect from the entire application. Code Style also improves code readability and make code maintenance easier.
Code Style Covers:
Naming and declaration rules for variables and functions.
Rules for the use of white space, indentation, and comments.
Programming practices and principles
1. Variable Name
All names start with a letter
Example
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);2. Space Around operator
Always put spaces around operators ( = + - * /) and after commas
Example
let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];3. Code Indentation
Always use 2 spaces for indentation of code blocks
Example
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}4. Statement Rules
General rules for simple statements:
Always end a simple statement with a semicolon.
General rules for complex (compound) statements:
Put the opening bracket at the end of the first line.
Use one space before the opening bracket.
Put the closing bracket on a new line, without leading spaces.
Do not end a complex statement with a semicolon.
5. Object Rules
General rules for object definitions:
Place the opening bracket on the same line as the object name.
Use colon plus one space between each property and its value.
Use quotes around string values, not around numeric values.
Do not add a comma after the last property-value pair.
Place the closing bracket on a new line, without leading spaces.
Always end an object definition with a semicolon.
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};6. Line Length > 80
For readability, avoid lines longer than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.
Example
document.getElementById("demo").innerHTML =
"Hello Dolly.";7. Naming Conventions
Always use the same naming convention for all your code. For example:
Variable and function names written as camelCase
Global variables written in UPPERCASE (We don't, but it's quite common)
Constants (like PI) written in UPPERCASE
8. File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
9. Use Lower case File Names
Most web servers (Apache, Unix) are case sensitive about file names:
london.jpg cannot be accessed as London.jpg. Other web servers (Microsoft, IIS) are not case sensitive:
london.jpg can be accessed as London.jpg or london.jpg.
If you use a mix of upper and lower case, you have to be extremely consistent. If you move from a case insensitive, to a case sensitive server, even small errors can break your web site. To avoid these problems, always use lower case file names (if possible).
The Tech Platform