수요일, 목요일 모두 교내 해커톤 동안 프로젝트 진행때문에
작성하지 못했다... 오늘부터 다시 열심히 공부 시작하겠습니다!
함수 바인딩
생겨난 이유는 객체 매서드가 콜백 전달 시, this정보가 사라지기 때문이다.
당연하게도 객체 매서드가 객체 내부가 아닌 다른 곳에서 전달된다면
this는 사라져서 사용할 수 없습니다.
(아래 코드 실행 시, Hello,John이 아닌 undefined 출력)
let user = {
firstName: "John",
sayHi() {
alert(`Hello, ${this.firstName}!`);
}
};
setTimeout(user.sayHi, 1000); // Hello, undefined!그렇다면 어떻게 해야할까요?
래퍼
제일 간단한 해결책입니다. 아까 봤던 코드를 해결하자면
let user = {
firstName: "John",
sayHi() {
alert(`Hello, ${this.firstName}!`);
}
};
setTimeout(function() {
user.sayHi(); // Hello, John!
}, 1000);별로 달라진 것 업슨ㄴ 것 같아보이지만 화살표 함수를 사용했으므로
이는 정상적으로 실행됩니다.
다만, 이 방법의 문제점은 setTimeout이 트리거 되기 전에 user가 변경되면
변경된 객체의 메서드를 호출하는 점 입니다..
이 점까지 완벽하게 보완할 수 있는 방법은 바로 바인딩입니다.
bind 메서드
기본 문법은
let boundFunc = func.bind(context);
매우 기본적인 문법으로, 더 복잡하게 사용된 수도 있습니다.
위 func.bind(context)는 호출 가능한 특수 객체를 반환합니다.
boundFunc 호출 시, this가 context로 고정된 함수 func가 반환됩니다.
하지만 이 bind는 this가 아닌 다른 인수들도 바인딩이 가능합니다.
자주 쓰이진 않으므로 문법만 확인하고 다음으로 넘어갑시다.
let bound = func.bind(context, [arg1], [arg2], ...);
화살표 함수
전에 적었던 화살표 함수의 추가 공부 내용입니다.
화살표 함수는 그저 긴 코드를 한줄로 변경하는,
가독성 상향을 위한 용도로 만든 것은 아닙니다.
왜냐하면 유용하고 독특한 기능을 제공하기 때문입니다.
1. this의 존재 여부
전에 적었는지는 기억이 안나지만 화살표 함수는 this가 없습니다.
이 특징은 객체의 메서드 안에서 동일 객체 프로퍼티를 순회할 때 사용할 수 있습니다.
2. arguments의 존재 여부
arguments는 모든 인수에 접근할 수 있게 해주는 유사 배열 객체지만,
이를 지원하지 않습니다.
그러므로, thid와 arguments정보를 포함시켜 호출 포워딩 해주는
데코레이터 생성 시 유용하게 사용됩니다.
하지만, new와 함께 호출할 수 없습니다.
3. super의 존재 여부
당연하게도 super를 사용할 수 없습니다. super은 부모 오브젝트 함수 호출 시 사용되는데, 클래스 상속 관련 공부를 심화있게 하지 않았으므로
후에 구체적으로 적어보도록 하겠습니다.
그저 간단하게 코드 단축이 아닌, 컨텍스트가 없는 코드를 담을 목적으로 만들어졌습니다. 그리고 이런 목적을 위한 특징들이 있습니다!
