5 JavaScript Concepts That Every Web Developer Should Know!!!

==>     JavaScript 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. 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.

1) scope :

==> The scope is the current context of execution in which values and expressions are “visible” or can be referenced. If a variable or expression is not in the current scope, it will not be available for use. Scopes can also be layered in a hierarchy so that child scopes have access to parent scopes, but not vice versa.

JavaScript has the following kinds of scopes:

• Global Scope
• Local Scope

Global Scope :

var greeting='Welcome to blog';
(function(){
  console.log(greeting); //Output: Welcome to blog
})();

Local Scope:

(function(){
var greeting = 'Welcome to blog';
  console.log(greeting); //Output: Welcome to blog
})();
console.log(greeting); //Output:Reference-Error greeting not defined

2) Ternary Operator  :

==> Ternary Operator is a short, one-line conditional operator to replace if/else. It’s really useful when it comes to quickly checking a condition to render a component, updating the state, or displaying some text.

Let’s compare how the Ternary Operator works with the If/Else statement:

// Example of Ternary Operator
condition? 'True': 'False'


// Example of If/Else statement
if(condition) {
    'True'
}
else {
    'False'
}:

3) Destructuring :

==> Destructuring helps us unpack values from arrays and objects and assign them to separate variables in a simple and smooth way. Let’s understand it with some code:

// With Destructuring
const objects = ['table', 'iPhone', 'apple']
const [furniture, mobile, fruit] = objects

// Without Destructuring
const furniture = objects[0]
const mobile = objects[1]
const fruit = objects[2]

In the above example, Destructuring saved us 3 lines of code and made the code cleaner. Now let’s see another example of passing props in React with Destructuring:

// With Destructuring Ex-1
function Fruit({apple}) {
    return (
        <div>
            This is an {apple}
        </div>
    )
}

// With Destructuring Ex-2

function Fruit(props) {
    const {apple, iphone, car} = props
    return (
        <div>
            This is an {apple}
        </div>
    )
}

// Without Destructuring
function Fruit(props) {
    return (
        <div>
            This is an {props.apple}
        </div>
    )
}

Notice how you have to use props again and again when you don’t use Destructuring in your props.

4) The Spread operator :

==> The  Spread operator was introduced to JavaScript in ES6. It takes an iterable and expands it into individual elements.

==> A common use case of the spread operator is copying the values of an object into another object during a state update to merge the properties of both objects. Look at the below syntax:

const [person, setPerson] = useState({
    id: '',
    name: '',
    age: ''
});

 setPerson([
            ...person,
            {
                id:"1",
                name: "Steve",
                age:"25"
           }
 ]);

In the above example, […Person] copies all the values of the person object in the new state object which is then further replaced by other custom values with the same properties, which updates the state object.

5) The Fetch API :

The Fetch API allows us to make Async requests to web servers from the browser. It returns a promise every time a request is made which is then further used to retrieve the response to the request.

A basic fetch() takes one argument, the URL of the resource you want to fetch. It then returns another promise that resolves with a Response object. This Response object is the representation of the HTTP response.

So, to get the JSON content from this promise, you have to use the .json() method on the Response object. This at last will return a promise that resolves with the result of the parsed JSON data from the response body.

It might be a little confusing, so pay close attention to the example below:

fetch('http://example.com/books.json') // fetching the resource URL
  .then(response => response.json()); // calling .json() method on the promise
  .then(data => setState(data)); // updating the state with the JSON data

//============================== END =================================//