A blog dedicated to Salesforce Ohana

Quick Reference of Arrow Function in JavaScript


Arrow functions were introduced with ES6 as a new way of writing JavaScript functions. This post will cover basic syntax of Arrow functions, common use cases.

What is Arrow Functions?

Arrow functions, sometimes referred as Fat Arrow is a new concise way of writing functions. They utilize a new syntax, => which looks like Fat Arrow. Arrow functions are anonymous and change the way this binds in functions. By using arrow functions, we can avoid typing function and return keyword and also curly brackets.

Basic Syntax of Arrow Function with Multiple Parameters

const multiplyFunction = (x,y) => (x*y);
console.log(multiplyFunction(5,6));

You can execute the code here.

Syntax of Arrow Function with Single Parameter

const splitString = text => text.split(" ");
console.log(splitString("My name is Sudipta Deb"));

You can execute the code here.

Syntax of Arrow Function with No Parameter

const functionWithNoParam = () => {
  console.log('This function with no parameter');
}

functionWithNoParam();

You can execute the code here.

Syntax of Arrow Function with Object return

Arrow functions can be used to return an object literal expressions. 
var funcWithObject = (empName, empNumber) => ({
  empName : empName,
  empNumber : empNumber
});
console.log(funcWithObject("Sudipta Deb",101));

Here is the output
[object Object] {
  empName : "Sudipta Deb",
  empNumber : 101
}

You can execute the code here.

Use Cases for Arrow Functions

One very common use case for Arrow function is Array manipulation. In the below example, each array items will be converted to upper case.

const countries = ['India', 'Canada', 'Switzerland', 'Germany'];
const countriesWithCaps = countries.map(country => country.toUpperCase());

console.log(countriesWithCaps);

You can execute the code here.

Another little advanced example is when you want to return something from array which meets the criteria. So in the below example, I would like to return only those tasks which is completed.

const myTasks = [{
  description: "Write Blog Post",
  status: "Completed"
}, {
  description: "Study Architect Certification",
  status: "Pending"
}, {
  description: "Go for walk",
  status: "Completed"
}];

const completedTask = myTasks.filter((myTask) => myTask.status === 'Completed');

console.log(completedTask);

You can execute the code here.

Now if I want to just print the description instead of everything, we can use another Arrow Function to do that like below

const myTasks = [{
  description: "Write Blog Post",
  status: "Completed"
}, {
  description: "Study Architect Certification",
  status: "Pending"
}, {
  description: "Go for walk",
  status: "Completed"
}];

const completedTask = myTasks.filter((myTask) => myTask.status === 'Completed');
completedTask.forEach(singleTask => console.log(singleTask.description));

You can execute the code here.

Promises and Callback

Promises make it easier to manage async code. This is the perfect situation to use Arrow function. Here is the syntax

this.doSomething().then((result)=>{
  this.handleResult(result);
});

Places not to use Arrow Function

Let's consider the below object which is having one method describeMe() which is returning a String. 

const Car = {
  brand : 'Honda',
  price : 132000,
  describeMe : function(){
    return `I am ${brand} car with price ${price}`;
  }
}

console.log(Car.describeMe());

If you execute the above code, you will get undefined error while accessing brand and price. To solve that, let's use This now to bind brand and price with the Car object context. So now the code looks like -

const Car = {
  brand : 'Honda',
  price : 132000,
  describeMe : function(){
    return `I am ${this.brand} car with price ${this.price}`;
  }
}

console.log(Car.describeMe());

And this time you will see the correct message. You can execute the code here.
Now if you think of replacing describeMe function with Arrow function, it will look like below -

const Car = {
  brand : 'Honda',
  price : 132000,
  describeMe : () => `I am ${this.brand} car with price ${this.price}`
}

console.log(Car.describeMe());

But this time you will get again the undefined error. Why???
This keyword is bound to different values based on the context in which it is called. With Arrow Function, it is little different. Here This is lexically bound i.e. it uses this from the code that contains the arrow function. So Arrow Function should not be used in Object methods.

Wrapping up

Arrow function is a great addition to JavaScript language and with this for concise code can be written.

Further Reading

Share:

1 comment:

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (105) Apex (44) admin (27) ADM (20) visualforce (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) SOAP (13) lightning (12) tutorial (11) Certification. (9) javascript (8) Trigger (7) test class (7) unit testing (7) Sharing and Visibility (6) design pattern (6) report (6) salesforce release (6) security (6) trailhead (6) Advanced Admin (5) Certification (5) Kitchener Developer Group (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) developer (5) formula (5) mobile (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) Salesforce DX (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Advanced Apex (3) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) Role (3) Sales Cloud (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Tips (3) Web Technology (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Bulkify (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) Kitchener User Group (2) Lightning Design System (2) Live Agent (2) Metadata (2) Price Book (2) REST (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Asynchronous callout (1) Aura Framework (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Community (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) Custom Metadata (1) Custom Object (1) Customer (1) Decorator Design Pattern (1) Dev Hub (1) Diwali (1) Email (1) FSC (1) Function (1) Goals (1) Guide (1) Household (1) Ideas (1) Improvement (1) KPIs (1) Large Data Volume (1) LastModifiedDate (1) Lightning Web Component (1) Manual Sharing (1) Metrics (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Presentation (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) QuickReference (1) Reports (1) Retrieve (1) Role Hierarchy (1) SFDX (1) Salesforce Optimizer (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) User License (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Total Subscribers

Total Pageviews