05.15 디지털 트윈 부트캠프 22일차

자바스크립트 - 실행 컨텍스트, 클로저, ES6 함수

실행 컨텍스트

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

스코프, 호이스팅, 클로저, 비동기 처리 방식과 깊은 연관 => JS의 동작 원리를 담고 있다.

이벤트 루프와 태스크 큐

콜스택

실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택

JS에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리

Web API

웹 브라우저에서 제공하는 API로 AJAX나 Timeout 등의 비동기 작업 실행DOM, AJAX(XMLHttpRequest), Timeout(setTimeout)

힙

객체가 저장되는 메모리 공간

태스크 큐

비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

콜백 큐라고도 하며, Web API에서 넘겨받은 콜백함수를 저장

이벤트 루프

콜 스택에 현재 실행 중인 실행 컨텍스트가 있는 지, 태스크 큐에 대기 중인 함수가 있는 지 확인

콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면

-> 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동

콜 스택이 비어있다면 태스크 큐의 작업을 콜스택으로 옮김

콜 스택으로 이동한 함수는 실행된다.

 

소스코드의 타입

전역코드 -> 전역 실행 컨텍스트

함수코드 -> 함수 실행 컨텍스트

eval코드 -> eval 실행 컨텍스트

모듈코드 -> 모듈 실행 컨텍스트

 

변수 호이스팅

var 선언문이나 function 선언문 들 모든 선언문이 해당 Scope의 선두로 옮겨져 동작

var 키워드를 사용해 선언한 변수는 중복 선언이 가능하기 때문에 문법적 문제 x

모든 선언문이 선언되기 이전 참조 가능 (var, let, const, function*, class)

console.log(foo);	// undefined
var foo = 123;
console.log(foo);	// 123
{
	var foo = 456;
}
console.log(foo);	// 456

 

함수 호이스팅

함수 선언문

코드를 구현한 위치와 관계 없이 JS를 평가할 때 맨 위로 끌어 올려진다.

함수 표현식

선언과 항당의 분리가 발생해 선언과 호출 순서에 따라 정상적으로 실행되지 않을 수 있다.

 

실행 컨텍스트 순서

소스코드 평가(선언문) -> 평가 결과 -> 실행 컨텍스트 -> 실행에 필요한 정보 -> 소스코드의 실행(선언문 이외 문) -> 실행 결과 -> 실행 컨텍스트

 

실행 컨텍스트의 역할

스코프, 식별자, 코드 실행 순서 등을 관리

 

실행 컨텍스트 스택

LIFO - Last In First Out

나중에 들어온 게 제일 먼저 나간다.

 

렉시컬 환경

식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조로 구성

 

블록레벨 스코프

블록 레벨은 실행 컨텍스트를 생성하지 않는다.

 

---

클로저

함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

생명주기가 종료한 외부함수의 변수를 참조할 수 있다.

모든 함수를 클로저라고 하지는 않는다.

전역변수

반드시 사용해야 할 이유가 없다면 지역 변수를 사용 -> 전역 변수보다 지역 변수 사용

전역 변수의 생명 주기

명시적인 호출 없이 코드가 로드되자마자 해석되어 실행되고 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료

지역 변수의 생명 주기

함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료되면 소멸

 

전역변수 문제점

암묵적 결합

코드 어디서든 참조 및 할당하게 될 경우 코드의 가독성은 나빠지고 생태계사 변경될 수 있는 위험성 존재

긴 생명 주기

메모리 리소스 시간도 길다.

var 키워드는 변수 이름이 중복될 사능성이 있고 의도치 않은 재할당이 이뤄질 수 있다.

스코프 체인 상에서 종점에 존재

변수 검색 시 전역 변수가 가장 마지막에 검색되므로 가장 느리다.

네임스페이스 오염

파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과 발생

 

전역변수 사용 억제 방법

즉시 실행 함수

모든 코드를 즉시 실행 함수로 감싸면  모든 변수는 즉시 실행 함수의 지역 변수가 된다.

네임스페이스 객체

전역에 네임스페이스 역할 객체를 생성, 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가

모듈 패턴

관련 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈로 만듦

ES6 모듈

파일 자체의 독자적인 모듈 스코프 제공

 

렉시컬 스코프

JS 엔진 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따하 상위 스코프를 결정상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정

함수 객페의 내부 슬롯[[environment]]

함수가 정의된 위치와 호출되는 위치가 다를 수 있기 때문에 렛시컬 스코프가 가능하려면 상위 스코프를 기억해야 한다.이를 위해 함수는 자신의 내부 슬롯에서 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.

 

클로저의 활용

상태를 안전하게 변경하고 유지하기 위해 사용

상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경 허용하여 상태를 안전하게 변경, 유지하기 위해 사용

 

캡슐화와 정보은닉

캡슐화

객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것

객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용 => 정보 은닉

 

---

ES6 함수

생성자 함수 인스턴스 반환 - new 연산자와 함께 호출되어야 한다.

암묵적으로 인스턴스가 생성되고 this에 바인딩된다.

this에 바인딩되어 있는 인스턴스를 초기화한다.

암묵적으로 this 반환 -> 명시적으로 원시값 반환 시 원시값 반환은 무시되고 암묵적으로 this가 반환된다.

인스턴스 생성, 생성자 함수는 명시적으로 반환한 객체를 반환

https://s-saramnim.tistory.com/entry/%EC%A0%81%EB%8B%B9%ED%95%9C-ES6-%ED%95%A8%EC%88%98

중요한 ES6 함수

 

함수의 구분

일반 함수, 메서드, 화살표 함수

메서드

ES6 이전: 객체에 바인딩된 함수의 의미로 사용

ES6 이후: 메서드 축약 표현으로 정의된 함수만을 의미

화살표 함수

function 키워드 대신 화살표를 사용해 간략하게 함수 정의

표현과 더불어 내부 동작도 기존의 함수보다 간략

함수 몸체가 하나의 문으로 구성된다면 중괄호 생략 가능

중괄호 생략한 경우 표현식이 아닌 문이라면 에러 발생

객체 리터럴을 반환하는 경우 소괄호로 감싸주어야 한다.

 

화살표 함수와 일반 함수의 차이

화살표 함수는 인스턴스를 생성할 수 없다.

중복된 매개 변수 이름을 선언할 수 없다.

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical this)

 

화살표 함수를 사용해서는 안되는 경우

• 메서드
  상위 스코프를 참조하기 때문에 전역 객체 window를 가리킨다.
• 생성자함수, prototype
  인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

 

Rest 파라미터(나머지 매개변수)

매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수

함수에 전달된 인수들의 목록을 배열로 전달받는다.

 

매개변수 기본값

함수 호출 시 매개변수 개수와 인수의 개수가 달라도 에러가 발생하지 않는다. => 의도치 않은 결과 가능

인수가 전달되지 않아 매개변수의 값이 undefined인 경우 기본값을 할당한다.

 

• string literal
  문자열을 좀 더 직관적으로 결합 가능
• for...of문
  반복 가능한 객체를 통해 반복하는 루프를 만든다.
• includes
  배열에 특정값이 있는지 확인한다.
• let
  변수를 중복으로 선언할 수 없다.
  블록레벨 스커프를 따른다.

 

변수 호이스팅

런타임 이전에 선언 단계가 실행

초기화 이전의 일시적 사각 지대레서는 초기화 단계가 실행된다.

변수 선언문에서 초기화 단계가 실행할당문에서 할당 단계 실행

 

const

선언과 동시에 초기화 해야 한다.재할당 금지, 원시값을 할당한 경우 변수 값을 변경할 수 없다.객체를 할당한 경우 값을 변경할 수 있다.

 

var vs let vs const 

ES6를 사용한다면 var 키워드는 사용하지 않는다.재할당이 필요한 경우에만 let 키워드를 사용한다. 스코프는 최대한 좁게 만든다.읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다.애매하면 일단 const를 사용하고 반드시 재할당이 필요하다면 let을 사용한다.