오늘 점심 😋
어제 못다한 자바스크립트 이론을 이어가겠습니다!
실행 컨텍스트(Execution Content)
- 소스코드를 실행하는데 필요한 환경을 제공하고 실행 결과를 관리하는 영역.
- 선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록하고 상태변화를 지속적으로 관리.
실행 순서
- 전역 코드 평가
- 선언문만 먼저 실행.
- 전역 코드 실행
- 런타임 시작. 변수는 값이 할당되고 함수는 호출됨. 함수가 호출되면 코드실행을 중단하고 함수 내부로 진입.
- 함수 코드 평가
- 지역 변수 선언.
- arguments 생성.
- this 바인딩 결정.
- 함수 코드 실행
- 평가가 끝나고 함수 코드가 순차적으로 실행됨. 메서드가 있으면 메서드 호출.
- 메서드가 호출되려면 전역 스코프와 연결되어 있어야 함.
렉시컬 환경(Lexical Environment)
- 식별자와 상위 스코프에 대한 참조를 기록하는 자료구조. (스코프와 식별자 관리)
- 실행 컨텍스트를 구성하는 컴포넌트.
- 실행 컨텍스트는 렉시컬환경과 환경변수(Variable Environment)로 구성됨.
- 또한 렉시컬환경은 환경 레코드(Environment Record), 외부 렉시컬 환경 참조(Outer Lexical Environment Reference)로 나뉨.
클로저(Closer)
- 외부함수가 사라져도 그 안에 있는 변수를 참조하는 중첩함수. → 함수 실행컨텍스트가 사라져도 렉시컬환경은 유지됨.
사용하는 이유
- 상태를 안전하게 변경하고 유지하기위해.
자주발생하는 실수
- for 문에서 var 키워드 선언. → var 키워드는 함수레벨스코프이기 때문에 마지막 값만 출력됨. 해결방법
- 즉시실행함수 사용.
- Let 키워드 사용.
클래스(Class)
- new 연산자없이 호출하면 에러 발생.
- 상속을 지원하는 extends와 super 키워드 제공.
- 호이스팅이 발생하지 않는 것처럼 동작함.
- 클래스 내의 모든 코드에는 암묵적으로 strict mode가 저장되어 실행됨.
- 클래스는 상속의 개념보다 화갖ㅇ이라는 뜻에 가까움.
- 오버라이딩: 상위 클래스가 가지고 있는 메서드를 하위 클래스에서 재정의하여 사용하는 방식.
- super 키워드: 함수처럼 호출할 수 있고 this같이 식별자처럼 참조할 수 있음.
스프레드 문법(spread)
- 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 기법. (복사해서 완전한 다른 값을 할당하는 것)
- 딥카피(Deep Copy)라고도 함.
사용가능한 대상
- Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for of 문으로 순회가능한 이터러블.
구조 분해 할당
- 구조화된 배열과 같은 이터러블 또는 객체를 비구조화, 구조 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것.
- 비구조화 할당이라고도 부름.
이벤트(Event)
이벤트 버블링
- 이벤트 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 이벤트 현상.
- 물속 거품과 유사하여 생긴 별명.
이벤트 캡쳐링
- 이벤트 최상위 조상에서 시작해 아래로 전파되고 다시 위로 전파 되는 현상.
- 이벤트 흐름 중간 단계에서 사용되는 개념. (평소에 볼 일이 거의 없음)
- 이벤트 발생 위치를 감지하기 위해 사용.
이벤트 위임
- 연속되는 태그에 대해서 공통적으로 이벤트를 줘야할 때 부모요소에서 이를 위임하여 이벤트를 진행하는 것.
이벤트 핸들러
- 이벤트가 발생했을 때 브라우저에 의해 호출되는 함수.
이벤트 핸들러 등록
- 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것.
위임 방법
- 어트리뷰터 방식
- onClick, on..
- 프로퍼티 방식
- button.onClick = funciton()..
- 메소드 방식
- addEventListener
- 가장 보편적으로 사용되는 방식.
이벤트 핸들러 제거
- removeEventListener를 사용함. (인수가 일치해야 동작)
- 무명함수일 경우 제거 불가. → 만약 하고싶다면 arguments.callee사용
- 하지만 코드 최적화를 방해하므로 가급적 이벤트 핸들러의 참조를 변수나 자료구조에 저장하여 제거하는 편이 좋음.
- 프로퍼티 방식은 프로퍼티에 null을 할당함. → button.onClick = null;
타이머
- 호출 스케쥴링: 일정시간이 경기된 이후에 호출되도록 함수 호출을 예약하는 것.
- setTimeout/clearTimeout, setInterval/clearInterval 등 있음.
동기(synchronous), 비동기(asynchronous)
- 동기: 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식.
- 비동기: 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식.
이벤트 루프(Event Loop)
- 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기중인 함수가 있는지 반복해서 확인하는 루프.
- 자바스크립트의 동시성을 지원.
- 태스크 큐에 일시 보관된 함수들은 비동기 처리방식으로 동작함.
- 태스크 큐: 이벤트핸들러가 일시적으로 보관되는 영역.
- 프로미스의 후속 처리 메서드는 마이크로태스크 큐에 저장됨.
- 마이크로태스크 큐: 태스크 큐보다 우선순위가 높음.
이벤트가 과도하게 호출되어 성능에 문제가 생겼을 경우
- 디바운스와 쓰로틀 사용.
- 디바운스(debounce): 이벤트 핸들러를 중단하고 일정시간 뒤에 한 번만 호출되게 하는 것.
- 쓰로틀(throttle): 짧은 시간 간격으로 이벤트가 호출되도록 만드는 것.
프로미스(Promise)
- 비동기 처리상태와 결과를 관리하는 객체.
- resolve와 reject 함수를 인수로 전달받음.
- 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음.
- Pending → fulfilled(성공) or rejected(실패) ⇒ settled상태(비동기처리로 수행된 상태)
제너레이터
- 코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수.
- 함수 호출자가 함수 제어권을 가지고 있음. (독점이 아닌 호출자에게 양도할 수 있다는 것)
Async/Await
- 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 해주는 것.
- 프로미스 기반으로 동작함.
- Async - 암묵적으로 반환값을 resolve하는 프로미스를 반환함.
- Await - 프로미스가 settled상태가 될 때까지 대기하다가 프로미스가 resolve한 처리결과를 반환함.
프로미스와 async/await의 차이점
- 프로미스를 활용할 시에는 .catch()문을 통해 에러 핸들링을 해야 하지만 async는 try/catch를 통해 처리가능.
- 프로미스는 후속 처리 메서드 then()이 있어서 코드가 길어지면 가독성이 떨어지지만 async는 후속 처리 메서드없이 마치 동기 처리처럼 결과를 반환하도록 구현하기 때문에 코드 흐름을 이해하기 쉬움.
에러처리를 해야하는 이유
- 일단 에러가 발생하지 않는 코드를 작성하는 것은 불가능에 가까움.
- 만약 에러를 그냥 방치한다면 프로그램이 강제 종료가 될 것임. ⇒ 따라서 try catch문 등을 사용하여 에러를 적절하게 대응하면 계속 코드를 실행시킬 수 있음.
Done! 😋
