JavaScript Basics

# JavaScript Basics

Click ★ if you like the project. Your contributions are heartily ♡ welcome.

Related Topics

• HTML Basics
• CSS Basics
• JavaScript ES6 Basics
• JavaScript Unit Testing
• JavaScript Coding Practice
• JavaScript Design Patterns
• Data Structure in JavaScript

Table of Contents

• Introduction
• Variables
• Data types
• Operators
• Numbers
• String
• Array
• Regular Expression
• Functions
• Events
• Objects
• Window and Document Object
• Classes
• Error Handling
• Promises
• Collections
• Modules
• Miscellaneous

# 1. Introduction

Q 1.1. List out important features of JavaScript ES6?

1. Template Strings:

Template literals are string literals allowing embedded expressions.

Benefits:

• String interpolation
• Embedded expressions
• Multiline strings without hacks
• String formatting
• String tagging for safe HTML escaping, localization and more

// String Substitution
let name = `Abhinav Sharma`;
console.log(`Hi, ${name}`); // Output: "Hi, Abhinav Sharma"

// Multiline String
let msg = `Hello \n
World`;
console.log(`${msg}`); // Output: "Hello World"

⚝ Try this example on CodeSandbox

2. Spread Operator:

Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [10, 20, 30];

// Using Apply (ES5)
console.log(sum.apply(null, numbers)); // 60

// Using Spread Operator
console.log(sum(...numbers)); // 60

⚝ Try this example on CodeSandbox

2.1. Copying an array:

const fruits = ["Apple", "Orange", "Banana"];
const newFruitArray = [...fruits];

console.log(newFruitArray); 

Output:

['Apple', 'Orange', 'Banana']

⚝ Try this example on CodeSandbox

2.2. Concatenating arrays:

const arr1 = ["A", "B", "C"];
const arr2 = ["X", "Y", "Z"];

const result = [...arr1, ...arr2];

console.log(result); 

Output:

['A', 'B', 'C', 'X', 'Y', 'Z']

⚝ Try this example on CodeSandbox

2.3. Spreading elements together with an individual element:

const fruits = ["Apple", "Orange", "Banana"];
const newFruits = ["Cherry", ...fruits];

console.log(newFruits); 

Output:

['Cherry', 'Apple', 'Orange', 'Banana']

⚝ Try this example on CodeSandbox

2.4. Spreading elements on function calls:

const fruits = ["Apple", "Orange", "Banana"];

const getFruits = (f1, f2, f3) => {
  console.log(`Fruits: ${f1}, ${f2} and ${f3}`);
};

getFruits(...fruits); 

Output:

Fruits: Apple, Orange and Banana

⚝ Try this example on CodeSandbox

2.5. Spread syntax for object literals:

const obj1 = { id: 101, name: 'Rajiv Sandal' }
const obj2 = { age: 35, country: 'INDIA' }

const employee = { ...obj1, ...obj2 }

console.log(employee);

Output:

{
  "id": 101,
  "name": "Rajiv Sandal",
  "age": 35,
  "country": "INDIA"
}

3. Sets:

Sets are a new object type with ES6 (ES2015) that allow to create collections of unique values. The values in a set can be either simple primitives like strings or integers, but more complex object types like object literals or arrays can also be part of a set.

const numbers = new Set([10, 20, 20, 30, 40, 50]);

console.log(numbers); Set(5) { 10, 20, 30, 40, 50 }
console.log(typeof numbers); // Object

⚝ Try this example on CodeSandbox

4. Default Parametrs:

function add(x = 10, y = 20) {
  console.log(x + y);
}

add(10, 30); // Output: 10 + 30 = 40
add(15); // Output: 15 + 20 = 35
add(); // Output: 10 + 20 = 30

⚝ Try this example on CodeSandbox

5. repeat():

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

const msg = "Hello World \n";

console.log(`${msg.repeat(3)}`);

Output:

Hello World
Hello World
Hello World

⚝ Try this example on CodeSandbox

6. Arrow Function (=>):

const add = (x, y) => x + y;

console.log(add(10, 20)); // 30

⚝ Try this example on CodeSandbox

7. Arrow function with this

/**
 * Using Arrow function
 */
const person = {
  name: "Diksha",
  actions: ["bike", "hike", "ski"],
  printActions() {
    this.actions.forEach((action) => {
      console.log(this.name + " likes to " + action);
    });
  },
};

person.printActions();

Output:

Diksha likes to bike 
Diksha likes to hike 
Diksha likes to ski

⚝ Try this example on CodeSandbox

8. Destructing Assignment:

// Destructing Assignment
const { title, price, description } = {
  title: "iPhone",
  price: 999,
  description: "The iPhone is a smartphone developed by Apple"
};

console.log(title); // iPhone
console.log(price); // 999
console.log(description); // The iPhone is a smartphone developed by Apple

⚝ Try this example on CodeSandbox

9. Generators:

A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an iterator.

function* generator(num) {
  yield num + 10;
  yield num + 20;
  yield num + 30;
}
const gen = generator(10);

console.log(gen.next().value); // 20
console.log(gen.next().value); // 30
console.log(gen.next().value); // 40

⚝ Try this example on CodeSandbox

10. Symbols:

They are tokens that serve as unique IDs. We create symbols via the factory function Symbol(). Symbols primary use case is for making private object properties, which can be only of type String or Symbol (Numbers are automatically converted to Strings).

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol("Hi");

console.log(typeof symbol1); // symbol
console.log(symbol3.toString()); // Symbol(Hi)
console.log(Symbol("Hi") === Symbol("Hi")); // false

⚝ Try this example on CodeSandbox

11. Iterator:

The iterable is a interface that specifies that an object can be accessible if it implements a method who is key is [symbol.iterator].

const title = "ES6";
const iterateIt = title[Symbol.iterator]();

console.log(iterateIt.next().value); //output: E
console.log(iterateIt.next().value); //output: S
console.log(iterateIt.next().value); //output: 6

⚝ Try this example on CodeSandbox