자바스크립트의 타입

 

Number Type

• 자바스크립트는 일부 다른 언어들과 다르게 숫자를 Number로만 표현한다.
• 모든 숫자를 포함해야 하기 때문에 모든 수를 실수로 처리한다.
• Number 타입은 64비트의 고정된 크기의 공간을 확보하므로, 정확하게 표현할 수 있는 숫자의 범위가 제한된다.
• 만약 이보다 큰 수가 있다면?
  • BigInt()
    • Number가 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체이다.
    • BigInt를 사용했다면 BigInt 연산을 유지해야 한다!

원시 타입

• 자바스크립트에서 원시 값이란 객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터이다.
• 원시 값에는 7 종류가 있다.
  • string
  • number
  • bigint
  • boolean
  • undefined
  • symbol
  • null
• 모든 원시 값은 ‘불변’하여 변형할 수 없다.
• 원시 값 자체와, 원시 값을 할당한 변수를 혼동하지 않는 것이 중요하다.
• 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형할 수 없다.

실행 컨텍스트(Execution Context)

• 실행 가능한 코드에 제공할 환경 정보를 모아놓은 객체
  • 변수 객체, 스코프 체인, this 정보가 담겨있다.
• 자동으로 전역 컨텍스트가 생성된 후 함수 호출 시 함수 컨텍스트가 생성된 후에 함수 실행
• 함수 실행이 마무리 될 경우 해당 컨텍스트는 사라지고 페이지가 종료되면 전역 컨텍스트도 사라진다.

실행 컨텍스트의 역할

1. 전체 코드의 환경과 순서를 보장한다.
   • 환경 정보 객체를 콜 스택에 쌓아올리고 → 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드 실행
2. 실행 컨텍스트가 활성화되는 시점에 선언된 변수 hoisting
3. 외부 환경 정보 구성
4. this 값 설정

호이스팅(Hoisting)

• 인터프리터가 코드를 실행하기 전 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상
• 예시
  • 변수가 선언된 줄 이전에 해당 범위에서 변수 값을 사용할 수 있는 값 호이스팅
  • 변수가 선언된 줄 이전 해당 범위의 변수를 참조할 수 있지만 ReferenceError을 던지지 않고 값이 항상 정의되지 않음인 선언 호이스팅
  • 변수 선언 시 변수 선언된 줄 앞의 범위에서 동작이 변경
  • 선언의 부작용은 선언이 포함된 나머지 코드를 평가하기 전 발생

클로저(Closure)

• 주변 상태에 대한 참조와 함께 묶인 함수의 조합
• 내부 함수에서 외부 함수의 범위에 대한 접근을 제공
• 함수 생성 시 함수가 생성될 때마다 생성된다.

→ 중첩된 함수는 외부 범위에서 선언한 변수에도 접근할 수 있다.

실용적인 클로저

• 어떤 데이터와 그 데이터를 조작하는 함수를 연관시키기 때문에 유용하다.
• 객체지향 프로그래밍과 같은 맥락

⇒ 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용 가능

function outter() {
	var title = 'coding everybody';
	return function () {     //return이 나올 시 outter 함수의 생은 마감
		alert(title);          //하지만 그의 자식인 내부함수는 계속 생존해 외부 함수가 남긴 변수 사용
	}
}
inner = outter();
inner();

• private variable 사용 시 유용하게 사용 가능하다.

클로저의 세 가지 범위

• 지역 범위
• 포함하고 있는 범위
• 전역 범

가비지컬렉터의 역할

• 개발 시 유효하지 않은 메모리를 가비지라고 일컫는다.
• 메모리는 제한된 자원이기 때문에, 사용하지 않는 메모리 영역은 다시 사용할 수 있도록 회수되어야 한다. 이 과정을 자동으로 수행하는 것이 바로 가비지 컬렉션
  • 이런 자동 메모리 관리는 개발자가 메모리 관리에 대해 고민할 필요가 없다는 잘못된 인식을 심어줄 수 있다.
• ⇒ 가비지 컬렉션
• 참조 추적: 가비지 컬렉터는 메모리 내에서 현재 사용 중인(참조되고 있는) 데이터와 더 이상 사용되지 않는(참조되지 않는) 데이터를 추적한다.
• 참조 해제: 변수나 데이터가 더 이상 참조되지 않거나 그 참조 값이 null로 설정되면, 가비지 컬렉터는 해당 메모리 영역이 필요하지 않다고 판단한다.
• 메모리 회수: 필요하지 않은 메모리 영역이 발견되면, 가비지 컬렉터는 이 영역을 해제하여 메모리를 반환하고, 이후 프로그램이 다른 데이터를 저장하는 데 이 메모리를 사용할 수 있도록 한다.

메모리 생존주기

1. 필요할 때 할당한다.
2. 할당된 메모리를 사용한다.
3. 더 이상 필요하지 않으면 해제한다.

값 초기화

• 프로그래머가 메모리 할당을 신경 쓸 필요가 없도록 JS는 값을 선언할 때 자동으로 메모리를 할당한다.

함수 호출을 통한 할당

• 함수 호출의 결과 메모리 할당이 일어나기도 한다.
• 메소드가 새로운 값이나 오브젝트를 할당하기도 한다.

순환참조

• import 시 발생할 수 있는 순환 참조 에러

메모리 관점에서의 순환 참조

• 서로 다른 두 객체가 서로를 참조하여, 가비지 컬렉션 알고리즘의 대상에 포함되지 않아 해당 객체들이 불필요해져도 메모리 회수되지 않고 존속하게 되는 문제이다.

function f() {
  const x = {};
  const y = {};
  x.a = y; // x는 y를 참조합니다.
  y.a = x; // y는 x를 참조합니다.

  return "azerty";
}

f();

// 두 객체가 불필요해지는 순간 할당된 메모리가 회수되어야 하지만 두 객체가 서로를 참조하고
 있으므로 참조 - 세기 알고리즘은 둘 다 가비지 컬렉션의 대싱으로 표시하지 않는다. 

이벤트 루프 & 동시성 모델

• 자바스크립트의 런타임 모델은 코드의 실행, 이벤트 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반한다.
• 이벤트 루프는 JS의 단일 스레드에서 비동기 코드를 처리할 수 있게 돕는다.
• JS의 코드 순차적 실행⇒ 비동기 작업이 완료되면 해당 작업의 콜백을 이벤트 큐에 추가
  • 위의 반복적인 행동을 틱이라고 부른다.
• ⇒ 이벤트 루프는 콜 스택이 비어있는 지 확인하고 비어있을 경우 이벤트 큐에서 콜백을 가져와 실행
• ⇒ 비동기 작업 발생 시 작업을 백그라운드로 넘김

동시성?

• JS는 이벤트 루프를 기반으로 한 동시성 모델이다.
• 여러가지 작업을 동시에 호출하는 것을 의
• 이벤트 루프는 코드 실행, 이벤트 수집과 처리, 큐에 존재하는 하위 작업들을 처리한다.

프로토 타입

• 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미.
• 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지.
  • 객체가 특정 속성이나 메서드에 접근할 때 해당 객체에 없으면 이 프로토타입 체인을 따라 상위 객체에서 찾는다.
  ⇒ 이를 프로토타입 체인이라 부른다.

---

출처

https://velog.io/@kados22/FE-기술-면접-실행-컨텍스트가-무엇인가요

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_management

https://mangkyu.tistory.com/118