[JavaScript] JavaScript와 Functional Programming 그리고 Closure

Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다.

Functional Programming

이전까지 가장 유명한 코딩 패러다임은 OOP(Object Oriented Programming)이었다. JavaScript에서 Function의 종류는 다음과 같다.

Pure Functions

전역 변수를 건드리지 말아야한다, parameter는 reference로 넘어가기 때문에 mutate되지 않는다.

High Order Functions

reusability를 위해 쓰이는 함수로, 내가 parameter를 집어 넣었을 때 비로소 완성되는 함수이다.

Callbacks and Higher Order Functions

Higher-order functions

인자로 함수를 받거나 함수를 반환하는 함수를 뜻한다.

callback과 high order function을 사용하면 코드를 간단하게 짤 수 있다. 그리고 매우 강력한 비동기적 실행을 가능하게 한다.

Generalizing Functions

function copyArrayAndManipulate(array, instructions) {
    let output = [];
    for (let i = 0; i < array.length; i++) {
        output.push(instructions(array[i]));
    }
    return output;
}

function multiplyBy2(input) {
    return input*2;
}

let result = copyArrayAndManipulate([1,2,3], multiplyBy2);

반복되는 부분이 함수가 될 경우 parameter로 callback을 넘겨준다.

First-Class Objects

JavaScript에서 함수는 일급 객체이다. 이는 JavaScript의 다른 객체들과 같이 존재하고, 같은 취급을 받을 수 있다는 것이다. 다른 객체들과 구분되는 함수의 특징은 다음과 같다.

1. 다른 객체들의 변수나 값을 할당할 수 있다.
2. 인자를 전달할 수 있다.
3. 값을 반환할 수 있다.
4. paranthesis를 통해 실행할 수 있다.

Closure

함수가 호출 했을 때, 함수의 실행 환경을 위한 새로운 데이터 저장소를 생성한다. ( 로컬 메모리 혹은 변수 환경, 상태 ) 함수의 실행이 마무리되면 반환값을 제외한 로컬 메모리는 삭제된다.

그러나 함수가 실행 중에 생긴 이 로컬 메모리를 가지고 있다면 어떨까? 이렇게 하면 캐쉬같은 연관된 데이터를 계속 가질 수 있다.

이런 특징은 함수의 반환값으로 함수를 반환하면서 시작된다.

function instructionGenerator() {
    function multiplyBy2 (num){
        return num*2;
    }
    return multiplyBy2;
}
let generatedFunc = instructionGenerator()

Call Stack in Closure

1. push global()
2. push instructionGenerator()
3. return multiplyBy2
4. popped off instructionGenerator()
5. popped off global()

function instructionGenerator() {
    function multiplyBy2 (num){
        return num*2;
    }
    return multiplyBy2;
}
let generatedFunc = instructionGenerator()
let result = generatedFunc(3) // 6

Exercise 1

function outer (){
    let counter = 0;
    function incrementCounter (){
        counter ++;
    }
    incrementCounter();
}

function outer (){
    let counter = 0;
    function incrementCounter (){
        counter ++;
    }
    return incrementCounter;
}
var myNewFunction = outer(); // myNewFunction = incrementCounter

function outer (){
    let counter = 0;
    function incrementCounter (){
        counter ++;
    }
    return incrementCounter;
}
var myNewFunction = outer(); // myNewFunction = incrementCounter
myNewFunction();
myNewFunction();

함수 안에서만 변수는 counter는 접근 가능하다.

Lexical Scope

backpack = orange box
함수가 호출된 곳이 아닌, Lexical Scope가 함수가 정의된 환경이 사용가능한 변수와 함수 실행의 우선순위를 정한다.

function outer(){
    let counter = 0;
    function incrementCounter (){
        counter ++;
        console.log(counter);
    }
    return incrementCounter;
}

const myNewFunction = outer();
myNewFunction(); // counter = 1
myNewFunction(); // counter = 2

var anotherFunction = outer();
anotherFunction(); // counter = 1
anotherFunction(); // counter = 2

Closure의 힘

현재 - 함수가 메모리를 가질 수 있게 되었다.
심화 - JavaScript에서 모듈 패턴을 구현할 수 있다.