배열로 함수형 프로그래밍하기

for문을 대체해서
forEach, map, filter, reduce, slice 등의 메소드를 이용해 배열을 원하는 형태로 만들기

.forEach() return값 ❌(undefined)
.map() return값 ⭕
.filter() return값 ⭕
.reduce() return값 ⭕

.forEach (callback);

// months는 객체3개가 담긴 배열
let months = [
  {monthname: 'Jan', season: 'Winter'},
  {monthname: 'April', season : 'Spring'},
  {monthname: 'July', season : 'Summer'}
];

monthname: 'Jan' monthname: 'April' monthname: 'July' 를 한번씩 출력하려면?

⇨ i) 반복문
⇨ ii) 함수형프로그래밍 .forEach(callback)

i) 반복문

for (let i =0; i <months.length; i++){
  'Month: ' + months[i]['monthname']; 
}

ii) 함수형프로그래밍 .forEach (callback)

// callback 함수를 정의한다.
function printmonth(month){
  // 반복실행하는 대상을 함수의 parameter로
  // ⇨ months의 하나하나를 돌 것이니까 month로 이름지었다.
  'Month: '+ month.monthname;
}

months.forEach(printmonth);

let result = [];
let array = [1,2,3,4,5];
array.forEach (function(ele){
  result.push(ele);
});

result;   //(5) [1,2,3,4,5]

.map(callback) vs .forEach(callback)

Q. ['Jan', 'April', 'July'] 를 결과로 출력하려면?

let months = [
  {monthname: 'Jan', season: 'Winter'},
  {monthname: 'April', season : 'Spring'},
  {monthname: 'July', season : 'Summer'}
];

i) 반복문

let montharray = [];

for (let i = 0; i < months.length; i++){
  montharray.push(months[i].monthname);
}

ii) .map(callback)

function getName(month){
  return month.monthname;
}

getName({monthname: 'Jan', season: 'Winter'});   //'Jan'
months.map(getName);   //(3) ["Jan", "April", "July"]

기존의 array와 길이는 같으나 형태가 다른경우 유용하게 사용
새로운 배열을 리턴, 📌 Immutable

iii) .forEach(callback)

// 리턴값이 없기 때문에 빈 배열을 만들어서 push하는 과정이 필요하다.
let montharray = [];

function pushName(month){
  montharray.push(month.monthname);
}

months.forEach(pushName);
montharray;   //(3) ["Jan", "April", "July"]

let array = [1,2,3,4,5];
let result = array.map(function (ele){
  return ele;
});
result;   //(5) [1,2,3,4,5]

array.map(function (ele){
  if(ele % 2 === 1){
    return ele;
  }
});   //(5) [1, undefined, 3, undefined, 5]

.filter(callback);

조건에 따라 걸러내기

Q. [12, 3, 6]를 결과로 출력하려면?

let months = [
  {season: 'Winter', monthname: 'Jan', start: 12},
  {season: 'Spring', monthname: 'April', start: 3},
  {season: 'Summer', monthname: 'July', start: 6}
];

i) 반복문

let searchResults = [];
for(let i=0; i<months.length; i++) {
  //5월보다 숫자가 큰 계절을 찾는다
  //숫자가 크면 searchResult에 담는다
  if(months[i].start > 5){
    searchResults.push(months[i])
  }
}
searchResults;   //(2) [{...}, {...}]
//0: {season: "Winter", monthname: "Jan", start: 12}
//1: {season: "Summer", monthname: "July", start: 6}

iii) .filter ( 조건이 들어간 callback )

filter는 항상 조건이 필요하다.
return 필요 리턴값은 새로운 배열 📌 Immutable

function moreThan5(month){
  return month.start > 5;
  //이 조건에 대한 결과를 리턴
}
months.filter(moreThan5);   //(2) [{...}, {...}]


function includesI(month){
  return month.season.indexOf('i') !== -1;
}
months.filter(includesI);   //(2) [{…}, {…}]
//0: {season: "Winter", monthname: "Jan", start: 12}
//1: {season: "Spring", monthname: "April", start: 3}

.reduce(function(acc누적값, cur현재값){ });

배열의 축소 (배열을 문자열,숫자,객체로)
리듀서 : 배열을 하나의 값으로 만드는 함수

return 값이 필요하고 다음번 리듀서 호출 시, 첫번째 parameter로 전달
리턴값 : 리듀서가 마지막으로 리턴하는 값 , 📌 Immutable

• 배열에서 문자열로
  Q. 'Tim, Satya, Sundar'를 출력하려면?

i) 반복문

'' + users[0].name + ', ' + users[1].name + ', ' + users[2].name
//'Tim, Satya, Sundar'

let resultString = '';
for (let i=0; i<users.length; i++){
  resultString = resultString + users[i].name + ', ';
}
resultString;
//'Tim, Satya, Sundar, ' 와비슷하게만들어진다

ii) .reduce (function(acc, cur){ })

function joinName(resultstr, user){
  //accumulator: 누적시켜만들고싶은 결과str
  //currentvalue:users를 한번한번 iterate하는 값
  resultstr = resultstr + user.name + ', ';
  //''+ 'Tim'+', '
  //'Tim, ' +'Satya' + ', ' ..
  return resultstr;  //다음번 acc값으로 써야하므로 반드시 return 해야한다
}

users.reduce(joinName, '');

• 배열에서 객체로
  Q. 이름의 앞자리로 분류한 객체를 만드려면?
  원하는 결과값

{
	T: [{name: 'Tim', city: 'Seoul'}], 
	S: [
      {name: 'Satya', city: 'Seoul'},
 		 {name: 'Sundar', city: 'Los Angeles'}
    ]
}

let users = [
  {name: 'Tim', city: 'Seoul'},
  {name: 'Satya', city: 'Seoul'},
  {name: 'Sundar', city: 'Los Angeles'}
];

// 시작
let addressbook = {};
addressbook['T'] = [];
addressbook['S'] = [];
//만일 key가 없으면 해당배열을 만들고 사람을 추가
//만일 key가 있으면 해당배열에 사람을 추가한다.
// addressbook;   // { T: [], S: [] }

function makeAddressBook(addressbook, user){
  //이름의 첫번째 글자로 색인 만들기
  let firstLetter = user.name[0]; // 'T','S','S'
  if (firstLetter in addressbook){  // key가 있으면
    addressbook[firstLetter].push(user);
  }else{ // key가 없으면 : 맨 처음 추가되는 색인인 경우
    addressbook[firstLetter] = []; 
    addressbook[firstLetter].push(user);
  }
  return addressbook;
}

users.reduce(makeAddressBook, {});  //원하는 결과출력

//지정값이 없을 때
let array = [1,2,3,4,5];
let sum = array.reduce(function(acc,cur){
  return acc + cur;
});
sum;   //15
/* 첫번째실행 ->acc에는 초기값이 들어간다 cur에는 2가들어간다 sum = 3
두번째실행 ->acc에는 3, cur에는 3 -> sum = 6
~ 네번째실행 ->acc에는 10, cur에는 5 -> sum = 15 */

//지정값array[0]이 주어졌을 때
let array = [1,2,3,4,5];
let sum = array.reduce(function(acc,cur){
  return acc + cur;
}, array[0]);
sum;
>16
/* 첫번째실행->acc에는 지정값array[0]인 1이 들어간다 cur에는 1이 들어간다 sum = 2
두번째실행->acc에는 2, cur에는 2 -> sum = 4
~ 다섯번째실행 ->acc에는 11, cur에는 5 -> sum = 16

함수형 프로그래밍의 특징

명령형 프로그래밍: 어떻게 할 것인가(How)
선언형, 함수형 프로그래밍: 무엇을 할 것인가(What)

상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용을 강조하는 패러다임

• 하나의 함수는 한가지 작업에 집중
• 재사용성을 위한 고차 함수

함수는 값으로 취급되기 때문에 다른함수의 인자로도 전달될 수 있다.