JS Object Function Scope

JavaScript function scope arrow vs regular function or function expression in object.

/* Function scope: REGULAR FUNCTION: Can only accept properties using "this" keyword [ within inside ] the object itself! for instance like object and propery named < yearsExperience: 6 > below. ARROW FUNCTION:  Only arrow function CAN inject data from GLOBAL VARIABLE using "this" keyword  "this" keywork in arrow function is only recognize  the GLOBAL VARIABLE OR GLOBAL SCOPE using  "var followed by varName equal variable "value"  ex. var otherExpertise = 7; */varotherExpertise=7;// GLOBAL SCOPEconstDeveloper={yearsExperience : 6,otherExpertise : 2,// within the scope || local scope// function expressiongetExp : function(){letyE=this.yearsExperience;if(yE>1){return("Congratulation You are qualify : "+yE);}},// arrow functiongetOtherExpertise: ()=>{letop=this.otherExpertise;// from GLOBAL SCOPE !return("Plus your Other expertise : "+op);}}console.log("Hey! "+Developer.getExp());// Read from local scope// If we base on "within scope" the < otherExpertise : 2 > value is 2// but the GLOBAL SCOPE it is 7// It rendered the GLOBAL SCOPE NOT the local scope base on object itself! // That is how arrow function works in objectData in JS !console.log("Hey! "+Developer.getOtherExpertise());// Read from GLOBAL VARIABLE

// Result Hey!CongratulationYouarequalify : 6JS1.html:49Hey!PlusyourOther expertise : 7

Checking GLobal SCOPE
console.log(window);

// result 
otherExpertise : 7

Checking Object SCOPE
console.log(Developer);

// result 
otherExpertise : 2

Parent SCOPE

// ARROW FUNCTION IN METHOD ALSO KNOW AS PARENT SCOPE varotherExpertise=7;// GLOBAL SCOPEconstDeveloper={yearsExperience : 6,otherExpertise : 2,// within the scope || local scope// function expression OR METHOD !getExp : function(){/* PARENT SCOPE : arrow function can also use to grab the local property it's parent or Developer Object, as it is use inside of METHOD, this way it have an access to it's parent PROPERTIES which is Developer Object. In addition arrow function can access the local scope properties of Object once it is INSIDE of Object METHOD instead of accessing the  GLOBAL PROPERTIES OR GLOBAL VARIABLE once arrow function is a METHOD.  PROPERTIES : yearsExperience : 6, otherExpertise : 2, */// arrow function inside of getExp method now can access local properties of Object Developer NOT GLOBAL SCOPE!constparentScope=()=>{letoE=this.otherExpertise;return('This is Parent scope arrow function works'+oE);// result 2}// Then finally invoke arrow function inside of METHOD getExpreturnparentScope();/* ---------------------------------------------------------------------------------------------------------- THIS APPROACH NOT WORK! const parentScope => function() { let oE = this.otherExpertise; return('This is Paretn scope arrow function works' + oE ); // result ERROR ! } ---------------------------------------------------------------------------------------------------------- THIS APPROACH IS WORK < Preserved the "this" keyword > OLD WAY BUT NOW AS ARROW FUNCTION! Preserved the "this" keyword, now can access local properties. This is alternative of arrow function (() => { ... }); const self = this; const parentScope => function() { let oE = self.otherExpertise; // instead of "this" use "self" return('This is Paretn scope arrow function works' + oE ); // result 2 } */}}console.log("Hey! "+Developer.getExp());// Read from local scope or Object Developer using arrow function inside the method.

// Result Hey!ThisisParentscopearrowfunctionworks2

// [ THIS MIGHT WRONG ] Factory Function that creates an object and returns it // Similar to Class and constructor// This approach is NOT recommend if the method or properties having a thousand unuse for other createDev// can't handle by mermory heap instead use Object.create() method.functioncreateDev(name,skills,experience){return{
name,// name: name, | If the property and argument is the same. 
skills,// skills: skills, | If the property and argument is the same.
experience,// experience: experience, | If the property and argument is the same.report(){return'Hi!, My name is '+name+' My skills are '+skills+' Yrs of experience '+experience;}}}

// [ THIS MIGHT WRONG ] Concole.log() | Result constniel=createDev('Niel','PHP, JS, C++',6);console.log(niel);// Result: {name: 'Niel', skills: 'PHP, JS, C++', experience: 6, report: ƒ}console.log(niel.report());// Result: Hi!, My name is Niel My skills are PHP, JS, C++ Yrs of experience 6

// [ THIS IS CORRECT ] Now you can select those Developer that was created by createDev() function// Select those who need a report to save a heap memory // The solution // Create a funtion that optional to be use from each devconstdevFunction={report(){return'Hi!, My name is '+this.name+' My skills are '+this.skills+' Yrs of experience '+this.experience;}}functioncreateDev(name,skills,experience){return{name: name,skills: skills,experience: experience,}}```JS// [ THIS IS CORRECT ]constniel=createDev('Niel','PHP, JS, C++',6);niel.report=devFunction.report;console.log(niel.report());// Result: Hi!, My name is Niel My skills are PHP, JS, C++ Yrs of experience 6

// Final !constdevFunction={report: function(){return'Hi!, My name is '+this.name+' My skills are '+this.skills+' Yrs of experience '+this.experience;}}functioncreateDev(name,skills,experience){newDev=Object.create(devFunction)newDev.name=name;newDev.skills=skills;newDev.experience=experience;returnnewDev// console.log( newDev.__proto__ );}constniel=createDev('Niel','PHP, JS, C++',6);console.log(niel.report());// Result: Hi!, My name is Niel My skills are PHP, JS, C++ Yrs of experience 6