[JS/TS] Do I Truly Understand the Programming Languages I Use?

What Is a Programming Language?

What Is a Programming Language?

Why Did I Choose This Programming Language?

• The first factor I consider when exploring a programming language is its execution model. Is it interpreted or compiled? This can significantly affect performance, as well as how execution flows and how types are inferred or handled. Understanding these differences helps us anticipate potential issues later on.
![Untitled]

• The second factor is which programming paradigms the language supports and is best suited for: functional programming, object-oriented programming, event-driven programming, and so on.

• The final factor is developer-friendliness: how readable the syntax is, how easy the language is to learn and use, and whether it has a sufficiently large and supportive community.

What Is JavaScript?

Concept

• JavaScript uses a hybrid execution approach: it can be interpreted and also compiled just in time (JIT) by engines such as V8 and Chakra.

• It was originally developed to run in browsers and create dynamic, interactive web pages.

• It can also run on servers through runtimes powered by engines such as V8.

• It supports multiple programming paradigms, including functional, object-oriented, and event-driven programming.

Key Characteristics

1. Prototypes

2. Dynamic Types

let a = 0;
a = "string"; // no error
a = {}; // no error

3. Constructor Functions

// Constructor
function User(name, age) {
  this.name = name;
  this.age = age;
}

var user1 = new User('Bob', 25);
var user2 = new User('Alice', 27);

JavaScript ES6, ES7, ECMAScript 2015, and ECMAScript 2016: What Are They?

JavaScript Versions

• ES6: Classes, modules, for...of loops, arrow functions, binary data, promises, numeric and mathematical enhancements, reflection, and more.

• ES7: The exponentiation operator (*) and Array.prototype.includes().

Notable ES6 Features

1. Block-Scoped Variables: let and const

• var has function scope, or global scope when declared outside a function.

• let allows a variable to be reassigned and is scoped to its enclosing block.

• const declares a block-scoped binding that cannot be reassigned.

2. Arrow Functions

• They do not have their own this, arguments, or super bindings.

• They cannot be used as constructors with the new operator.

• They cannot use yield directly unless defined as generator functions—which arrow functions cannot be.

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// Expected output: Array [8, 6, 7, 9]

3. Rest Parameters

function sum(...theArgs) {
  let total = 0;

  for (const arg of theArgs) {
    total += arg;
  }

  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));
// Expected output: 10

4. Destructuring Assignment in ES6

let [a, b, c] = [1, 2, 3];

5. Default Parameters in ES6

function main(params = "default") {
  return params;
}

6. Template Literals in ES6

const name = "Kevin";
const last_name = "Nguyen";

console.log(`My name is ${name} ${last_name}`);

7. Multiline Strings in ES6

var content = `hehemeomeo
meomeohehe
hemehemeo`;

8. Enhanced Object Literals in ES6

function createSinger(name, age, address, salary) {
  return {
    name,
    age,
    address,
    salary,
    ...
  };
}

function createSinger(name, age, address, salary) {
  return {
    ['salaryOf' + name]: salary,
  };
}

9. Promises in ES6

10. Classes in ES6

// Declaration
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

// Expression; the class is anonymous but assigned to a variable
const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// Expression; the class has its own name
const Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

What Is TypeScript?

Concept

Key Characteristics

• Static Typing: Unlike JavaScript's dynamic typing, TypeScript supports static type checking. Developers can specify the expected types of variables and other values, allowing many type-related errors to be detected before the code runs. This improves consistency and makes application logic easier to reason about.

• Interfaces: TypeScript supports interfaces, which define contracts for the structure of objects. They help ensure consistency when working with data structures across different parts of an application.

• Generics: Generics are one of TypeScript's powerful features, but they can also be challenging to understand because of their complexity. They allow developers to write reusable code that works with different types while preserving type information.

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>();

myGenericNumber.zeroValue = 0;

myGenericNumber.add = function (x, y) {
  return x + y;
};

let stringNumeric = new GenericNumber<string>();

stringNumeric.zeroValue = "";

stringNumeric.add = function (x, y) {
  return x + y;
};

console.log(
  stringNumeric.add(stringNumeric.zeroValue, "test")
);

Features of TypeScript

• Cross-Platform: The TypeScript compiler can be installed and used on operating systems such as Windows, macOS, and Linux.

• Object-Oriented Programming: TypeScript provides features such as classes, interfaces, and modules, making it easier to apply object-oriented programming on both the client side and the server side.

• Static Type Checking: TypeScript checks types during compilation, helping developers identify many errors while writing code, without having to execute it first.

• Optional Static Typing: TypeScript allows developers to choose how explicitly they want to specify types. It supports type annotations when desired, while also providing type inference and the flexibility to work with dynamic values, similar to JavaScript.

• DOM Manipulation: TypeScript can be used to interact with the Document Object Model (DOM), allowing developers to add, modify, or remove page elements while benefiting from type checking.

• ES6 Features: TypeScript supports modern ECMAScript features, including classes, arrow functions, modules, and other language constructs.

In Conclusion