Essential JS coding terms and how to use them

1. JavaScript try/catch/finally Statement

 
try {
Lines of code
}
catch(err) {
Lines of code to check errors
}
finally {
Lines of code which must be executed after try and catch
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Error Handling</title>
</head>
<body>
<h3>Error Handling in JS</h3>
<p id=”errorMessage”></p>
<p id=”finally”></p>

<script type = “text/javascript”>
try
{
const result = Multiplication(10, 20); // Multiplication is not defined
}
catch(err){
document.getElementById(“error Message”).innerHTML = err;
}
finally{
document.getElementById(“finally”).innerHTML = “JS error check done!”;
}
</script>
</body>
</html>

2. JavaScript throw Statement

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Throw error JS</title>
</head>
<body>
<p id=”demo”></p>
<p id=”errorMessage”></p>
<p id=”finally”></p>
<script type=”text/javascript”>
const number1 = 5, number2 = 5;
const sum = “SUM”;
document.getElementById(“demo”).innerHTML = sum;
try {
if (sum !== 10) throw “Result is not correct!”;
}
catch (err) {
document.getElementById(“errorMessage”).innerHTML = err;
}
finally{
document.getElementById(“finally”).innerHTML = “JS throw error check done!”;
}
</script>
</body>
</html>

3. JS Commenting

// Add Comment
// Add two numbers
const number1 = 5;
const number2 = 10;
const sum = number1 + number2; // Sum is performed
/*
Add Comment Lines
Add Comment Lines
Add Comment Lines
*/
/*
const number1 = 5;
const number2 = 10;
const sum = number1 + number2;
*/
const number1, number2, sum;
number1 = 5;
number2 = 10;
sum = number1 + number2;

4. JavaScript Hoisting

<!DOCTYPE html>
<html>
<body><p id=”hoisting”></p>
<p id=”error”></p>
<script>
try {
const a = 10; // Initialize a
const b = 20; // Initialize b
display = document.getElementById(“hoisting”);
display.innerHTML = “a = “ + a + “ | b = “ + b;
}
catch(err){
document.getElementById(“error”).innerHTML = err;
}
</script>
</body></html>// Expected output: a = 10 | b = 20<!DOCTYPE html>
<html>
<body><p id=”hoisting”></p>
<p id=”error”></p>
<script>
try {
const a = 10; // Initialize a
display = document.getElementById(“hoisting”);
display.innerHTML = “a = “ + a + “ | b = “ + b;
const b = 20; // Initialize b
}
catch(err){
document.getElementById(“error”).innerHTML = err;
}
</script>
</body></html>// Expected output: ReferenceError: Cannot access ‘b’ before initialization

5. Block-Level Declarations

function getValue(condition) {if (condition) {
let value = “black”;
// existing codereturn value;
} else {
// value doesn’t exist herereturn null;
}
// value doesn’t exist here
}

6. Block Binding in Loops

for (var i = 0; i < 10; i++) {
process(items[i]);
}
// here i is still accessible
console.log(i); // 10
for (let i = 0; i < 10; i++) {
process(items[i]);
}
// here i is not accessible and an error occured here
console.log(i);

7. Functions with Default Parameter Values

function sum(a, b = 5) {
return a * b;
}
console.log(sum(5, 2));
// expected output: 15
console.log(sum(5));
// expected output: 10

8. The Spread Operator

const num1 = [1, 2, 3, 4, 5];
const num2 = [6, 7, 8, 9, 10];
const num = […num1, …num2];
console.log(num) // expected output 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

9. Arrow Function

const x=7, y=8;
let sum = function(p, q){
return p + q
};
console.log(sum(x,y));
const x=7, y=8;
let sum = (p, q) => {return p + q};
console.log(sum(x,y));

10. JS Coding Styles

let firstName = “John”;function multiplicationFunction(x, y) {
return x * y;
}
const z = x + y;
const arr = [“a”, “b”, “c”];
const sum = function(p, q){
return p + q
};
document.getElementById(“error”).innerHTML = 
“JavaScript, often abbreviated as JS.”
const x=7, y=8;let sum = (p, q) => {return p + q};console.log(sum(x,y));

References:

B.Sc. in Computer Science and Engineering. University of Barishal, Barishal.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store