[javascript] 호이스팅

호이스팅

js 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 런타임 이전에 실행 컨텍스트에 의해 소스코드 평가 과정에서 스코프에 등록되고 이를 마치 코드의 제일 위에 있는 것처럼 변수가 어디에 위치하던지와 상관없이 어디서든지 변수를 참조할 수 있는 것처럼 만드는 특징을 변수 호이스팅이라고 한다.

코드 실행 전에 이미 변수선언, 함수선언이 저장되어있어 선언문보다 먼저 참조하는 코드가 나와도 오류 없이 동작한다. (정확히는 var 변수와 함수 선언문)

아래와 같이 선언하면

console.log(x); // undefined
var x = 1;

foo(); // "Hello, World!"
function foo() {
  console.log("Hello, World!");
}

아래와 같이 해석된다.

var x; // 변수 x를 선언
function foo() { // 함수 foo를 선언
  console.log("Hello, World!");
}

console.log(x); // undefined
x = 1;

foo(); // "Hello, World!"

let, const, 함수표현식은 호이스팅이 안일어날까?

일어나지 않는 것은 아니고 일어나지 않는 것 처럼 보인다고 할 수 있는 것 같다.

에러메시지로 호이스팅 여부에 대한 차이를 확인해볼 수 있다.

console.log(declaration);
let declaration;

declaration 이라는 변수가 초기화 전이라 접근할 수 없다는 에러를 보여준다.

var 였다면 undefined(초기화는 되어있음.) 를 출력했던 것과 비교된다.

선언조차 하지 않은 변수를 출력하려고 하면 정의되지 않았다라는 에러를 보여주기에 호이스팅이 일어나지 않는다고 할 수는 없을 것 같다.

TDZ

스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ: Temporal Dead Zone) 라 부른다.

let과 const 키워드로 선언된 변수가 선언되기 전에 접근할 때 발생하는 에러의 원인이다.

TDZ는 해당 변수가 스코프에 선언된 이후 변수가 초기화될 때까지의 기간을 나타내며 해당 기간 동안에는 변수에 접근할 수 없게 된다.

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

아까 보았던 그 에러 맞다.

Argument vs Parameter

Parameter

함수를 정의할 때 함수에 전달되어야 하는 값을 나타내는 변수를 말한다.

즉 함수를 선언할 때 해당 함수에 전달되어야 하는 값들을 말한다.

public static int devide(int x, int y) {
	return x / y;
} 

예를 들면 위 함수의 x, y가 함수 devide의 parameter라고 할 수 있다.

argument

argument는 함수를 호출하는 시점에 전달되어야 하는 값을 나타내는 변수를 말한다.

즉 이미 선언되어있는 함수를 사용하는 시점에 의도된 결과를 얻기 위해 전달해야되는 실제 값들을 말한다.

devide(5, 2);

예를 들면 위 함수의 x, y에 대응되는 5, 2가 argument인 것이다.

parameter는 함수 선언부를 다룰 때에 대한 변수,

argument는 함수 사용 시점(호출)에서의 실제 값이라고 생각하면 헷갈리지 않을 것 같다