10 Important Topics of JavaScript That You Should Definitely Know
Are you learning javascript? If your answer is yes, then you must have to explore these 10 topics as a beginner. Let’s learn something new!
1.Values
There are 2 categories of javascript values. The Primitive values and then there are Object and Function. Primitive values are the unchangeable type of values. You can’t change these values by doing anything in your code. Null, Numbers, Undefined, Strings, Booleans, Symbols, BigInt are the primitive type values. These will remain the same. For example,
console.log(‘ I love javascript’); console.log(136);
These will always give the same output. Your code will not affect these.Then there is Object and Function. You can modify these by modifying your code.
2.typeof()
typeof() operator is used to check the type of our values. It will return the type of the given values such as ‘Number’, ‘String’, ‘Object’ etc. In javascript, typeof array, object, date will return ‘Object’ as the output. The typeof undefined will return ‘Undefined’. Have a look at this example,
console.log(typeof(125));console.log(typeof([]));console.log(typeof({}));console.log(typeof(new Date()));console.log(typeof(‘hello’));console.log(typeof(undefined));
The output of these following code is ‘Number’, ‘Object’, ‘Object’, ‘Object’, ‘String’, ‘Undefined’.
3.Expression
JavaScript expression is a snippet of code or statement that will evaluate to a single value. In easy words, the expression is those kinds of questions that javascript will answer. We can put an expression when a statement is needed in javascript. The output value can be a number, string, or logical value.
‘This’ + ‘is’ + ‘a’ + ‘expression”; 150 + 130 ;
These 2 lines are examples of expression. Because both lines evaluate to a single value.
4. Error handling with “try…catch”
No matter how expert you are in javascript, you will surely make mistake. You will surely face error problems in your code. Sometimes you don’t understand what happens to your code! Then there comes the ‘try…catch’ syntax to handle errors.
In this syntax, there are 2 blocks, the try blocks where you run your code to test and the catch block which catches the error and display it. You run your code in the try block. If there is no error found, the execution will ignore the catch block. But if an error found, immediately the try block will be stopped to execute the rest of the code, and then the catch block will initiate. The error object containing the error name, message, and the stack will be passed to the catch block. The catch block will display it. Let’s have a look at this code,
try { show(“We are looking for errors!!”);alert(‘hello world’);}
catch(err) { console.log(err.message);}
This code will return ‘show is not defined’ as an error message in the browser console. Because show() is not defined in the code. Testing it in try block will get an error and then alert() will not be executed, rather the catch block will execute with the error message and show the message in the console.
5.Comments
Commenting on code is a sign of a good developer. comments can be single-line starting with ‘//’ and multiline: ‘/* */’. But there is some good practice of commenting. If the comment is too big it is a bad practice. You should not write a big explanatory comment in your code. This will make it hard to read your code. Your comment should be short and should properly express what you are trying to indicate. For example,
for (let i = 2 ; i < 100 ; i++) {// check if i is even number if (i % 2== 0) { return ‘even’; } else{ return ‘odd’; }}
In this code, this short comment indicates that we are checking if i is an even or odd number. Never make your comment too large.
Comment this:
1.provide an overview of the code snippet.
2. Function usage.
3. The control flow in various situations
Never do:
Large explanatory comments like ‘how your code works’, ‘what it does’, ‘any kind of definition about the function or code’.
6.Hoisting
In javascript, a variable can be used before it has been declared. Hoisting means moving the declaration to the top of the scope. JavaScript only hoists declarations, not initializations. If you use a variable and then you declare and initialize the variable, javascript will only move the declaration to the top of the scope. But the initialization will remain in the same place. so the variable will return undefined because the initialization is not hoisted. But remember, only the variable that is declared with var keyword will be hoisted. Declaration using let and const will not be hoisted.
console.log(number); var number;number = 150;
This returns undefined. Because it is not initialized. In javascript, if a variable is not initialized, it will return undefined. Means doesn’t have value. On the other hand, if the variable is not declared but initialize, it will return ‘Reference error’.
console.log(number); number = 150;
This will throw ‘Reference error’. Because there is no declaration and the initialization is not hoisted at the top of the scope.
7.Function Default Parameters
In javascript, default function parameters allowed you to initialize function parameters with a default value. This value will be used when you don’t pass an argument or value to the function. If you don’t initialize function parameters with default values, the function parameters will return undefined. That means no value is assigned or passed. Have look at this code snippet,
function say(greetings) { console.log(greetings);}function sayHello(greetings = 'Good Morning') { console.log(greetings);}say();
sayHello();
In the first case, we didn’t pass the argument. So when we call the say() function, it will return “Undefined” as it doesn’t have a default value. But in the second case, sayHello() function will return “Good Morning”. Because it was initialized with a default value.
8.Spread Operator
Javascript ES6 introduced the spread operator. Spread operator allows an iterable to expand in places where zero or more values are expected. In easy words, spread operator is used to unpack an iterable such as array and object. The spread operator syntax is (…) three-dot. Let’s see an example,
const array1 = [1, 2, 3, 4];const array2 = [5 ,6, 7, 8, 9, ...array1];console.log(array2)
It will return [5, 6, 7, 8, 9, 1, 2, 3, 4]. Here, spread operator is used to unpack array1 inside array2. The same can be applied to an object.
9.Arrow Function
Arrow function was introduced in ES6. It is another simple and concise syntax for creating functions in javascript. In the arrow function, we don’t need to use the function keyword and an arrow is used before the curly braces. The parameters are passed inside the parenthesis. And if you have only one parameter, you can skip the parentheses. However, if you use more than one statement in the function block, you need to use curly braces and have to specify the return keyword. You can skip the curly braces and return keyword if the function has only one statement. Let’s see how an arrow function is written,
const add = (num1, num2) => num1 + num2;const result = add(2, 3);console.log(result);const checkEven = num => { if(num % 2 === 0) { console.log("even"); } else{ console.log("odd"); }}
Here, the add() function has a single statement. So, curly braces and return in omitted. In the second function, checkEven() has a single parameter and so parentheses are not used.
10. Event Loop
We know that javascript is a single-threaded, asynchronous, non-blocking programming language. But in the javascript function, the statements run synchronously. That means if we call an API, the function will stop executing the next statement until the API request is resolved. Here comes the event loop secret. This is the thing that makes the javascript asynchronous, non-blocking language. When an API is called inside the javascript v8 engine, it moves to the browser web API section from the call stack of the javascript engine. There it waits and then resolves the promise. Till then the call stack of javascript is not blocked. Javascript executes the rest statement. But it doesn’t return anything because there is API request that isn’t resolved yet. When the API request is resolved, it is moved to the callback queue of the browser. This is where the event loop is triggered. The event loop looks inside the javascript call stack and if the call stack is empty then event loop will move the first resolved request of the callback queue to the call stack. Then it executes and pops out from the call stack. This is how the event loop makes javascript asynchronous and non-blocking.
