CodeGym /ํ–‰๋™ /Frontend SELF KO /๋ฉ”์„œ๋“œ call, bind ๋ฐ apply

๋ฉ”์„œ๋“œ call, bind ๋ฐ apply

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

8.1 call ๋ฉ”์„œ๋“œ

JavaScript์—์„œ call, bind, apply ๋ฉ”์„œ๋“œ๋Š” ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ด. ์ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ this ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฑฐ๋“ . ์ด ๋ฉ”์„œ๋“œ๋“ค์€ ๊ฐ์ฒด ๋ฐ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ž‘์—…์—์„œ ์œ ์šฉํ•˜๋ฉฐ, ์œ ์—ฐํ•œ ์ฝ”๋“œ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋ฅผ ์ œ๊ณตํ•ด. ๊ฐ๊ฐ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ณ  ์‚ฌ์šฉ ์˜ˆ์‹œ๋“ค์„ ํ•œ๋ฒˆ ๋ด…์‹œ๋‹ค.

call ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ this ๊ฐ’๊ณผ ์ฝค๋งˆ๋กœ ๊ตฌ๋ถ„๋œ ์ธ์ˆ˜๋กœ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜์–ด์•ผ ํ•˜๋Š” ์ปจํ…์ŠคํŠธ๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์–ด.

๋ฌธ๋ฒ•:

    
      func.call(thisArg, arg1, arg2 ...);
    
  

์˜ˆ์‹œ:

์ด ์˜ˆ์‹œ์—์„œ greet ํ•จ์ˆ˜๋Š” person ์ปจํ…์ŠคํŠธ๋กœ ํ˜ธ์ถœ๋˜์–ด ๊ฐ์ฒด person์˜ name ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜.

JavaScript
    
      function greet(greeting, punctuation) {
        console.log(greeting + ', ' + this.name + punctuation);
      }

      const person = { name: 'John' };

      greet.call(person, 'Hello', '!'); // Output: Hello, John!
    
  

8.2 apply ๋ฉ”์„œ๋“œ

apply ๋ฉ”์„œ๋“œ๋Š” call๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ ์ธ์ˆ˜๋ฅผ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌํ•ด. ์ธ์ˆ˜ ๋ฐฐ์—ด์ด ์žˆ์„ ๋•Œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์‹ถ์„ ๋•Œ ํŽธ๋ฆฌํ•ด.

๋ฌธ๋ฒ•:

    
      func.apply(thisArg, [argsArray]);
    
  

์˜ˆ์‹œ:

์ด ์˜ˆ์‹œ๋Š” ์ด์ „ ์˜ˆ์‹œ์™€ ๋น„์Šทํ•˜์ง€๋งŒ ์ธ์ˆ˜๋Š” ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋œ๋‹ค๋Š” ์ ๋งŒ ๋‹ค๋ฅด์ง€.

JavaScript
    
      function greet(greeting, punctuation) {
        console.log(greeting + ', ' + this.name + punctuation);
      }

      const person = { name: 'John' };

      greet.apply(person, ['Hello', '!']); // Output: Hello, John!
    
  

8.3 bind ๋ฉ”์„œ๋“œ

bind ๋ฉ”์„œ๋“œ๋Š” ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋Š”๋ฐ, ์ด ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ๋  ๋•Œ ์ฃผ์–ด์ง„ this ๊ฐ’์„ ์„ค์ •ํ•ด. bind์— ์ „๋‹ฌ๋œ ์ธ์ˆ˜๋Š” ์ƒˆ๋กœ์šด ํ•จ์ˆ˜์— ๊ณ ์ •๋˜์ง€. ์ด ๊ธฐ๋Šฅ์€ ๊ณ ์ •๋œ ์ปจํ…์ŠคํŠธ์˜ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ด.

๋ฌธ๋ฒ•:

    
      const boundFunc = func.bind(thisArg, arg1, arg2 ...);
    
  

์˜ˆ์‹œ:

์ด ์˜ˆ์‹œ์—์„œ๋Š” boundGreet๋ผ๋Š” ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑ๋˜๊ณ , ์ด ํ•จ์ˆ˜๋Š” ํ•ญ์ƒ person ๊ฐ์ฒด์˜ ์ปจํ…์ŠคํŠธ์—์„œ ์‹คํ–‰๋ผ.

JavaScript
    
      function greet(greeting, punctuation) {
        console.log(greeting + ', ' + this.name + punctuation);
      }

      const person = { name: 'John' };

      const boundGreet = greet.bind(person, 'Hello');
      boundGreet('!'); // Output: Hello, John!
    
  

8.4 ๋ฉ”์„œ๋“œ ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ƒ์„ธ ์„ค๋ช…

1. ๋ฉ”์„œ๋“œ ์ƒ์†์— call ์‚ฌ์šฉ:

call ๋ฉ”์„œ๋“œ๋Š” ํ•œ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋ฅผ ๋‹ค๋ฅธ ๊ฐ์ฒด๊ฐ€ ์ƒ์†๋ฐ›๋„๋ก ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋ผ. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ช…์‹œ์ ์ธ ์ƒ์† ์—†์ด ๋ฉ”์„œ๋“œ์™€ ์†์„ฑ์„ ์ฐจ์šฉํ•  ์ˆ˜ ์žˆ์–ด.

์ด ์˜ˆ์‹œ์—์„œ๋Š” Product ์ƒ์„ฑ์ž๊ฐ€ Food ๊ฐ์ฒด์˜ ์ปจํ…์ŠคํŠธ์—์„œ ํ˜ธ์ถœ๋˜์–ด name๊ณผ price ์†์„ฑ์„ ์ƒ์†ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜.

JavaScript
    
      function Product(name, price) {
        this.name = name;
        this.price = price;
      }

      function Food(name, price, category) {
        Product.call(this, name, price);
        this.category = category;
      }

      const cheese = new Food('Cheese', 5, 'Dairy');
      console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
    
  

2. ๋ฐฐ์—ด ์ธ์ˆ˜ ์ „๋‹ฌ์— apply ์‚ฌ์šฉ:

apply ๋ฉ”์„œ๋“œ๋Š” ์ธ์ˆ˜ ๋ฐฐ์—ด์„ ํ•จ์ˆ˜์— ์ „๋‹ฌํ•˜๊ณ ์ž ํ•  ๋•Œ ์œ ์šฉํ•ด. ํ•จ์ˆ˜๋Š” ๊ฐœ๋ณ„ ์ธ์ˆ˜๋ฅผ ์š”๊ตฌํ•˜์ž–์•„.

์—ฌ๊ธฐ์„œ numbers ๋ฐฐ์—ด์€ sum ํ•จ์ˆ˜์— ๊ฐœ๋ณ„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ผ.

JavaScript
    
      function sum(a, b, c) {
        return a + b + c;
      }

      const numbers = [1, 2, 3];
      console.log(sum.apply(null, numbers)); // Output: 6
    
  

3. ๊ณ ์ •๋œ ์ปจํ…์ŠคํŠธ ํ•จ์ˆ˜ ์ƒ์„ฑ์— bind ์‚ฌ์šฉ:

bind ๋ฉ”์„œ๋“œ๋Š” ๊ณ ์ •๋œ ์ปจํ…์ŠคํŠธ์˜ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋ฉฐ, ํŠนํžˆ ์ด๋ฒคํŠธ ๋ฐ ์ฝœ๋ฐฑ์—์„œ ์œ ์šฉํ•ด.

์—ฌ๊ธฐ์„œ getX ํ•จ์ˆ˜๋Š” bind๋ฅผ ํ†ตํ•ด module ๊ฐ์ฒด์— ๊ณ ์ •๋˜์–ด ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ x ๊ฐ’์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜.

JavaScript
    
      const module = {
        x: 42,
        getX: function() {
          return this.x;
        }
      };

      const unboundGetX = module.getX;
      console.log(unboundGetX()); // Output: undefined

      const boundGetX = unboundGetX.bind(module);
      console.log(boundGetX()); // Output: 42
    
  

8.5 ์‹ค์ œ ์ƒํ™œ์˜ ์˜ˆ

๋ฉ”์„œ๋“œ ๋ฐฐ์—ด ์ฐจ์šฉ์— call ์‚ฌ์šฉ ์˜ˆ์‹œ:

์—ฌ๊ธฐ์„œ call์„ ์‚ฌ์šฉํ•˜์—ฌ arguments ๊ฐ์ฒด์— ๋ฐฐ์—ด forEach ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด.

JavaScript
    
      function printArguments() {
        Array.prototype.forEach.call(arguments, function(item) {
          console.log(item);
        });
      }

      printArguments(1, 2, 3); // Output: 1, 2, 3
    
  

๋ฐฐ์—ด ๊ฒฐํ•ฉ์— apply ์‚ฌ์šฉ ์˜ˆ์‹œ:

์—ฌ๊ธฐ์„œ apply๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๋ฐฐ์—ด์„ ๋ฐฐ์—ด push ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๊ฒฐํ•ฉํ•ด.

JavaScript
    
      const array1 = [1, 2, 3];
      const array2 = [4, 5, 6];

      Array.prototype.push.apply(array1, array2);
      console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
    
  

๋ถ€๋ถ„ ํ•จ์ˆ˜ ์ƒ์„ฑ์— bind ์‚ฌ์šฉ ์˜ˆ์‹œ:

double ํ•จ์ˆ˜๋Š” bind๋ฅผ ํ†ตํ•ด ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜๊ฐ€ 2๋กœ ๊ณ ์ •๋œ ์ฑ„๋กœ ์ƒ์„ฑ๋ผ.

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

      const double = multiply.bind(null, 2);
      console.log(double(5)); // Output: 10
    
  
1
ะžะฟั€ะพั
CRUD์™€ API ์ž‘์—…,ย  44 ัƒั€ะพะฒะตะฝัŒ,ย  3 ะปะตะบั†ะธั
ะฝะตะดะพัั‚ัƒะฟะตะฝ
CRUD์™€ API ์ž‘์—…
CRUD์™€ API ์ž‘์—…
์ฝ”๋ฉ˜ํŠธ
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION