DYO 공부하는 블로그

클로저와 제네레이터 함수에 대해서 알아 보자. 클로저와 제네레이터 함수는 둘 다 함수 내부에 있는 값을 기억하고 있을 수 있다는 공통점이 있다. 하지만 이 둘은 동작과 기능에서 차이가 있는데, 이 둘의 차이를 알아보도록 하자. - 클로저의 경우function counter(){ let count = 0; return () => { return count++; }}let myCounter = counter();console.log(myCounter()) // 0console.log(myCounter()) // 1console.log(myCounter()) // 2클로저의 경우 내부 함수를 리턴하는 구조로 이루어진다. 리턴하는 함수나 메서드에 의해서만 외부 함수에 접근할 수 있으며,..

JS의 Promise는 비동기 실행을 처리하기 위한 객체이다. 일단 비동기 처리부터 차근차근 이해해보자. 비동기 처리 :순서대로 처리되는 동기 코드와 달리 비동기 코드는 실행됐을 때 이 코드가 언제 완료될 지 명확하지 않은 코드를 의미한다. 일반적으로 웹에서는 서버 통신을 받아야 하는 경우 비동기처리를 해야 한다. JS에서 비동기처리는 Callback, Promise, async/await을 이용해 처리한다. Promise란?객체는 비동기 처리를 담당하는 약속 객체다. 프로미스의 내부의 값은 then, catch, finally 등의 내부에서 확인할 수 있으며, 프로미스 객체의 then 체이닝을 이용해 비동기 처리를 순서대로 수행하도록 한다.function weed(){ return new Prom..

디바운스(debounce)와 스로틀(throttle)은 고빈도 이벤트를 제어하기 위한 대표적인 퍼포먼스 최적화 기법이다. resize, mouse 이동 관련한 이벤트(호출 빈도가 정말 많은 이벤트) 들을 관리하기 위해 사용한다. 1. 디바운스이벤트가 연속해서 발생하는 경우, 일정 시간 기다렸다가 한 번만 실행하도록 한다. 마지막으로 수행한 이벤트만 실행됨. - 작동 원리이벤트가 발생할 대마다 타이머를 초기화한다. 일정 시간 동안 추가 이벤트가 없으면 콜백을 실행한다. - 실제 사용 예시ground.addEventListener("mousemove", debounce(handleMove, 1000));// 디바운스function debounce(f, limit = 1000) { let timeout; ..

1. 실행 컨텍스트란?실행 컨텍스트(Execution Context)는 실행 중인 자바스크립트 코드의 실행 환경을 추상화한 객체이며, 코드가 호출 될 때마다 자바스크립트는 실행 컨텍스트를 생성하고 이를 스택 구조로 관리한다.- 새로운 컨텍스트가 생성되면 실행 컨텍스트에 push (가장 상위에 위치)- 실행이 종료되면 pop하여 작업을 마친 컨텍스트를 제거- 스택의 가장 위의 컨텍스트가 현재 실행 중인 코드의 환경 2. 실행 컨텍스트의 내부 구성- 렉시컬 환경 (Lexical Environment) : 현재 컨텍스트의 변수, 함수 선언 등을 저장하는 구조- 환경 레코드 (Environment Record) : 실제 식별자와 값을 저장하는 객체- 외부 렉시컬 환경 참조 (outer) : 상위 스코프와 연결(..

1. for infor in은 키를 순회하는 기능을 수행합니다.const obj = { a: 1, b: 2 };for (let key in obj) { console.log(key); // a, b console.log(obj[key]); // 1, 2}객체에서 참조할수 있는 값(Property)을 찾을 때 주로 사용합니다. const admin = "admin";for (let c in admin) { console.log(c);}// 결과// "0"// "1"// "2"// "3"// "4"Array나 string을 참조할 때는 index 값을 선언된 변수에 담지만, 프로토타입 속성까지 순회하는 경우가 있어 보통 사용되진 않습니다. 큰 의미가 없는 값인 인덱스 값을 참조하는 게 큰 ..

?.(옵셔널 체이닝)과 .(체이닝 연산자)의 차이점일단 '체이닝'의 정의에 대해서 이해해야 할 것 같다..(체이닝 연산자) : 객체의 속성이나 메서드를 참조할 때 사용되는 연산자. Array.sort() 같은 용도 그렇다면 옵셔널 체이닝이 무엇인가 하면?.(옵셔널 체이닝) : 참조가 유효한지 명시적으로 검증하지 않고, 객체 체인 내의 깊숙이 위치한 속성값을 불러올 수 있다.검증하지 않는다는 의미는, 옵셔널 체이닝으로 참조한 nullish(정의되지 않은 메서드 등을 참조한 undefined, null)는 오류를 발생시키지 않고 undefined를 반환한다. 따라서 옵시널 체이닝은 참조가 누락될 가능성이 있을 경우, 어떤 속성에 대한 필요성이 보증되지 않은 경우에 사용한다. 일반적인 JS 코드 실행 단계에서..

JS에서 this.멤버 변수(객체 내에서 선언된 변수) 또는 this.메소드(객체 내에 선언된 함수)를 호출하려고 할 때, window가 선택되거나, 의도하지 않은 객체를 지정하는 경우가 있다. 상황따라 구분하며 this가 어떤 객체를 가리키는지 알아보려고 한다. 1. this가 document를 가리키는 경우1. 전역 함수에서의 thisjsfunction test() { console.log(this);}test(); // window (브라우저 환경)일반적인 함수에서 this는 window를 지정한다.2. 이벤트 핸들러에 화살표 함수로 선언document.addEventListener('click', () => { console.log(this); // window});화살표 함수로 callbac..

자료형의 선언var : 전역으로 선언되는 선언문, 재선언이 가능함let : var와 용도가 유사하지만 선언된 자리의 위에서 참조하지 못하도록 막힌 선언문, 제선언 불가능const : 한 번 선언하면 바꿀 수 없는 ‘상수’형 변수를 선언하는 선언문원시 자료형자료형이란, 변수에 저장된 자료의 값이나 형태이다.JS의 변수는 JAVA, C 등과 다르게 한번 정의된 자료형에서 고정되는 것이 아니라 초기화한 값의 형태에 따라 언제든 바꿀수 있는 동적 타입(dynamically typed)이다.숫자형(number) : Number숫자형은 정수 및 부동소수점 숫자(소수)를 나타내며, 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등의 연산이 가능하다.무한대를 나타내는 예약어 Infinity 또한 Number타입이며, a..