CodingCredit

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완한 문법이다.😃 코드 async function logName() { let user = await fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } } async & await 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 함수의 앞에 async라는 예약어를 붙인다. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드앞에 await를 붙인다. 이때, 비동기 처리 메서드가 꼭 프로미스 객체를 반환해..

비동기 비동기란? 요청과 결과가 동시에 일어나지 않는 것. 따라서 다른 요청이 들어오면, 이전 요청의결과를 기다리지 않고 새 요청을 수행한다. 자바스크립트에서 비동기 처리가 필요한 이유를 생각해보자. 화면에서 서버로 데이터를 요청했을 때, 서버가 언제 그요청에 대한 응답을 줄지도 모르는데 다른 코드를 실행 안한 채, 무작정 기다리고 있을수는 없다. 비동기 처리방식의 문제점 function getData(){ let tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined getData()를..

Set객체에 대해 처음알았다!🤩 Set객체는 유일한 값을 저장하는 객체이다. 즉, 하나의 Set 내부의 어떠한 값이든 그 Set 콜렉션 내에서 유일한 값이다. 또한, Set은 객체이지만 키를 갖지 않는다. 요소값만을 갖는다!! Set 객체를 배열로 변환하는 3가지 방법 Array.from() const set = new Set([1, 2, 3]); const arr = Array.from(set); Spread Syntax const set = new Set([1, 2, 3]); const arr = [...set] forEach const set = new Set([1, 2, 3]); const arr = []; set.forEach((element) => { arr.push(element); }) S..

배열의 모든 요소를 함수에 입력하여 가공할 때 쓰는 forEach 메소드! 오늘 forEach메소드를 쓰다가 예외처리를 해줘야했는데 어떻게 처리해야할지 고민했다. 나는 forEach 메소드는 for루프안에서 각 요소를 함수에 넣어 실행시킨다고 생각했기때문에, for문의 continue를 써야할지, 함수의 return으로 함수를 중단시켜야할지 고민했는데, 결론부터 말하면 return을 쓰면 된다! forEach 메소드 내부에서의 예외처리 생각해보면 쉬운문제다.😋 forEach는 이미 내장되어있는 함수이고, 우리가 사용할 때 조작하는 내용은, 콜백함수안의 내용이다. 따라서 함수에 예외처리를 할때와 마찬가지로, return을 사용해주면 된다. let array = [1,2,3,4]; array.forEach(..

this는 this를 사용한 함수가 어떻게 불리느냐(어디에서 호출되느냐)에 따라 가리키는 값이 달라진다. 따라서 원하는 this를 지정해주기 위한 method가 있는데 바로 call, apply, bind 이다. 이중 call과 apply는 this를 지정해줌과 동시에 함수를 호출하며 bind는 호출하지 않는다는 차이점이 있다. 오늘은 bind를 사용하여 비동기함수인 setTimeout의 this를 제어해 보자. 왜 setTimeout의 this는 요상할까?? setTimeout의 this는 조금은 의도와는 다르게 작동한다. strict모드일 때는 undefined가 호출되고, strict모드가 아닐 때는, 전역객체 (window 혹은 global)가 호출된다. 왜일까?? 이건 이벤트루프,스택,큐와 관련..

pseudoclassical 상속 방법 상위클래스 Person은 다음과 같다. function Person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; Person.prototype.greeting = function() { alert('Hi! I\'m ' + this.name.first + '.'); }; 상속받아서 생성자함수 수정하기. function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last,..