Destructing, Reference & Primitive types

New Gen JS - good to know for ReactJS

by M Rahul Reddy

Babel + JSX

console.clear();
/*Destructing:
Easily extract Array elements or Object properties and store them in a variable*/

const arr = [1,2,3];
[num1,num2] = arr; 
[num1, ,num3] = arr
console.log(num1,num2)
console.log(num1,num3)

/*
Syntax for Object: (commented as this doesn't work in fiddle and JSbin)
{name} = {name: 'Rahul', age:'26'}
console.log(name) // Rahul
console.log(age) // undefined
*/

// Reference and Primitive Types

/*Whenever you store or reassign a variable in another variable, it will copy the value*/
console.log("copying the pointer......")
const number = 1 // this is primitive type (number, string, booleans)
const number2 = number;
console.log("copied = ",number2)

/* Objects and Arrays are Reference type*/
const person = {
name: 'Rahul'
};
/* Doing the below doesn't copy the person object, instead person value is stored in memory and in const person we store a pointer to that place in memory.
 When we assign person to secondPerson that pointer will be copied.*/
const secondPerson = person;
person.name = 'Reddy'; //So any change in person will reflect in secondPerson too because pointer is copied by "const secondPerson = person;" and thus that pointer is pointed to exact same object in the memory where person does.

console.log("second Person =",secondPerson);
console.log("Immutable......");
const otherSecondPerson = {
	...person // copies the property and not the entire object.
};
person.name = 'Munakala'

/*reddy is printed because in second person reddy is assigned to person value and as the poiner points to same memory, the person object is also updated with update in second person object.*/
console.log("other Second Person =",otherSecondPerson);