Javascript Concepts that you should Learn in 2022
Tags: html, css, javascript, webdev
Published: 2022-01-15 07:16:33

### 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
](https://flaviocopes.com/javascript-lexical-structure/) 

### Expressions
Expressions are units of code that can be evaluated and resolved to a value.
 [Learning Link](https://flaviocopes.com/javascript-expressions/) 

### 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](https://www.javatpoint.com/javascript-objects) 


### 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](https://www.javatpoint.com/javascript-objects) 

### 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](https://www.w3schools.com/js/js_loop_for.asp) 


### 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](https://www.digitalocean.com/community/tutorials/understanding-scope-in-javascript)

### 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](https://javascript.info/array)


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

```
let text = `Hello World!`;
``` 
[Learning Link](https://www.w3schools.com/js/js_string_templates.asp)

### 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](https://javascript.info/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](https://www.w3schools.com/js/js_es6.asp)


### 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:

* Update a web page without reloading the page
* Request data from a server - after the page has loaded
* Receive data from a server  - after the page has loaded
* Send data to a server - in the background


[Learning Link](https://www.w3schools.com/xml/xml_http.asp)