[JavaScript] 자바스크립트 bind() 메소드 알아보기.

2021-07-11

---

Photo by Benjamin DeYoung on Unsplash

자바스크립트 내에서는 개발자가 직접 바인딩할 대상을 지정할 수 있는 몇 가지 메서드가 있는데, 그중에서 오늘은 bind에 대해서 알아보도록 하자.

---

- 예제

 

아래는 간단한 사람이라는 객체이며, 객체 필드로 자신의 이름과 나이 이를 출력하는 간단한 함수가 정의 되어 있다.

const person = {
    name : "king"
    ,age : 25
    ,myInfo : function(){
        console.log("나의 이름은 " + this.name + "이며, 나이는 " + this.age + "입니다." )
    }
}

---

- bind와 unbind 된 객체

 

const person = {
    name : "king"
    ,age : 25
    ,myInfo : function(){
        console.log("나의 이름은 " + this.name + "이며, 나이는 " + this.age + "입니다." )
    }
}

const info1 = person.myInfo
info1() //나의 이름은 undefined이며, 나이는 undefined입니다.
const info2 = info1.bind(person)
info2() //나의 이름은 king이며, 나이는 25입니다.

 

info1 과 info2의 결과를 보면 서로 다른 것을 확인할 수 있다. 결론부터 말하면 info1의 this는 person 객체가 아닌 window 객체를 바인딩하기 때문이다. 이로 인해서 info1은 window에는 정의되지 않은 name / age를 this로 호출하여 위와 같은 결과가 나오는 것이다.

 

이를 해결하기 위해 존재하는 메서드가 바로 bind() 메서드다. 불명확한 객체를 바인딩해줌으로써 명확히 개발자가 원하는 객체를 선택할 수 있다. 기존에 window에 바인딩되었던 info1을 bind 메서드를 통해 person 객체로 바인딩시킨 후 info2 변수에 담아 출력해 보면 정상적으로 값으로 바뀌는 것을 확인할 수 있다.

---

const info1 = person.myInfo.bind(person)
info1()

 

물론 이와 같이 한 번에 객체를 바인딩하는 방법도 있다.

---

메인 이미지 출처 : Photo by Benjamin DeYoung on Unsplash