Scope
Scope means variable access. What variable do I have access to when a code is running? In JavaScript by default, you’re always in the root scope i.e. the window scope. The scope is simply a box with a boundary for variables, functions, and objects. These boundaries put restrictions on variables and determine whether you have access to the variable or not. It limits the visibility or availability of a variable to the other parts of the code. You must have a clear understanding of this concept because it helps you to separate logic in your code and also improves readability. A scope can be defined in three ways –
- Local Scope: Variables declared within a function are accessible only within that function’s scope. This encapsulation prevents conflicts and unintended modifications from other parts of the code.
- Global Scope: Variables declared outside of any function or block are in the global scope, accessible from anywhere within the program. However, relying too heavily on global variables can lead to code that’s harder to maintain and debug.
- Block Scope: Introduced with the ‘let’ and ‘const’ keywords, block scope confines variables to the nearest enclosing pair of curly braces ‘{}’. This enhances code predictability and reduces the risk of variable hoisting, a behavior associated with the var keyword.
More about block scope
Example: The code given below will give you an error because “name” is defined within the boundary (local scope) of the showName() function. You can not have access to this variable outside the function.
NOTE: The code below shows an error due to a typo in the function call, causing an error before the intended scoping error is raised by the console.log call.
function showName() {
let name = "w3wiki";
}
showName();
console.log(name);
Output:
Uncaught ReferenceError: name is not defined
Example: Now, take a look at the code given below and see how you can access the variable “name” defined in the local scope.
function showName(){
let name = "w3wiki";
console.log(name);
}
showName();
Output:
w3wiki
Example: Here we will use block scope.
function fun() {
let a = 10;
console.log(a);
}
console.log(a);
Output:
Uncaught ReferenceError: a is not defined at <anonymous>:5:17
7 JavaScript Concepts That Every Web Developer Should Know
JavaScript is Everywhere. Millions of web pages are built on JavaScript and it’s not going anywhere at least for now. On one side HTML and CSS give styling to the web pages but on the other side, it’s the magic of JavaScript that makes your web page alive. Today this language is not just limited to your web browser. You can also use it for server-side applications. Isn’t it cool to use a single language for both client-side and server-side applications? A single language fulfills both of the purposes and this is the main reason TONs of job postings are there for JavaScript developers in the tech industry.
According to the Stack Overflow Developer Survey 2019, JavaScript is the #1 programming language. The language is widely used by 95% of all websites Whether it’s a small startup or a big company, most of them are working on some kind of website or an app that requires a good knowledge of this language. A lot of frameworks and libraries are there for JavaScript. These frameworks and libraries can be easily learned if your JavaScript fundamentals are clear. A lot of concepts are confusing and overwhelming for developers but a good knowledge of these concepts will help you in the long run. Frameworks and libraries come and go but the fundamentals always remain the same. It’s easy to build any kind of application and learn any framework and libraries if the fundamentals are clear. Also, it will help you in interviews as well. Let’s discuss some of the basic concepts of JavaScript which are important to learn for any JavaScript developer. Become a good front-end developer with w3wiki JavaScript Foundation – Self-Paced and learn all the aspects of web development with ease.
These are the 7 concepts:
Table of Content
- Scope
- IIFE (Immediately Invoked Function Expression)
- Hoisting
- Closures
- Callbacks
- Promises
- Async & Await