javascript 5주차

DOM의 개념

Document Object Model - HTML 파일을 Javascript가 해석할 수 있는 Object 형태로 Modeling 한것.

클로저

const x= 1;

function outerFunc () {
   const x = 10;
   function innerFunc() {
       console.log(x); //x값은 10이다. 왜냐 innerFunc이 실행될때 외부 변수등의 정보를 보면 
       //innerFunc이 실행된 스코프 체인에서는 x가 10이기 때문이다.
   }
   innerFunc();
}

outerFunc();

const x= 1;

function outerFunc () {
    const x = 10;
    innerFunc();
}

function innerFunc() {
		
    console.log(x); //여기서 x는 1이다. innerFunc가 outerFunc에서 실행되었지만 두 함수가 다른 스코프 체인을 가지고 있음.
}

outerFunc();

따라서 JS 엔진은 함수를 어디서 호출했느냐가 아니라 어디서 정의했느냐가 스코프를 결정한다. -> 렉시컬 스코프

클로저와 렉시컬 환경
-> 외부함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 여전히 참조할 수 있다. 이 개념에서 중첩 함수가 바로 클로저이다.

클로저 활용

// 카운트 상태 변경 함수 #1
// 함수가 호출될 때마다 호출된 횟수를 누적하여 출력하는 카운터를 구현해요!

// 카운트 상태 변수
let num = 0;

// 카운트 상태 변경 함수
const increase = function () {
    // 카운트 상태를 1만큼 증가시킨다.
    return ++num;
};

console.log(increase());
// num = 100; // 치명적인 단점이 있어요.
console.log(increase());
console.log(increase());


//보완해야할 사항 -> 
// 1. count 상태 -> increase 함수 호출 전까지는 변경되면 안됨.
//2. 이를 위ㅐㅎ count 상태는 increase 함수만이 변경할수 있어야함.
//전역변수가 문제다. 스코프가 전역이다. 모두가 다 접근가능. -> 지역변수?

전역 변수에서 -> 지역변수로 활용해보자.

const increase = function () {
    // 카운트 상태 변수
    let num = 0;
  
    // 카운트 상태를 1만큼 증가시킨다.
    return ++num;
  };
  
  // 이전 상태값을 유지 못함
  console.log(increase()); //1
  num = 100;
  console.log(increase()); //1
  console.log(increase()); //1

  //지역변수 num은 변경은 방지되었다.
  // increase 함수만이 변경할수 잇었다.
  //하지만 increase 함수가 호출되면서 num은 계속해서 0으로 초기화.

const outer = (function(){
	let num = 0;
  
  return function(){
    
  	return num++;
    
  }
})();

//outer 함수를 실행했을 때 반환되는 함수는 렉시컬 환경의 num을 참조할 수 있다.
//동시에 은닉된 값으로 외부에서 num을 변경할 수 없다.