[Week02] 스코프, 호이스팅, 실행 컨텍스트

안녕하세요 웹 배영경입니다!

 

이번 자스핑에서의 주제는 실행 컨텍스트, 스코프, 호이스팅에 대해 학습하기 였습니다!

 

모던 자바스크립트 Deep Dive에서 해당 부분을 읽고 정리한 부분은 다음 링크를 참고해주세요~!

https://harsh-lunge-188.notion.site/2-1362ba38c241808c88cae8b3e093e091?pvs=4

2주차 (스코프, 호이스팅, 실행 컨텍스트) | Notion

 

 

이번에는 실행 컨텍스트의 역할에 대해 알아보던 중,

'함수 코드 평가' 단계에서

함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역 스코프에 등록된다

 

는 부분이 있었습니다.

 

🤔 arguments 객체..? 가 뭐지..?

 

arguments 객체

 

함수 내부에서 사용할 수 있는 arguments 객체는 함수 코드 평가 단계에서 함수 내부의 지역 스코프에 생성되며, 함수 호출 시 전달된 인수 목록을 담고 있는 특별한 객체이다.

arguments 객체는 자바스크립트 함수 내에서 자동으로 생성되는 특수 객체로, 함수에 전달된 인수를 배열처럼 다룰 수 있도록 한다.

 

arguments 객체의 특성

1. 배열과 유사하지만 배열이 아닌 객체
   • arguments 객체는 배열처럼 인덱스를 통해 각 인수에 접근할 수 있지만, 실제 배열은 아니다.
   • 배열 메서드를 직접 사용하려면 Array.from(arguments)로 배열로 변환해야 한다.
   • 이를 통해 함수 내부에서 전달된 인수를 순서대로 접근할 수 있다.
2. 인수의 개수와 관계없이 생성됨
   • 함수가 호출될 때 전달된 인수가 없더라도 arguments 객체는 항상 생성된다.
   • arguments.length 속성을 통해 전달된 인수 개수를 확인할 수 있다.
3. 함수의 모든 인수를 나열하는 객체
   • 함수의 선언된 매개변수와 상관없이, 호출 시 전달된 모든 인수가 arguments 객체에 포함된다.
   • 예를 들어, 함수가 3개의 인수를 선언했어도 5개의 값을 전달하면, arguments 객체에는 5개의 요소가 포함된다.
4. 동적 매개변수 업데이트
   
   • 엄격 모드가 아닌 경우에는 arguments와 매개변수가 연동되어 있어, 매개변수 값을 변경하면 arguments 객체의 해당 값도 변경된다.
   • ES6부터는 ...rest 매개변수를 사용하는 것이 권장된다.

 

function example(a, b) {
  console.log(arguments[0]); // 10
  console.log(arguments[1]); // 20
  console.log(arguments.length); // 2
  arguments[0] = 100;
  console.log(a); // 100 (연동)
}

example(10, 20);

arguments 객체는 a와 b로 정의된 매개변수와 동기화되어 있다.

arguments[0] 값을 변경하면 a 값도 함께 변경된다. 하지만 엄격 모드(Strict Mode)에서는 매개변수와 arguments가 연동되지 않는다.

 

arguments와 나머지 매개변수 ...rest의 차이

ES6에서는 ...rest 매개변수가 등장하면서 arguments보다 가독성 높은 인수 접근 방식을 사용할 수 있게 되었다.

 

...rest는 실제 배열로 생성되어 배열 메서드를 바로 사용할 수 있다.

또한, 나머지 매개변수는 함수의 선언된 매개변수 이후의 모든 인수를 포함하지만 arguments는 함수에 전달된 모든 인수를 포함한다.

 

 

 

arguments 객체는 함수의 매개변수 수를 동적으로 관리하거나, 매개변수를 이름 없이 참조해야 하는 경우 자주 사용되었다.

ES6 이후로는 ...rest 문법을 사용하는 것이 권장된다고 한다.

 

 

프로토타입 체인

프로토타입 체인은 자바스크립트 객체의 속성이나 메서드에 접근할 때 그 속성이 객체 자체에 없으면 상위 프로토타입으로 거슬러 올라가며 찾는 메커니즘이다.

 

프로토타입 기반 상속

자바스크립트는 상속을 프로토타입 체인으로 구현한다.

객체는 __proto__라는 숨겨진 속성을 가지고 있어, 자신이 없는 속성을 부모 객체(프로토타입)에서 찾게 된다.

 

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person("자스핑");
person.sayHello(); // "Hello, my name is 자스핑"

person.sayHello()를 호출할 때 person 객체 자체에는 sayHello 메서드가 없지만, person의 프로토타입인 Person.prototype 객체에서 sayHello 메서드를 찾을 수 있어 호출할 수 있게 된다.

 

console 객체의 프로토타입 체인

console.log 메서드 역시 이 체인에서 찾는다.

console 객체에서 log 프로퍼티가 없으면, 그 부모 객체의 프로토타입을 찾아간다.

이 과정이 체인으로 연결되어 있으며, 최상위로 Object.prototype까지 거슬러 올라가 속성을 검색하게 된다.