Minimal functional programming concepts in JavaScript

 

Muhammad Ahsan Ayaz

Sorry? WHAT THE FUnctional?

Sorry? WHAT THE FUnctional?

Imperative Style

const prefix = "Hello"

const greet = (string) => {
  return `${prefix} ${string}`;
}

console.log(hello('Ahsan!'))

Imperative Style

const prefix = "Hello"

const greet = (string) => {
  return `${prefix} ${string}`;
}

console.log(hello('Ahsan!'))

Imperative Style

const prefix = "Hello"

const greet = (string) => {
  return `${prefix} ${string}`;
}

console.log(hello('Ahsan!'))

Imperative Style

const prefix = "Hello"

const greet = (string) => {
  return `${prefix} ${string}`;
}

console.log(hello('Ahsan!'))

Imperative Style

const prefix = "Hello"

const greet = (string) => {
  return `${prefix} ${string}`;
}

console.log(hello('Ahsan!'))

Imperative Style

const prefix = "Hello"

const greet = (string) => {
  return `${prefix} ${string}`;
}

console.log(hello('Ahsan!'))

--> Hello Ahsan!

Imperative Style

Functional Style

const greet = (string) => {
  return `Hello ${string}`;
}

console.log(hello('Ahsan!'))

--> Hello Ahsan!

Functional Style

const greet = (string) => {
  return `Hello ${string}`;
}

console.log(hello('Ahsan!'))

--> Hello Ahsan!

Functional Style

Pure & Impure Functions

Pure Functions

Input X

Output Y

Pure Function

Pure Functions

const greet = (string) => {
  return `Hello ${string}`;
}

console.log(hello('Ahsan!'))

--> Hello Ahsan!

Impure Functions

const calculatePrice = (basePrice) => {
  return Math.random() + basePrice;
}
console.log(calculatePrice(27))
--> 27.303620585036192
console.log(calculatePrice(27))
--> 27.865581674656237

Impure Functions

const calculatePrice = (basePrice) => {
  return Math.random() + basePrice;
}
console.log(calculatePrice(27))
--> 27.303620585036192
console.log(calculatePrice(27))
--> 27.865581674656237

Impure Functions

const calculatePrice = (basePrice) => {
  return Math.random() + basePrice;
}
console.log(calculatePrice(27))
--> 27.303620585036192
console.log(calculatePrice(27))
--> 27.865581674656237

Impure Functions

const calculatePrice = (basePrice) => {
  return Math.random() + basePrice;
}
console.log(calculatePrice(27))
--> 27.303620585036192
console.log(calculatePrice(27))
--> 27.865581674656237

Impure Functions

const userExists = (user) => {
  return users.find((userItem) => {
    return user.id === userItem.id;
  });
}
const myUser = {id: 2, name: 'Scott'}
console.log(userExists(myUser))

Impure Functions

const userExists = (user) => {
  return users.find((userItem) => {
    return user.id === userItem.id;
  });
}
const myUser = {id: 2, name: 'Scott'}
console.log(userExists(myUser))

Impure Functions

const userExists = (user) => {
  return users.find((userItem) => {
    return user.id === userItem.id;
  });
}
const myUser = {id: 2, name: 'Scott'}
console.log(userExists(myUser))

Impure Functions

const userExists = (user) => {
  return users.find((userItem) => {
    return user.id === userItem.id;
  });
}
const myUser = {id: 2, name: 'Scott'}
console.log(userExists(myUser))

Impure Functions

const users = [{
  name: 'Adam', school: 'City Cliff'
}, {
  name: 'Scott', school: 'City Cliff'
}, {
  name: 'Smith', school: 'Beacon House'
}]
const usersCount = (school) => {
  users = users.filter((userItem) => {
    return user.school === school;
  });
  return users.length;
}
console.log(usersCount('City Cliff'))
--> 2

Impure Functions

const users = [{
  name: 'Adam', school: 'City Cliff'
}, {
  name: 'Scott', school: 'City Cliff'
}, {
  name: 'Smith', school: 'Beacon House'
}]
const usersCount = (school) => {
  users = users.filter((userItem) => {
    return user.school === school;
  });
  return users.length;
}
console.log(usersCount('City Cliff'))
--> 2

Impure Functions

let users = [{
  name: 'Adam', school: 'City Cliff'
}, {
  name: 'Scott', school: 'City Cliff'
}, {
  name: 'Smith', school: 'Beacon House'
}]
const usersCount = (school) => {
  users = users.filter((userItem) => {
    return user.school === school;
  });
  return users.length;
}
console.log(usersCount('City Cliff'))
--> 2

Use Higher Order Functions

const percentify = (percent) => {
  return function (val) {
    return (val / 100) * percent; 
  }
}
const percentify = (percent) => {
  return function (val) {
    return (val / 100) * percent; 
  }
}
const percentify = (percent) => {
  return function (val) {
    return (val / 100) * percent; 
  }
}
const percentify = (percent) => {
  return function (val) {
    return (val / 100) * percent; 
  }
}
const percentify = (percent) => {
  return function (val) {
    return (val / 100) * percent; 
  }
}

Use map, reduce and filter etc

const cats = []
for (let i = 0, len = animals.length; i < len; ++i) {
  if (animals[i].species === 'cat') {
    cats.push(animals[i])
  }
}
// const cats = []
// for (let i = 0, len = animals.length; i < len; ++i) {
//   if (animals[i].species === 'cat') {
//     cats.push(animals[i])
//   }
// }

const cats = animals.filter(animal => animal.species === 'cat')
// const cats = []
// for (let i = 0, len = animals.length; i < len; ++i) {
//   if (animals[i].species === 'cat') {
//     cats.push(animals[i])
//   }
// }

const isCat = (animal) => animal.species === 'cat'

const cats = animals.filter(animal => isCat(animal))
// const cats = []
// for (let i = 0, len = animals.length; i < len; ++i) {
//   if (animals[i].species === 'cat') {
//     cats.push(animals[i])
//   }
// }

const isCat = (animal) => animal.species === 'cat'

const cats = animals.filter(animal => isCat(animal))

Avoid mutation

const students = [{
  name: 'Ahsan',
  age: 29
}
...]

const studentsAgeReduced = students.map(student => {
  student.age = student.age - 4;
  return student;
})

console.log(studentsAgeReduced)
const students = [{
  name: 'Ahsan',
  age: 29
}
...]

const studentsAgeReduced = students.map(student => {
  student.age = student.age - 4;
  return student;
})

console.log(studentsAgeReduced)
const students = [{
  name: 'Ahsan',
  age: 29
}
...]

const studentsAgeReduced = students.map(student => {
  return {
    ...student,
    age: student.age - 4
  };
})

console.log(studentsAgeReduced)

COMPOSE DEM FUNCTIONZZ

Thank You !

Senior Software Engineer

Klarna