[JavaScript] Bind()이란?

2024. 10. 16. 11:30·Programming Language/JavaScript

Bind()이란

새롭게 바인딩한 함수를 만드는 함수로, 바인딩한 함수는 원본 함수 객체를 감싸는 함수로써, 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 된다.

 

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

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

 

unboundGetX에 변수 module의 getX함수를 받아와 실행시킨 코드이다. getX의 return값인 x : 42. 즉, 42가 출력될 것으로 예상했지만 예상과 달리 undefined가 실행되었다.

 

즉, unboundGetX함수의 this에는 name이라는 프로퍼티가 존재하지 않았던 것이고 자연스래 window객체를 참조하게 되고 window에 존재하지 않으므로 undefined가 호출된 것이다.

 

반면, bind를 활용한다면?

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

const unboundGetX = module.getX;
console.log(unboundGetX());

const boundGetX = unboundGetX.bind(module);   // bind 사용
console.log(boundGetX()); //42

 

unboundGetX에 bind 메서드를 이용해 module객체를 인자로 받았다. 그 후 새로만든 boundGetX 객체에 넣어 호출하면 원하는 값을 얻을 수 있다.
정확히 말하자면 unboundGetX의 this에 module을 전달한 것이다.


사라진 this

  • 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다.
let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!
  • setTimeout에 객체에서 분리된 함수인 user.sayHi가 user를 잃어버리고 전달되기 때문이다.
  • 인수로 전달받은 함수를 호출할 때, this에 window를 할당한다.

bind

let boundFunc = func.bind(context);
  • 모든 함수는 this를 수정하게 해주는 내장 메서드 bind를 제공한다.
  • func.bind(context)는 함수처럼 호출 가능한 특수 객체를 반환한다.
// func.bind(context, ...args)는 this가 context로 고정되고 인수도 고정된 함수 func를 반환함
let user = {
  firstName: "John",
  say(phrase) {
    alert(`${phrase}, ${this.firstName}!`);
  }
};

let say = user.say.bind(user);

say("Hello"); // Hello, John (인수 "Hello"가 say로 전달되었습니다.)
say("Bye"); // Bye, John ("Bye"가 say로 전달되었습니다.)

 


참고

 

[JavaScript] bind()

💡 bind()

velog.io

 

Javascript Binding과 함께 알아보는 apply(), call(), bind()

Javascript 에서 함수는 각자 자신만의 this를 가진다. ( this에 관해선 아주 간략하게만 알아보고 다음 포스팅에서 따로 세밀하게 다루겠다. ) 설명하기에 앞서 다음 코드를 살펴보자.음식의 이름을

velog.io

 

 

함수 바인딩

 

ko.javascript.info

 

저작자표시 비영리 변경금지 (새창열림)

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] Identifier has already been declared  (0) 2024.06.12
[JavaScript] Assignment to constant variable  (0) 2024.06.12
[JavaScript] Missing initializer in const declaration  (0) 2024.06.12
[JavaScript] Identifier has already declared  (0) 2024.06.12
[JavaScript] Uncaught SyntaxError: Unexpectedidentifier  (0) 2024.06.12
'Programming Language/JavaScript' 카테고리의 다른 글
  • [JavaScript] Identifier has already been declared
  • [JavaScript] Assignment to constant variable
  • [JavaScript] Missing initializer in const declaration
  • [JavaScript] Identifier has already declared
woojin._.
woojin._.
여러가지 개발을 해보며 발생하는 이야기들에 대한 블로그입니다:)
  • woojin._.
    Jin's Dev Story
    woojin._.
  • 전체
    오늘
    어제
    • 분류 전체보기 (829)
      • Tools (25)
        • eGovFrame (3)
        • GeoServer (3)
        • QGIS (2)
        • LabelImg (2)
        • Git (6)
        • GitHub (1)
        • Eclipse (7)
        • Visual Studio (1)
      • Web & Android (121)
        • SpringBoot (37)
        • Three.js (2)
        • Spring Data JPA (9)
        • 스프링 부트 쇼핑몰 프로젝트 with JPA (25)
        • Thymeleaf (4)
        • Spring Security (15)
        • Flutter (29)
      • Programming Language (61)
        • JAVA (27)
        • JavaScript (14)
        • Dart (2)
        • Python (15)
        • PHP (3)
      • Database (43)
        • PostgreSQL (32)
        • MYSQL (7)
        • Oracle (3)
        • MSSQL (1)
      • SERVER (17)
        • TCP_IP (3)
        • 리눅스 (7)
        • AWS (7)
      • Coding Test (445)
        • 백준[JAVA] (108)
        • 프로그래머스[JAVA] (260)
        • 알고리즘 고득점 Kit[JAVA] (3)
        • SQL 고득점 Kit[ORACLE] (74)
      • CS 지식 (49)
        • [자료구조] (14)
        • [네트워크] (12)
        • [데이터베이스] (10)
        • [알고리즘] (9)
        • [운영체제] (4)
      • 기타 (6)
      • 자격증 & 공부 (62)
        • 정보처리기사 (2)
        • SQLD (6)
        • 네트워크관리사 2급 (5)
        • 리눅스마스터 1급 (44)
        • 리눅스마스터 2급 (1)
        • ISTQB (3)
        • 시스템보안 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 인기 글

  • 태그

    CS
    리눅스마스터
    리눅스
    postgresql
    스프링
    Oracle
    리눅스마스터 1급
    pcce 기출문제
    데이터
    데이터베이스
    자바
    Linux
    스프링부트
    Flutter
    python
    spring
    Spring Security
    DB
    플러터
    Java
    CS지식
    프로그래머스
    JPA
    backjoon
    스프링 부트 쇼핑몰 프로젝트 with JPA
    baekjoon
    백준
    springboot
    시큐리티
    programmers
  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
woojin._.
[JavaScript] Bind()이란?
상단으로

티스토리툴바