Javascript Concepts that you should Learn in 2022

#html #css #javascript #webdev

Lexical Structure

lexical Structure is basically the building block on Javascript: Unicode, semicolons, white space, case sensitivity, comments, literals, identifiers, and reserved words. some of the very important topics one must know before starting with the other topics of JS.

Learning Link

Expressions

Expressions are units of code that can be evaluated and resolved to a value.
Learning Link

Types

String - represents a sequence of characters e.g. "hello"
Number - represents numeric values e.g. 100
Boolean - represents boolean value either false or true
Undefined - represents undefined value
Null - represents null i.e. no value at all

Variables

a variable stores the data value that can be changed later on.

let myVariable = 22; //this can be a string or number.

Functions

JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

var x = myFunction(4, 3);     // Function is called, return value will end up in x

function myFunction(a, b) {
    return a * b;             // Function returns the product of a and b
}

Object

an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

let object = {
  'key1': 'value1',
  'key2': 'value2',
  'keyn': 'valuen',
};
console.log(object);

Learning Link

Classes

Classes are similar to functions.They use class keyword instead of function keyword.
They use the constructor method to initialise.

class ClassMates{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    displayInfo(){
        return this.name + "is " + this.age + " years old!";
    }
}

let classmate = new ClassMates("Mike Will",15);
classmate.displayInfo();  // result: Mike Will is 15 years old!

Learning Link

Arrow functions

Arrow functions were introduced in ES6, they allow us to write shorter function syntax:

let myFunction = (a, b) => a * b;

Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Learning Link

Scopes

The scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
Learning Link

Arrays

Objects allow you to store keyed collections of values. That’s fine, But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element, and so on. For example, we need that to store a list of something: users, goods, HTML elements, etc.

let fruits = ["Apple", "Orange", "Plum"];

Learning Link

Template literals

Template Literals use back-ticks (``) rather than the quotes ("") to define a string:

` let text = `Hello World!`; `
Learning Link

Strict mode

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

Strict Mode

ECMAScript 6

ECMAScript 2015 was the second major revision to JavaScript, ECMAScript 2015 is also known as ES6 and ECMAScript 6.
Learning Link

HTTP Request

All modern browsers have a built-in XMLHttpRequest object to request data from a server, The XMLHttpRequest object is a developers dream because you can: