[F-Lab 모각코 챌린지 - 40일차] - this(2), 알고리즘 일지

Big One·2023년 6월 19일

에프랩

F-Lab

목록 보기

13/69

this

콜백 함수 호출 시 그 함수 내부에서의 this

함수A의 제어권을 다른 함수 B에게 넘겨주는 경우 함수A를 콜백함수라한다.

콜백함수도 기본적으로는 this가 전역객체를 참조하지만, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게된다.

아래 예시코드에서 비교해보자!

// (1)
setTimeout(function(){ console.log(this); }, 300);

// (2)
[1, 2, 3, 4, 5].forEach(() => console.log(this));

// (3)
document.body.innerHTML += '<button id="a">클릭!</button>';
document.body.querySelector('#a').addEventListenr('click', function(e) {
	console.log(e, this);
});

(1), (2)는 this가 window (전역 객체)를 가리킨다. 음 .. 위에서 말했듯이 콜백함수도 일반적으로 전역객체를 가진다하으니 끝!

(3)은 this가 <button id=”a”>클릭</button> 를 가리킨다. 이유는 addEventLister는 지정한 HTML 엘리먼트에 ‘click’ 이벤트가 발생할 때마다 이벤트 정보를 콜백함수의 첫 번째 인자로 삼아 함수를 실행하라는 명령이다. addEventListener 메서드는 콜백 함수를 호출할 때 자신의 this를 상속하도록 정의되어 있다. 그러니 (.)앞부분이 this가 된다.

이처럼 콜백 함수에서의 this는 ‘무조건 이거다!’ 라고 정의할 수 없다. 콜백함수의 제어권을 가진 함수가 콜백 함수에서의 this를 무엇으로 할 지 결정하고, 특별히 정의하지 않은 경우 기본적으로 함수와 마찬가지로 전역객체를 바라본다.

생성자 함수 내부에서의 this

생성자 함수는 어떤 공통된 성질을 지니는 객체를 생성하는데 사용된다.

생성자 함수로(new 함수명) 생성된 인스턴스? 의 this는 인스턴스 자신을 가리킨다. 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로만들 구체적인 인스턴스 자신이 된다는 말이다.

코드에서 보셈!

const Custumer = function(name, age){
	this.name = name;
	this.age = age;
	this.point = 1000;
	this.subscription = new Date();
};
const daewon = new Customer('daewon', 20);
const daewon2 = new Customer('daewonnim', 22);
console.log(daewon, daewon2);

this는 인스턴스 자신이 되는 것을 확인할 수 있다.

알고리즘 일지

이진검색(Binary Search)

저번에 완전하지 못한 이진검색 코드를 구현했다. (배열에 없는 숫자 찾으려하면 무한루프....)
보완했다!!!
시간복잡도 O(logn)

구현코드

const arr = [1, 2, 3,5, 7, 19, 20, 32, 33, 
37, 39, 40, 41, 42, 44, 56, 60,
73, 77, 85, 89, 92, 101, 150, 
430, 640, 1106, 1203, 1204, 1209];
const value = 1204;

const SearchBinary = (arr, value) => {
	let start = 0;
	let end = arr.length-1;
	let middle = Math.floor((start + end) / 2);

	while(start <= end && arr[middle] !== value){
		if(start < arr[middle]){
			end = middle - 1;
		}else{
			start = middle + 1;
		}
	}
	return arr[middle] === value ? middle : -1;
}