About Computer

call, apply, bind: 함수 호출 방식과 관계없이 this를 지정할 수 있음

call: call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있음

const baby = {
	name: "Baby"
};

const angel = {
	name: "Angel"
};

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

showThisName(); // “” 빈 문자열 출력
showThisName.call(baby); // Baby 출력

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

update.call(angel, 1997, "singer");

console.log(angel); // { name: “Angel”, birthYear: 1997, occupation: “singer” } 출력

  →  showThisName() 함수에 인수로 아무것도 넘겨주지 않았을 때는 this는 window를 의미한다. 그래서 this.name은 window.name이 되어 빈 문자열을 출력한 것이다.

  →  call()을 사용하여 함수를 호출할 때에 call의 첫번째 매개변수는 this로 사용할 값이고, 그 뒤의 매개변수는 호출하는 함수에 넘겨줄 인수가 된다.

  →  위의 예시를 보면 angel이 this로 사용할 값이 되고, 1997과 “singer”는 각각 birthYear와 occupation의 인수로 넘어가게 되는 것이다.

apply: 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같음

  -  call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 배열로 받음

const baby = {
	name: "Baby"
};

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

update.apply(baby, [2000, "teacher"]);

console.log(baby); // { name: “Baby”, birthYear: 2000, occupation: “teacher” } 출력

apply는 배열 요소를 함수 매개변수로 사용할 때 유용

e.g.) 

const minNum = Math.min(3, 10, 1, 6, 4);

const maxNum = Math.max([3, 10, 1, 6, 4]);

 
console.log(minNum); // 1 출력

console.log(maxNum); // NaN 출력, 배열을 넘겨줬기 때문

e.g.)        

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

const minNum = Math.min(...nums);

const maxNum = Math.max.apply(null, nums);

 

console.log(minNum); // 1 출력

console.log(maxNum); // 10 출력

  →  call을 사용하려면 Math.max.call(null, ...nums);가 됨

  →  자세히 비교해보면, call은 (null, 3, 10, 1, 6, 4)이고, apply는 (null, [3, 10, 1, 6, 4])가 됨

bind: 함수의 this 값을 영구히 바꿀 수 있음

const angel = {
	name: "Angel"
};

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

const updateAngel = update.bind(angel);
updateAngel(1997, "programmer");

console.log(angel); // { name: “Angel”, birthYear: 1997, occupation: “programmer” } 출력

e.g.)         

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

user.showName(); // hello, Angel 출력

let fn = user.showName;

fn(); // hello, 출력
fn.call(user); // hello, Angel 출력
fn.apply(user); // hello, Angel 출력

let boundFn = fn.bind(user);

boundFn(); // hello, Angel 출력

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=KfuyXQLFNW4 

setTimeout: 일정 시간이 지난 후 함수를 실행

  -  두개의 매개변수를 받음

  -  첫 번째 매개변수는 일정 시간이 지난 후 실행될 함수, 두 번째는 지연될 시간

e.g.)         

function fn() {
	console.log(3);
}

setTimeout(fn, 3000); // 3초 후에 숫자 3 출력

e.g.) 위 예제와 동일하게 작동함

setTimeout(function() {
	console.log(3);
}, 3000);

e.g.)

const tId = function showName(name) {
	console.log(name);
}

setTimeout(showName, 3000, "Angel");
clearTimeout(tId);

  -  setTimeout()의 매개변수를 확인해보면, showName은 실행시킬 함수, 3000은 delay시간, ‘Angel’은 showName함수에 들어갈 인수이다.

  -  clearTimeout은 예정된 작업을 제거

e.g.) delay = 0 일 때

setTimeout(function() {
	console.log(2);
}, 0);

console.log(1);

  →  1이 먼저 출력되고 2가 출력됨

      현재 실행 중인 스크립트가 종료된 이후에 스케줄링 함수를 실행시키기 때문

      그리고 브라우저는 기본적으로 4ms 이상의 대기 시간이 있음

setInterval: 일정 시간 간격으로 함수를 반복

function showName(name) {
	console.log(name);
}

const tId = setInterval(showName, 3000, "Angel"); // 3초마다 “Angel” 출력

clearInterval(tId); // 예정된 작업을 제거

e.g.)         

let num = 0;

function showTime() {
	console.log(`${num++}초 지났습니다.`);
	
	if(num >3) {
		clearInterval(tId);
	}
}

const tId = setInterval(showTime, 1000);


//→	0초 지났습니다.
//	1초 지났습니다.
//	2초 지났습니다.
//	3초 지났습니다. 출력

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=nwk_aNbFEEc 

자바스크립트는 어휘적 환경(Lexical Environment)를 가진다.

e.g.)

1.  코드가 실행되면 스크립트 내에서 선언한 변수들이 Lexical 환경에 올라감

    변수는 초기화 되지 않아 사용할 수 없지만, 함수는 초기화 되어 바로 사용 가능함

2.  one은 초기화가 되어 사용 가능하지만 아직 값이 할당되어 있지 않기 때문에 초기값 undefined를 가짐

3.  one에 1이 할당됨

4.  함수 선언은 초기에 완료되었기 때문에 마지막 라인으로 이동해 함수가 실행됨

    새로운 Lexical 환경이 만들어지고 이 곳에는 함수가 넘겨받은 매개변수와 지역변수들이 저장됨

    내부 Lexical 환경은 외부 Lexical 환경에 대한 참조를 가짐

    코드에서 변수를 찾을 때, 먼저 내부에서 찾고 없으면 외부, 전역 순으로 범위를 넓혀서 찾음

    위 코드에서 one과 num은 먼저 내부 Lexical 환경에서 찾는다.

    num은 있지만 one은 없으므로 외부 Lexical 환경에서 찾게 된다.

e.g.)

1.  최초 실행 시 makeAdder 함수와 변수 add3은 전역 Lexical 환경에 들어감

    add3은 초기화가 안된 상태로, 사용할 수 없음

2.  const add3 = makeAdder(3); 라인이 실행될 때, makeAdder 함수가 실행되면서 makeAdder의 Lexical 환경이 생성됨

    함수의 Lexical 환경에는 넘겨받은 매개변수와 지역변수들이 저장됨

3.  전역 Lexical 환경에 있던 add3은 실행되었으니 return하는 함수가 됨

4.  이제 마지막 라인에 있는 console.log(add(3));이 실행되면 return함수가 실행되는데, 이때 또 Lexical 환경이 생성됨

Closure: 함수와 렉시컬 환경의 조합

  -  함수가 생성될 당시의 외부 변수를 기억

  -  생성 이후에도 계속 접근 가능

  -  const add10 = makeAdder(10);이 실행되어 makeAdder(10)이 호출되지만, 밑에 console.log(add3(1))에는 아무 변화 없음

  -   add10과 add3은 서로 다른 환경을 가지고 있기 때문

e.g.)

  -  오직 counter를 통해 num을 증가시키고 반환하는 것 외에는 값을 변경할 수 없음

↓[코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=tpl2oXQkGZs