JavaScript - 코어 자바스트립트 정리 (1~3장, 데이터 타입& 실행 컨텍스트& this)

기본을 다시 다지는 의미로 코어 자바스트립트책을 읽고 정리해보았다.  이미 대부분 아는 내용이라 복습하는 느낌으로 간단하게 적어보았다. 디테일한 상세 설명은 다른글을 참고!

 

아래부터는 1장부터 3장까지의 내용이다.

1. 변수와 데이터 타입

변수

변수는 데이터를 저장하는 공간이다. 자바스크립트에서는 변수 선언을 위해 var, let, const를 사용한다. 각 키워드는 다음과 같은 차이점을 가진다.

• var: 함수 스코프를 갖고, 중복 선언이 가능하다. 하지만 블록 스코프를 무시하기 때문에 예기치 않은 문제를 일으킬 수 있다.
• let: 블록 스코프를 가진다. 같은 스코프 내에서 중복 선언이 불가능하고, 선언되기 전에는 사용할 수 없다(Temporal Dead Zone).
• const: 상수를 선언하는데 사용된다. 값이 할당된 후 재할당이 불가능하지만, 객체의 경우 그 내부 속성은 변경이 가능하다.

데이터 타입

자바스크립트는 동적 타입 언어이므로 변수를 선언할 때 타입을 명시할 필요가 없다. 자바스크립트의 데이터 타입은 크게 **기본형(Primitive)**과 **참조형(Reference)**으로 나뉜다.

• 기본형 데이터 타입: 숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol) 등은 고정된 크기를 가지며, 값 자체가 메모리에 저장된다. 이 데이터는 불변성을 가진다.
• 참조형 데이터 타입: 객체(Object), 배열(Array), 함수(Function) 등은 메모리 주소를 참조하는 형태로, 값 자체가 아닌 참조값이 변수에 저장된다. 참조형 데이터는 값이 변경 가능하다는 특징이 있다.

 

2. 불변성 (Immutability)

불변성은 데이터를 다루는 중요한 개념 중 하나이다. 불변성이란 데이터가 한 번 생성되면 변경할 수 없음을 의미한다. 자바스크립트에서는 기본형 데이터는 불변성을 가지지만, 참조형 데이터는 그렇지 않다. 그러나 참조형 데이터를 불변하게 유지할 수 있는 방법이 있다.

• Object.freeze(): 객체의 변경을 막는 방법으로, 객체 자체와 그 안의 속성을 모두 동결한다.
• 불변 데이터 구조: 데이터를 직접 변경하지 않고, 새로운 데이터를 복사한 후 수정하는 방식으로 불변성을 유지할 수 있다.

 

3. 실행 컨텍스트와 스코프

실행 컨텍스트(Execution Context)

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미한다. 이 컨텍스트는 코드 실행 중에 필요한 여러 정보를 담고 있으며, 함수나 전역 코드가 실행될 때마다 생성된다. 실행 컨텍스트는 세 가지 중요한 요소로 구성된다.

• 변수 객체(Variable Object): 함수 내 선언된 변수, 매개변수, 함수 선언 등의 정보를 저장한다.
• 스코프 체인(Scope Chain): 현재 실행 중인 컨텍스트와 그 상위 컨텍스트의 참조를 연결한 구조로, 변수에 접근할 수 있게 한다.
• this 바인딩(This Binding): 현재 컨텍스트에서의 this가 참조하는 객체를 결정한다.

실행 컨텍스트의 생성 과정

1. Creation Phase: 실행되기 전, 함수 선언과 변수 선언이 메모리에 저장된다.
2. Execution Phase: 실제로 코드가 실행되며, 변수와 함수가 할당된 값을 사용한다.

스코프(Scope)

스코프는 변수가 참조할 수 있는 범위를 의미한다. 자바스크립트에서 스코프는 크게 전역 스코프와 지역 스코프로 나눌 수 있다.

• 전역 스코프(Global Scope): 코드 어디서든 접근 가능한 변수 범위이다.
• 지역 스코프(Local Scope): 함수나 블록 내에서만 유효한 변수 범위로, 함수 내부에서 선언된 변수는 외부에서 접근할 수 없다.

자바스크립트의 스코프는 **렉시컬 스코프(Lexical Scope)**를 따르는데, 이는 함수가 선언될 때의 스코프가 코드 실행 시에도 유지된다는 의미다.

호이스팅(Hoisting)

호이스팅은 자바스크립트의 독특한 동작 방식으로, 변수와 함수 선언이 실행 전에 해당 스코프의 최상단으로 끌어올려지는 현상을 의미한다. 호이스팅은 var로 선언된 변수와 함수 선언에서 주로 발생한다.

console.log(a); // undefined
var a = 10;

 

위 코드에서 변수 a는 선언부만 호이스팅되기 때문에 undefined가 출력된다. 그러나 let과 const는 호이스팅되더라도 초기화가 이루어지지 않기 때문에, 선언 전에 접근하려 하면 ReferenceError가 발생한다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

 

4. this

this는 자바스크립트에서 매우 중요한 키워드로, **현재 실행 중인 함수의 실행 문맥(컨텍스트)**을 참조하는 역할을 한다. 즉, this는 코드가 어디에서 실행되었는지에 따라 다르게 바인딩된다. 자바스크립트의 유연한 문법 덕분에 this는 다양한 상황에서 다른 값을 가질 수 있으며, 이를 정확히 이해하는 것이 중요하다.

this의 기본 개념

• this는 객체에 묶여 있는 함수(method) 내에서 그 객체를 참조한다.
• 실행 컨텍스트에 따라 this가 달라지며, 어디서 함수가 호출되었는지가 중요하다.
• 런타임에 결정되며, 함수가 정의되는 시점이 아닌, 호출되는 시점에 어떤 객체에 속해있는지가 결정적이다.

상황별 this 바인딩 원리

1) 전역 컨텍스트에서의 this

전역에서 사용되는 this는 실행 환경에 따라 달라진다.

• 브라우저 환경: 전역 컨텍스트에서의 this는 **전역 객체인 window**를 참조한다.

2) 함수 내부에서의 this

일반 함수에서 this는 함수 호출 방식에 따라 달라진다. 기본적으로 전역 객체(브라우저에서는 window, Node.js에서는 global)를 가리킨다.

function sayHello() {
    console.log(this);
}
sayHello(); // 브라우저에서는 window, Node.js에서는 global

 

3) 메서드 내부에서의 this

객체의 메서드 내에서의 this는 해당 메서드를 호출한 객체를 가리킨다.

const person = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

person.greet(); // Alice

 

4) 생성자 함수에서의 this

생성자 함수는 객체를 생성하는데 사용되며, 생성자 함수 내부에서의 this는 새로 생성된 객체를 가리킨다.

 

5) 이벤트 핸들러에서의 this

DOM 요소에서 이벤트 핸들러 내부의 this는 이벤트가 발생한 DOM 요소를 가리킨다.

 

6) bind(), call(), apply()를 통한 this 제어

자바스크립트에서는 this를 명시적으로 제어할 수 있는 방법으로 bind(), call(), apply() 메서드가 있다.

• call(): 함수를 호출하면서 this를 명시적으로 지정하고, 인수를 개별적으로 전달한다.
• apply(): call()과 유사하지만, 인수를 배열 형태로 전달한다.
• bind(): this가 항상 특정 객체로 바인딩된 새로운 함수를 반환한다.

 

7) 화살표 함수에서의 this

화살표 함수는 일반 함수와 달리 렉시컬 스코프를 따르며, this는 함수가 정의될 때의 상위 스코프에서의 this를 그대로 사용한다. 즉, 화살표 함수 내에서의 this는 바깥 함수나 전역 컨텍스트의 this와 동일하다.

 

 

this가 결정되는 방식에는 4가지 기본적인 규칙이 있다.

1. 전역/일반 함수 호출: 기본적으로 this는 전역 객체를 가리킨다. (window 또는 global)
2. 메서드 호출: 메서드 내에서의 this는 메서드를 호출한 객체를 참조한다.
3. 생성자 함수 호출: 생성자 함수에서 this는 새로 생성된 객체를 참조한다.
4. 명시적 바인딩: bind(), call(), apply()를 사용하여 this를 명시적으로 지정할 수 있다.