개발공부/자바스크립트(14)
-
[코어자바스크립트] 스코프, 스코프 체인
스코프, 스코프 체인 스코프란? 식별자에 대한 유효범위 변수에 접근 할 수 있는 범위 global scope(=전역 스코프) A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 접근 가능 local scope(=지역 스코프) A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근 가능 예) 함수 스코프: 함수내에서 선연한 변수는 해당 함수 내에서만 접근 가능 Scope Chain(=스코프 체인) 안에서부터 바깥으로 차례로 검색해 나감 ➡️ 지금까지 LE의 environmentRecord의 정보 수집 과정을 보았는데 드디어 LE 내부의 나머지 outerEnvironmentReference가 나온다. outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 Lexical..
2021.07.30 -
[JS] 콜백 지옥과 비동기 제어
콜백 지옥과 비동기 제어 콜백지옥이란? 콜백 함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상 비동기란? 동기적인 코드는 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식 반면, 비동기적인 코드는 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식을 말한다. ex) setTimeout, addEventListener, XMLHttpRequest 요즘엔 웹의 복잡도가 높아진 만큼 비동기적인 코드의 비중도 높아지면서 콜백 지옥에 빠지기가 쉬워졌다. // 콜백지옥의 예시 // 0.5초 주기마다 커피 목록 수집&출력 setTimeout(function (name) { var coffeeList = name; console..
2021.07.29 -
[JS] 비동기, promise, async/await 정리
동기 vs 비동기 ✨ 동기: Synchronous 코드가 작성된 순서대로 실행된다. ✨ 비동기: Asynchronous 먼저 실행 된 코드의 작업이 끝나기 전 다음 코드의 실행이 가능하다. 일상생활에 적용한 동기, 비동기 예시를 보면, 🍒 오늘할일을 동기적으로 처리하면 계획한 시간안에 못끝낼 확률이 커보인다. 왜냐하면, 빨래가 다 될때까지 기다렸다가 휴대폰 수리도 다 될때까지 기다렸다가 자바스크립트 공부를 시작해야하기때문이다. 반면, 비동기적으로 처리한다면 빨래 돌아가는 동안 공부를 마친 후 휴대폰 수리를 맡겨두고 수리가 되는 동안 밍밍이 산책을 다녀올 수 있다. 아래는 비동기작업의 대표적인 예시 setTimeout()을 사용한 코드이다. setTimeout은 브라우저에서 제공하는 웹API로 지정한 시간..
2021.07.07 -
[코어 자바스크립트] 클로저① - 클로저의 의미 및 원리 이해
클로저란? 클로저에대한 정의는 다양하지만 일반적인 정의는 다음과 같다. "A closure is the combination of a function and the lexical environment within which that function was declared." 여기서 'combination'은 내부함수에서 외부 변수를 참조하는 경우에 한해서만 combination, 즉 '선언될 당시의 Lexical Environment와의 상호관계'가 의미가 있다. -> 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상 -> 외부함수가 더이상 사용되지않는 경우도, 내부함수가 외부함수에 접근 할 수 있다. // 클로저가 아닌 예제코드1 var outer = function () { var a..
2021.06.27 -
[코어 자바스크립트] 콜백 함수
콜백 함수란? 어떤 함수를 호출하며 특정 조건일때 이 함수를 실행하달라고 요청하는 콜백함수는 제어권과 관련이 깊다. 제어권 호출시점 var count = 0; var cbFunc = function () { console.log(count); if(++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); // 결과 >> 0 (0.3초) >> 1 (0.6초) >> 2 (0.9초) >> 3 (1.2초) >> 4 (1.5초) 이코드는 count가 4를 초과 하기전까지 콜백함수 cbFunc를 0.3초마다 자동으로 실행한다. setInterval이라고 하는 '다른 코드'에 cbFunc 함수를 넘겨주자 제어권을 넘격받은 setInterv..
2021.06.27