Modern JavaScript

Functions

Regular Function

It is called function declaration

function myFunction() {
  console.log("Hello, world!");
}

Function Expressions

In javascript, function can be considered value.

const myFunction = function () {
  console.log("Hello, world!");
};

There are various formatting functions.

const myObject = {
  printHello: function () {
    console.log("Hello, world!");
  },
};

myBtn.addEventListener("click", function () {
  console.log("button is clicked");
});

function myFunction() {
  return function () {
    console.log("Hello, world!");
  };
}

Arguments Object

In javaScript functions, there is ‘arguments’ which is a local variable available within all functions.

function printArguments() {
  for (const arg of arguments) {
    console.log(arg);
  }
  console.log(arguments.length);
}
printArguments("a", "b", "c"); // will be printed a, b, c and 3

Rest Parameter

The rest parameter indicated by three dots (…) followed by a parameter name and is placed at the end of the function’s parameter list.

It collects the remaining arguments into an array, making it easy to work with functions that can take a variable number of arguments.

function printArguments(first, second, ...others) {
  console.log(`first: ${first}`);
  console.log(`second: ${second}`);
  for (const arg of others) {
    console.log(arg);
  }
}
printArguments("a", "b", "c", "d", "e", "f");
// first: a
// second: b
// c
// d
// e
// f

Arrow Function

Arrow function is a newly emerging function declaration scheme in ES2015 that allows for a more concise representation of anonymous functions.

const myFunction = (number) => {
  return number + 1;
};

console.log(myFunction(2)); // will be printed 3

myBtn.addEventListener("click", () => {
  console.log("button is clicked!");
});

There are several different arrow function types

// if function need one parameter, no need brackets.
const myFunction = (number) => {
  return number + 1;
};

// if function has only return, no need curly brackets and return keyword
const sum = (a, b) => a + b;

This

When ‘this’ is used in a web browser, you will have a global object, a Window object.

const user = {
  firstName: "Henry",
  lastName: "Chung",
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

Statement

Statement: Represents an action or control structure and often contains expressions.

let x = 5; // Variable declaration statement
if (x > 0) {
  // Conditional statement
  console.log("Positive"); // Statement within the if block
} else {
  console.log("Non-positive"); // Statement within the else block
}
for (let i = 0; i < 5; i++) {
  // Loop statement
  console.log(i); // Statement within the loop
}

In JavaScript, the term “spread” is often associated with the spread syntax, denoted by three dots (…).

Array Spread

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

Object Spread

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }

const newArray = [...obj1]; // this occurs error since spread can be done with objects({}), not array([]).
console.log(newArray);

Expression

Expression: Produces a value and can be part of a statement.

5 + 3; // Arithmetic expression
"Hello, " + "World"; // String concatenation
myVariable; // Variable reference
functionCall(); // Function call
3 * 4 + 2; // Complex expression with parentheses

Optional Chaining

Optional chaining is a feature introduced in ECMAScript 2020 that simplifies the process of accessing nested properties or calling methods on an object when the intermediate properties or methods might be null or undefined.

const user = {
  name: "Henry",
  address: {
    city: "Vancouver",
  },
};

// Without optional chaining (may throw an error if address is null or undefined)
const cityName = user.address.city; // Throws an error if address is null or undefined

// With optional chaining
const cityNameSafe = user?.address?.city; // No error, returns undefined if address is null or undefined

console.log(cityNameSafe); // Output: Vancouver (if address is defined)

destructuring

Destructuring makes it possible to unpack values from arrays or properties from objects into distinct variables.

Array Destructuring

const numbers = [1, 2, 3, 4, 5];

// Destructuring assignment for arrays
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

Object Destructuring

const person = {
  firstName: "Henry",
  lastName: "Chung",
  age: 25,
};

// Destructuring assignment for objects
const { firstName, lastName, age } = person;

console.log(firstName); // Henry
console.log(lastName); // Chung
console.log(age); // 25

Function Parameter Destructuring

// Destructuring assignment in function parameters
function printPersonDetails({ firstName, lastName, age }) {
  console.log(`${firstName} ${lastName}, ${age} years old`);
}

printPersonDetails(person); // Henry Chung, 25 years old

Modules

A module in programming generally refers to a self-contained unit of code that can be reused, often for the purpose of organizing and encapsulating functionality.

Before you use module, you need moudle scope

<body>
  <script type="module" src="index.js"></script>
</body>

basically, the keywords are import, export.

export const title = "Module";

export function print(value) {
  console.log(value);
}

import { title, print } from "./printer.js";

print(title);

Change Name of Imported Properties

You can change the name of imported functions or variables.

import { title as printerTitle, print, printArr } from "./printer.js";
import { title, data as members } from "./members.js";

printer(title);
arrPrinter(members);

Wildcard

import * as printerJS from "./printer.js";

console.log(printerJS.title);
console.log(printerJS.print);

const title = "Module";

function print(value) {
  console.log(value);
}

function printArr(arr) {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  });
}

export { title as printerTitle, print, printArr };

Default Export

In ES6 modules, you can use the export default syntax to export a single value, function, or class as the default export from a module.

const title = "DefaultModule";

function print(value) {
  console.log(value);
}

export default print;

import { default as printerJS } from "./printer.js";

console.log(printerJS.title);
console.log(printerJS.print);

import printerJS from "./printer.js";

console.log(printerJS.title);
console.log(printerJS.print);