👏 렉시컬 스코프 & 클로저

🤲 렉시컬 스코프

자바스크립트 엔지는 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라서 상위스코프가 정해진다.

이것을 렉시컬 스코프라고 한다

=> 이것을 말만 하면 이해가 할 수 없다. 예제를 통해서 알아보자

 

const x = 1;

function foo() {
  const x = 10;
  console.log(x);
  bar(); //1
}

function bar() {
  console.log(x);
}

foo(); // 10
bar(); // 1

foo 함수 안에서 bar 함수를 호출하였지만, 결과는 1이 나온다. 왜냐하면 bar함수가 정의되는 곳이 foo함수 안이 아니기 때문에 foo함수의 상위 스코프는 전역함수이고 전역함수의 x=1이다.

const x = 1;

function outerFunc() {
  const x = 10;

  function innerFunc() {
    console.log(x);
  }

  innerFunc(); //10
}

outerFunc();

innerFunc함수는 outerFunc함수 안에서 정의가 되었고, outerFunc함수 안에서 innerFunc함수를 호출하였다.

console.log에 찍히는것은 10이다. innerFunc가 outerFunc 함수 안에서 선언되었기 때문에 innerFunc의 상위 스코프는 outerFunc이다.

 

결론적으로 함수를 호출하는 시점이 아닌 함수를 정의하는 시점에 스코프가 결정된다.

 

 

👊  클로저

중첨함수가 외부함수보다 더 오래 유지되는경우를 클로저라고 한다.

아래 예제를 살펴보자

const x = 1;

function outer() {
  const x = 10;
  const inner = function () {
    console.log(x);
  };

  return inner;
}

const innerFunc = outer();
innerFunc();

위의 예제는 outer 함수안에 inner변수를 선언하였고,inner 변수 안에  함수를 대입하였고, 함수를 return하였다.

그리고 innerFunc에 return된 함수를 담고 innerFunc 함수를호출하였다.

상위 함수가 호출되고 종료되었음에도  불구하고,  상위함수의 변수에 접근이 가능한것은  자식함수가 자신의 상위 스코프를 기억하기 때문이다. 그렇기때문에 outer의 x에 접근이 가능하다.

 

✌️ 클로저의 활용

클로저는 상태를 안전하게 변경하기 위해 사용한다.

 

아래 예제를 확인해보자,

 

let num = 0;

const increase = function () {
  return ++num;
};

console.log(increase());
console.log(increase());
console.log(increase());

• 현재 num은 누구나 다 접근이 가능하다. 그리하여 데이터의 일관성이 떨어질수 있다.

데이터의 일관성을 위해 num을 은닉화 시켜보자

const increase = (function () {
  let num = 0;

  return function () {
    return ++num;
  };
})();

console.log(increase());
console.log(increase());
console.log(increase());

즉시 실행함수를 실행시키면 즉시실행함수는 실행하자마자 소멸되고 increase에는 return된 함수를 담는다.

여기서 num은 상위스코프의 num이므로 즉시실행함수가 종료되어도 상위스코프를 기억하게 된다.

 

그리하여 increase함수를 호출하면 상위스코프의 num이 증가한다.

 

생성자 함수를 이용하여 increase,decrease를 사용해보자

const Counter = (function () {
  let num = 0;

  function Counter() {}

  Counter.prototype.increase = function () {
    return ++num;
  };

  Counter.prototype.decrease = function () {
    return num > 0 ? --num : 0;
  };

  return Counter;
})();

const counter = new Counter();
console.log(counter.increase());
console.log(counter.increase());

console.log(counter.decrease());
console.log(counter.decrease());

생성자 함수를 사용하여 prototype을 사용하면 Counter생성자 함수에 인스턴스 생성과 상관없이 increase,decrease 함수를 사용할 수 있으며, prototype.increase, prototype.decrease는 선언할때 상위스코프가 즉시실행수여서 num에 접근이 가능하다.

 

 

🌍 캡슐화와 정보은닉

캡슐화는 객체에 프로퍼티(속성)과 메서드(행동)을 하나라 묶은것을 말하고, 프로퍼티,메소드등을 외부에 공개하고 싶지 않을때 그것을 정보은닉화 라고 한다.

다만 javascript는 public,private,protected를 제공하지 않는다.

 

기본적인 객체를 살펴보자

function Person(name, age) {
  this.name = name; //public
  let _age = age; //private

  this.sayHi = function () {
    console.log(`Hi! My name is ${this.name}. I am ${_age}`);
  };
}

const person = new Person("choi", 30);

person.sayHi();
console.log(person.name);
console.log(person._age);

Person이라는 객체를 생성하고 name은 public하게 사용하고 _age는 지역변수로 선언함으로써 Person외부에서 변경은 불가능하다. 즉 private이다.

다만 이 객체의 단점은 sayHi라는 함수를 인스턴스 생성마다 생성하고 있다.

 

그리하여 sayHi를 prototype에 생성하자.

function Person(name, age) {
  this.name = name; //public
  let _age = age; //private
}

Person.prototype.sayHi = function () {
  console.log(`Hi! My name is ${this.name}. I am ${_age}`);
};

const me = new Person("choi", 31);
me.sayHi();
console.log(me.name);
console.log(me._age);

프로토타입에 sayHi를 만들었지만, prototype.sayHi에서는 _age에 접근 할 수 없다. prototype.sayHi 상위 스코프는 전역스코프이고, 전역스코프에는 _age가 존재 하지 않는다. 그리하여 me.sayHi()를 호출하면 오류를 발생시킨다.

 

 

이번에는 클로저를 이용하여 해보자

const Person = (function () {
  let _age = 0; //private

  function Person(name, age) {
    this.name = name; //private
    _age = age;
  }

  Person.prototype.sayHi = function () {
    console.log(`Hi! My name is ${this.name}. I am ${_age}`);
  };

  return Person;
})();

const me = new Person("choi", 30);
me.sayHi();

const you = new Person("kim", 40);
you.sayHi();

_age를 즉시실행함수에서 선언하고, Person객체에 age를 받아서 _age를 설정한다. 그리고 prototype.sayHi에서는 상위스코프가 즉시실행함수 이기 때문에 즉시실행함수가 종료되어도 , prototype.sayHi는 상위스코프를 기억하기 때문에 _age에 접근이 가능하다.

 

이번에는 렉시컬 스코프와 클로저에 대해 알아보았다. javascript에서 항상 나오는 개념이므로 항상 기억하려고 하자.