TIL/JS 2023/3/14 📚

오늘은 어제 배웠던 JS 기초 지식을 복습 한 후 클로저에 대해 알아보겠다!!
라고 생각하고 호기롭게 공부를 시작했지만 클로저를 알기위해 알아야할 지식들이 비어있다는 걸 알게됐다,,😂
오히려 좋다!! 내가 몰랐던 부분을 계속해서 연결되어 알게되는 것이니 아주 좋은 체이닝..이라고 생각해야겠다.

먼저 클로저를 이해하기 위해 컨텍스트를 이해해야했고 컨텍스트를 이해하기위해 스코프를 이해해야했고 스코프를 이해하기 위해 전역변수와 지역변수를 이해해야했다.

오늘의 학습 순서는 다음과 같을 것이다.

전역변수와 지역변수 => 스코프 => 컨텍스트 => 클로저

전역변수와 지역변수❓

이하 내용을 공부하면서 많은 도움을 준 블로그가 있다.
도움을 받은 제로초님 블로그

변수는 유효범위에 따라 전역변수와 지역변수로 나누어진다!!

쉽게 말해 함수 안에 있는 변수는 지역변수
함수 바깥에 있는 변수는 전역변수이다.

IN 함수 => 지역변수
OUT 함수 => 전역변수

let x = "global"
function ex(){
let x = local
x = changed
}
ex()
console.log(x)

위 함수를 실행시키면 어떤 결과가 나올까?

정답은 .. global!!

왜냐하면 전역변수로 선언된 1line의 x와 function 안에 존재하는 x는 전혀 다른 변수이다.
변수는 선언 시점에서 스코프가 정해지는데 이는 조금 이따 정리를 할것이다.

만약 changed를 console 하고싶다면
ex함수는 x를 리턴하면 외부에서 사용이 가능하다!!

지금 알아두어야 할 것은 함수 내부에 있다면 "지역변수"
함수 외부에 있다면 "전역변수"

스코프❓

스코프는 변수의 사용 범위라고 보면된다!!
변수는 어디서 선언되느냐에 따라 그 사용 범위가 결정이 된다..⭕️

그렇다면 그 범위는 어떻게 설정 될까?
결과적으로는 다음과 같다.

전역변수는 지역변수에 접근할수❌
지역변수는 전역변수에 접근할수⭕️

내부에서 외부는 접근이 가능하지만, 외부에서 내부는 접근이 불가능하다.

let x = "global"
function ex(){
let x = local
x = changed
}
ex()
console.log(x)

위와 같은 코드를 봤을 때 내부의 x 변수는 외부 x에 접근이 가능하다 만약

let x = "global"
function ex(){
console.log(x)
}
ex()

이런 코드가 있었다면 결과는 global을 출력한다.
내부 함수에서 전역변수인 x를 참조하여 console.log(x)를 출력한 것이다.

그러나 다음과 같은 상황은 불가능하다.

let x = "haha"
function A(){
 let y = "hoho" 
}
console.log(y)

위 함수에서는 undefined가 찍힌다
왜냐하면 내부의 y 지역변수는 외부에서 사용이 불가능하기 때문이다.

스코프 체인❓

위 전역변수와 지역변수의 관계에서 스코프 체인이라는 개념이 발생한다.

내부함수는 외부함수의 변수에 접근이 가능하지만 외부함수는 내부함수에 접근이 불가능하다. 내부함수는 역할이 끝나면 안의 변수도 종료된다.

var name = 'zero'; // 1.선언 2.할당 
// name 찾았다!!
function outer() {//3.선언 4.할당
  console.log('외부', name); // 12. 실행 => name이 어딨지?
  function inner() {//5.선언 6.할당
    var enemy = 'nero'; // 9. 선언 10.할당
    console.log('내부', name); // 11. 실행 => name이 어딨지?
  }
  inner();// 8 실행
}
outer();//7 실행
console.log(enemy); // 13. 실행 undefined 
//외부에서 내부 변수 (지역변수)에 접근 할 수 없기 때문!!

위 주석에 달아놓은 내용 처럼 내부scope에서 외부scope로 변수를 찾아내는 과정
즉, 꼬리에 꼬리를 물고 범위를 넓히면서 찾아내는 관계를 스코프체인이라고 한다!!

내부 scope 에서 외부 scope로 변수를 찾아 나서는 관계를 스코프 체인!!

lexical scoping❓

먼저 스코프는 함수를 호출할 때가 아니라 선언할 때 생성된다!를 알고 있어야 한다.

var name = 'zero';
function log() {
  console.log(name);
}// 이때 생성시점에서 name은 전역변수인 name을 가르킨다!
//

function wrapper() {
  name = 'nero';// 근데 그 전역변수를 교체
  log();// 그렇게 nero가 출력!
}
wrapper();//여긴 실행시점!

var name = 'zero';
function log() {
  console.log(name);// 이때 전역변수를 가르킨다 "zero"
}

function wrapper() {
  var name = 'nero';
  log();//여기는 실행시점 이라 이때 스코프가 생성되는 것이 아니다!
  //그니까 name의 영향은 wrapper에 있는 것이 아니라 생성시점인
  //log에서 이미 전역변수 name을 가르키고있다.
}
wrapper();//그렇게 "zero"가 출력된다.

이렇게 함수가 선언하는 시점에서 스코프가 생성되는 현상으로 발생하는 스코프를
lexical scoping이라고 한다!

컨텍스트❓

컨텍스트 : 코드의 실행환경!!

컨텍스트를 이해하기 위해서는 코드의 실행순서 즉, 자바스크립트의 동작을 따라가면된다.

코드를 보며 생각을 해보자!

var name = 'zero'; // 1.변수선언(초기화) 6. 변수할당
function wow(word) { //2.변수선언 3.변수할당
  console.log(word + ' ' + name); //11
}
function say () { // 4.변수선언 5.변수할당
  var name = 'nero'; // 8
  console.log(name); // 9
  wow('hello'); //10
}
say(); // 7. 함수실행

위 코드를 주의 깊게 보면 컨텍스트를 이해할 수 있다.

컨텍스트

• 코드가 실행되면 전역 컨텍스트 하나 그리고 함수 호출마다 컨텍스트가 생성된다. 함수 컨텍스트는 함수가 종료되면 컨텍스트는 사라진다. 전역 컨텍스트는 페이지가 종료되는 시점에 사라진다!
• 컨텍스트 생성 시 컨텍스트 안에 변수객체(함수인자,변수), scopechain, this가 생성된다!!
• 컨텍스트 생성 후 함수가 실행되는데, 함수안에서의 변수는 함수안에서 먼저 찾고 없으면 스코프체인을 따라 올라가며 찾는다!

그럼 위 코드에서 어떤 것이 전역 컨텍스트일까?

var name = "zero" 의 변수선언(초기화)
function wow(word)의 선언과 할당
function say()의 선언과 할당
---호이스팅---
var name = "zero"의 변수 할당

---

까지 전역 컨텍스트를 구성하게 된다.

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name', 'wow', 'say'],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

다음과 같이 전역 컨텍스트가 구성되고 여기서 this는 따로 설정하지 안흔ㄴ다면 window를 가르킨다. 만약 new를 호출하거나 this값을 bind한다면 this는 변경될 수 있다.

그리고 함수 say가 선언되면서 새로운 컨텍스트인 say함수의 컨텍스트가 생성된다.
이때 컨텍스트는 다음과 같다.

'say 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name'], // 초기화 후 [{ name: 'nero' }]가 됨
  },
  scopeChain: ['say 변수객체', '전역 변수객체'],
  this: window,
}

다음 wow("hello") 함수가 실행되어 wow함수의 컨텍스트가 생성된다.

이때 함수 선언 시점에서 해당 스코프가 정해지기 때문에 name 변수는 scope chain을 따라 상위 변수객체에서 찾게된다. 즉, name은 "zero"가 된다.

'wow 컨텍스트': {
  변수객체: {
    arguments: [{ word : 'hello' }],
    variable: null,
  },
  scopeChain: ['wow 변수객체', '전역 변수객체'],
  this: window,

위 순서를 정확하게 알기위해서는 이벤트루프를 알아야한다

이는 이번주내에 다시 정리를 해보겠다!!

함수의 호이스팅❓

어제 변수의 호이스팅에 대해 공부를 했었다. 간단하게 복습을 하자면

일단 모든 변수는 호이스팅이 일어난다.
호이스팅은 모든 변수의 선언이 스코프의 최상단에서 이루어지는 현상을 말한다.

const let var의 변수 중 var와 const,let은 차이가 있다.

var는 호이스팅이 일어나면서 초기화도 동시에 일어난다.
그래서 undefined라는 값이 메모리에 저장이 되지만

const,let은 선언만 메모리에 저장이되어 변수에 대한 참조를 할 수가 없다.

그렇다면 함수는 어떨까??

함수도 호이스팅 현상이 일어난다. 여기서는 선언식과 표현식에서 차이가 있다.

선언식: function A(){}
표현식: const A = ()=>{}

위와 같이 선언식일 때는 식자체가 통째로 끌어올려진다.
표현식일 때는 선언만 최상위로 끌어올려지고 할당(대입)은 모든 호이스팅이 끝난 후에 이루어진다. 코드를 보면 이해할 수 있다.

console.log(zero); //4. 에러가 아니라 undefined 아직 할당x
sayWow(); // 정상적으로 wow //5. 실행
function sayWow() { //선언식 이게 맨 위로 1. 선언 2. 할당(대입)
  console.log('wow'); //6
}
var zero = 'zero';// 3. 변수 선언 7. 할당

실행순서대로 보면 다음과 같다.

function sayWow() {
  console.log('wow');
}
var zero;
console.log(zero);
sayWow();
zero = 'zero';

하지만 다음과 같이 표현식으로 함수를 선언한다면 어떻게 될까???

sayWow(); // (3)
sayYeah(); // (5) 여기서 대입되기 전에 호출해서 에러
var sayYeah = function() { // (1) 선언 (6) 대입
  console.log('yeah');
}
function sayWow() { // (2) 선언과 동시에 대입도 이루어짐
  console.log('wow'); // (4)
}

이렇게 표현식과 선언식에는 차이가 있다.

그냥 이렇게 생각하자

선언식은 통으로 맨위로!
표현식은 선언만 맨위로!

클로저❓

클로저를 이해하기위해 위 내용들을 공부할 수 있어서 좋았다!!😊

클로저는 사실 완벽하게 이해한 상태가 아니라 추후에 수정이 필요할 수 있다!
하지만 지금 필자가 이해한 바로 정의해보겠다!!

클로저 : 어떤 A함수에서 선언한 변수 를 참조하는 내부함수 B를 외부로 전달할 경우 A함수의 실행 컨텍스트가 종료되어도 변수 a가 사라지지 않는현상!
-출처- 코어 자바스크립트

위 말을 이해하려면 컨텍스트 , 스코프등을 알아야한다.

코드로 생각해보면

function A(){
 const a = "123" 
 function a(){
  return a+1 
 }
  return a()
}
const number = A()
console.log(number) // 2
//a의 값에 접근할 수 있게 된다.

A 함수 내부에 존재하는 a함수는 lexical scoping에 따라서 a를 함수 A에서 가져오게된다.(scope chain) 그렇다면 a함수는 a에 +1 을 더한 값을 return 하는데 A는 이러한 a함수를 return 하여
함수 외부 즉, A스코프 밖에서 위 a를 사용할 수 있다.
함수가 종료되면 해당 컨텍스트는 제거되는데 그럼에도 a는 스코프 체이닝에 의해 살아남게된다!! 이것이 클로저이다.

결국 클로저는 스코프 체이닝을 이용한 변수 빼돌리기? 이다 ㅎㅎ

보통은 함수 리턴을 통해 클로저를 만드는 사례가 가장 많다!!

참고한블로그-캡틴판교
참고한블로그-하나몬
참고한블로그-제로초