Today’s Key 🔑


추가로 공부하자 🔥


자꾸자꾸 보고 적고 직접 치면서 늘어나는 javascript 상식! (으쌰!) 🚀

.bind() 메소드에 대해서.


가장 간단한 예시는 아래와 같다. 아래의 코드처럼 boundFn()이 실행되었을 때에만 add 함수에 묶여있던 10이라는 값이 호출된다. bind 메소드는 그런 역할을 한다.

function add(x,y) {
	this.val = x + y;
	return this.val;
}

let obj = {val: 0}

let boundFn = add.bind(obj, 2, 8);
boundFn() // -> val = 10


그러면 이 bind 함수가 유용하게 사용되는 현장은 어떻게 되는가.

1.특정 함수에서 this가 전역 객체로 인식되는 경우.

function Box(w, h) {
	this.width = w;
	this.height = h;
	this.area = () => this.width * this.height;
	this.printArea = () => console.log(this.area());
}

let b = new Box(100, 50);
b.printArea(); // -> 5000 

// setTimeout() 과 같은 특정한 함수에서는 this를 사용할 때, 
// 전역 객체 window 자체를 가르킬 수 있다.
// 그래서 우리는 b.printArea 함수에 b라는 인스턴스를 인식시켜야 한다.

setTimeout(b.printArea.bind(b), 2000)
// 2초 뒤에 b.printArea 실시


2.여러개의 인자를 받는 함수를 단일 인자를 받는 함수로 바꿀때 (커링)

// 1
function template(name, money) {
	return '<h1>' + name + '</h1><span>' + money + '</span>'
}

let tmplSteeve = template.bind(null, 'Steeve');
tmplSteeve(100) 
// -> '<h1>' + Steeve + '</h1><span>' + 100 + '</span>'


// 2
function adder (x) {
	return function (y) {
		return x + y;
	}
}

let add100 = adder.bind(null, 100);
add100(2) // -> 102   고정된 100 값을 binding 한다.