this binding
// 콜백함수 제어권
// 1. 호출 시점에 대한 제어권
// setInterval : 반복해서 매게변수로 받은 콜백함수의 로직을 수행
// var count = 0;
// var timer = setInterval(function () {
// console.log(count);
// if (++count > 4) clearInterval(timer);
// }, 300);
// var count = 0;
// var cbFunc = function () {
// console.log(count);
// if (++count > 4) clearInterval(timer);
// };
// var timer = setInterval(cbFunc, 300);
// //----------------------------------------------------------------------------------------------------------------
// 2.인자에 대한 제어권
// map 함수
// var newArr = [10, 20, 30].map(function (currentValue, index) {
// console.log(currentValue, index);
// return currentValue + 5;
// });
//index & currentValue : 사람이 이해할 수 있는 변수명일 뿐
// var newArr = [10, 20, 30].map(function (index, currentValue) {
// console.log(index, currentValue);
// return currentValue + 5;
// });
// console.log(newArr);
// Array.prototype.map123 = function (callback, thisArg) {
// var mappedArr = [];
// for (var i = 0; i < this.length; i++) {
// var mappedValue = callback.call(thisArg || global, this[i]);
// mappedArr[i] = mappedValue;
// }
// return mappedArr;
// };
// var newArr = [1, 2, 3].map123(function (number) {
// return number * 2;
// });
// console.log(newArr);
// 콜백함수는 함수다. > 함수이기 때문에 함수로써의 호출로 인식이 되서 this 바인딩을 글로벌로 한다 = 맥락을 잃어버린다 = 내부적인 맥락이 아니라 전역객체를 바라보게 된다.
//----------------------------------------------------------------------------------------------------------------
// obj
// var obj = {
// values: [1, 2, 3],
// logValues: function (v, i) {
// console.log("test start");
// if (this === global) {
// console.log("this global");
// } else {
// console.log(this, v, i);
// }
// console.log("test end");
// },
// };
// // method로써의 호출
// // obj.logValues(1, 2);
// // forEach, map, filter 다 똑같다 > methods를 넣은것처럼 보이나 아니다. 함수 자체를 넣은것이다. 매게변수로 넘겨주면 안된다.
// [4, 5, 6].forEach(obj.logValues);
//----------------------------------------------------------------------------------------------------------------
// 콜백 훔수 내무의this 에 다른 값 바인딩하기
// closure 방식
// var obj = {
// name: "obj1",
// func: function () {
// var self = this;
// return function () {
// console.log(self.name);
// };
// },
// };
// var callback = function () {
// console.log(self.name);
// };
// setTimeout(callback, 1000);
// 아래는 하드코딩(결과만을 위한)
// var obj1 = {
// name: "obj1",
// func: function () {
// console.log(obj1.name);
// },
// };
// setTimeout(obj1.func, 1000);
// var obj = {
// name: "obj1",
// func: function () {
// var self = this;
// return function () {
// console.log(self.name);
// };
// },
// };
// var obj2 = {
// name: "obj2",
// func: obj.func,
// };
// bind
// var obj1 = {
// name: "obj1",
// func: function () {
// console.log(this.name);
// },
// };
// setTimeout(ojb1.func.bind(obj1), 1000);
// 어떤 this 나 바인딩 할수있음 >> .bound 쓰는게 가장 좋은 방법.
// var obj2 = { name: "obj2" };
// setTimeout(obj1.func.bound(obj2), 1500);
//----------------------------------------------------------------------------------------------------------------
// 콜백지옥 > 익명함수의 익명함수, 매게변수자리에 계속 익명함수가 차게되면 들여쓰기 무한으로..
// 유지보수가 미친듯이 힘듬. 가독성이 지옥.
// 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생.
// 동기 vs. 비동기
// 동기 > 일의 순서가 전부 끝날때까지 다음 순서는 기다려야함
// > 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
// > CPU의 게산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드
// > 계산이 복잡해서 CPU가 계산하는데에 오래 걸리는 코드 역시 동기적 코드
// 비동기 > 하나를 전부 끝내지않고 여러가지를 한꺼번에 하는 것
// > 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
// > setTimeout, addEventListner등
// > 별도의 요청 실행대기 보류 등과 관련된 코드는 모두 비동기적 코드
// setTimeout(function () {
// console.log("1");
// }, 1000);
// console.log("2");
