[FC] location / setTimeout, setInterval / This값 바인딩 Day-14

location

특정 도메인으로 이동시키고 싶은 경우 사용할 수 있다.

ex) main.js

const version = navigator.userAgent;

// IE = Internet Explorer
const isIE = /trident/i.test(version);

if(isIE){
    alert("IE는 서비스가 곧 중단됩니다. Chrome은 어떠신가요?");
    // location을 통해서 이동 시킬 도메인으로 연결해준다.
    location.href = "https://www.google.co.kr/chrome/";
}

setTimeout

일정 시간 뒤에 특정 코드를 호출

ex) main.js

const box = document.querySelector("#box");

box.addEventListener("click", (e) => {
	setTimeout(() => {
    	console.log("clicked");
    }, 3000);
});

setInterval

일정 시간 간격마다 특정 코드를 반복

setInterval은 clearInterval을 통해 멈출 수 있다.
ex) main.js

const box = document.querySelector("#box");

let timer = null;

box.addEventListener("mouseEnter", (e) => {
	timer = setInterval(() => {
    	console.log("마우스가 박스 안쪽에 있습니다.");
    }, 1000);
});

box.addEventListener("mouseLeave", (e) => {
	console.log("mouseLeaved");
    clearInterval(timer);
});

this값 바인딩

ex) main.js

for(let i = 0; i < 3; i++){
	console.log(this);
    // this를 3번 찍을 수 있다.
}

setTimeout(() => {
	console.log(this);
}, 1000);

if(true) {
	console.log(this);
}; // 참 일 때 this값을 참조해서 반환

ex) 버튼 태그가 존재할 때
바인드를 통해 this값을 고정시킬 수 있다.

const btn = document.querySelector("button");

btn.addEventListener('click', (e) => {
	console.log(this);
}.bind(window));

// bind를 통해서 this(btn)을 window로 고정시켜버릴 수 있다.