New Features + Backend | Javascript Hindi Course For Beginners ( 2023 ) #16

Spread Operator

the spread operator (denoted by ...) allows an iterable (e.g. array, string, etc.) to be expanded into individual elements.


// combine two array using spread operator

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

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

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


// cloning a array using spread 

const originalArray = [1, 2, 3];
const newArray = [...originalArray];

console.log(newArray); // [1, 2, 3]

Destructuring

destructuring is a feature that allows you to extract values from arrays or objects and assign them to variables in a more concise way.

There are two types of destructuring: array destructuring and object destructuring.


// Array Destructuring
const numbers = [1, 2, 3];
const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3



// object destructuring 

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

const { firstName, lastName, age } = person;

console.log(firstName); // "John"
console.log(lastName); // "Doe"
console.log(age); // 30

Optional chaining

Optional chaining is a feature introduced in ECMAScript 2020 that allows you to safely access deeply nested properties of an object without having to manually check each property along the way.



// if you try to access a property of an object that doesn't exist,
//  you'll get an error:

const person = {
  name: "John",
  address: {
    city: "New York"
  }
};

console.log(person.address.country); // TypeError: Cannot read property 'country' of undefined


// With optional chaining, we can check each property along the way and 
//stop if any of them are undefined.
// in this way we can prevent errors
const person = {
  name: "John",
  address: {
    city: "New York"
  }
};

console.log(person.address?.country); // undefined

Nullish coalescing operator ??

The nullish coalescing operator (??) is a feature introduced in ECMAScript 2020 that allows you to provide a default value for variables that might be null or undefined.


const myVariable = null ?? "default value";
console.log(myVariable); // "default value"

Nullish coalescing assignment (??=)

The nullish coalescing assignment (??=) operator is a feature introduced in ECMAScript 2021 that allows you to assign a default value to a variable only if its current value is null or undefined.


// it works similar to the nullish coalescing operator (??), 
// but instead of just returning the default value,
// it also assigns it to the variable if the variable is null or undefined.

let myVariable = null;
myVariable ??= "default value";
console.log(myVariable); // "default value"

void operator

The voidoperator evaluates the given expressionand then returns undefined .


const output = void 1;
console.log(output);
// Expected output: undefined

void console.log('expression evaluated');
// Expected output: "expression evaluated"

void function iife() {
  console.log('iife is executed');
}();
// Expected output: "iife is executed"

void function test() {
  console.log('test function executed');
};
try {
  test();
} catch (e) {
  console.log('test function is not defined');
  // Expected output: "test function is not defined"
}

Generator function

A generator function in JavaScript is a special type of function that allows you to generate a sequence of values on the fly. It's defined using the function* syntax and returns an iterator object that can be used to iterate over the sequence of values.

The main difference between a regular function and a generator function is that a regular function runs to completion and returns a single value, while a generator function can pause its execution and yield multiple values, one at a time, without exiting the function.


function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = myGenerator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

In this example, myGenerator() is a generator function that yields the values 1, 2, and 3. When the function is called, it returns an iterator object, which can be used to iterate over the sequence of values using the next() method.

Each time the next() method is called, the generator function resumes execution and yields the next value in the sequence, until there are no more values left to yield. When there are no more values to yield, the done property of the iterator object is set to true.

Generator functions can be used to generate infinite sequences of values, or to lazily compute values on demand, which can improve performance and reduce memory usage in some cases.

NPM (Node Package Manager) & Package JSON

NPM (Node Package Manager) is a package manager for JavaScript, that is used to manage and install packages and modules for Node.js projects. It is the default package manager for Node.js and comes bundled with it. NPM allows you to easily install, update, and manage dependencies for your Node.js projects.

Package.json is a configuration file for Node.js projects that contains metadata about the project, as well as a list of dependencies required for the project to run. The file is located at the root of the project directory and is created automatically when you initialize a new project using the npm init command.

The package.json file contains information such as the project name, version, description, author, license, and keywords. It also includes a list of dependencies required for the project to run, along with their versions. This allows you to manage and track the dependencies required for your project and ensures that other developers can easily set up and run your project.


{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "author": "John Doe",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.21"
  }
}

JavaScript modules

JavaScript modules are a way of organizing and structuring your code into reusable, independent units of functionality, which can be easily imported and used in other parts of your application.

Modules provide a number of benefits, including:

Encapsulation: Modules allow you to encapsulate your code and avoid namespace collisions by keeping the implementation details of each module private and exposing only the public API.

Reusability: Modules can be easily imported and used in other parts of your application, making it easy to reuse code and avoid duplication.

Maintainability: Modules help to improve the maintainability of your code by breaking it down into smaller, more manageable pieces.

There are two main types of JavaScript modules:

ES6 Modules: ES6 modules are the newer and more modern way of working with modules in JavaScript. They are built into the language and can be used natively in modern browsers and Node.js. ES6 modules use the import and export statements to define and use modules.

CommonJS Modules: CommonJS modules are the older way of working with modules in JavaScript, and are still widely used in Node.js. CommonJS modules use the require() and module.exports statements to define and use modules.


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

// app.js
import { add } from './math.js';

console.log(add(2, 3)); // 5

Spread Operators , Destructuring, 
Optional chaining,Nullish coalescing ,Generator function,NPM (Node Package Manager) & Package JSON,JavaScript modules

Check Notes - https://dosomecoding.com/courses/javascript/javascript-hindi-course-for-beginners
HTML Course  
 https://www.youtube.com/playlist?list=PLPppPPmk0i3gL2isb9Kr1GvTM8id2gdtY
CSS Course 
https://www.youtube.com/playlist?list=PLPppPPmk0i3gWK5TVILnKSvuc9Fc15sbH
Html and CSS practice Projects 
 https://www.youtube.com/playlist?list=PLPppPPmk0i3hZCNmbVtcP1hlwDKOdUFX9
Javascript Course 
https://www.youtube.com/playlist?list=PLPppPPmk0i3gZCY8JZ0H5oykFGevvNzNS




Linkedin -  https://linkedin.com/in/anshuopinion
Telegram Channel -  https://telegram.me/dosomecodinghelp
Instagram - https://instagram.com/dosomecoding
Github - https://github.com/anshuopinion