지식 보충을 위해 조금씩 정리를 해보자! #2
1. JavaScript의 실행 방식
❓ Hoisting과 TDZ
MDN Web Docs에 따르면, 호이스팅(hoisting)이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 이다. 선언 전에 미리 할당할 경우, 해당 선언이 스코프의 최상단으로 끌어올려진 것 같이 변한다.
호이스팅이 발생하는 이유는 자바스크립트 엔진이 코드를 실행하기전에 실행컨텍스트가 생성되기 때문이다.
이 실행컨텍스트는 코드를 원활하게 실행될 수 있도록 환경을 만들어주는 역할을 한다.
실행컨텍스트는 생성단계와 실행단계가 있는데 그중 코드를 읽기 전 생성단계에서 자신의 스코프 내에 선언된 변수와 함수들을 미리 유효 범위 최상단에 등록시키는 작업이 진행된다. 이 원리 때문에 호이스팅이라는 현상이 발생한다.
변수 선언의 3단계:
- 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계다. 이 변수 객체는 스코프가 참조하는 대상이된다.
- 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계이다. 이 단계에서 할당된 메모리에는 undefined로 설정된다. (초기화)
- 할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계를 의미한다..
var랑 함수와는 다르게 let과 const가 호이스팅된것 같지 않은 이유는 초기화 단계 이전인 선언단계까지만 진행된 상태이므로 선언문을 만나기 전까지 변수를 사용할 수 없기 때문이다.
이때 선언된 변수를 인식할 수 없기 때문에 이 구간을 TDZ (Temporal Dead Zone) 이라고 한다.
호이스팅에서 변수선언은 함수선언보다 위로 올라온다. 값이 할당되지 않은 변수는 같은 이름의 함수선언문의 값이 덮어씌우고, 값이 있는 경우 변수가 동일한 이름의 함수선언문을 덮어쓴다.
2. 함수의 매개변수와 인수
❓ parameter? argument?
function testFun(a,b) {
return a + b
}
testFun(2,3);위 코드에서 함수를 선언할 때 (a,b)의 a,b가 매개변수(parameter)이며 매개변수는 말 그대로 변수이다.
그리고 함수를 호출할 때의 (2,3)이 변수에 들어가는 값이며 인수(arguments) 라고 한다.
Argument (인수)
자바스크립트에서 arguments는 함수에 전달된 인수에 해당하는 객체이며 유사 배열에 해당한다.
함수를 호출할 때 값을 전달한다고 해서 전달인자라고도 부른다.
매개변수와 달리 전달인자는 고정되어 있지 않고, 호출할 때마다 수시로 변하는 값(Value)이기 때문에 변수가 아닌 값(Value)으로 정의한다. 인수라고도 한다.
function testFun(arg1, arg2) {
console.log(arg1, arg2);
};
testFun(); // undefined undefined ------(1)
testFun(1); // 1 undefined -------------(1)
testFun(1, 2); // 1 2
testFun(1, 2, 3); // 1 2 -------------(2)- 함수의 매개변수보다 적게 인수를 전달할 경우와 전달되지 않은 인자에는 undefined 값이 할당된다.
- 매개변수보다 많게 인수를 전달 할 경우 초과된 인수는 무시되지만 arguments라는 객체에 할당된다.
- arguments는 지역변수이며, arguments 객체를 통하여 초과로 전달된 인수를 참조할 수 있다.
Parameter (매개변수)
function plusNumber(a,b) {
return a+b;
}
// 매개변수 a, b 함수 내부에 있는 인자로써, 특정한 값으로 정해져 있는 것이 아니라, 함수가 호출하면서 건네준 argument의 값이 변수 (Variable)에 담기게 된다.
들어오는 인자가 매개체 역할을 하기 때문에 매개변수라고도 하며 영문으로 parameter 라고 한다.
출처:
