[Javascript] 고차함수 메소드

고차함수 : 인자를 함수로 받거나 함수를 반환하는 함수를 고차함수라고 한다.

• 전달받은 인자를 통해서 함수의 특정한 연산이나 일을 수행한 다음 새로운 값을 리턴( 이것을 함수 내부에서 사이드 이펙트를 없게 만들어 낸다는 뜻)
• 함수 내부에서는 외부에 상태를 변경하지 않으며, 이렇게 순수 함수로 만들어짐으로써 에러를 줄이고 가독성을 높일 수 있음
• 데이터를 변경하지 않아도됨
• 변수 사용 x
• 조건문과 반복문을 사용 안해도됨

- forEach() : 각 요소를 인자로 콜백함수 실행

• 💡 for문의 좋은 대체제
• ⚠️ 단점 : 예외를 던지지 않으면 종료할 수 없음 - break, continue 사용 불가(for of사용해야함)

const arr = [1, 2, 3, 4, 5];
const result = arr.forEach(itm => {  
	console.log(itm); 
});

// 💡 결과로는 undefined 반환 - 실행 자체를 위한 메서드
console.log('반환값:', result); //undefined

const arr = [1, 2, 3, 4, 5];
// 현존하는 함수를 인자로 - 💡 결과 살펴볼 것
arr.forEach(console.log);
( 현재 값, 현재 값의 인덱스, 해당 배열 )
1 0 (5) [1, 2, 3, 4, 5]
2 1 (5) [1, 2, 3, 4, 5]
3 2 (5) [1, 2, 3, 4, 5]
4 3 (5) [1, 2, 3, 4, 5]
5 4 (5) [1, 2, 3, 4, 5]


const arr = [10, 20, 30, 40, 50];
// 콜백함수의 인자가 둘일 때
arr.forEach((itm, idx) => {  
	console.log(itm, idx); 
	//10 0 
	//20 1
	//30 2
	//40 3
	//50 4											
});

const logWithIndex = (itm, idx) => {  
	console.log([${idx}]: ${itm});
}
	arr.forEach(logWithIndex);

const arr = [1, 2, 3, 4, 5];

// 콜백함수의 인자가 셋일 때
arr.forEach((itm, idx, arr) => {  
// 💡 세 번째 인자는 원본 배열의 참조임  
	arr[idx]++;  
	console.log(itm);
	//itm은 해당 배열 복상한값
	//arr은 실제 배열을 바라보고있
});

// 이런 식으로 원본을 수정해버릴 수 있음
console.log(arr); //[2,3,4,5,6,]

 

- map() : 열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

const arr = [1, 2, 3, 4]

let result = arr.map(num => num * 2)

console.log(result);// [2, 4, 6, 8]

 

- find, findLast, findIndex, findLastIndex : 주어진 기준으로 검색

• find - 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환
• findLast - 주어진 판별 함수를 만족하는 마지막 요소의 값을 반환
• findIndex - 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스 값을 반환
• findLastIndex - 주어진 판별 함수를 만족하는 마지막 요소의 인덱스 값을 반환

const arr = [1, 2, '삼', 4, 5, 6, '칠', 8, 9];

const isString = i => typeof i === 'string';
const isBoolean = i => typeof i === 'boolean';

console.log(
  arr.find(isString), //삼
  arr.findLast(isString), //칠
  arr.findIndex(isString), //2
  arr.findLastIndex(isString) //6
);

// 없을 시 값은 undefined, 인덱스는 -1 반환
console.log(
  arr.find(isBoolean), //undefined
  arr.findLast(isBoolean), //undefined
  arr.findIndex(isBoolean), //-1
  arr.findLastIndex(isBoolean) //-1
);

 

- filter() : 주어진 기준을 충족하는 요소들로 새 배열 만들어 반환

const arr = ['hi', 'hello', 'abcde']

let result = arr.filter(word => word.length > 3)

console.log(result);
// result = ['hello', 'abcde'] => 새로운 배열 return

 

- some() / every()

• some - 요소들 중 하나라도 true를 반환하는가 여부 반환
• every - 모든 요소가 true를 반환하는가 여부 반환

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(
  arr.some(i => i % 2),
  arr.every(i => i % 2),
  arr.some(i => i < 0),
  arr.every(i => i < 10)
);

 

- reduce() : 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환

• 콜백함수 - 인자: ( 이전값, 현재값, 현재 인덱스, 해당 배열 )
• 초기화 값 : default value가 설정되어있지않으면 배열의 첫 번째 요소를 디폴트 값으로 함

 

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(
  arr.reduce((prev, curr, idx) => {
    console.log(`p: ${prev}, c: ${curr}, i: ${idx}`);
    return prev + curr;
  })
);

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(
  arr.reduce((prev, curr, idx) => {
    console.log(`p: ${prev}, c: ${curr}, i: ${idx}`);
    return prev + curr;
  }, 10)
);

//초기 값이 있을 때는 인덱스가 0부터 시작​

 

- reduceRight은 인덱스도 거꾸로 진행

 

- sort()  : 배열요소를 원하는 정렬 순서로 변경

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


/* 숫자 배열을 오름차순으로 정렬하는 예시
   => 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(alphabetically, 알파벳 순)
   => 문자열처럼 취급하여 오름차순 정렬함 */
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // Array [1, 100000, 21, 30, 4] //문자열처럼 취급하여 오름차순 정렬


const numbers=[0,5,4,1,2];
numbers.sort((a,b) => a - b); //오름차순
numbers.sort((a,b) => b - a); //내림차순
반환 값 < 0 : a가 b보다 앞에 있어야 한다.
반환 값 = 0 : a와 b의 순서를 바꾸지 않는다.
반환 값 > 0 : b가 a보다 앞에 있어야 한다.