JavaScript Basics – 2

Destructuring or object & array

Destructuring assignment is a feature introduced in JavaScript ES6 (ECMAScript 2015) that allows you to extract values from arrays or properties from objects and assign them to variables in a more concise and convenient way. 

We will use [] or {} on left of = sign to destructing the right hand value.

let myAry2 = ['Dilip', 'Janak', 'Puranjay', 'Kavya'];
let [mFather, mMathor] = myAry2;
console.log(mFather, mMathor);

let tempObj = {
  surName: 'Parmar',
  goTra: 'Darbar',
};
// console.log(tempObj.surName);
let { surName: Atak, goTra: jati } = tempObj;
console.log(Atak, jati);

The spread operator  … “spreads” the values in an iterable (arrays, strings). Check this for more brief idea.

Sprea operator is used to combine 2 arrays without using concat method & also use to pass a parameters which is stored in array to function call.

// Traditional way
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let clubAry = arr1.concat(arr2);
console.log(clubAry);

// Using Spread operator
console.log([...arr1, ...arr2]);

let myFullName = 'DILIPKUMAR';
console.log([...myFullName]);
// Output: ['D', 'I', 'L', 'I', 'P', 'K', 'U', 'M', 'A', 'R']

function doEasySum(a, b, c) {
  return a + b + c;
}
console.log(doEasySum(1, 2, 3));
// But what is you have an array with these parameters as values
let ohAry = [4, 5, 6];
console.log(doEasySum(ohAry));
// Output: 4,5,6undefinedundefined
// so in this case we can use ... opearator
console.log(doEasySum(...ohAry));
// Output: 15

Rest operator … on left side

Rest operator = this defined array of rest of all elements

spread defined in right side of =

rest defined in left side of =

spread & rest always return an array

let myAry1 = [1, 2, 3, 4, 5, 6, 7];
let [eleone, ...allrest] = myAry1;
console.log(eleone, allrest);

Short curciuting

|| operator return first truthy value or last value

// In turnary operator we do
console.log(manAge ? manAge : 'Age not defined');
// This is acutally replace of turnary operator
console.log(manAge || 'Not defined');

&& operator return first truthy value or last value

// Check this manSalary is already defined by why it is not printing the value? because && operator return first falsy value else last value
let manSalary = 100000;
console.log(manSalary && 'Salary not defined');

Logical assignement operator: check more here

&&= When the value of the left operator is THRUTY then the right value is assigned to it

let bb = 10;
console.log((bb &&= 200)); //Output 200

||= When the value of the left operator is FALSY then the right value is assigned to it

let bbb;//this is undefined as falsy value
console.log((bbb |= 500)); //output is 500

??= When the value of the left operator is NULLISH then the right value is assigned to it

let ccc = null;
console.log((ccc ??= 700));

Optional chainin operator ?. check more

The optional chaining (?.) operator accesses an object’s property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

For.. of in loop in array

let finalAry = [1, 2, 3, 4, 5];
for (let sudo of finalAry) {
  console.log(sudo);
}

For.. in loop of object

let myFamily = {
  me: 'Dilip',
  brother: 'Arun',
  sister: 'Alka',
};
for (let sudo in myFamily) {
  console.log(myFamily[sudo]);
}

Object.keys() , Object.values(), Object.entries()

console.log(Object.keys(myFamily));
// ['me', 'brother', 'sister'];

console.log(Object.values(myFamily));
// [
//   "Dilip",
//   "Arun",
//   "Alka"
// ]

console.log(Object.entries(myFamily));
// [
//   [
//       "me",
//       "Dilip"
//   ],
//   [
//       "brother",
//       "Arun"
//   ],
//   [
//       "sister",
//       "Alka"
//   ]
// ]

Set – new data structure – A collection of a unique array values

How it is different from an array? in the set duplicate entries will be removed automatically and it gives only unique values of an array. Second, you can’t read elements by index numbers like array[0].

let newSet = new Set();
newSet.add(12);
newSet.add(23);
newSet.add(12);
console.log(newSet);
newSet.delete(12);
console.log(newSet);
console.log(newSet.has(23));
console.log(newSet.size);
console.log(newSet.clear());
console.log(newSet);

Map – Is also a newly added data structure in JS like Object, Array, Set

It is a unique collection of key-value pairs. Same as the set, but this is for the key-value pair. How it is different from the object? In object we can only set string as key while in this we can set anything as key like function, object, boolean, number etc.

Set & Map has some common methods like:

has() – To check if the element is existing in or not

add() – To add a new element in the set

size – To check the size/length of the set/map

delete() – To delete some unique value

clear() – To wipe out everything from the set/map

let newMap = new Map();
newMap.set('myname', 'Dilip');
newMap.set('myAge', 38);
newMap.set('myAge', 48);
newMap.set(true, 'I am a man');
newMap.set(1, 'I am a developer');
console.log(newMap);
console.log(newMap.has('myname'));