Day07 학습정리

JS는 진짜 너무 자유로워서 불안하지만, 그만큼 편하게 처리할 수 있는 것이 많아서 좋다.

 

함수형 프로그래밍

---

함수형 프로그래밍 원칙

• 입출력이 순수해야한다.
• 부작용이 없어야 한다.
• 함수와 데이터를 중점으로 생각행야 한다.

순수함수란?

받은 인자'만' 사용해서, 결과물을 내는 함수다.

부작용

프로그래머가 바꾸고자 하는 변수 외에는 바뀌어서는 안 된다는 뜻이다.
원본 데이터는 불변해야 한다는 것이다.

ex)

const arr = [1, 2, 3, 4, 5];
const map = arr.map(function(x) {
	return x * 5;
}):

// return : [5, 10, 15, 20, 25]

• map 함수는 마지막에 설명한다.
• arr를 사용했지만, 값은 변하지 않았고, map이라는 결과를 내고 다른 부작용도 없다.
• 이런걸 순수 함수라고 한다.

 

순수함수는 왜 반복문을 사용하지 않는걸까?

 

고차함수

 

 

클로저

---

함수를 일급 객체로 취습하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.

• 실행 컨텍스트에 대해 알면 이해하기 좋다.

 

렉시컬 스코프 (Lexical Scoping)

scope는 함수를 호출할 때가 아닌, 어디에 선언했는지에 따라 결정된다.
JS에서 함수 내부에 함수를 선언할 경우, 내부 함수는 외부 함수의 변수에 접근할 수 있다. 이 때 내부 함수의 상위 스코프는 외부 함수가 되는 것이다.
그럼 내부 함수의 렉시컬 스코프는 전역(외부함수가 전역에 선언된 경), 외부함수, 자신의 스코프로, 상위 스코프에 접근할 수 있다.

ex)

function outerFunc() {
  var x = 10;
  var innerFunc = function () { 
  	console.log(x); 
  };
  return innerFunc;
}


const inner = outerFunc();
intter(); //10

• 아래 inner 예제를 보면, outerFunc()는 생명주기가 다 해 소멸했는데도, x값을 반환했다.

 

클로저 (Closure)

이처럼 외부함수보다 내부함수가 더 오래 유지되는 경우,
외부 함수 밖에서 내부 함수가 호출되더라도, 외부 함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저라고 한다.
즉, 자신이 생성될 때 환경을 기억하는 함수다.

• 람다계산식 구현체
• 이름 없는 함수로 작성 가능하다.
• 선언된 범위의 변수를 캡처해서 저장하고 (선언적으로) 닫힘

 

 

JS 컬렉션 인터페이스

---

아래 세가지 함수는 대표적인 함수형 프로그래밍 함수라고 한다.

 

map

배열 각 요소에 대해 주어진 함수를 수행한 결과를 모아, 새로운 배열을 반환하는 메서드다.

• 예제는 앞서 설명했으니 생략한다.
• 3개의 매개변수를 갖는다.
• value : 현재 요소
• index : 요소의 인덱스    // 필수X
• array : map()을 호출한 원본 배열    // 필수X

 

filter

배열 각 요소에 대해 주어진 함수의 결과값이 true인 요소를 모아 새로운 배열을 반환하는 메서드다.

• 3개의 매개변수를 갖는다.
• value : 현재 요소
• index : 요소의 인덱스    // 필수X
• array : map()을 호출한 원본 배열    // 필수X

const comic = ['슬램덩크', '짱구', '미피', '디지몬', '포켓몬'];
const comicFilter = comic.filter(c => c.length === 3);

// return ['디지몬', '포켓몬']

 

reduce

배열 각 요소에 대해 reducer 함수를 실행하고, 배열이 아닌 하나의 결과값을 반환한다.

• 4개의 매개변수를 갖는다.
• accumulator : 리턴한 값을 저장하는 변수. 초기값을 지정하면 초기값부터 시작한다.
• currentValue : 현재 요소
• currentIndex : 요소의 인덱스    // 필수X
• array : map()을 호출한 원본 배열    // 필수X

const numbers = [1, 2, 3, 4, 5];
const numberSum = numbers.reduce((acc, cur) => {
    return acc + cur);
});

// return : 10

// 초기값을 입력하는 경우
const numbers = [1, 2, 3, 4, 5];
const numberSum = numbers.reduce((acc, cur) => {
    return acc + cur);
}, 초기값);

• reduce 함수에서 값을 계속 누적해 갖고 있는 누산기인 acc와 현재 요소인 cur를 매개 변수로해, 모든 요소의 합을 반환하는 로직이다.
• reduce 함수를 수행하며 생기는 값을 임시적으로 보관하는 형태다.

 

참고자료

• 함수형 프로그래밍
• 클로저
• 컬렉션 인터페이스