[JavaScript]생명주기,전역변수,생성자 함수

- 자바스크립트 생명주기 & 변수/객체 개념 정리

- 변수와 생명주기

지역 변수의 생명주기

지역 변수의 생명주기 = 함수의 생명주기
변수가 생성 → 메모리 확보 → 사용 → 함수 종료 시 해제 후 메모리 풀에 반환.
하지만 누군가(클로저)가 스코프를 참조 중이라면 해제되지 않고 살아있음.

호이스팅 (Hoisting)

JS 고유 특징: 변수 선언이 스코프 최상단으로 끌어올려진 것처럼 동작.
var 선언은 선언 + 초기화(undefined) 가 끌어올려짐.
let, const 선언은 선언만 호이스팅되고, 초기화는 실제 코드 도달 시 실행됨 → "일시적 사각지대(TDZ)" 발생.

var x = '글로벌';

function foo() {

  console.log(x); // undefined (지역 변수 x가 호이스팅됨)

  var x = '지역';

}

foo();

console.log(x); // 글로벌

- 전역 변수와 전역 객체

전역 코드는 명시적 호출 없이 곧바로 실행.
전역 변수의 생명주기 = 전역 객체(window, globalThis 등)의 생명주기.

전역 변수의 문제점

암묵적 결합 → 어디서든 접근 가능 → 의도치 않은 상태 변경.
긴 생명주기 → 관리 어려움.
스코프 체인의 종점 → 검색 속도 느림.
네임스페이스 오염 → 여러 스크립트 파일이 같은 전역 스코프를 공유.

전역 변수 억제 방법

즉시 실행 함수(IIFE) → 지역 스코프에 가둠.
네임스페이스 객체 패턴 → 전역 변수 대신 객체 프로퍼티 사용.
모듈 패턴 (클로저 기반) → 정보 은닉, 캡슐화.
ES6 모듈(import / export) → 모듈은 자체 스코프를 가짐, 전역 汚染 없음.

- var / let / const 비교

var

함수 레벨 스코프만 인정 (블록 레벨 스코프 ❌).
중복 선언 가능 → 의도치 않은 재할당 위험.
호이스팅 발생 → 선언 전에 참조 가능(undefined).

let

블록 레벨 스코프.
중복 선언 불가.
호이스팅되지만 TDZ 때문에 선언 전 참조 불가 (ReferenceError).

const

상수 선언.
선언과 동시에 초기화 필수.
재할당 불가.
객체를 할당하면 내부 값 변경은 가능 (불변X).

👉 권장:

기본적으로 const.
재할당 필요하면 let.
var는 지양.

- 내부 슬롯과 내부 메서드

JS 엔진이 객체 동작을 구현하기 위해 사용하는 숨김 프로퍼티.
예: 모든 객체는 [[Prototype]] 내부 슬롯을 가짐.
직접 접근은 불가하지만 일부는 간접적으로 접근 가능 (__proto__).

- 프로퍼티

데이터 프로퍼티

키-값 쌍.
어트리뷰트: [[Value]], [[Writable]], [[Enumerable]], [[Configurable]].

접근자 프로퍼티

getter, setter 함수로 구성.
다른 프로퍼티의 값을 간접적으로 읽거나 저장.

const person = {
  firstName: "Lee",
  lastName: "Minhee",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
};

- 객체 변경 방지

Object.preventExtensions(obj) → 프로퍼티 추가 금지.
Object.seal(obj) → 프로퍼티 추가/삭제/재정의 금지, 값 갱신만 가능.
Object.freeze(obj) → 값 갱신까지 금지 (읽기 전용).
불변 객체 패턴 → 깊은 복사 + 중첩 객체까지 재귀적으로 동결. (ex. Immer 사용)

- 생성자 함수와 객체 생성

객체 생성 방법

객체 리터럴
Object 생성자 함수
생성자 함수(new)
클래스 (ES6 이후)

생성자 함수

동일한 구조의 객체를 여러 개 만들 때 유용.

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const c1 = new Circle(5);
console.log(c1.getDiameter()); // 10

인스턴스 생성 과정

빈 객체 생성, this 바인딩.
인스턴스 초기화.
인스턴스 반환.

- this 바인딩 규칙

일반 함수 호출 → 전역 객체(window).
메서드 호출 → 메서드 소유 객체.
생성자 호출(new) → 새로 생성된 인스턴스.
명시적 바인딩 → call, apply, bind.
화살표 함수 → 자신을 감싼 스코프의 this.

- 일급 객체 (First-class object)

조건:

무명 리터럴로 생성 가능.
변수나 자료구조에 저장 가능.
함수의 매개변수로 전달 가능.
함수의 반환값으로 사용 가능.

👉 자바스크립트 함수는 일급 객체 → 고차 함수, 콜백, 함수형 프로그래밍 가능.

- 실무 & 면접에서 자주 쓰이는 내용

var 대신 let/const 사용 이유?
- TDZ 덕분에 에러 조기 발견 가능.
- 블록 레벨 스코프로 버그 방지.
this 바인딩 질문
- 함수 호출 방식에 따라 this가 달라짐.
- 면접 단골: 화살표 함수 vs 일반 함수 this 차이.
불변 객체 패턴
- 왜 불변성을 유지해야 하는가? → 상태 추적, 성능 최적화, 예측 가능한 코드.
전역 변수 최소화 방법
- ES 모듈 사용.
- 네임스페이스 패턴/클로저.
객체 변경 방지 API 차이
- preventExtensions vs seal vs freeze 차이 설명 가능해야 함.
생성자 함수 vs 클래스
- 클래스는 문법적 설탕(Syntactic sugar) → 더 직관적이고 상속 문법 제공.
- 내부 동작은 프로토타입 기반.

- 자바스크립트 생명주기 & 변수/객체 개념 정리

- 변수와 생명주기

지역 변수의 생명주기

지역 변수의 생명주기 = 함수의 생명주기
변수가 생성 → 메모리 확보 → 사용 → 함수 종료 시 해제 후 메모리 풀에 반환.
하지만 누군가(클로저)가 스코프를 참조 중이라면 해제되지 않고 살아있음.

호이스팅 (Hoisting)

JS 고유 특징: 변수 선언이 스코프 최상단으로 끌어올려진 것처럼 동작.
var 선언은 선언 + 초기화(undefined) 가 끌어올려짐.
let, const 선언은 선언만 호이스팅되고, 초기화는 실제 코드 도달 시 실행됨 → "일시적 사각지대(TDZ)" 발생.

var x = '글로벌';

function foo() {

  console.log(x); // undefined (지역 변수 x가 호이스팅됨)

  var x = '지역';

}

foo();

console.log(x); // 글로벌

- 전역 변수와 전역 객체

전역 코드는 명시적 호출 없이 곧바로 실행.
전역 변수의 생명주기 = 전역 객체(window, globalThis 등)의 생명주기.

전역 변수의 문제점

암묵적 결합 → 어디서든 접근 가능 → 의도치 않은 상태 변경.
긴 생명주기 → 관리 어려움.
스코프 체인의 종점 → 검색 속도 느림.
네임스페이스 오염 → 여러 스크립트 파일이 같은 전역 스코프를 공유.

전역 변수 억제 방법

즉시 실행 함수(IIFE) → 지역 스코프에 가둠.
네임스페이스 객체 패턴 → 전역 변수 대신 객체 프로퍼티 사용.
모듈 패턴 (클로저 기반) → 정보 은닉, 캡슐화.
ES6 모듈(import / export) → 모듈은 자체 스코프를 가짐, 전역 汚染 없음.

- var / let / const 비교

var

함수 레벨 스코프만 인정 (블록 레벨 스코프 ❌).
중복 선언 가능 → 의도치 않은 재할당 위험.
호이스팅 발생 → 선언 전에 참조 가능(undefined).

let

블록 레벨 스코프.
중복 선언 불가.
호이스팅되지만 TDZ 때문에 선언 전 참조 불가 (ReferenceError).

const

상수 선언.
선언과 동시에 초기화 필수.
재할당 불가.
객체를 할당하면 내부 값 변경은 가능 (불변X).

👉 권장:

기본적으로 const.
재할당 필요하면 let.
var는 지양.

- 내부 슬롯과 내부 메서드

JS 엔진이 객체 동작을 구현하기 위해 사용하는 숨김 프로퍼티.
예: 모든 객체는 [[Prototype]] 내부 슬롯을 가짐.
직접 접근은 불가하지만 일부는 간접적으로 접근 가능 (__proto__).

- 프로퍼티

데이터 프로퍼티

키-값 쌍.
어트리뷰트: [[Value]], [[Writable]], [[Enumerable]], [[Configurable]].

접근자 프로퍼티

getter, setter 함수로 구성.
다른 프로퍼티의 값을 간접적으로 읽거나 저장.

const person = {
  firstName: "Lee",
  lastName: "Minhee",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
};

- 객체 변경 방지

Object.preventExtensions(obj) → 프로퍼티 추가 금지.
Object.seal(obj) → 프로퍼티 추가/삭제/재정의 금지, 값 갱신만 가능.
Object.freeze(obj) → 값 갱신까지 금지 (읽기 전용).
불변 객체 패턴 → 깊은 복사 + 중첩 객체까지 재귀적으로 동결. (ex. Immer 사용)

- 생성자 함수와 객체 생성

객체 생성 방법

객체 리터럴
Object 생성자 함수
생성자 함수(new)
클래스 (ES6 이후)

생성자 함수

동일한 구조의 객체를 여러 개 만들 때 유용.

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const c1 = new Circle(5);
console.log(c1.getDiameter()); // 10

인스턴스 생성 과정

빈 객체 생성, this 바인딩.
인스턴스 초기화.
인스턴스 반환.

- this 바인딩 규칙

일반 함수 호출 → 전역 객체(window).
메서드 호출 → 메서드 소유 객체.
생성자 호출(new) → 새로 생성된 인스턴스.
명시적 바인딩 → call, apply, bind.
화살표 함수 → 자신을 감싼 스코프의 this.

- 일급 객체 (First-class object)

조건:

무명 리터럴로 생성 가능.
변수나 자료구조에 저장 가능.
함수의 매개변수로 전달 가능.
함수의 반환값으로 사용 가능.

👉 자바스크립트 함수는 일급 객체 → 고차 함수, 콜백, 함수형 프로그래밍 가능.

- 실무 & 면접에서 자주 쓰이는 내용

var 대신 let/const 사용 이유?
- TDZ 덕분에 에러 조기 발견 가능.
- 블록 레벨 스코프로 버그 방지.
this 바인딩 질문
- 함수 호출 방식에 따라 this가 달라짐.
- 면접 단골: 화살표 함수 vs 일반 함수 this 차이.
불변 객체 패턴
- 왜 불변성을 유지해야 하는가? → 상태 추적, 성능 최적화, 예측 가능한 코드.
전역 변수 최소화 방법
- ES 모듈 사용.
- 네임스페이스 패턴/클로저.
객체 변경 방지 API 차이
- preventExtensions vs seal vs freeze 차이 설명 가능해야 함.
생성자 함수 vs 클래스
- 클래스는 문법적 설탕(Syntactic sugar) → 더 직관적이고 상속 문법 제공.
- 내부 동작은 프로토타입 기반.