렉시컬 환경
자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라 한다. 또한 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경(상위 스코프의 참조)을 저장한다.
클로저
외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저closure라 한다.
const x = 1;
// 함수 객체 생성시
// 현재 실행 중인 실행 컨텍스트의 렉시컬 환경(전역 렉시컬 환경)을
// outer 함수 객체의 [[Environment]] 내부 슬롯에 상위 스코프로서 저장
function outer() {
const x = 10;
// 함수 표현식으로 정의 -> 런타임에 평가
// 현재 실행 중인 실행 컨텍스트의 렉시컬 환경(outer 함수의 렉시컬 환경)을
// 중첩 함수 inner 자신의 [[Environment]] 내부 슬롯에 상위 스코프로서 저장
const inner = function () { console.log(x); };
return inner;
}
// outer 함수 호출시 중첩 함수 inner 반환
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거
// outer 함수, 지역 변수 x: 생명 주기 마감
const innerFunc = outer();
// 생명 주기가 종료되었지만 지역 변수 x가 동작
innerFunc(); // 10클로저 조건
- 중첩 함수가 상위 스코프의 식별자를 참조하고 있어야 함
- 중첩 함수가 외부 함수보다 더 오래 유지되야 함
⭐ 자유 변수free variable
클로저에 의해 참조되는 상위 스코프의 변수를 말함
클로저란 "함수가 자유 변수에 대해 닫혀있다", **"자유 변수에 묶여있는 함수"**라는 의미이다.
클로저 활용
클로저는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다.
// 함수를 반환하는 고차 함수
// 자유 변수 counter를 기억하는 클로저를 반환
const counter = (function () {
// 카운트 상태를 유지하기 위한 자유 변수
let counter = 0;
// 함수를 인수로 전달받는 클로저를 반환
return function (predicate) {
// 인수로 전달받은 보조 함수에 상태 변경을 위임
counter = predicate(counter);
return counter;
};
}());
// 보조 함수
function increase(n) { return ++n; }
function decrease(n) { return --n; }
// 보조 함수를 전달하여 호출
console.log(increaser()); // 1
console.log(increaser()); // 2
// 자유 변수 공유
console.log(decreaser()); // 1
console.log(decreaser()); // 0캡슐화와 정보 은닉
캡슐화encapsulation란 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다. 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데, 이를 정보 은닉이라 한다.
정보 은닉은 적절하지 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호하고, 객체 간의 상호 의존성(결합도)를 낮춘다. 대부분의 객체지향 프로그래밍 언어에서는 접근 제한자(public, private, protected, ...)를 선언해 공개 범위를 한정할 수 있지만, 자바스크립트는 제공하지 않는다. 따라서 자바스크립트 객체의 모든 프로퍼티와 메서드는 기본적으로 public하다.
const Person = (function () {
let _age = 0; // 지역 변수, private
// 생성자 함수
function Person(name, age) {
this.name = name; // 외부 공개, public
_age = age;
}
// 프로토타입 메서드
Person.prototype.sayHi = function () {
console.log(`이름: ${this.name}, 나이: ${_age}.`);
};
// 생성자 함수를 반환
return Person;
}());
const me = new Person('몬스터', 25);
me.sayHi(); // 이름: 몬스터, 나이: 25
console.log(me.name); // 몬스터
console.log(me._age); // undefined
const you = new Person('핫식스', 50);
you.sayHi(); // 이름: 핫식스, 나이: 50
console.log(you.name); // 핫식스
console.log(you._age); // undefined
// _age 변수 상태 유지 X
// 프로토타입 메서드가 단 한 번 생성되는 클로저이기 때문
me.sayHi(); // 50위 예제처럼 자바스크립트는 정보 은닉을 완전하게 지원하지 않는다.