[JS] Closure

JIOO·2024년 1월 5일
0

ES6

목록 보기
14/17

Closure 란?

let count = 0 
// 카운트는 0인 상황 

우리는 count를 plus 라는 함수로만 제어 해야함 
const plus = ( ) => { count++}

plus()를 1억 번 한다는 가정 

1억 1번째에 어떤 개발자가 count = 100 이라고 하드코딩을 해버림 
그러면 1억 1이 되야 하는게 101이 되어버림 

이걸 방지하는 게 클로저


클로저를 쓰는 방법

functino closer() {
  let count = 0;
  const plus = ( ) => { count++} 
}

카운트와 plus를 함수안에 넣어서 전역변수 > 지역변수로 만들면 전역에서 접근이 안됨

이때 지역변수로 변해버린 plus 함수를 전역에서 실행 하는 방법은

functino closer() {
let count = 0;
 const plus = ( ) => { count++} 
 return {
  plus
 }
}

함수의 마지막에 리턴으로 사용 할 함수를 넣어주고

const countClosure = closer() 

이렇게 클로저 함수를 변수에 넣어주고 콘솔 찍어보기

 console.log(countClosure) = {plus : function} 
 라고 객체가 뜸 return 을 객체로 했으니 당연

실행

countClosure.plus()

closer에 다른 함수 추가하기 (count를 console에 찍어보기)

functino closer() {
let count = 0;
 const plus = ( ) => { count++} 
 const returnConsole = ( ) => {console.log(count)}
 return {
  plus,
  returnConsole
 }
}

실행

countClosure.returnConsole()

클로저 그나마 납득이 되는 예시

중요한 값을 바꿀 때 임의로 또는 함부로 누군가가 바꾸는 것을 방지 하기 위해
변경 함수를 객체에 보관해서 이렇게 해야만 바뀌게 만든 기술?

function createAccount(password) {
  let userPassword = password;  // 'password'를 userPassword로 저장

  return { 
  //위 함수의 return 값 
// 밑에 객체들은 보안 때문에 함수를 객체에 넣어 쓴다고 함

    checkPassword: (input) => {
      return userPassword === input;  // input과 userPassword 비교
    },

    updatePassword: (newPassword) => {
      userPassword = newPassword;  // 비밀번호 변경
    }
  };
}

account.updatePassword('newPassword'); // 이렇게 해야 바뀐다함 아니면 안바뀐다함
profile
프론트엔드가 좋은 웹쟁이 with Notion (요즘은 노션과 병행 중)

0개의 댓글