輸入→處理→輸出
Functional Programming is another popular approach to software development. In Functional Programming, code is organized into smaller, basic functions that can be combined to build complex programs.
In this course, you’ll learn the core concepts of Functional Programming including pure functions, how to avoid mutations, and how to write cleaner code with methods like .map() and .filter().
Functional programming is a style of programming where solutions are simple, isolated functions, without any side effects outside of the function scope: INPUT -> PROCESS -> OUTPUT
Functional programming is about:
- Isolated functions – there is no dependence on the state of the program, which includes global variables that are subject to change
- Pure functions – the same input always gives the same output
- Functions with limited side effects – any changes, or mutations, to the state of the program outside the function are carefully controlled
Learn About Functional Programming
// Function that returns a string representing a cup of green tea
const prepareTea = () => ‘greenTea’;
/*
Given a function (representing the tea type) and number of cups needed, the
following function returns an array of strings (each representing a cup of
a specific type of tea).
*/
const getTea = (numOfCups) => {
const teaCups = [];
for(let cups = 1; cups <= numOfCups; cups += 1) {
const teaCup = prepareTea();
teaCups.push(teaCup);
}
return teaCups;
};
// Only change code below this line
const tea4TeamFCC = getTea(40);
// Only change code above this line
console.log(tea4TeamFCC);
得到結果為字串含有40個’greenTea’
Understand Functional Programming Terminology
// Function that returns a string representing a cup of green tea
const prepareGreenTea = () => ‘greenTea’;
// Function that returns a string representing a cup of black tea
const prepareBlackTea = () => ‘blackTea’;
/*
Given a function (representing the tea type) and number of cups needed, the
following function returns an array of strings (each representing a cup of
a specific type of tea).
*/
const getTea = (prepareTea, numOfCups) => {
const teaCups = [];
for(let cups = 1; cups <= numOfCups; cups += 1) {
const teaCup = prepareTea();
teaCups.push(teaCup);
}
return teaCups;
};
// Only change code below this line
const tea4GreenTeamFCC = getTea(prepareGreenTea, 27);
const tea4BlackTeamFCC = getTea(prepareBlackTea, 13);
// Only change code above this line
console.log(
tea4GreenTeamFCC,
tea4BlackTeamFCC
);
Understand the Hazards of Using Imperative Code
了解這兩者的差異 splice() vs slice()
// tabs is an array of titles of each site open within the window
const Window = function(tabs) {
this.tabs = tabs; // We keep a record of the array inside the object
};
// When you join two windows into one window
Window.prototype.join = function(otherWindow) {
this.tabs = this.tabs.concat(otherWindow.tabs);
return this;
};
// When you open a new tab at the end
Window.prototype.tabOpen = function(tab) {
this.tabs.push(‘new tab’); // Let’s open a new tab for now
return this;
};
// When you close a tab
Window.prototype.tabClose = function(index) {
// Only change code below this line
const tabsBeforeIndex = this.tabs.slice(0, index); // Get the tabs before the tab
const tabsAfterIndex = this.tabs.slice(index + 1); // Get the tabs after the tab
this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together
// Only change code above this line
return this;
};
// Let’s create three browser windows
const workWindow = new Window([‘GMail’, ‘Inbox’, ‘Work mail’, ‘Docs’, ‘freeCodeCamp’]); // Your mailbox, drive, and other work sites
const socialWindow = new Window([‘FB’, ‘Gitter’, ‘Reddit’, ‘Twitter’, ‘Medium’]); // Social sites
const videoWindow = new Window([‘Netflix’, ‘YouTube’, ‘Vimeo’, ‘Vine’]); // Entertainment sites
// Now perform the tab opening, closing, and other operations
const finalTabs = socialWindow
.tabOpen() // Open a new tab for cat memes
.join(videoWindow.tabClose(2)) // Close third tab in video window, and join
.join(workWindow.tabClose(1).tabOpen());
console.log(finalTabs.tabs);
Avoid Mutations and Side Effects Using Functional Programming
Pass Arguments to Avoid External Dependence in a Function
Refactor Global Variables Out of Functions
Not PassedUse the map Method to Extract Data from an Array
Not PassedImplement map on a Prototype
Not PassedUse the filter Method to Extract Data from an Array
留言