This content got low rating by people.

[매일코딩] 007 - 자바스크립트 클로저 2

wonsama(71)

Published in

mini.topia

Words

281

Reading

2 min

Listen

Play

출처 및 관련 글

개요

클로저 이해하기가 쉽지 않습니다. 그래서 한번더 준비 했습니다 !

클로저를 이해해야 진정한 자바스크립트 개발자로 입성을 한것이라 할 수 있습니다. (진심 저도 느낌)
어찌보면 이미 클로저를 접해 보고 이미 사용하고 있을 수 도 있습니다. 인지를 못해서 그럴 수 도 있죠

좋아요 표현하기

전역 변수(likeCount)를 만들고 함수(handleLikePost)를 호출하면서 카운트를 증가 시킵니다. 하지만 문제가 하나 있는데 likeCount 변수는 handleLikePost 함수가 아닌 다른 함수를 통해 해당 값이 변경되어 문제를 발생 시킬 수 있습니다.

// 전역 범위 
let likeCount = 0;

function handleLikePost() {
  //  함수 범위
  likeCount = likeCount + 1;
}

handleLikePost();
console.log("like count:", likeCount); // 좋아요 횟수 : 1

아래처럼 likeCount 값을 0으로 설정 해버리면 기존의 누적된 값이 0으로 초기화 되버릴 수 있겠죠 ...

likeCount = 0;
console.log("like count:", likeCount); // like count: 0

그렇다면 이번에는 아래처럼 함수 안쪽에 likeCount 변수를 넣어 봤습니다. 하지만 이것은 매번 값을 0으로 초기화 한다음 1을 더하기 때문에 항시 1이라는 값을 반환합니다.

function handleLikePost() {
  let likeCount = 0;
  likeCount += 1;
  console.log("like count:", likeCount);
}

handleLikePost(); // like count: 1

그래서 이번에는 함수 사이에 함수를 중첩해 보도록 하겠습니다. ( 첨에는 좀 이상하게 보일 수도 있습니다. ) 약간 이상하게 보이지만 JS에서는 허용되는 문법입니다.

즉, 다른 함수에서 함수를 반환 할 수 있습니다. 내부 함수를 반환함으로써, 우리는 그 함수를 외부 함수에서 호출 할 수 있습니다. 그리고 외부함수에 변수를 설정하고 내부함수를 호출 해보겠습니다.

아래 함수에서 addLike 는 익명함수로 대체해도 됩니다.

function handleLikePost() {
  let likeCount = 0;
  return function addLike() {
    likeCount += 1;
    return likeCount;
  };
}

const like = handleLikePost();

console.log(like()); // 1
console.log(like()); // 2
console.log(like()); // 3

와우 !

우리의 likeCount는 마침내 보존됩니다! like를 호출 할 때마다 likeCount는 이전 값에서 증가합니다.

addLike 함수를 호출 한 범위 밖에서 호출하는 방법을 알아 냈습니다. 외부 함수에서 내부 함수를 반환하고 호출하기 위해 이와 같은 참조를 저장함으로써 처리할 수 있었습니다.

참조 - 개별 카운터 만들기

아래를 수행하면 결과는 ... c1 : 1+2+3-4 = 2 / c2 : 0 + 1 = 1

이처럼 클로저를 사용하면 내부 변수의 값을 유지할 수 있으며, 개별 함수별로 각각의 값을 유지 할 수 있어서 다양한 방법으로 응용을 할 수 있습니다.

const counter = (start_at=0) => {
    let count = start_at;
    return {
        increase : (gap=1) => {return count+=gap},
        decrease : (gap=1) => {return count-=gap},
        now : () => count
    };
}
let c1 = counter(1);
c1.increase(2);
c1.increase(3);
c1.decrease(4);
console.log( c1.now() );

let c2 = counter();
c2.increase(1);
console.log( c2.now() );