[JavaScript] 자바스크립트 딜레이 주기, 정해진 주기 마다 실행시키기, this값 수정하기 (setTimeout, setInterval, call, apply, bind)

📝setTimeout, setInterval

function fn(name) {
    console.log(`say my name ${name}`);
}

setTimeout(fn, 3000, 'Mike[Timeout]');    // 3초 후에 fn 함수 작동
setInterval(fn, 1000, 'Mike [Interval]'); // 매 1초 fn 함수 작동

setTimeout은 ms 후에 동작하게끔 지연이 가능합니다

setInterval은 매 ms 마다 계속 동작하는 기능을 제공합니다

 

📝call, apply, bind

const mike = {
    name : "Mike",
    age : 20
}

const tom = {
    name : "Tom",
    age : 10
}

function showThisName() {
    console.log(`name : ${this.name}, age : ${this.age}`);
}

showThisName();          // name : undefined, age : undefined
showThisName.call(mike); // name : Mike, age : 20
showThisName.call(tom);  // name : Tom, age : 10

call 함수는 모든 함수가 사용이 가능하며 해당 함수에 this값을 줄 수 있습니다.

showThisName에는 name과 age라는 값이 없지만 mike랑 tom을 불러서(call) 값을 할당해줍니다

 

function update(birthYear, occupation) {
    this.birthYear = birthYear;
    this.occupation = occupation;
}

update.call(mike, 1999, "singer");
console.log(mike); // { name: 'Mike', age: 20, birthYear: 1999, occupation: 'singer' }

update.apply(tom, [1900, "teacher"]);
console.log(tom); // { name: 'Tom', age: 10, birthYear: 1900, occupation: 'teacher' }


const num = [3, 10, 1, 6, 4];
const minNum = Math.min.apply(null, num);
const maxNum = Math.max.call(null, ...num);
console.log(`min : ${minNum}, max : ${maxNum}`); // min : 1, max : 10

apply는 call하고 하는 행위가 동일한데 매개변수를 배열로 받습니다

update.call(mike, 1999, "singer")를 보면 update함수 안에 mike가 주소 매핑됩니다 그래서 update에서 필드를 추가하거나 할 때 mike에 직접적인 영향을 끼칩니다 (주소 매핑이기 때문에) 1999와 singer는 update의 매개변수입니다 즉, call(this값, 해당 함수의 매개변수들...) 이런 식으로 사용합니다

 

const user = {
    name: "Mike",
    showName : function () {
        console.log(`hello, ${this.name}`);
    }
};

user.showName(); // hello, Mike

let fn = user.showName;
fn();            // hello, undefined

fn.call(user);  // hello, Mike
fn.apply(user); // hello, Mike

let boundFn = fn.bind(user);
boundFn();      // hello, Mike

bind의 경우 this를 영구히 가질 수 있는 함수로 만들어줍니다 call하고 apply하고 매우 유사해보이는데 call과 apply의 경우 해당 함수를 새롭게 만들진 않지만 bind의 경우 새로운 함수를 만듭니다 (boundFn) 그 곳에는 this로 선정한 객체가 들어갑니다