1. Hoisting의 개념
- 함수안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것 => 함수에 필요한 변수값들을 모두 모아 맨 위에 선언해주고 값은 함수 안에서 할당해준다.
- Javascript는 Parser가 함수 실행 전 해당 함수를 한 번 훑고 기억하고 있다가 실행시키며 유효 범위는 { }안에서 유효하다. => 즉, 코드 실행 보다 먼저 메모리에 저장되는 과정
2. var, let, const 키워드
- 변수의 생성 단계를 살펴보면
- 1 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록, 이 변수 객체는 스코프가 참조하는 대상이 된다.
- 2 초기화 단계 : 객체에 등록된 변수를 위한 공간을 메모리에 확보, 이 단계에서 변수는 undefined로 초기화된다.
- 3 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당한다.
- var키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이루어져 var로 변수 선언 시 스코프에 등록 후 메모리에 공간 확보 후, undefined로 초기화 된다.
- let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 스코프에 변수를 등록은 하지만 초기화 단계는 변수 선언문에 도달했을 때 이뤄진다. 그래서 초기화 이전에 변수에 접근하려고 하면 참조에러가 발생한다. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다. 이러한 구간을 일시적 사각지대(TDZ)라고 부른다.
- const는 상수(변하지 않는 값)을 위해 사용한다. const는 재할당이 금지된다. const사용 시 주의할 점은 선언과 동시에 할당이 이루어져야 한다. 그렇지 않으면 문법 에러가 발생한다. 재 할당을 방지해주기 때문에 var와 let보다 안전하다.
3. 함수 정의
- Javascript에는 함수를 정의할 때 함수 선언식과 표현식으로 정의할 수 있다. 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
- 함수 선언식
- 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식
- 다음과 같이 선언하면 호이스팅에 의해 제일 상단으로 올라가게 된다.
- 코드상에서 함수를 불러오는 코드가 아래쪽에 있어도 함수를 선언한것이 호이스팅 되어 먼저 선언되기 떄문에 실행이 가능하다.
Function 함수명() {
구현 로직
}
// 예시
function funcDeclarations() {
return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'
- 함수 표현식
- 유연한 자바스크립트 언어의 특징을 활용한 선언 방식
- 함수명에 var를 입력해 선언하지만 변수명만 호이스팅되서 메모미렝 등록될 뿐 함수를 선언한 것은 등록 되지 않는다. 그래서 함수를 선언한곳 보다 위에 함수를 불러오면 type error가 발생한다.
- 함수 표현식은 closer(함수를 실행하기 전 해당 함수에 변수를 넘기기), callback(다른 함수의 인자로 전달된 함수)로 사용된다.
var 함수명 = function () {
구현 로직
};
// 예시
var funcExpression = function () {
return 'A function expression';
}
funcExpression(); // 'A function expression'
[참고]