DEV Community

Cover image for Javascript Concepts that you should Learn in 2022
Ansub Khan
Ansub Khan

Posted on

Javascript Concepts that you should Learn in 2022

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.
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

Learning Link

Arrow functions

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

let myFunction = (a, b) => a * b;
Enter fullscreen mode Exit fullscreen mode

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"];

Enter fullscreen mode Exit fullscreen mode

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:

  • 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

Top comments (5)

Collapse
 
karmablackshaw profile image
KarmaBlackshaw

i agree with you. It's misleading.

Collapse
 
thumbone profile image
Bernd Wechner • Edited

The definitions of object and class tabled here concern me. They seem to me, rather incomplete and misleading

Collapse
 
jhonis profile image
jonatan de oliveira • Edited

Thank you for shere this content

Collapse
 
aidanspeakss profile image
Aidan Raney

You should update the article to recommend learning the Fetch API instead of the XMLHttpRequest object, as that method is outdated.

Collapse
 
ansub profile image
Ansub Khan

ok, i will be updating that, thanks for your advice 😊

Some comments have been hidden by the post's author - find out more