Today’s Key 🔑
- 다시 풀어도 많은 생각을 해야했던 underbar 문제 (특히.. _.shuffle 함수는 정말..)
- 함수 메소드에 대한 강의 수강후 call, apply, bind 메소드의 차이 정리
- 알고리즘의 시간 복잡도를 나타내는 Big-O notation의 규칙에 대해서 공부했다.
- JSON.stringify() 함수를 구현하는 재귀형 알고리즘 과제를 진행중인데… JSON.stringify 에 대한 공부가 더욱 필요할 것 같다. 정리도 역시!
추가로 공부하자 🔥
- JSON.stringify() 함수에 대해서 깊게 공부하고, 그 함수 자체를 ‘재귀’로 풀어낼 수 있는 부분을 계속 고민하자.
- underbar 과제의 어드벤스드 문제를 풀어보자.
자꾸자꾸 보고 적고 직접 치면서 늘어나는 javascript 상식! (으쌰!) 🚀
.bind()
메소드에 대해서.
- call 메소드와 사용법은 동일하다. (표기법)
- call, apply 메소드는 함수에 붙어서 함수를 즉시 실행하게 만든다.
- .bind() 메소드는 함수를 바로 실행시키지 않고, 단어 뜻 그대로 객체의 값을 묶어 둔다고 할 수 있다. 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 한다.