Javascript 43

6. 콜백 함수 - 내부 this에 다른 값 바인딩

//콜백 함수 내부의 this에 다른 값 바인딩 하기 //콜백 함수 내부에서 this가 문맥에 맞는 객체를 바라보게 할수 는 없나? //콜백 함수 내부의 this에 다른 값을 바인딩하는 방법 var obj = { name: "obj", func: function(){ var self = this; // 이부분. return function(){ console.log(self.name); }; }, }; var callback = obj.func(); setTimeout(callback, 1000); 위 코드를 해석하면 아래와 같다. //콜백 함수 내부의 this에 다른 값 바인딩 하기 //콜백 함수 내부에서 this가 문맥에 맞는 객체를 바라보게 할수 는 없나? //콜백 함수 내부의 this에 다른 값을..

JavaScript/4주차 2023.05.25

5. 콜백 함수 - 객체의 메서드 전달 시 this

//이 object는 2가지의 속성을 가진다. //1.vals라는 배열을 가졌고, //2.logValues라는 함수를 가졌다. var obj = { vals: [1, 2, 3], logValues: function (v, i) { console.log(">>> test start"); console.log(this,v,i); console.log(">>> test ends"); }, }; //method로서 호출 obj.logValues(1,2); //{ vals: [ 1, 2, 3 ], logValues: [Function: logValues] } 1 2 //콜백 함수로 들어가보자. //forEach, map, filter var obj = { vals: [1, 2, 3], logValues: func..

JavaScript/4주차 2023.05.25

4. 콜백 함수 - this 바인딩

this - 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조 - call, apply //setTimeout 은 내부에서 콜백 함수를 호출할 때, //call 메서드의 첫번째 인자에 전역객체를 넘긴다. //따라서 콜백 함수 내부에서의 this가 전역객체를 가리킨다. setTimeout(function () { console.log(this);},300); //global //forEach도 마찬가지로 콜백 뒷 부분에 this를 명시해주지 않으면 //전역객체를 넘긴다. 만약 명시한다면 해당 객체를 넘긴다. [1,2,3,4].forEach(function(x) { console.log(this); //global }); //만약 아래와같이 {x:1}처럼 명..

JavaScript/4주차 2023.05.25

3. 콜백 함수 - 제어권 2

인자에 대한 제어권을 받는다 1. Map 함수 //Map 함수 var newArr = [10, 20, 30].map(function(currentVal, index) { console.log(currentVal,index); }); //결과는 뭐가 될까? console.log(newArr); //undefined //map은 return값을 무조건 필요, 없으면 undefined할당 //Map 함수 var newArr = [10, 20, 30].map(function(currentVal, index) { console.log(currentVal,index); return currentVal + 5; }); console.log(newArr); //[15, 25, 35] 그럼 만약 cuurentvalue와..

JavaScript/4주차 2023.05.25

2. 콜백 함수 - 제어권 1

콜백 함수를 받는 주체는 무슨 제어권을 받는가를 보자 1. 호출 시점에 대한 제어권을 받는다. - setInterval() - 각 호출 사이에 고정된 시간이 지연되면 이를 반복적으로 호출하거나 코드 스니펫을 실행 - 예시 코드 var count = 0; var timer = setInterval(function () { console.log(count); if(++count > 4) clearInterval(timer); }, 300); //결과는 0.3초씩 count를 찍어주는데 5가 되면 4까지만 찍히고 끝난다. //출력값↓ //0 //1 //2 //3 //4 var count = 0; var cbFunc = function () { console.log(count); if(++count > 4) c..

JavaScript/4주차 2023.05.25

1. 콜백 함수 - 기본 개념

//콜백 함수 //setTimeout setTimeout(function(){ console.log('hello'); }, 1000); //forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number) }); //이부분이 콜백 함수 부분 // function(number) { // console.log(number) // } 이처럼 다른 코드의 인자로 넘겨주는 함수 => 콜백함수 콜백함수를 받는 주체(forEach, setTimeout) 이 주체들이 받아서 실행한다.(제어권은 이들에게 있다) =>action에 대한 제어권은 함수에게 있다. => 콜백함수는 다른 코드에게 인자를 넘겨주면서 제어권도 ..

JavaScript/4주차 2023.05.25

14. 3주차 끝 숙제

나이든 유저 아래 코드에서 getAged 부분을 작성하면된다. var user = { name: "john", age: 20, } var getAged = function (user, passedTime) { // 여기를 작성해 주세요! } var agedUser = getAged(user, 6); var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { console.log("Failed! user2 doesn't exist!"); } else if (user1 !== user2) { console.log("Passed! If you become older, you will be different from you in t..

JavaScript/3주차 2023.05.25

13. call apply bind 응용

사용하기전 코드를 살펴보자. function Student(name, gender, school) { this.name = name; this.gender = gender; this.school = school; } function Employee(name, gender, company) { this.name = name; this.gender = gender; this.company = company; } var kd = new Student('길동', 'male', '서울대'); var kd = new Employee('길순', 'female', '삼성'); 여길 보면 똑같이 이름과 성별이 겹친다. 그래서 이 같은것을 따로 빼려고한다. 그때 call을 사용해서 사람이라는 공동 함수로 빼준다. func..

JavaScript/3주차 2023.05.24

12. 명시적 this 바인딩 및 유사배열객체

상황별 규칙을 깨고 명시적으로 지정하는 방법 1.call // 명시적 this binding // 상황별 규칙을 깨고 명시적으로 지정하는 방법 // call, apply, bind // 1. call var func = function (a, b, c) { console.log(this, a, b, c); }; //no binding func(1, 2, 3); //global을 바로보고 있다. //명시적 binding //전역객체를 바라보고 있는 시점에서 명시적 바인딩을 한것 func.call({ x: 1 }, 1, 2, 3); // this , 1, 2, 3 //호출주체가 있는 경우 var obj = { a: 1, method: function (x, y) { console.log(this.a, x, ..

JavaScript/3주차 2023.05.24

11. this 우회방법, 콜백 함수 this, 생성자 함수 this

1. 우회하는 방법 - 1. 변수를 활용하는 방법 내부 스코프에 이미 존재하는 this를 별도의 변수에 할당하는 방법. 예시코드 var obj1 = { outer: function () { console.log(this); //(1) outer //AS-IS (기존) var innerFunc1 = function() { console.log(this); // (2) 전역객체 }; innerFunc1(); //TO-BE (이후) //흐름을 유지하는 this를 찍는것같은 //효과가 있다. var self = this; var innerFunc2 = function () { console.log(self); // (3) outer }; innerFunc2(); } }; //메서드 호출 부분 obj1.outer..

JavaScript/3주차 2023.05.24