Atahar Ali Khan
6 min readMay 6, 2021
Core JavaScript Concepts by Athar Tasdiq
Core JavaScript Concepts by Athar Tasdiq

JavaScript is a high-level programming language. For mastering this language, you need to acquire some core concepts and fundamental concepts of JavaScript. I have tried to give some useful information about that.

Types of Values :

There are 9 types of values in JavaScript in two different categories. First category is the primitive category where we can get 7 types of values which are :- Undefined, Null, Booleans, Numbers, Strings, Symbols, BigInts. And the other category is Objects and Functions where we get two types of values which are Object and Function.

Undefined: It is a type where we find unintentionally missing values.

Null: It is a type where we find intentionally missing values.

Boolean: It is a type which is used for logical operations.

Number: It is a type which contains the numbers. Mostly used for maths.

String: It is a type which contains characters. Mostly used for texts.

Symbol: It is a type of unique value. Mostly used to add unique property keys to an object that won’t collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object.

BigInts: It is a type for big maths or numbers.

Object: It is a special type of value which i can manipulate from my code. It is used in object.

Function: It is a special type of value which also can be manipulated from my code and it is for functions.

What is Event Loop?

Event Loop is a loop which passes the requested data from Web API to Call Back Queue into Call Stack. Now what is the Call Stack? Well, Call Stack is a stack which is used for the running of JavaScript functions. We know that in JavaScript asynchronous call backs we use setTimeout() function. Now this setTimeout() function sends the call back function after the set time in the web api and executes the program. Whenever the API fetches the data then it sends the data in the Task Queue. Here comes the event loop. Event loop searches if the program is being executed or not, if it is executed then it sends the data from Task Queue to Call Stack.

Example:

(function() {

console.log('Start');

setTimeout(function CB() {
console.log('First Callback: Message from call back');
});

console.log('Message');

setTimeout(function CB2() {
console.log('Second Callback: Message from call back');
}, 0);

console.log('The end');

})();

What is Try...Catch?

Try…Catch is a error handling syntax construct to handle errors. We are all humans and thus we do mistakes and also we find errors. But that doesn’t mean that we cannot handle those errors. Sometimes our functions cannot fetch data from server because of some network connection errors. But it will be very bad if we just let it be. And the here comes the Try…Catch that allows us to “catch” errors so the script can, instead of dying, do something more reasonable.

try {   
{{{{{{{{{{{{ //it is not a code so it will be an error
}
catch (err)
{
alert("An error occurred");
}

Coding Style:

If you are new to programming then you are mostly welcome. To become a professional programmer, you need to have some necessary knowledge about how to code neat and clean. Because if you re-visit your previous code and cannot understand about what you did before then it will be a shame. It is like an art of programming. Make your code readable and understandable to others.

Usage of Curly Braces {} :
if (condition) { /*space after if and the condition and then
// do this first curly brace */
// then this
// and then this
}
How to make a readable string :
let string = `A paragraph is a series of related sentence developing
a central idea, called the topic. Try to think about
paragraphs. //Edit the string lines
`;
How to write function with cleanliness :
function pow(x, n) {
let result = 1;
// <--
for (let i = 0; i < n; i++) {
result *= x;
}
// <--
return result;
}

What is Comment? Why do we need this?

Commenting is a very good thing in coding. It allows others to understand what you implemented in your code or how does your code runs. Even this comment can save you too! Suppose you have built a program few months ago and suddenly you needed to check that program again and you cannot understand which part of your code belongs to whom. It will be a disaster. So commenting can also be helpful for us in code. There are two types of comment in JavaScript :- Single Line Comment and Multi-Line Comment.

// This code will use for showing Prime Numbers    //Comment
function showPrimes(n) {
nextPrime:
for (let i = 2; i < n; i++) {
// check if i is a prime number
for (let j = 2; j < i; j++) {
if (i % j == 0) continue nextPrime;
}
alert(i);
}
}

Client Caching & Server Caching

Client-side caching duplicates the data of previously requested files directly within browser applications or other clients (such as intermediate network caches). Client cache is the most efficient type of caching, because it allows browsers to access files without communicating with the web server. The system controls client caching by modifying the HTTP headers of file request responses.

Where a server cache is a type of cache that’s related to site caching, except instead of temporarily saving content on the client side, it’s stored on a site’s server. Server caching is also fully handled and mistered on the server without any involvement of the end user, or a browser.

What is Cross Browser Testing? Why do we need it?

Cross Browser Testing is the practice of making your website compatible in each of the browsers. Cross browser compatibility is important. Very important.

There are many different reasons why cross browser issues occur. Many times some website behave different across different browsers / devices / browsing preferences which is not acceptable at all. So to fix this issue we need to focus on each and every browser or at least those browsers that are pretty much famous (Chrome, Firefox, Microsoft Edge, Opera etc.). We have to fix each issues that occurs. Easiest way of compatibility in each browser is to keep simple layout of the website.

What is Hoisting?

In JavaScript ES6 you can use 3 type of variable declaration. And those are Var, Let and Const. In other languages there are restrictions that you have to write functions before calling it but in JavaScript there is no limitations that you need to write function before calling it. But there is a term which is ‘Hoisting’.

When you are using Var to declare a variable but before initialization you have called the variable then it will show ‘Undefined’ which is called Hoisting. It is not effected with ES6’s Let and Const.

x = 1;                      // Initializing x
console.log(x + " " + y);
var y = 2; // Declare and Initialize y
Output: '1 undefined' // Hoisting

Why use Let instead of Var?

Introduced in ES6, the variable type let shares a lot of similarities with var but unlike var has scope constraints. let is constrained to whichever scope it is declared in. Its declaration and assignment are similar to var. let was introduced to mitigate issues posed by variables scope which developers face during development.

let x, y, z;
let x = 50, y = 20, z = 3;

What is the difference between Let and Const ?

const is almost exactly the same as let. However, the only difference is that once you’ve assigned a value to a variable using const, you can’t reassign it to a new value.

let x = 10;
console.log(x); //Output: 10
let x = 20;
console.log(x); //Output: 20
const y = 10;
console.log(y); //Output: 10
const y= 20; //Error
console.log(y); //Not Working
Atahar Ali Khan
Atahar Ali Khan

Written by Atahar Ali Khan

I am Atahar Ali Khan. Student at Eastern University and also MERN stack developer. I have also bunch of knowledge of JavaScript.

Responses (1)