Javascript) 자유변수, 클로져함수(사용 이유)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

자유변수 Free Variable

- 함수 내에 선언되지 않은 변수

 

HTML 코드

<button onclick="test1();">자유변수</button>

 

Javascript 코드

<script>
const test1 = () => {
    const greeting = '오늘 날씨 정말 좋다~';

    const say = (name) => {
        const word = '안녕, ' + name;
        console.log(word);
        console.log(greeting);
    };
    say('영희');
};
</script>

say함수의 지역변수는 word, name이며, greeting은 say() 함수 내에서 선언되지 않았으므로 자유변수입니다.

자유변수는 상황과 위치에 따라 전역변수가 될 수도 있습니다.

 

---

클로져함수 Closure Function

- 필요한 변수를 모두 갖고 외부로부터 닫힌 함수

- 지역변수, 자유변수

 

HTML 코드

<button onclick="test2();">클로져함수</button>

 

Javascript 코드

const test2 = () => {
    const num = 200;
    const too = foo();

    too();
};

function foo() {
    const num = 100;
    return () => {console.log(`num = ${num}`)};
};

too에는 리턴 받은 () => {console.log(`num = ${num}`)}이 대입 되었기 때문에 num의 자리에는 test2()의 num(200)이 대입 되어 too()함수를 호출한 결과가 'num = 200'일 것 같지만 그렇지 않습니다.

foo()함수의 리턴하는 함수는 참조하는 자유변수인 num을 가지고 리턴합니다.

따라서 'num = 100'이 리턴됩니다.

 

console.dir(too);

계층 구조를 확인해보면 위와 같습니다.

---

클로져함수를 사용하는 이유

→ 안전하게 변수를 사용할 수 있음

 

전역변수를 활용한 카운터

HTML 코드

<button onclick="test3();">counter - 전역변수</button>
<span id="globalCounter">0</span>

 

Javascript 코드

let cnt = 0;
const test3 = () => {
    globalCounter.innerHTML = ++cnt;
};

버튼을 누를 때마다 1씩 증가하는 카운터를 만들었습니다.

 

하지만 cnt를 전역변수로 선언했기 때문에 어디에서든 접근이 가능하여, 값이 변경될 수도 있습니다.

개발 도구의 콘솔 창에서 cnt의 값을 100으로 변경해보았습니다.

카운터의 값이 100부터 시작 되는 것을 확인할 수 있습니다.

 

 

클로져를 활용한 카운터

HTML 코드

<button onclick="test4();">counter - 클로져</button>
<span id="closureCounter">0</span>

 

Javascript 코드

const counterMaker = () => {
    let cnt = 0;
    return () => {closureCounter.innerHTML = ++cnt};
};

const test4 = counterMaker();

마찬가지로 버튼을 누를 때마다 1씩 증가하는 카운터를 클로져함수로 만들었습니다.

 

 

개발도구 콘솔창에서 cnt의 값을 100으로 변경해보았습니다.

이번에는 cnt의 값이 그대로 유지되었던 것을 확인할 수 있습니다.

이렇게 변수를 안전하게 관리하고 사용할 수 있습니다.

 

console.dir(test4);

 

 

@실습 - 가산기 생성

HTML 코드

<form action="javascript:test5();">
    <fieldset>
        <legend>가산기</legend>
        <input type="number" name="num" id="num">
        <h2>누적합 : <span id="sum">0</span></h2>
        <button type="button" onclick="test6();">초기화</button>
    </fieldset>
</form>

 

Javascript 코드

const calcMaker = () => {
    let result = 0;
    return [
        () => {
            result += Number(num.value);
            sum.innerHTML = result;
            num.value = '';
        },
        () => {
            result = 0;
            sum.innerHTML = result;
        }
    ]
};

const calcFuncs = calcMaker();
const test5 = calcFuncs[0];
const test6 = calcFuncs[1];

초기화 클릭 시

배열로 각 함수들을 관리하여 누적합과 초기화를 나타내보았습니다.

 

@실습 - 눈 코딩

HTML 코드

<button onclick="aoo()();">aoo</button> <!--100-->
<button onclick="boo()();">boo1</button> <!--undefined-->
<button onclick="boo()(999);">boo2</button> <!--999-->
<button onclick="coo(3)(5);">coo1</button> <!--15-->
<button onclick="coo()(5);">coo2</button> <!--NaN-->

 

Javascript 코드

const a = 1;
const aoo = () => {
    const a = 100;
    return () => console.log(a);
}

const b = 9;
const boo = () => {
    const b = 99;
    return (b) => console.log(b);
}

const coo = (c) => {
    return (n) => {
        console.log(c * n);
    }
}