정보실

웹학교

정보실

javascript 6 분 안에 JavaScript 클로저 배우기

본문

클로저는 악명 높은 것으로 파악하기 어렵다. 그러나 이들은 JavaScript 개발자로서의 발전에 필수적입니다.


클로저를 이해하면 보다 우아한 코드와 더 나은 직업 기회로 이어질 수 있습니다.


이 게시물이 컨셉을 최대한 빨리 유지하는 데 도움이 되기를 바랍니다.


https://www.freecodecamp.org/news/learn-javascript-closures-in-n-minutes/ 


보너스 : 클로저는 JS에 한정되지 않습니다! 그것들은 일단 배우면 소프트웨어 개발의 다른 곳을 인식하기 시작하는 컴퓨터 과학 개념입니다.


함수는 너무 가치가 있다 


우선, JavaScript는 일급 함수를 지원한다는 것을 이해하십시오.


winnie-1 


멋진 이름이지만 함수가 다른 값과 같이 취급된다는 의미입니다. 문자열, 숫자 및 객체와 같은 값


값은 무엇을 할 수 있습니까?


값은 변수 일 수 있습니다 

const name = 'Yazeed';
const age = 25;
const fullPerson = {
    name: name,
    age: age
};

값은 배열 일 수 있습니다 

const items = [
    'Yazeed',
    25,
    { name: 'Yazeed', age: 25 }
]

함수에서 값을 반환 할 수 있습니다 

function getPerson() {
    return [
        'Yazeed',
        25,
        { name: 'Yazeed', age: 25 }
    ];
}

함수도 이 모든 것이 될 수 있습니다.


functions-can-do-that-too 


함수는 변수가 될 수 있습니다 

const sayHi = function(name) {
    return `Hi, ${name}!`;
}

함수는 배열에 있을 수 있습니다 

const myFunctions = [
    function sayHi(name) {
        return `Hi, ${name}!`;
    },
    function add(x, y) {
        return x + y;
    }
];

그리고 여기 큰 것이 있습니다 ...


함수는 다른 함수를 반환 할 수 있습니다 


다른 함수를 반환하는 함수에는 특별한 이름이 있습니다. 이를 고차 함수라고 합니다.


이것이 클로저의 기초입니다. 다음은 고차 함수의 첫 번째 예입니다.

function getGreeter() {
    return function() {
        return 'Hi, Jerome!';
    };
}

getGreeter는 함수를 반환합니다. 인사하려면 두 번 전화하십시오.

getGreeter(); // Returns function
getGreeter()(); // Hi, Jerome!

하나는 반환 된 함수를 호출하고 다른 하나는 인사말을 호출합니다.


쉽게 재사용 할 수 있도록 변수에 저장할 수 있습니다.

const greetJerome = getGreeter();

greetJerome(); // Hi, Jerome!
greetJerome(); // Hi, Jerome!
greetJerome(); // Hi, Jerome!

클로저 얻기


Jerome을 하드 코딩하는 대신 name이라는 하나의 매개 변수를 사용하여 getGreeter를 동적으로 만듭니다.

// We can greet anyone now!
function getGreeter(name) {
    return function() {
        return `Hi, ${name}!`;
    };
}

그리고 그렇게 사용하십시오 ...

const greetJerome = getGreeter('Jerome');
const greetYazeed = getGreeter('Yazeed');

greetJerome(); // Hi, Jerome!
greetYazeed(); // Hi, Yazeed!

이 코드를 다시 보십시오.

function getGreeter(name) {
    return function() {
        return `Hi, ${name}!`;
    };
}

클로저 사용


외부 함수는 name을 갖지만 내부 함수는 나중에 사용합니다. 이것이 클로저의 힘입니다.


함수가 반환 되면 수명 주기가 완료됩니다. 더 이상 작업을 수행 할 수 없으며 로컬 변수가 정리됩니다.


다른 함수를 반환하지 않으면 이 경우 반환 된 함수는 부모가 전달 된 후에도 해당 외부 변수에 계속 액세스 할 수 있습니다.


클로저 장점


내가 말했듯이 클로저는 개발자 게임의 수준을 높일 수 있습니다. 몇 가지 실용적인 용도가 있습니다.


1. 데이타 개인 정보 보호 


코드를 안전하게 공유하려면 데이터 개인 정보 보호가 필수적입니다.


그것이 없으면 함수/ 라이브러리/프레임 워크를 사용하는 사람은 내부 변수를 악의적으로 조작 할 수 있습니다.


프라이버시 없는 은행 


은행 계좌를 관리하는 이 코드를 고려하십시오. accountBalance는 전 세계적으로 공개됩니다!

let accountBalance = 0;
const manageBankAccount = function() {
    return {
        deposit: function(amount) {
            accountBalance += amount;
        },
        withdraw: function(amount) {
            // ... safety logic
            accountBalance -= amount;
        }
    };
}

잔고를 부풀 리거나 다른 사람을 망치지 못하게 하는 이유는 무엇입니까?

// later in the script...

accountBalance = 'Whatever I want, muhahaha >:)';

Java 및 C ++와 같은 언어를 사용하면 클래스에 개인 필드가 있을 수 있습니다. 이 필드는 클래스 외부에서 액세스 할 수 없으므로 완벽한 개인 정보 보호가 가능합니다.


JavaScript는 비공개 변수 (아직)를 지원하지 않지만 클로저를 사용할 수 있습니다!


적절한 프라이버시를 가진 은행 


이번에는 accountBalance가 관리자 내부에 있습니다.

const manageBankAccount = function(initialBalance) {
    let accountBalance = initialBalance;
    
    return {
        getBalance: function() { return accountBalance; },
        deposit: function(amount) { accountBalance += amount; },
        withdraw: function(amount) {
            if (amount > accountBalance) {
                return 'You cannot draw that much!';
            }

            accountBalance -= amount;
        }
    };
}

그리고 아마도 그렇게 사용하십시오 ...

const accountManager = manageBankAccount(0);

accountManager.deposit(1000);
accountManager.withdraw(500);
accountManager.getBalance(500);

더 이상 accountBalance에 직접 액세스 할 수 없습니다. getBalance를 통해서만 볼 수 있으며 입금 및 출금을 통해 변경할 수 있습니다.


이것이 어떻게 가능합니까? 클로저!


manageBankAccount가 accountBalance 변수를 작성했지만 리턴 하는 세 가지 함수는 모두 클로저를 통해 accountBalance에 액세스 할 수 있습니다.


2. Currying 


나는 전에 Currying에 대해 썼습니다. 함수가 한 번에 하나씩 인수를 취할 때입니다.


이 대신에 ...

const add = function(x, y) {
    return x + y;
}

add(2, 4); // 6

클로저를 활용하여 추가 curry를 만들 수 있습니다 ...

const add = function(x) {
    return function(y) {
        return x + y;
    }
}

그리고 당신은 반환 된 함수가 x와 y에 액세스 할 수 있다는 것을 알고 있으므로 다음과 같이 할 수 있습니다 ...

const add10 = add(10);

add10(10); // 20
add10(20); // 30
add10(30); // 40

더 쉬운 재사용을 위해 함수의 인수를 "사전 로드"하려는 경우 카레는 훌륭합니다. 다시 말하지만 JavaScript 클로저를 통해서만 가능합니다!


3. 클로저 사용 React Developers 


React 뉴스를 계속 봤다면 작년에 hook 들었습니다. 가장 혼란스러운 후크인 useEffect는 클로저에 의존합니다.


이 기사에는 완전한 React 튜토리얼이 없으므로 예제가 모두에게 충분하기를 바랍니다.


https://codesandbox.io/s/react-hooks-closures-example-2kixb?from-embed 


중요한 부분은 다음과 같습니다.

function App() {
  const username = 'yazeedb';

  React.useEffect(function() {
    fetch(`https://api.github.com/users/${username}`)
      .then(res => res.json())
      .then(user => console.log(user));
  });
  
  // blah blah blah
}

코드에서 username을 변경하면 해당 사용자 이름을 가져오고 출력을 콘솔에 기록합니다.


이것은 다시 한 번 클로저입니다. username은 외부 함수 안에 정의되어 있지만 useEffect의 내부 함수는 실제로 그것을 사용합니다.


요약 

  1. 함수도 값입니다.
  2. 함수는 다른 함수를 반환 할 수 있습니다.
  3. 외부 함수의 변수는 외부 함수가 전달 된 후에도 내부 함수에 액세스 할 수 있습니다.
  4. 이러한 변수는 state라고도 합니다.
  5. 따라서 클로저는 상태 저장 함수라고도 합니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 33회 ]  작성일19-08-18 11:33

웹학교