[OOP] JavaScript 객체 지향 프로그래밍 - 14. 객체와 함수, call, bind

 

 

들어가며

어느 정도 개발에 대한 감을 익혔다고 생각했습니다. 코드를 순서에 맞게 작성하는 능력들을 아주 조금이지만 쌓아 올릴 수 있었습니다. 하지만 시간이 지나면서 제 코드를 봤을 때 너무 더럽다고 느껴졌습니다. 중복되는 코드가 많았고, 비효율적인 코드들도 많이 볼 수 있었습니다. 코드를 조금 더 재사용성이 높게 작성한다면 더 효율적으로 시스템이 동작할 수 있었을 텐데, 아쉬움이 남았습니다. 이런 고민을 하면서 객체지향 프로그래밍에 대해 배워야겠다고 생각했습니다. 앞으로 객체지향을 배우면서 공부하고 느낀 점들을 정리해나가고자 합니다. 아래 내용은 생활코딩의 OOP 수업을 듣고 정리한 내용입니다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

객체와 함수

클래스 기반의 객체지향 언어를 사용해봤다면, 자바스크립트가 이상하다고 느낄 수 있습니다. 자바스크립트는 클래스가 클래스를 상속하는 것이 아니라, __proto__를 쓰거나 Object.create를 통해서 런타임에서 실행되는 동안 객체가 객체를 상속하게 하고, 상속을 바꿀 수도 있습니다. 

 

하지만 자바스크립트의 유연함은 여기서 끝나지 않습니다. 자바스크립트에서는 함수가 함수일 뿐 아니라, 함수를 호출할 때, new를 붙이면 객체를 생성할 수도 있습니다. 

 

많은 객체지향 언어에서는 함수라는 것은 특정한 객체나 클래스에 종속된 것으로 보지만, 자바스크립트에서의 함수는 객체에 종속될 수도 있지만, 필요에 따라 어떤 객체의 메서드도 될 수 있습니다. 유연한 언어입니다. 그렇다면 지금부터 call, bind를 통해 객체지향에 대해 깊게 접근해보겠습니다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

call

먼저 call API에 대해 알아보겠습니다. 시작하기 앞서, 먼저 객체를 2개 만들어보겠습니다.

 

 

2개의 아무런 관련이 없는 객체를 만들었습니다.

 

 

여기서, 함수 sum을 만들어보겠습니다. 지금 sum 함수는 어떤 객체에도 속해있지 않습니다. sum이라는 함수는 지금까지 객체들 안의 first와 second를 더해주는 역할을 했었습니다. 지금은 프로토타입을 지정해주지 않은 상태입니다. 만약 여기서 call API를 사용한다면 sum을 어떻게 활용할 수 있을까요? 먼저 콘솔 값에 sum함수에 call 메서드를 실행해보겠습니다. 

 

 

결괏값이 다르게 나온 것을 확인할 수 있었습니다. 어떻게 해서 다른 값이 출력될 수 있었을까요? 먼저 call이라는 메서드는 모든 함수가 갖고 있습니다. call이라는 함수의 메서드를 호출할 때, 첫 번째 인자로 kim을 주면, 이 함수는 내부적으로 call을 실행할 때, this는 kim이 됩니다. this가 kim이 되면 this.first는 10이고 this.second는 20이 됩니다. 

 

즉 sum이라는 함수는 kim이라는 객체의 메서드가 아니었음에도 call이라는 특이한 함수를 호출할 때 첫 번째 인자로 sum이 내부적으로 사용할 this의 값을 kim으로 지정했더니, sum이라는 함수가 kim의 메서드가 됐습니다. 

 

그렇다면, 만약 kim이 아닌 lee를 넣는다면, sum 안에서 this는 lee가 됩니다. 그래서 결과적으로 20이 출력되는 것을 살펴볼 수 있었습니다. 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

bind

지금까지 call을 통해 실행할 때마다 어떤 객체의 this값을 바꾸는, 콘텍스트를 바꾸는 명령인 call이라는 것을 살펴봤습니다. 하지만 bind 또한 call처럼 특별합니다. 

 

설명하기 앞서, bind의 기능은 함수가 호출될 때마다 this를 바꾸는 것이 아니라, 함수의 내부적으로 사용할 this을 고정시킵니다. bind의 첫 번째 인자는 함수 내부적으로 this가 어떤 객체를 향하게 할 것인가를 지정해주는 것인데, 이를 kim이라고 해보겠습니다.

 

 

sum이라는 함수는 똑같은데, 내부적으로 this를 kim으로 하는 새로운 함수가 만들어집니다. 그리고 bind도 call과 마찬가지로 함수가 호출될 때마다 사용될 인자를 지정할 수 있습니다. bind를 사용하면 sum 함수가 새로운 함수가 되어 리턴되는 것이 차이점입니다.

 

여기서 call과 bind의 차이점은 call은 실행할 때 함수의 콘텍스트, this의 값을 바꿉니다. 하지만 bind는 내부적으로 어떤 함수의 this값을 영구적으로 바꾸는 새로운 함수를 만듭니다. 

 

즉 다시 call과 bind의 차이점에 대해 정리해보자면, call은 실행되는 함수의 this값을 원하는 객체로 바꿔서 실행할 수 있게 해 주지만, bind는 실행되는 함수의 this값을 원하는 객체로 고정시키는 새로운 함수를 만들어냅니다.

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

객체지향에 대한 기본을 쌓아가고 있습니다. 앞으로 포기하지 않고, 하나씩 지식을 쌓아 가다 보면 언젠가는 기초가 튼튼한 개발자가 될 수 있을 것이라 믿습니다. 제대로 된 방향으로 하나씩 공부하고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

출처