Modern JavaScript Concepts and Fundamentals For Beginners

Don Aguinaldo

11/2/2023

JavaScript has come a long way since its inception. With the evolution of the language and the ecosystem, several modern concepts have emerged that every beginner should be familiar with. In this post, we'll delve into these concepts to give you a solid foundation in modern JavaScript.

Introduction to JavaScript

JavaScript is a versatile, object-oriented scripting language primarily used for web development. It allows developers to create dynamic and interactive web pages. Over the years, it has evolved to include features that cater to both client-side and server-side development.

Variables and Constants

In JavaScript, you can store data in variables. With the introduction of ES6 (ECMAScript 2015), two new ways to declare variables were introduced:

• let: Allows you to declare block-level variables.
• const: Allows you to declare variables whose values cannot be reassigned.

let name = "John";
const age = 30;

One thing to note is that var is still usuable in your application, but it's preferred to use the above methods to limit the scope of the variables. This prevents any unwanted rewriting of variables that could potentially break your app.

Data Types

JavaScript has dynamic typing, which means a variable can hold any type of value. The fundamental data types are:

• Primitive Types:
  • String: Represents textual data.
  • Number: Represents numeric values.
  • Boolean: Represents true or false.
  • undefined: Represents a variable that has not been assigned a value.
  • null: Represents a null value.
  • Symbol: Represents a unique value.
• Reference Types:
  • Object: Used to store collections of data.
  • Array: Used to store ordered collections.
  • Function: Represents a block of code.

Functions

Functions are blocks of code designed to perform a specific task. They can be:

• Regular Functions:

  function greet() {
    console.log("Hello, World!");
  }
  

• Arrow Functions (Introduced in ES6):

  const greet = () => {
    console.log("Hello, World!");
  }
  

They're like little factories that churn out whatever you ask it for depending on its task.

Object-Oriented Programming

JavaScript supports object-oriented programming (OOP) with the introduction of classes in ES6:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person("John", 30);
john.greet();

You're likely already familiar with this concept as it's one of the most talked about in recent times. Thankfully, JavaScript has support for this paradigm. Use this when you can to create an easy to maintain application.

Asynchronous Programming

Modern JavaScript introduces concepts like Promises and async/await to handle asynchronous operations:

• Promises: Represents a value that might be available now, in the future, or never.

  const promise = new Promise((resolve, reject) => {
    // Some asynchronous operation
  });
  

• Async/Await: A syntactic sugar over promises, making asynchronous code look synchronous.

  async function fetchData() {
    const data = await someAsyncFunction();
    console.log(data);
  }
  

A lot of data fetching and third-party scripts can cause significant slow downs, and with JavaScript not having a built-in way to handle multi-threading you're going to want to leverage the power of Promises to speed up your apps.

Modules and Imports

With ES6, you can split your code into modules and import them wherever needed:

// math.js
export const add = (a, b) => a + b;

// app.js
import { add } from './math.js';
console.log(add(2, 3));  // Outputs: 5

Separation of concerns is a very important concept that will help you in the long-run. Always consider modularity in your apps and thankfully with ES6 and later, we get that out-of-the-box. If you use frameworks like Nuxt that does it for you under the hood, then you wouldn't even have to type out those imports!

Final Thoughts

JavaScript has been an adventure throughout the years and newer features are always getting added every year. Modern JavaScript offers a plethora of features that make development efficient and enjoyable compared to years prior.

So as a beginner, understanding these concepts will provide a strong foundation for diving deeper into the world of JavaScript and avoid having to slam your head against the wall for every bug you encounter.