Javascript Notations

In JavaScript, notations refer to various syntactical conventions or patterns that help in defining and using data structures, functions, and more. Let’s explore some important notations used in JavaScript:

1. Dot Notation

Dot notation is used to access properties and methods of objects.

Example:

const person = {
  name: 'Wasim',
  age: 28
};

console.log(person.name); // Outputs: Wasim

In this case, person.name is using dot notation to access the name property of the person object.

2. Bracket Notation

Bracket notation is an alternative way to access properties of objects, particularly useful when the property name is dynamic or contains special characters.

Example:

const person = {
  name: 'Wasim',
  age: 28
};

console.log(person['name']); // Outputs: Wasim

// Using dynamic keys
const property = 'age';
console.log(person[property]); // Outputs: 28

3. Object Literal Notation

This is the notation used to define objects. Objects are created using curly braces {}.

Example:

const car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2020
};

4. Array Literal Notation

Array literal notation is used to create arrays using square brackets [].

Example:

const numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Outputs: 1

5. Function Notation

• Function Declaration: Defines a function with the function keyword.

    function greet() {
      console.log('Hello, world!');
    }
    greet(); // Outputs: Hello, world!
  

• Function Expression: Defines a function as an expression and assigns it to a variable.

    const greet = function() {
      console.log('Hello, world!');
    };
    greet(); // Outputs: Hello, world!
  

• Arrow Function Notation: Introduced in ES6, provides a shorter syntax for writing functions.

    const greet = () => {
      console.log('Hello, world!');
    };
    greet(); // Outputs: Hello, world!
  

6. JSON (JavaScript Object Notation)

JSON is a lightweight data-interchange format, commonly used to transfer data between a server and web applications. It uses key-value pairs similar to object literals.

Example:

const jsonString = '{"name":"Wasim", "age":28}';
const person = JSON.parse(jsonString); // Convert JSON string to JavaScript object
console.log(person.name); // Outputs: Wasim

7. Template Literal Notation

Template literals, introduced in ES6, are enclosed by backticks (` ) and allow embedding expressions and multiline strings.

Example:

const name = 'Wasim';
const greeting = `Hello, ${name}!`; // Embedding variable
console.log(greeting); // Outputs: Hello, Wasim!

8. Object Destructuring Notation

Object destructuring allows extracting values from objects and assigning them to variables using a concise syntax.

Example:

const person = {
  name: 'Wasim',
  age: 28
};

const { name, age } = person;
console.log(name); // Outputs: Wasim
console.log(age);  // Outputs: 28

9. Array Destructuring Notation

Similar to object destructuring, but for arrays.

Example:

const numbers = [1, 2, 3];

const [first, second] = numbers;
console.log(first);  // Outputs: 1
console.log(second); // Outputs: 2

10. Spread Operator Notation

The spread operator (...) allows expanding iterables (like arrays or objects) into individual elements or properties.

Example with Arrays:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Outputs: [1, 2, 3, 4, 5]

Example with Objects:

const obj1 = { name: 'Wasim', age: 28 };
const obj2 = { ...obj1, city: 'Tirupur' };
console.log(obj2); // Outputs: { name: 'Wasim', age: 28, city: 'Tirupur' }

11. Rest Operator Notation

The rest operator (...) is used to represent an indefinite number of arguments as an array, often in function definitions.

Example:

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}

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

12. Class Notation

Classes are introduced in ES6 as a syntactic sugar over JavaScript's prototype-based inheritance.

Example:

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person('Wasim', 28);
person1.greet(); // Outputs: Hello, my name is Wasim

13. Module Import/Export Notation

Modules allow splitting JavaScript code into separate files. You can export and import functionalities across these files.

Export Example:

// In a file named math.js
export function add(a, b) {
  return a + b;
}

Import Example:

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

14. Promise Notation

Promises are used to handle asynchronous operations in JavaScript.

Example:

const promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

promise
  .then(result => console.log(result))   // Outputs: Success
  .catch(error => console.log(error));

Summary:

These are some key JavaScript notations:

1. Dot Notation and Bracket Notation for accessing properties.

2. Object and Array Literal Notation for creating objects and arrays.

3. Function and Arrow Function Notation for defining functions.

4. Destructuring Notation for extracting data from arrays and objects.

5. Spread and Rest Operators for working with arrays and objects.

6. JSON Notation for data exchange.

7. Class Notation for object-oriented programming.

8. Promise Notation for handling asynchronous code.

9. Template Literal Notation for string interpolation.