#자바스크립트 스터디 8 - 클로저, setTimeout, call/apply/bind

*변수와 호이스팅, 함수 선언문 특징에 대한 선행 학습이 필요함

 

 Clousure

//closure

functon makeCOunter(){
    let num = 0; //은닉화

    return function() { //위의 num! 외부함수의 변수임 
        return num++;
    }
}

let counter = makeCounter();

console.log(counter()); //0
cousole.log(counter()); //1
console.log(counter()); //2 실행할수록 변수의 값을 기억하여 계산됨

 

 

setTimeout / setInterval

일정시간이 지나고 함수를 실행

일정기간동안 함수를 반복

 

setTimeout(함수, 시간, 인수)

 

clearTimeout : 예정된 작업을 지운다. 스케줄링 취소

 

 

setInterval(함수, 시간, 인수)

위와 동일하게 실행됨

 

실습1. 접속 초 알려주기

//setTimeout : 일정시간이 지나고 함수를 실행
//setInterval : 일정기간동안 함수를 반복

let num = 0;

function showTime() {
    console.log(`안녕하세요. 접속하신지 ${num++} 초가 지났습니다. `);
};


setInterval(showTime, 3000); //

 

 

실습2. 계속 알려주기는 싫고 5초 후 끝내고싶다면?

//setTimeout : 일정시간이 지나고 함수를 실행
//setInterval : 일정기간동안 함수를 반복

let num = 0;

function showTime() {
    console.log(`안녕하세요. 접속하신지 ${num++} 초가 지났습니다. `);
    if(num > 5){
        clearInterval(tId);
    }
};

const tId = setInterval(showTime, 3000);

 

 

 

call, apply, bind

 

함수호출 방법과 관계없이 this로 특정값을 지정할 수 있다. 

 

1. call

const mike = {
    name : "Mike",
};

const tom = {
    name : "Tom",
};

function showThisName(){
    console.log(this.name); //this
}


function update (birthYear, occupation){ //생년과 직업을 받아서 객체의 데이터를 업데이트 해줌
    this.birthYear = birthYear;
    this.occupation = occupation;
};

update.call(mike, 1999, 'singer'); // 첫번째 매개변수는 this로 사용될 값, 함수의 매개변수 함께 넣어줌
console.log(mike);

update.call(tom, 2002, "teacher");
console.log(tom);

this 매개변수를 직접 받아 넣어준 것이 포인트

 

2. apply : 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같음. apply는 매개변수를 배열로 받는다. 

const mike = {
    name : "Mike",
};

const tom = {
    name : "Tom",
};

function showThisName(){
    console.log(this.name); //this
}


function update (birthYear, occupation){ //생년과 직업을 받아서 객체의 데이터를 업데이트 해줌
    this.birthYear = birthYear;
    this.occupation = occupation;
};

update.apply(mike, [1999, 'singer']); // 첫번째 매개변수는 this로 사용될 값, 함수의 매개변수는 배열로
console.log(mike);

// call 과 같은 값이 나옴

 

실습3. max와 min 계산하기

const { max } = require("lodash");

const num = [3, 10, 1, 6, 4];


const minNum = Math.min.apply(null, num); //(null, 3,10,1,6,4) 와 같음
const maxNum = Math.max.call(null, ...num); //call은 차례대로 연산자가 들어가야 하니까 스프레드 연산자 쓴다.

console.log(minNum);
console.log(maxNum);

 

3. bind

//bind는 함수의 this 값을 영구히 바꿀 수 있다. 

const mike = {
    name : "Mike",
};

function update (birthYear, occupation){ //생년과 직업을 받아서 객체의 데이터를 업데이트 해줌
    this.birthYear = birthYear;
    this.occupation = occupation;
};

const updateMike = update.bind(mike); // mike

updateMike(1980, "police");
console.log(mike);

 

 

실습4. 이름부르기

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

user.showName();

let fn = user.showName; //fn에 할당할 때 this를 잃어버린거임

fn.call(user) //this 지정하기

fn.apply(user);

let boundFn = fn.bind(user);

boundFn();