CodeGym /ํ–‰๋™ /Frontend SELF KO /ํด๋กœ์ €

ํด๋กœ์ €

Frontend SELF KO
๋ ˆ๋ฒจ 37 , ๋ ˆ์Šจ 5
์‚ฌ์šฉ ๊ฐ€๋Šฅ

6.1 ํด๋กœ์ € ๊ฐœ๋…

ํด๋กœ์ €๋Š” JavaScript์—์„œ ๊ฐ€์žฅ ๊ฐ•๋ ฅํ•˜๊ณ  ์ค‘์š”ํ•œ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜์•ผ. ํด๋กœ์ €๋ฅผ ํ†ตํ•ด ํ•จ์ˆ˜๋Š” ์‹คํ–‰ ํ›„์—๋„ ์ž์‹ ์˜ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์„ ๊ธฐ์–ตํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜. ์ด๋ฒˆ ๊ฐ•์˜์—์„œ๋Š” ํด๋กœ์ €์˜ ๊ฐœ๋…, ํŠน์ง• ๋ฐ ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด๋ณผ ๊ฑฐ์•ผ.

JavaScript์—์„œ ํด๋กœ์ €(closure)๋Š” ํ•จ์ˆ˜์™€ ๊ทธ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์˜ ์กฐํ•ฉ์ด์•ผ. ํด๋กœ์ €๋Š” ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ ํ›„์—๋„ ์™ธ๋ถ€ ์Šค์ฝ”ํ”„์˜ ๋ณ€์ˆ˜์™€ ๋‹ค๋ฅธ ํ•จ์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜.

ํด๋กœ์ €์˜ ์ฃผ์š” ์†์„ฑ:

  1. ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ: ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ์ปจํ…์ŠคํŠธ๋กœ, ์„ ์–ธ ์‹œ์ ์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ๋ณ€์ˆ˜๋ฅผ ํฌํ•จํ•ด.
  2. ์ปจํ…์ŠคํŠธ ์œ ์ง€: ํด๋กœ์ €๋ฅผ ๊ฐ€์ง„ ํ•จ์ˆ˜๋Š” ์™ธ๋ถ€ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ ์™„๋ฃŒ๋œ ํ›„์—๋„ ์™ธ๋ถ€ ์Šค์ฝ”ํ”„์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด.

6.2 ํด๋กœ์ € ์‚ฌ์šฉ ์˜ˆ์ œ

์˜ˆ์ œ 1: ๊ฐ„๋‹จํ•œ ํด๋กœ์ €

์ด ์˜ˆ์ œ์—์„œ innerFunction()์€ outerVariable์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ outerFunction()์ด ์‹คํ–‰ ์™„๋ฃŒ๋œ ํ›„์—๋„ ๊ณ„์† ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ด.

JavaScript
    
      function outerFunction() {
        let outerVariable = 'I am from the outer function';

        function innerFunction() {
          console.log(outerVariable);
        }
        return innerFunction;
      }

      const closure = outerFunction();
      closure(); // ์ถœ๋ ฅ: I am from the outer function
    
  

์˜ˆ์ œ 2: ํด๋กœ์ €๋ฅผ ์‚ฌ์šฉํ•œ ์นด์šดํ„ฐ

์ด ์˜ˆ์ œ์—์„œ๋Š” ์นด์šดํ„ฐ ํ•จ์ˆ˜๊ฐ€ count ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ €์žฅํ•˜๊ณ , ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค 1์”ฉ ์ฆ๊ฐ€์‹œ์ผœ.

JavaScript
    
      function createCounter() {
        let count = 0;

        return function() {
          count++;
          return count;
        };
      }

      const counter = createCounter();

      console.log(counter()); // ์ถœ๋ ฅ: 1
      console.log(counter()); // ์ถœ๋ ฅ: 2
      console.log(counter()); // ์ถœ๋ ฅ: 3
    
  

์˜ˆ์ œ 3: ๋ฃจํ”„์—์„œ ํด๋กœ์ €

ํด๋กœ์ €๋Š” ๋ฃจํ”„์—์„œ ๋ณ€์ˆ˜ ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๋ฐ ์ž์ฃผ ์‚ฌ์šฉ๋ผ.

์ด ์˜ˆ์ œ์—์„œ๋Š” ๋ฐฐ์—ด arr ๋‚ด๋ถ€์˜ ๊ฐ ํ•จ์ˆ˜๊ฐ€ i ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑ ์‹œ์ ์˜ ๊ฐ’์œผ๋กœ "๊ธฐ์–ต"ํ•ด, let์˜ ๋ธ”๋ก ์Šค์ฝ”ํ”„ ๋•๋ถ„์—:

JavaScript
    
      function createArrayWithClosures() {
        let arr = [];

        for (let i = 0; i < 3; i++) {
          arr[i] = function() {
            console.log(i);
          };
        }
        return arr;
      }

      const closures = createArrayWithClosures();

      closures[0](); // ์ถœ๋ ฅ: 0
      closures[1](); // ์ถœ๋ ฅ: 1
      closures[2](); // ์ถœ๋ ฅ: 2
    
  

6.3 ํด๋กœ์ €์˜ ๋ณต์žกํ•œ ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค

์˜ˆ์ œ 1: ํ•จ์ˆ˜์˜ ๋ถ€๋ถ„์  ์ ์šฉ (partial application)

ํด๋กœ์ €๋Š” ์ผ๋ถ€ ์ธ์ž๋ฅผ ๊ณ ์ •๋œ ์ƒํƒœ๋กœ ์œ ์ง€ํ•˜์—ฌ ๋ถ€๋ถ„์ ์œผ๋กœ ์ ์šฉ๋œ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜.

์ด ์˜ˆ์ œ์—์„œ๋Š” multiply() ํ•จ์ˆ˜๊ฐ€ ๊ณ ์ •๋œ ์ธ์ž a์— b๋ฅผ ๊ณฑํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ด.

JavaScript
    
      function multiply(a) {
        return function(b) {
          return a * b;
        };
      }

      const double = multiply(2);
      console.log(double(5)); // ์ถœ๋ ฅ: 10
      console.log(double(10)); // ์ถœ๋ ฅ: 20
    
  

์˜ˆ์ œ 2: ๋ฐ์ดํ„ฐ ์ˆจ๊ธฐ๊ธฐ (data hiding)

ํด๋กœ์ €๋Š” ๋น„๊ณต๊ฐœ ๋ณ€์ˆ˜์™€ ๋ฉ”์„œ๋“œ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์–ด.

์ด ์˜ˆ์ œ์—์„œ๋Š” ๋ณ€์ˆ˜ _name๊ณผ _age๊ฐ€ ๋น„๊ณต๊ฐœ์ด๋ฉฐ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด์„œ๋งŒ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ด:

JavaScript
    
      function createPerson(name, age) {
        let _name = name;
        let _age = age;

        return {
          getName: function() {
            return _name;
          },
          getAge: function() {
            return _age;
          },
          setName: function(newName) {
            _name = newName;
          },
          setAge: function(newAge) {
            _age = newAge;
          }
        };
      }

      const person = createPerson('John', 30);
      console.log(person.getName()); // ์ถœ๋ ฅ: John

      person.setName('Jane');

      console.log(person.getName()); // ์ถœ๋ ฅ: Jane
      console.log(person.getAge());  // ์ถœ๋ ฅ: 30
    
  

์˜ˆ์ œ 3: ๋ฉ”๋ชจ์ด์ œ์ด์…˜

๋ฉ”๋ชจ์ด์ œ์ด์…˜์€ ๋™์ผํ•œ ์ž…๋ ฅ๊ฐ’์— ๋Œ€ํ•œ ๋ฐ˜๋ณต ๊ณ„์‚ฐ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ํ•จ์ˆ˜์˜ ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•˜๋Š” ์ตœ์ ํ™” ๊ธฐ๋ฒ•์ด์•ผ.

์ด ์˜ˆ์ œ์—์„œ๋Š” memoize() ํ•จ์ˆ˜๊ฐ€ ํด๋กœ์ €๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ fn() ํ•จ์ˆ˜์˜ ๊ณ„์‚ฐ๋œ ๊ฒฐ๊ณผ๋ฅผ ์บ์‹œ์— ์ €์žฅํ•ด:

JavaScript
    
      function memoize(fn) {
        const cache = {};

        return function(...args) {
          const key = JSON.stringify(args);
          if (cache[key]) {
            return cache[key];
          }
          const result = fn(...args);
          cache[key] = result;
          return result;
        };
      }

      function slowFunction(num) {
        console.log('Computing...');
        return num * 2;
      }

      const memoizedFunction = memoize(slowFunction);

      console.log(memoizedFunction(5)); // ์ถœ๋ ฅ: Computing... 10
      console.log(memoizedFunction(5)); // ์ถœ๋ ฅ: 10 (์บ์‹œ์—์„œ ๊ฒฐ๊ณผ ๊ฐ€์ ธ์˜ด)
    
  
1
ะžะฟั€ะพั
Date, Timer์™€ ๋ฆฌํ„ฐ๋Ÿด,ย  37 ัƒั€ะพะฒะตะฝัŒ,ย  5 ะปะตะบั†ะธั
ะฝะตะดะพัั‚ัƒะฟะตะฝ
Date, Timer์™€ ๋ฆฌํ„ฐ๋Ÿด
Date, Timer์™€ ๋ฆฌํ„ฐ๋Ÿด
์ฝ”๋ฉ˜ํŠธ
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION