Javascript 고차함수 정리

출처

• MDN 문서

• 문서에 있는 내용을 정리해봤습니다.

왜 써야하는데요?!!

필요성을 설명 안해도 될 것 같아요. 왜냐면 미션1 자동차 게임 미션을 하면서 다들 느끼셨을 것 같기 때문이죠!

• 코드가 정말 깔끔해지고 `가독성이 좋아저요.

• 코드가 짧아지다보니 휴먼 에러가 줄어듭니다.

한 번 살펴보죠!

• 명령형

  for(let i = 0 ; i <10;i++){
    ...
  }

• 선언형

function double (arr) { 
return arr.map((item) => item * 2) 
}

• 컴퓨터의 내부 연산에 대해 고민할 필요 없이 코드만 작성하면 프로그램을 만들 수 있으므로 생산성을 향상시킬 수 있어요.
  • 추상화 라고 표현하던데 어려우니 패스!
• let 어쩌구.. 이런거 하다가 실수가 나는 겁니다! 그러니 명령형을 지양하고 선언형으로 가보자구요~

💪일급 객체란?

자바스크립트에서 함수는 특별하게 취급해요.

- 변수에 할당(assignment)할 수 있다.
- 다른 함수의 인자(argument)로 전달될 수 있다.
- 다른 함수의 결과로서 리턴될 수 있다

• 간단히 말하자면, 함수를 변수로 취급할 수 있다는 말이예요.

💪고차 함수란?

함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말해요.

• 만약 함수 A의 인자가 함수 B라면 함수 B는 콜백함수라고 말해요.

// 함수 doubleNum은 func라는 함수를 인자로 받는 고차 함수예요.
function doubleNum(func, num){
	...
  return func(num);
}
// func는 콜백함수예요.

💪정말 정말 유용한 내장 고차함수 정리

• 고민할 사항
  • return 값이 뭘까?
  • 얕은/깊은 복사?

Array.forEach()

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

• return : 없음
• 반복문을 추상화했다고 생각하시면 됩니다.
• for문과는 다르게 break, continue를 사용할 수 없어서 배열의 모든 요소를 중단없이 순회한다는 특징을 갖고 있어요.

const array=[5,10,15];

array.forEach((x,i,t)=>{
    console.log(x,i,t)
});

// 출력
// 배열 값, 인덱스, 배열 전체
// 5 0 [5, 10, 15]
// 10 1 [5, 10, 15]
// 15 2 [5, 10, 15]

Array.map()

arr.map(callback(currentValue[, index[, array]])[, thisArg])

• return : 배열
• immutable입니다. 즉, 원본 배열은 변함이 없습니다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// 출력
// [2, 8, 18, 32]
// 원본 배열 array1은 변하지 않아요.

Array.join()

arr.join([separator])

• return : 문자열
• 배열 요소를 연결하여 문자열로 반환해요.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Array.reduce()

arr.reduce(callback[, initialValue])

• callback의 인자는 총 4개까지 가능해요.
  • accumulator : 누적되는 값
  • currentValue : 현재 값
  • currentIndex : 현재 인덱스( initialValue가 없으면 1부터 시작해요.)
  • Array : 원래 배열
• return : 숫자
• 내장 고차함수 중에서 제일 어려운 것 같아요.😂😂

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

• 근데 만약 2번째 인자로 initialValue를 주게되면 accumulator값이 initalValue부터 시작하게 되고, currentIndex는 0부터 시작하게 됩니다.

Array.sort()

arr.sort([compareFunction])

• 원래 배열을 정렬해요.
• [compareFunction]을 통해 비교함수를 설정할 수 있습니다.
• 숫자에 있어서도 정렬은 유니코드를 따릅니다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

• 숫자 정렬은 이렇게!

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

Array.some()

arr.some(callback[, thisArg])

• return : true / false
• 빈 배열이면 무조건 false를 반환해요.

const array = [1, 2, 3, 4, 5];
// array의 요소 중 하나라도 짝수라면 true를 반환합니다.
const result = array.some((element) => element % 2 === 0);

console.log(result);
// expected output: true

[2, 5, 8, 1, 4].some(elem => elem > 10);  // false
[12, 5, 8, 1, 4].some(elem => elem > 10); // true

Array.every()

• return : true / false
• 배열의 모든 요소가 주어진 콜백 함수를 통과하면 true를 반환합니다.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

Array.includes()

arr.includes(*valueToFind*[, *fromIndex*])

• fromIndex : Optional
  • 이 배열에서 검색을 시작할 위치입니다.
  • 음의 값은 array.length + fromIndex부터 검색을 시작합니다.
• return : true / false
• 배열이 특정 요소를 포함하고 있는지 판별합니다.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

Array.find()

• return : 배열 내부의 특정 요소
• 콜백 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
• 만족하는 요소가 없으면 undefined를 반환합니다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

Array.filter()

• return : 배열
• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

반복문 꿀팁

// 비추입니다!
for(let i = 1; i <= 100; i++){
	...
}

• 아래처럼 map으로 배열을 만들어보는 건 어떨까요?

// 편-안
Array(100).fill().map((x,i) => i+1).forEach((el,idx)=>{
	...
})

이건 고차함수는 아닌데 유용해서 넣어봤어요.

String.repeat()

str.repeat(count);

• return : 문자열
• 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.