2019-05-20 배열고차함수 , 정규표현식, 화살표함수

배열 고차 함수

 

자바스크립트 함수는 객체이다.

함수를 인수로 전달할 수 도 있으며, 리턴 값으로 함수를 받을 수 있다.

따라서 함수형 프로그래밍가능

멀티패러다임 프로그래밍 언어로써, 절차지향 객체지향 함수지향 다 가능하다.

 

고차함수는 함수형 프로그래밍언어로써의 개념이다.

 

함수는 정의와 동시에 상위스코프가 결정된다.(= 렉시컬스코프)

 

함수는 자신의 상위스코프를 언제나 들고다닌다(기억한다)

function makeCounter(predicate) {
  // 자유 변수. num의 상태는 유지되어야 한다.
  let num = 0;
  // 클로저. num의 상태를 유지한다.
  return function () {
    // predicate는 자유 변수 num의 상태를 변화시킨다.
    num = predicate(num);
    return num;
  };
}

그래서 상위스코프가 소멸해도 리턴값의 함수가 num을 기억하고 다닌다.

 

함수를 인수로 전달 받거나, 함수를 리턴하는 것 or 함수를 인수로전달받으면서 리턴하는 함수 = 고차함수

내부함수를 외부에서 주입하는 것 

 

고차함수는 불변성을 추구한다. 모든게 안바꼈으면 좋겠다.(외부상태가) 

함수를 만들때 외부상태가 안바뀌도록 노력하자.(이것을 추구한다.) 

 = 외부상태의 의존성이 없다. 

 

함수형 프로그래밍은 결국 순수 함수를 통해 부수 효과(Side effect)를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 한 방법

 

숫자 오름차순, 내림차순 sort로 하는 법.

// 숫자 배열 오름차순 정렬
// 비교 함수의 반환값이 0보다 작은 경우, a를 우선하여 정렬한다.
points.sort(function (a, b) { return a - b; });
// ES6 화살표 함수
// points.sort((a, b) => a - b);
console.log(points); // [ 1, 2, 5, 10, 25, 40, 100 ]

// 숫자 배열에서 최소값 취득
console.log(points[0]); // 1

// 숫자 배열 내림차순 정렬
// 비교 함수의 반환값이 0보다 큰 경우, b를 우선하여 정렬한다.
points.sort(function (a, b) { return b - a; });
// ES6 화살표 함수
// points.sort((a, b) => b - a);
console.log(points); // [ 100, 40, 25, 10, 5, 2, 1 ]

// 숫자 배열에서 최대값 취득
console.log(points[0]); // 100

 

const numbers = [1, 2, 3];

const pows = [];

numbers.forEach((item) => { // numbers안에 요소 수 만큼 돈다.
  pows.push(item ** 2);
});

console.log(pows);

reduce 약간 sum 느낌.

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

/*
previousValue: 이전 콜백의 반환값
currentValue : 배열 요소의 값
currentIndex : 인덱스
array        : 메소드를 호출한 배열, 즉 this
*/
const sum = arr.reduce(function (previousValue, currentValue, currentIndex, self) {
  console.log(previousValue + '+' + currentValue + '=' + (previousValue + currentValue));
  return previousValue + currentValue; // 결과는 다음 콜백의 첫번째 인자로 전달된다
});

console.log(sum); // 15: 1~5까지의 합
/*
1: 1+2=3
2: 3+3=6
3: 6+4=10
4: 10+5=15
15
*/

const max = arr.reduce(function (prev, cur) {
  return prev > cur ? prev : cur;
});

console.log(max); // 5: 최대값

 

정규표현식을 사용하는 자바스크립트 메소드는 RegExp.prototype.exec, RegExp.prototype.test, String.prototype.match, String.prototype.replace, String.prototype.search, String.prototype.split 등이 있다.

FlagMeaningDescription

i	Ignore Case	대소문자를 구별하지 않고 검색한다.
g	Global	문자열 내의 모든 패턴을 검색한다.

 

화살표 함수

 

화살표함수는 한줄인 함수이길 기대함.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

 

화살표함수는 this, arguments, constructor 다 없음.

 

 

... 은 2가지 종류이다.

 

파라미터에 ... 이면 rest 파라미터이고

 

연사자로써 ... 이 있따. (spread연산자)

// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]) // 1, 2, 3

// 문자열은 이터러블이다.
console.log(...'Hello');  // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']]));  // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3]));  // 1 2 3

// 이터러블이 아닌 일반 객체는 Spread 연산자의 피연산자가 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

 

   ...rest는 분리된 요소들을 함수 내부에 배열로 전달한다. */
function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3 ]
}
foo(1, 2, 3);

/* Spread 연산자를 사용한 인수
  배열 인수는 분리되어 순차적으로 매개변수에 할당 */
function bar(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}

// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(-> 1, 2, 3)
// spread 연산자에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
bar(...[1, 2, 3]);