Month: June 2019

Spread & Rest Operators in JavaScript

Spread
  • Spread operator allows an expression to be expanded in places where zero or more arguments are expected.
  • The operator is just three dots (…)
  • This operator is used to add elements to arrays or add properties to objects.
  • Spread takes out all elements all properties and distribute them in a new array or object.
const arr = [10,20,30];
const newArr = [...arr,40,50];

console.log(arr);
console.log(newArr);

const Person = {
  name: "Akanksha"
};

const Student = {
  ...Person,
    location: "Delhi"
};

console.log(Student.name);
console.log(Student.location);


Rest
  • It is used to merge a list of function arguments into an array.
  • The operator is just three dots (…)
  • This is basically used in function argument list.
const PersonDetails = (...details) => {
  console.log("Name: " + details[0]);
  console.log("Address: " + details[1]);
  console.log("Education: " + details[2]);
  console.log("Others: " + details[3]);
}
PersonDetails("Akanksha","Delhi","Graduation");

Modern Class Syntax in JavaScript

In previous article, we saw how to create classes, constructors, properties and methods.

In Next Generation JavaScript, we skip constructor function and use Arrow functions for our methods. We can directly declare parameters.

Let’s see below example:

class Person{
    name = "Akanksha";
    address = "Delhi";  

  getPersonDetails = () => {
    console.log("Name: " + this.name);
    console.log("Location: " + this.address);
  }
}

class Student extends Person{
  cls = "12th";

  getStudentDetails = () => {
    console.log("Class: " + this.cls);
  }
}

const student = new Student();
student.getPersonDetails();
student.getStudentDetails();

Inheritance in JavaScript Classes

We have seen how to create Classes in JavaScript.

Let’s now learn how to inherit classes in JavaScript.

  • In inheritance, parameters and methods of base class can be used in derived class.
  • We inherit class using extend keyword.
  • constructor is a default function which is automatically called when a class is instantiated. It is used to initialize the parameters of the class.
  • super is a method that is used to call base class’ constructor.
  • this keyword is used to access the parameters for current object.

Below is a sample code for inheritance

class Person{
  constructor(personName, personAddress){
    this.name=personName;
    this.address=personAddress;  
  }
  getPersonDetails(){
    console.log("Name: " + this.name);
    console.log("Location: " + this.address);
  }
}

class Student extends Person{
  constructor(name, address,studentClass, studentId){
    super(name, address);
    this.studentClass = studentClass;
    this.Id=studentId;
  }
  getStudentDetails(){
    console.log("Class: " + this.studentClass);
    console.log("ID: " + this.Id);
  }
}

class CollegeStudent extends Student{
  constructor(name, address, stdCls, id, clgName){
    super(name, address, stdCls, id);
    this.CollegeName=clgName;
  }
  getDetails(){
    console.log("College Name: " + this.CollegeName);
  }
}

const student = new CollegeStudent("Akanksha","Delhi","12th",12345,"NIT");
student.getPersonDetails();
student.getStudentDetails();
student.getDetails();

Classes in JavaScript

  • Classes are the core feature of next generation JavaScript. Classes are generally blueprints of objects. A Class can have both properties and methods.
  • Methods are functions attached to classes where properties acts as variables and are attached to classes.
  • A Class is instantiated with a new keyword.
  • Classes also support Inheritance. A class can inherit another class and use its properties and methods.
  • Constructor is a default method used for creating and initializing an object created with the class. This is automatically executed whenever you instantiate a class. In this, you can set up properties with this keyword.
  • Let’s see an example:
class Person{
  constructor(){
    // setting up properties using this keyword
    this.name="Akanksha";
    this.address="Delhi";  
  }
  // creating a custom method within a class
  getName(){
    console.log("Name: " + this.name + " and Location: " + this.address);
  }
}

// creating an object of the class using new keyword.
// constructor function is called as soon as you instantiate a class using new keyword
const prsn = new Person();

// calling method using the object of the class
prsn.getName();

You can also pass the data while instantiating the class

Related Article: Inheritance in JavaScript

imports and exports in JavaScript

When we write JavaScript code, we prefer to split our code in multiple functions and different files. But we want to use these files from one another.

For this, we use import and export. We will also see the concept of named export and default export.

Default Export: We can have only one default export per file. When we import, we have to specify a name of the import. This name can be the actual name or any other name we like. We have to use default keyword when defining the default export.

Named Export: We can have multiple named exports from a single file, but the name of the import module should be same as the name of the export module. They should me enclosed in curly brackets {} while importing.

Let’s have a file names Person.js with following structure. We are using default export here.

const Person = {
  name:"Akanksha"
}
export default Person;

Another file test.js with the following structure. We are using named export here.

export const settings = () => {}
export const url = "URL";

Another file as App.js where we will be importing these two files

// these are default exports
import Person from './Person.js'
import prsn from './Person.js'

// these are named exports
import {settings} from './test.js'
import {url} from './test.js'

The named exports can also be combined in one import like following

import {settings, url} from './test.js'

If there are multiple named exports from one file, we can import them together like below

import * as testData from './test.js'

We can then use this as testData.settings when we want to access that module.

Arrow Functions in JavaScript

I am using jsbin.com for demo purpose.

  • Arrow functions is a different syntax for JavaScript functions.
  • A normal JavaScript function looks like this with a function keyword. Parameters are optional.
function myFunc(parameters){
// lines of code
}

Below is an example of JavaScript function.

function myFunc(name){
  console.log(name);
}
myFunc("Akanksha");

The output of above code is “Akanksha“.

Arrow Functions
  • An Arrow function looks like this. Parameters are optional.
const myFunc = (parameters) => {
// lines of code
}
  • Solves many problems that we have with this keyword.

Below is the conversion of above JavaScript function in an Arrow function.

const myFunc = (name) => {
  console.log(name);
}
myFunc("Akanksha");

The output of above code is also “Akanksha“.

  • If there is a single parameter, you can omit the round brackets. This syntax is not valid with zero or multiple parameters. You have to provide brackets at that time.
const myFunc = name => {}
  • Passing multiple parameters
const myFunc1 = (name, age) => {
  console.log(name, age);
}
myFunc1("Akanksha",28);

Below is the output of above code

  • Syntax when Arrow function have return statement as the only statement. We do not need to include curly brackets and return keyword. Complete Arrow function can be written in single line. Below is an example of an Arrow function with a single line of code as the return statement. Please NOTE that this one-liner syntax is not applicable if there are multiple statements with return statement as one of them OR any other statement apart from return statement. This syntax works only with return statement as a single statement.
const addition = (num1, num2) => {
  return num1+num2;
}
console.log(addition(10,20));

const add = (n1, n2) => n1+n2;
console.log(add(20,30));

Below is the output of above code

var, let & const in JavaScript

  • With ES6, a version of JavaScript, two new keywords, let & const, were introduced to create variables.
  • var is still used to declare variables, but let & const are recommended.
  • Use let if you want to create a variable and use const if you want to create a variable that holds a constant value (a value that you assign once and never change).

var

  • We use var to declare variables in JavaScript.
  • It is function or globally scoped.
  • Can be re-declared in the same scope
var name="David";
// can use name here
function getName(){
// can use name here as well
}

var name="Mike"; // can be easily re-declared

function myFunc(){
var address="US";
// address can be used anywhere within this function, but not outside this function.
}

let

  • It is used to declare variables.
  • These variables are block scoped.
  • They cannot be re-declared
for(let i=1;i<=10;i++){
console.log(i); // i is used here
}
// i cannot be used here, throws an error: i not defined

let i=100; // cannot be re-declared, throws an error: i is already declared

function newFunction(){
let phone=78989879;
// phone can be used anywhere within the function, but NOT outside the function.
}

const

  • It is used to declare constant variables.
  • They cannot be re-assigned.
  • We generally use const variables for defining settings like URL link, database settings etc.
const PI = 3.1416;
PI = 3.14; // This will throw an error
const PI=45.23; // This will also throw an error: Assignment to constant variable

SharePoint Migration Tool

  • With the help of SharePoint Migration Tool (SMT), we can migrate SharePoint on-premises or File Share content to either SharePoint or OneDrive of Office 365.
  • For doing migration, Office 365 users need not to have global administrator permission, only write permission to the site collection where you want to migrate the data will work.

How SMT works

First Authentication to the destination tenant step is performed. The the user is prompted for the source and destination SharePoint Online Site Collection, where you want to migrate your data. Click Migrate to submit the migration job. After this, scanning, packaging, uploading and importing steps are performed in parallel across all the files submitted for migration.

Authentication

The first step after opening the tool is to authenticate the destination tenant (where you want your files to be migrated). Providing your username and password to the tenant associates the migration jobs you submit to this account. This allows your to resume your migration from another computer if needed by logging in with the same credentials. This account should be a site collection administrator of the destination you want to migrate to.

Various authentication methods that are supported are: NTLM, Kerberos, Forms, ADFS, Multi-factor authentication, SAML based authentication and Client Certificate authentication.

Scan

Once you click Migrate, a scan is performed on every file, even for any potential issue. The scan verifies the access to the data source and write access to the SharePoint Online destination.

Packaging

In this stage, a content package is created that contains a manifest consisting of 8 XMLs.

Upload

In this stage, the content package with the manifest is uploaded to Azure. Before a migration job can be accepted from a SPO provided Azure container, the data is encrypted at rest using the AES CBC 256 standard. The files are encrypted along with the manifest files.

Import

In this stage, the key is provided to SPO SAS. Only Azure and SPO are interacting to fetch and migrate the content into the destination. This process is a timer job based, but does not prevent other jobs from being queued up. During the import, a report is created in the working folder and live updates are made. After the migration job is completed, the log is stored in the Azure container and a final report is created. A log is stored in each Manifest Container.

Session and Resume

While the migration is being performed the tool save some information of its session in the users hidden list on their MySite. That information will be used later when the tool is reopened to allow to resume any previous migration session. It is possible to remove that information if the user requires more space in their MySite. This will only remove the session from the resume option in the tool and wont affect previous imports.

SharePoint Migration Assessment Tool

  • SharePoint Migration Assessment Tool (SMAT) is a simple command line executable that scans the content of your SharePoint Farm to help identify the impact of migrating your server to SharePoint Online with Office 365.
  • Tool runs in the background hence will not impact the environment.
  • SMAT requires one to two days to complete the scan of the environment, reporting the progress side by side in the console window.
  • Once the scan is completed, the output files are stored in Logs directory.
  • Summary and details of scenarios that could be impacted by migration are stored in logs.
  • This tool is built to run from SharePoint 2010 or 2013 environment.
  • To run this tool, all files must be extracted from any compressed package before execution.
  • This tool must run as Farm Service Account. A farm administrator account is acceptable as long as the account has been given read access to all web applications. The account also needs explicit Full Control permissions on both Operations, Administrators and Sharing, Permissions on the User Profile Service Application. There are a series of checks to ensure the account has enough permissions prior to scanning the environment.
  • Two modes offered by this tool:
    • Assessment: Default mode. If you run SMAT.exe, assessment will run. The assessment process runs scans against the SharePoint farm and associated content looking for issues that have been known to cause issues for customers migrating into SharePoint Online.
    • Identity Mapping: Identity Mapping allows you to generate a report of all the user and group identities that have access to your SharePoint environment and attempts to map those identities to Azure AD user and group identities. This process is very important to migration. If identities are not properly set up prior to migration, it can result in users losing access to content as well as information being incorrect in the site. For example, the Created By and Modified fields will not show the correct identity post migration.
  • There are two config files that can be modified:
    • SiteSkipList.csv: This is installed in same directory as SMAT.exe. We can add sites to this CSV to tell SMAT not to include these sites in report output.
    • ScanDef.json: This is installed in the same directory as the SMAT tool. You can use ScanDef.json to enable or disable individual scans for the assessment tool. This file contains configurations for assessment on both SharePoint 2010 and 2013 as well as Identity Mapping.
  • To disable a scan, locate the entry in the ScanDef.json file and set Enabled to false. This is useful if there is a scan that your business doesn’t care about and disabling the scan will reduce the overall execution time of the assessment tool.
  • SMAT.exe is a launcher program that determines your intentions based on the parameters passed in and then loading the appropriate application to do the work requested. Under the covers, there are 3 executables that are responsible for doing the work:
    • SMAT2010.exe: Performs assessment on SharePoint 2010 environments.
    • SMAT2013.exe: Performs assessment on SharePoint 2013 environments.
    • SMIT.exe: Performs identity mapping work for both SharePoint 2010 and 2013 environments.
  • There are up to three log files:
    • SMAT.log: This file contains all the logging from the tool execution. This will contain 3 levels of logging. Information, Warning, and Errors. Information help track down progress and troubleshooting issues. Warnings are typically expected error conditions. Errors are unexpected conditions that our tooling was unable to determine if they will be a blocker to moving forward. These need to be looked at.
    • SMAT_Errors.log: This contains only the Error events. If this file is missing after the tooling completes, it indicates there were no errors found.
    • SMATTelemetry.log: This contains logging for the telemetry upload tooling. Any issues in here will not impact generating your reports.
Power Platform Academy

Start or Upgrade your Career with Power Platform

Learn with Akanksha

Python | Azure | AI/ML | OpenAI | MLOps