10 Javascript Concepts I Wish I Knew Way Earlier
# Stuff I wish I learnt earlier as a beginner
JavaScript is a popular compiled and interpreted programming language for web development. This supports both client-side and server-side development. The JavaScript website scripting language is another name for this.
Almost all modern websites and web applications use JavaScript in one way or another. other. That’s why many believe it’s the future. JavaScript is mainly used. It manages all client applications, critical servers, IoT, machine learning models and more.
According to StackOverflow, the JavaScript programming language is the first place. 67.7% of the 57,378 respondents across all sites use this language. Whether it’s a small startup or a large company, most work on a website or application that requires knowledge of this language.
Learn more about JavaScript, you will find important JavaScript concepts with examples that every programmer should know.
Read More: Most Query Search On Google About Javascript
Top 10 JavaScript concepts
1. Scope
Scope means flexible access. Javascript always places it in the window area or root area. For variables, functions, and objects, scope is simply a field with a limit.
Variables are limited by these limits, which also control your access to the variable. Restricts the visibility or accessibility of a variable to other lines of code. This concept, which makes it easier to separate the logic of the code and read it, is something you should fully understand. There are three ways to define a scope in W3Schools:
- Block scope: Local scope also has a subtype called block scope. The scope of the variable enclosed in curly braces is called the block scope.
- Local scope: No other function, not even the main file function, can access this variable.
- Global scope: A variable has global scope if it can be accessed from any function or conditional state of the program.
2. IIFE (Immediately Invoked Function Expression)
An IIFE (Immediately Invoked Function Expression) is a function that is declared and executed immediately.
The the global scope is not contaminated because the outside world cannot access the variables declared in the IIFE. Therefore, the main advantage of using IIFE is that the code can be executed immediately and data protection is guaranteed.
3. Hoisting
Hoisting is the process of moving variable and function declarations to the top of their scope before code execution.
// Example 1: Hoisting with variable declaration
console.log(myVar); // undefined
var myVar = 10;
console.log(myVar); // 10
// Example 2: Hoisting with function declaration
sayHello(); // "Hello, world!"
function sayHello() {
console.log("Hello, world!");
}
// Example 3: Hoisting with function expression
sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
console.log("Hi!");
};This will not be the case. case Checks for an “uncaught reference error” in Javascript when calling a function before it is defined. The cause is pruning, where the Javascript interpreter always moves variables and function declarations to the top of the current scope (function scope or global scope). Probing occurs before code execution.
4. Closures
Closures result from nullification because all function declarations are placed at the top of their scope.
function outerFunction() {
const outerVariable = "I'm in the outer function";
function innerFunction() {
console.log(outerVariable); // Access outerVariable from the outer function
}
// Return the inner function, which forms a closure over outerVariable
return innerFunction;
}
// Create a closure by calling outerFunction and storing the returned inner function
const closure = outerFunction();
// Call the closure, which still has access to the outerVariable
closure(); // Output: "I'm in the outer function"A closure is just a function. it is nested inside another function and has access to the outer function’s variables. While this definition seems simple enough, the real magic is in the scope.
The inner function closure has access to the global variables as well as those defined there. Range in brackets.
5. Callback
A function that takes an argument from somewhere else and is then called by this external function is called a callback function.
A callback in JavaScript is simply a function that is called or executed within another function after being supplied as a parameter.
Here is a function You have to wait for another function to execute or return a value. This creates the chain of functions when to manage this chain of functions, because they allow us to represent an asynchronous operation as a normal synchronous function.
6. Promises
// Example using a promise to simulate an asynchronous operation (setTimeout)
const myPromise = new Promise((resolve, reject) => {
// Simulating an asynchronous operation
setTimeout(() => {
const randomNumber = Math.random();
if (randomNumber > 0.5) {
resolve(randomNumber); // Resolve the promise with a value
} else {
reject(new Error('Random number is too low')); // Reject the promise with an error
}
}, 1000); // Delay of 1 second
});
// Consuming the promise using then() and catch() methods
myPromise
.then((value) => {
console.log('Resolved:', value); // Output: Resolved: [randomNumber]
})
.catch((error) => {
console.error('Rejected:', error.message); // Output: Rejected: Random number is too low
});A promise is a object that has the potential to produce a unique value in the future, a resolved value, or an explanation of why it was not resolved (rejected). According to Mozilla.org, this is a return object that has callbacks associated with it, not passed to a function.
Imagine a function called createAudioFileAsync() Previously in response to a configuration record and two callback functions. One of them is called when the audio file is created successfully and the other in case of failure: creates an audio file asynchronously.
7 . Async & Await
Now that Async & Await has been developed, you can create asynchronous code that appears and works synchronously. This allows you to handle asynchronous operations in JavaScript in several ways.
8. The Fetch API
The Fetch API is one of the most popular methods for performing asynchronous operations in JavaScript because it provides a unified interface for network requests.
Thanks to the Fetch API we can send asynchronous requests to web servers from the browser. Each time a request is made a promise is returned, which can then be used to obtain the response to the request. The URL of the resource you want to retrieve is the only argument to a basic fetch() function.
Another promise is then returned and converted to a dissolved response object. According to freeCodeCamp, the HTTP response is represented by this response object.
9. ES Modules and Import/Export
In ES6, modules were added to JavaScript. Each file acts as an independent module. You can import data from one file to another, including objects, variables, arrays, functions, and more.
Modules Import and export are terms for this. To create separate files for components in React, we use ES6 modules. Each component is imported into the file it is rendered into after exporting its module, according to freeCodeCamp.
10. Destructuring
// Destructuring an array
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]
// Destructuring an object
const person = {
name: 'John',
age: 30,
country: 'USA'
};
const { name, age, country } = person;
console.log(name); // Output: John
console.log(age); // Output: 30
console.log(country); // Output: USADestructuring is a term that describes the process of dividing a painting or object into smaller parts. It allows us to easily and smoothly extract values from objects and arrays and assign them to different variables. Destructuring made the code cleaner and we were able to save three lines of code.
Conclusion
JavaScript is used in one way or in the other by almost all users. Modern websites and web applications. That’s why many say it’s the future. Many people use JavaScript. Your client applications, mission-critical servers, IoT, machine learning models and more run on it.
