A basic Introduction to Javascript

JavaScript was introduced in 1995 to add programs to web pages in the Netscape Navigator browser. The language has since been adopted by all other major graphical web browsers. It has made modern web applications possible, with which you can interact directly without doing a page reload for every action. JavaScript is also used in more traditional websites to provide various forms of interactivity and cleverness.

What is Javascript

Javascript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., habing complex animations, clickable buttons etc). There are also more advanced server-side versions of javascript such as Node js, which allows you to add more functionality to a website than downloading files.

JavaScript is one of the most popular languages which includes numerous features when it comes to web development. It’s amongst the top programming languages as per Github and we must know the features of JavaScript properly to understand what it is capable of.

Features of Javascript

1.Light Weight Scripting language

2.Dynamic Typing

3.Object-oriented programming support

4.Functional Style

5.Platform Independent

6.Prototype-based

Let’s see all these features in detail so you can understand them starting from the first to the last

1. Light Weight Scripting Language

JavaScript is a lightweight scripting language because it is made for data handling in the browser only. Since it is not a general-purpose language it has a limited set of libraries. Also as it is only meant for client-side execution and that too for web applications, hence the lightweight nature of JavaScript is a great feature.

2. Dynamic Typing

JavaScript supports dynamic typing which means types of the variable are defined based on the stored value. For example, if you declare a variable x then you can store either a string or a Number type value or an array or an object. This is known as dynamic typing.

3. Object-Oriented Programming Support

Starting from ES6, the concept of class and OOPs has been more refined. Also, in JavaScript, two important principles with OOP in JavaScript are Object Creation patterns (Encapsulation) and Code Reuse patterns (Inheritance). Although JavaScript developers rarely use this feature but is there for everyone to explore.

3. Functional Style

This implies that JavaScript uses a functional approach, even objects are created from the constructor functions and each constructor function represents a unique object-type. Also, functions in JavaScript can be used as objects and can be passed to other functions too.

4. Platform Independent

This implies that JavaScript is platform-independent or we can say it is portable; which simply means that you can simply write the script once and run it anywhere and anytime. In general, you can write your JavaScript applications and run them on any platform or any browser without affecting the output of the Script.

5. Prototype-based Language

JavaScript is a prototype-based scripting Language. This means JavaScript uses prototypes instead of classes or inheritance. In languages like Java, we create a class and then we create objects for those classes. But in JavaScript, we define an object prototype and then more objects can be created using this object prototype.

7. Interpreted Language

JavaScript is an interpreted language which means the script written inside javascript is processed line by line. These Scripts are interpreted by JavaScript interpreter which is a built-in component of the Web browser. But these days many JavaScript engines in browsers like the V8 engine in Chrome use just-in-time compilation for JavaScript code.

8. Async Processing

JavaScript supports Promise which enables asynchronous requests wherein a request is initiated and JavaScript doesn’t have to wait for the response, which at times blocks the request processing. Also starting from ES8, Async functions are also supported in JavaScript, these functions don’t execute one by one, rather they are processed parallelly which has a positive effect on the processing time, reducing it to a great extent.

It is worth noting the core differences between Java and JavaScript.

Javascript and Java are similar in some ways but fundamentally different in some others.

Javascript is a free-form language compared to Java. You do not have to declare all variables, classes, and methods. Yo do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces while Java is a class-based programming language designed for fast execution and type safety meaning that you can’t cast a java integer into an object reference or access private memory by corrupting the java bytecode.

ES6 Features in Javascript with Examples

Es6(ECMAScript 2015) is a major update to javascript that includes a whole lot of new features with a focus on simplicity and readability.7

Let’s find out about these new features and when and how to use it

1. The let and const keyword
Before the introduction of Es6, the var keyword was the only way to declare variables in JavaScript. With the const keyword, you can declare a variable as a constant and as a constant, it will be read-only.

Copy code
// Using let
let age = 25; 
console.log(age); // Output: 25

age = 26; 
console.log(age); // Output: 26

// Using const
const birthYear = 1998; 
console.log(birthYear); // Output: 1998

2. Arrow function

Here we use => instead of the function keyword. The arrow function makes our code more readable, clean and shorter.

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function equivalent
const add = (a, b) => a + b;

// Usage
console.log(add(3, 5)); // Output: 8

3. Objects

Objects are simply collections of properties which are made up of key, value pairs.

// Define an object to represent a person
const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    job: "Software Engineer",
    hobbies: ["Reading", "Coding", "Hiking"],
};

4. Classes

The class keyword is used to formalize the pattern of simulating class-like inheritance hierarchies using functions and prototypes.

// Define a class called "Person"
class Person {
  // Constructor method to initialize an object
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

5. Promises

This simply makes asynchronous calls easy and effortless.

// Function that returns a promise
function fetchData() {
  return new Promise((resolve, reject) => {
    const success = true; // Simulate a successful operation

    setTimeout(() => {
      if (success) {
        resolve("Data fetched successfully!");
      } else {
        reject("Error fetching data.");
      }
    }, 2000); // Simulate an async operation with a 2-second delay
  });
}

6. Template Literals

Template literals simply means having variables in a string.

// Variables
const name = "Alice";
const age = 30;
const job = "developer";
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyije2al75w3el97yrvv.png)

// Using Template Literals
const introduction = `Hello, my name is ${name}. I am ${age} years old, and I work as a ${job}.`;

console.log(introduction);

Thanks for reading, and always know that I’m rooting for you!!!!

The above is the detailed content of A basic Introduction to Javascript. For more information, please follow other related articles on the PHP Chinese website!