본문 바로가기

분류 전체보기

(290)
콜백지옥 & 동기 비동기 ✅ 콜백지옥이란(엉망진창 함수) 콜백 함수를 **익명 함수**로 전달하는 과정이 반복되어 코드의 **들여쓰기 수준이 헬 수준**인 경우를 말해요! 😂😂😂 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생하죠. 뭐가문제일까요? 가독성이 정말 **지옥(hell)**(오랜 상태로 이렇게 짜여왔기 때문에, 수정도 어렵습니다.) ✅동기 vs 비동기 동기 : synchronous 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요! CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드구요. 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드에요 😎 비동기 : a + synchronous ⇒ async라고들 흔히 부르죠 실행 중인 코드의 완료..
콜백 함수 내부의 this에 다른 값 바인딩하기 🤔 콜백 함수 내부에서 this가 문맥에 맞는 객체를 바라보게 할 수는 없을까? 🤔 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법 우리가 이전에 강제로 this를 제어하는 방법에서 살짝 다뤘던 방식이에요 👀 var obj1 = { name: 'obj1', func: function() { var self = this; //이 부분! return function () { console.log(self.name); }; } }; // 단순히 함수만 전달한 것이기 때문에, obj1 객체와는 상관이 없어요. // 메서드가 아닌 함수로서 호출한 것과 동일하죠. var callback = obj1.func(); setTimeout(callback, 1000); 실제로는 this를 사용하는게 아니기도 하고,..
콜백 함수는 함수다 ✅ 콜백 함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로 호출해요. var obj = { vals: [1, 2, 3], logValues: function(v, i) { console.log(this, v, i); } }; //method로써 호출 obj.logValues(1, 2); //callback => obj를 this로 하는 메서드를 그대로 전달한게 아니에요 //단지, obj.logValues가 가리키는 함수만 전달한거에요(obj 객체와는 연관이 없습니다) [4, 5, 6].forEach(obj.logValues);
콜백함수_this 바인딩 ✅ this 앞전 시간에서 우리는 콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조한다 라고 귀가 아프도록 들어왔어요. 하지만, 예외사항 기억 나세요? 🙄 🔥제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다. 내부적으로는 어떻게 이걸 가능케 하는 것일까요? 별도의 this를 지정하는 방식을 이해하기 위해서. 그리고, 제어권에 대한 이해를 높이기 위해서 map함수를 직접 구현해 볼까요? 핵심은 call, **apply**에 있어요! // Array.prototype.map을 직접 구현해봤어요! Array.prototype.mapaaa = function (callback, thisArg) { var mappedArr = []; for ..
콜백함수_인자 & this 바인딩 인자 map 함수: 배열을 하나하나 순회하면서 각 배열 요소를 변환하여 새로운 배열을 반환합니다. 기존 배열을 변경하지 않고, 새로운 배열을 생성한다는 것을 알고 계시죠? 👍👍 // map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있네요! var newArr = [10, 20, 30].map(function (currentValue, index) { console.log(currentValue, index); return currentValue + 5; }); console.log(newArr); // -- 실행 결과 -- // 10 0 // 20 1 // 30 2 // [ 15, 25, 35 ] 자, 그렇다면 콜백함수에서 여러분이 넣으신 currentValue, index 이 변수의 순서..
콜백함수_제어권 어떠한 제어권을 콜백함수를 넘겨받은 코드는 갖게될까요? 호출 시점 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가져요! 위 설명처럼, 아래 예시에서는 콜백 함수의 제어권을 넘겨받은 코드(=setInterval)가 언제 콜백함수를 호출할지에 대한 제어권을 가지게 돼요! 0.3초라는 적절한 시점을 본인의 함수에 적어놓은대로 실행하는 거죠. var count = 0; // timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고있는지' // 알려주는 id값 var timer = setInterval(function() { console.log(count); if(++count > 4) clearInterval(timer); }, 300); var count = 0; var c..
콜백함수 현명하게 사용하기 이번 시간엔 콜백 함수에 대해 배울거에요. 앞 시간에 수 차례 우리는 콜백 함수를 이미 사용해 왔습니다. 가령 예를 들면, setTimeout, 배열에 대한 forEach 등에서요. // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number); }); 이처럼 다른 코드의 인자로 넘겨주는 함수인 콜백함수의 여러가지 특징과 바람직하지 않은 상황(콜백 지옥)hell을 만났을 때 어떻게 대처해야 할지 등에 대한 내용을 배워봅시다. 이러한 과정에서 자연스럽게 동..
Javascript 언어 공부 Plan JavaScript 언어 공부 프론트엔드를 선택, 이제 약간씩 개발 언어에 대해 친숙해지고 있는 중 JavaScript 문법 종합반 공부를 하고 우선 1-2 주차 내용은 따라가볼만 했는데, 3주차 내용을 그냥 듣고는 이해가 안되서 이번주에 2회독으로 노트정리하며 다시 이해하고 정리하는 시간을 가졌다. 우선 JS문법 강의는 5주차까지 개발블로그에 노트정리하며 듣는 것으로 하고 확실히 프로그래머스 JS코딩 테스트가 실력을 파악하는 바로미터인 것 같다. 문제를 되도록 메서드를 사용하고 메서드 내용을 정리하는 형태로 공부해야 할 것 같다. [ JavaScript 학습 계획] ✅ JavaScript문법 종합반 5주차 개발블로그 노트정리(Only 3, 4, 5주차) https://webcreastory.tistor..
call & apply & bind보다 편리한 방법은?_v3.11 var func = function (a, b, c, d) { console.log(this, a, b, c, d); }; var bindFunc = func.bind({ x:1 }, 4, 5); // func와 bindFunc의 name 프로퍼티의 차이를 살펴보세요! console.log(func.name); // func console.log(bindFunc.name); // bound func ✅ 생성자 내부에서 다른 생성자를 호출(공통된 내용의 반복 제거) Student, Employee 모두 Person입니다. name과 gender 속성 모두 필요하죠. 그러니 Student와 Employee 인스턴스를 만들 때 마다 세 가지 속성을 모두 각 생성자 함수에 넣기 보다는 Person이라는 생성자 ..
명시적 this 바인딩 & 유사배열객체_v3.10 명시적 this 바인딩 자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법입니다. 크게, **call / apply / bind**에 대해 알아보겠습니다. call 메서드 호출 주체인 함수를 즉시 실행하는 명령어에요. call명령어를 사용하여, 첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있어요. 쉽죠? 예시를 통해 확인해봅시다. var func = function (a, b, c) { console.log(this, a, b, c); }; // no binding func(1, 2, 3); // Window{ ... } 1 2 3 // 명시적 binding // func 안에 this에는 {x: 1}이 binding돼요 ..