Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way
Tags: javascript, webdev, programming
Published: 2022-03-04 08:37:37

**Introduction**
JavaScript is a scripting language you can use to make web pages interactive. To write javascript code you need a code editor.

**Code Editor For JavaScript**
A code editor is a text editor also designed to help you write code. A code editor is one of the essential tools for programmers designed to edit the source code of computer programs. For javascript I recommend using Visual studio code.[Download visual studio](https://code.visualstudio.com/download)

JavaScript can be written in two ways in your HMTL code: 
**Internal Javascript**
A JavaScript function is placed in the `<body>` section of an HTML page
```
<html>
<body>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
```
**External Javascript**
Scripts can also be placed in external files. External file: myScript.js
`function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
`
External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension `.js`. To use an external script, put the name of the script file in the src(source) attribute of a `<script>` tag:
`<script src="myScript.js"></script>`

**Modern Javascript concepts**
Some of the javascript concepts that this article will cover include:
1. Variables
2. Objects
3. Promises
4. Classes

**Variables**
To declare a variable in JavaScript, there are three keywords available, each with its own set of peculiarities. _var, let,_ and _const_ are the three variables.

`console.log(myNum); // `undefined`
var myNum = 5;
`
`function myFunc() {
    let myFunc = 'Mary';
`
`const person = {
  name: 'Mary'
};
`
**Objects**
In JavaScript, an object is a standalone entity, with properties and type. They include: string, number, boolean, null and undefined. For example a user object can have the following properties: username, email and gender.
You can define a property of an object by assigning it a value. To demonstrate this, here’s a sample object `myDog`
`const myDog = {
“name”: “Joe”,
“legs”: 4,
“tails”: 1,
“friends”:[“everyone”]
};
`
**Promises**
In JavaScript, promises are the most prevalent approach to handle asynchronous tasks. A promise established in JavaScript is primarily built on the idea that when the time comes, it will either be resolved or rejected. A promise exists in the following three states:

1. Fulfilled - the promised task was completed successfully.
2. Rejected - the promised task was not completed or is unsuccessful.
3. Pending - the promised task has neither been fulfilled nor rejected.
Example:

```
function work() {
    return true;
}
const myPromise = new Promise((resolve, reject) => {
    let isopen = work();

    if(isopen === true) {
        resolve('Shop is open!')
    }
    else {
        reject('Shop is closed now!')
    }
});

myPromise.then((order) => {
    console.log(order);
}).catch((order) => {
    console.log(order);
});
```
**Classes**
ECMAScript 2015, also known as ES6, introduced JavaScript Classes. A JavaScript class is just a template for constructing objects.
Example
`class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
`
When you have a class, you can use the class to create objects. The example below uses the Car class to create two Car objects.
`let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
`
**Conclusion**
That brings me to the end of my article; I hope it explains modern javascript in a way that you have understood. Happy Coding.