[JS-FINAL] 9. 클로저

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.

클로저란? 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미한다. JavaScript에서 모든 함수는 자신이 생성될 때 접근할 수 있었던 변수를 기억하고, 나중에 이 변수에 접근할 수 있는 능력을 가지고 있다. 이것이 바로 클로저의 기본 원리이기 때문에, JavaScript에서 모든 함수는 클로저라고 볼 수 있다.

let userName = 'Hong';
function greetUser(){
    console.log('Hi ' + userName);
}
userName = 'Kim'
greetUser();
// greetUser 함수는 외부 스코프에 있는 userName이라는 변수에 접근합니다. 이 함수가 실행되는 시점에 userName 변수의 값이 'Kim'으로 변경되어 있으므로, 이 함수는 'Hi Kim'을 콘솔에 로그

'greetUser' 함수는 외부 스코프에 있는 'userName' 변수에 접근할 수 있는 클로저를 형성한다. 이 함수가 호출되는 시점에 'userName' 변수의 값이 'Kim'으로 변경되어 있으므로, 이 함수는 'Hi Kim'을 콘솔에 로그한다.

let userName = 'Hong';
function greetUser(){
    const name = userName;
    console.log('Hi ' + name);
}
userName = 'Kim'
greetUser();
// 함수 내부의 name을 참조하긴 하지만 함수가 실행될 때 name이 참조하는 userName이 전역 렉시컬에 접근이 가능하고 실행시점의 바뀐 값을 참조하기 때문에 'Hi Kim'을 콘솔에 로그한다.

'greetUser' 함수는 클로저를 통해 외부 스코프의 'userName' 변수에 접근한다. 이때, 'userName'의 값은 함수가 호출될 때 결정되며, 이 값을 내부적으로 'name'이라는 변수에 할당한다. 따라서, 함수 호출 시점에 'userName'의 값이 'Kim'으로 바뀌었기 때문에, 이 함수는 'Hi Kim'을 콘솔에 로그한다.

function greetUser(){
    let name = 'Hong';
    console.log('Hi ' + name);
}
name = 'Kim'
greetUser();

내부 함수 혹은 내부 환경은 외부환경보다 우선된다. 함수가 실행될 때 우선 내부 환경을 확인하고 변수를 찾을 수 없을 때만 외부 환경을 검색한다.